Navigation

    CreatiCode Scratch Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode
    1. Home
    2. creaticodeteacher2-mail
    C
    • Profile
    • Following 0
    • Followers 0
    • Topics 128
    • Posts 128
    • Best 1
    • Groups 2

    creaticodeteacher2-mail

    @creaticodeteacher2-mail

    Global Moderator

    1
    Reputation
    18
    Profile views
    128
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    creaticodeteacher2-mail Unfollow Follow
    china users Global Moderator

    Best posts made by creaticodeteacher2-mail

    • ChatGPT人工智能:谁是卧底?(难度:3级)

      介绍

       
      游戏中传统的人工智能角色都比较“枯燥”。它们重复不断地说同样的语句,因为它们是由游戏开发人员提前编写好的“脚本”所驱动。

      现在这个问题可以用ChatGPT解决。ChatGPT能使游戏角色用自然语言与用户沟通,这可以让游戏更加有趣、更加不可预测。

      在这篇教程中,我们将制作一个简单游戏“谁是卧底?”。玩家和几个人工智能角色对话并猜测谁是间谍,我们用ChatGPT为这些角色生成回答内容。

      Animation12.gif

       
       

      第1步 - 改编模板项目

       
      从以下这个项目为起点,进行改编,该项目包含4个角色:一位博士和三个动物助理(狗、驯鹿和猴子)

      https://play.creaticode.com/projects/31abbb3f6b05f826173310d1

       
       

      第2步 - 为ChatGPT编写游戏规则描述

       
      当玩家开始游戏后,首先我们要向ChatGPT描述游戏。游戏描述应当包含以下几部分:

      1. 角色分配:我们让ChatGPT扮演“游戏主持人”,帮我们主持游戏。
      2. 游戏背景:我们将告诉ChatGPT这是一个猜谜游戏,及其背景故事。然后ChatGPT在整个游戏中帮我们主持故事情节。
      3. 游戏规则:我们要告诉ChatGPT非常详细的游戏规则——它应当做什么、不应当做什么。否则,玩家会很容易诱骗ChatGPT使其泄露答案。

       
      下面是一个游戏描述示例:

      你扮演一个游戏主持人,主持一个游戏《谁是卧底》。

      背景:

      “博士”运作一个神秘的实验室,实验室里有三个聪明的助理(小狗、驯鹿和猴子)。实验室设计了一个革命性的、能改变世界的机器人。最近,机器人的设计图纸在实验室被盗了。据传言,其中一个动物密探行为异常,是偷图纸的卧底。博士邀请游戏玩家找出谁是卧底。不知什么原因监控摄像头没有起作用,所以不能指望监控摄像头了。

      说明:

      你随机选择一个动物助理扮演卧底。只有你和卧底知道谁是卧底。玩家可以向医生和助理询问任意问题,你要替每个被询问的角色想出回答内容。注意,卧底会撒谎。 当你回答问题时,要始终用以下格式:

      “角色:回答内容”。

      游戏玩家猜过之后游戏就结束,然后你就公布谁是卧底。


       
      注意,我们给ChatGPT确定了回答问题的特定格式:“角色:回答内容”。原因就是,ChatGPT会向我们呈现任意一个角色的回答,所以为了便于处理回答,我们要让回答的格式固定。

       
       

      第3步 - 向ChatGPT发送游戏描述

       
      现在我们把游戏描述发送给ChatGPT。我们可以在博士角色中添加如下代码:

      1.png

       
      我们用的是“系统请求”,比普通请求的权重更强。我们把ChatGPT的回复保存在变量“回复”。

      现在请大家把游戏描述复制到积木“系统请求”。如果谁需要编辑描述,应该还记得可以用注释框来帮助编辑。

       
       

      第4步 - 打印ChatGPT的回复,用于调试

       
      为了在开发项目中回顾ChatGPT的回复,我们可以把回复内容打印到控制台面板,如下所示:

      2.png

       
      当你运行项目后,会停顿一会儿,然后就会看到这样一条回复(看不到的话就多尝试几次):

      3.png

       

      出现这种情况是因为,ChatGPT要给出一个非常长的回复,达到了字符数限制。比如,ChatGPT可能会重复说明游戏的描述,就是为了表明自己理解了游戏描述,也可能会生成一些玩家与角色之间的对话示例。

      我们应当避免这种情况发生,原因有二:

      • 现在我们还不需要ChatGPT生成回复内容,因为我们不能把这呈现给游戏玩家;
      • 回复内容越长,玩家就必须等得越久。

       
      为了避免这个问题,办法很简单。我们只需要优化提示语,告诉ChatGPT如何回复。比如,我们可以在系统请求提示语的末尾加上这句话:


      现在你只说“准备就绪!”,不要说其他内容。然后等待游戏玩家问问题。


       
      这是让ChatGPT尽量少说的常用办法。如果你再次运行项目,应该会很快就得到完整回复:

      Animation1.gif

       
       

      第5步 - 欢迎游戏玩家

       
      现在ChatGPT做好准备了,还要告诉玩家开始游戏。我们可以让“博士”欢迎游戏玩家并说明游戏规则。例如,我们可以加入一个积木“说( )”,积木中输入以下语句:


      欢迎侦探!正如我们之前在电话中所说的,一份高度保密的机器人设计图纸被盗了,我相信我的三个助理其中之一就是偷走图纸的卧底。你点击我们任意一员即可询问。


      得到如下结果:

      Animation2.gif

       
       

      第6步 - 点击博士进行询问

       
      我们让游戏玩家点击博士进行询问。具体而言,当玩家点击博士角色时,就会让玩家输入问题。我们还是用积木“打印( )到控制台”来回顾问题。注意,积木“回答”的值是玩家输入的内容,并不是ChatGPT的回答,这一点容易让人混淆。

      Animation3.gif

       
      之后控制台面板如下图所示:

      4.png

       
      如上图所示,如果用户不输入内容,积木“回答”的值为空。

       
       

      第7步 - 获取ChatGPT的回答

       

      现在我们把用户输入的内容发送给ChatGPT,ChatGPT就会为博士角色生成回答内容。仅当用户输入不为空时我们才能进行此操作:

      5.png

       
      说明:

      • 我们将“博士,”和用户输入内容连接起来,以便于ChatGPT知道我们在和博士对话。
      • 我们使用模式“完整回答”,这样的话,直到我们获得ChatGPT的完整回答并存入变量“回复”,我们才运行下一个积木。
      • 因为我们要让ChatGPT记住我们之前告诉它的游戏描述,所以会话类型设置为“继续”。
         
        现在博士就能和我们对话了,对话是完全自然的,完全没有预先编排。其实,作为游戏开发人员,此时我们也不知道答案,因为我们要求ChatGPT秘密选择一个动物作为卧底。

      Animation4.gif

       
       

      第8步 - 整理ChatGPT的回答

       

      目前,ChatGPT的回答以“博士:”开头。对于我们游戏开发人员来说是有好处的,但我们不应当向玩家展示这些内容。我们可以用这种办法来删除:用分隔符“:”把回答内容分开成两部分,只显示第二部分。

      15.png

       
      现在博士的回答就不包含前缀“博士:”:

      Animation13.gif

       
       

      第9步 - 用鼠标使医生高亮显示

       

      由于游戏是通过点击角色来玩的,普遍的做法就是,当鼠标悬停在角色上时高亮显示,这样的话玩家才知道哪个能点击。我们可以用积木“当碰到鼠标指针时”来触发此状态。为了使角色高亮显示,我们只需要将其“亮度”设置为一个正值。当角色高亮显示时我们还可以播放声效。

      6.png

       
      结果如下:

       
      Animation5.gif

       
       

      第10步 - 退出高亮显示

       

      当鼠标离开角色上方时,就应当退出高亮显示。我们可以用积木“等待( )不成立”一直检查角色是否还碰到鼠标指针。不再碰到鼠标指针以后,我们把亮度重置为0。

      7.png

       
      结果如下所示:

      Animation6.gif

       
       

      第11步 - 把代码复制到小狗角色

       

      至此,博士角色的代码就完成了。我们可以把整串代码复制到其他角色重新使用。首先从小狗角色开始。唯一要改的地方就是向ChatGPT发送问题时所显示的名称。也需要给小狗角色添加声效“Hit 5”。
       

      Animation7.gif

       
      现在小狗角色也有了高亮显示和回答问题动作:

      Animation8.gif

       
       

      第12步 - 把代码复制到驯鹿和猴子

       

      现在用同样的方式把代码复制到驯鹿角色和猴子角色。不要忘了修改向ChatGPT发送请求时的角色名称。

       
       

      第13步 - 隐藏对话气泡

       

      有一个新问题:当玩家切换不同的角色进行询问时,前一个角色仍然显示对话气泡。

      Animation9.gif

       
      为了解决这个问题,每当有角色被点击时我们就要让所有角色隐藏对话气泡。解决办法就是,当某个角色被点击向所有角色广播一条消息,并等待消息被处理完成。当收到广播消息时,角色只需要说0个字即可隐藏对话气泡。以防角色告诉玩家输入问题,我们还要用积木“停止提问”来使其隐藏问题。

      8.png

       
      提醒:全部4个角色都要完成此操作。

       
       

      第14步 - 用一个按钮提交答案

       

      此时,玩家为了调查案件,可以一直询问所有角色。我们还需要为玩家提供一种方式来提交最终答案。

      首先,我们回到舞台上,当项目开始时添加一个按钮:

      9.png

       
      不要忘了可以用工具“控件位置”来调整按钮的位置和大小。

      按钮如下所示:

      10.png

       
       

      第15步 - 显示选项

       

      当玩家点击按钮“谁是卧底?”,我们要显示几个单选按钮供玩家选择。除了3个动物以外,还要加一个选项,就是让用户能够回退一步并进一步思考。

      11.png

       
      输出结果如下:

      Animation10.gif

       
       

      第16步 - 处理玩家的选择

       

      为了处理玩家的选择,我们可以编辑单选按钮的“点击”事件。用积木“控件( )的值”能找出玩家的选项。如果玩家选择“让我再想想”,我们就应当移除单选框。

      12.png

       

      Animation11.gif

       
       

      第17步 - 把玩家的作答选项提交给ChatGPT

       

      如果玩家选择三个动物之一,我们就提交给ChatGPT,让ChatGPT告诉我们是否正确。

      13.png

       
      注意,现在我们呼叫“游戏主持人”,因为只有游戏主持人能裁定游戏结果。

       
       

      第18步 - 显示最终结果

       

      最后一步,我们用一个文本框显示ChatGPT的回答。我们要保证文本框足够大以显示完整。我们还要移除其他控件,让玩家不能重复提交作答。

      14.png
       
      游戏最终演示如下:

      Animation12.gif

       
       

      创意扩展

       

      以本项目为基础,可以按照以下思路进一步探索:

      • 博士有时候把自己称为“博士”,而不是“我”。想想如何改进提示语来避免。
      • 如果玩家向多个角色提问问题,比如“各位,图纸被盗的时候你们在哪里?”,我们要显示所有角色的回答。
      • 大家可以用“文字转语音”积木让角色和玩家对话。
      • 大家可以更改游戏的角色和背景故事,例如图书馆的书被盗、神秘朋友送的礼物盒子。甚至可以用历史人物玩游戏。
      posted in 小教程
      C
      creaticodeteacher2-mail

    Latest posts made by creaticodeteacher2-mail

    • ChatGPT人工智能:谁是卧底?(难度:3级)

      介绍

       
      游戏中传统的人工智能角色都比较“枯燥”。它们重复不断地说同样的语句,因为它们是由游戏开发人员提前编写好的“脚本”所驱动。

      现在这个问题可以用ChatGPT解决。ChatGPT能使游戏角色用自然语言与用户沟通,这可以让游戏更加有趣、更加不可预测。

      在这篇教程中,我们将制作一个简单游戏“谁是卧底?”。玩家和几个人工智能角色对话并猜测谁是间谍,我们用ChatGPT为这些角色生成回答内容。

      Animation12.gif

       
       

      第1步 - 改编模板项目

       
      从以下这个项目为起点,进行改编,该项目包含4个角色:一位博士和三个动物助理(狗、驯鹿和猴子)

      https://play.creaticode.com/projects/31abbb3f6b05f826173310d1

       
       

      第2步 - 为ChatGPT编写游戏规则描述

       
      当玩家开始游戏后,首先我们要向ChatGPT描述游戏。游戏描述应当包含以下几部分:

      1. 角色分配:我们让ChatGPT扮演“游戏主持人”,帮我们主持游戏。
      2. 游戏背景:我们将告诉ChatGPT这是一个猜谜游戏,及其背景故事。然后ChatGPT在整个游戏中帮我们主持故事情节。
      3. 游戏规则:我们要告诉ChatGPT非常详细的游戏规则——它应当做什么、不应当做什么。否则,玩家会很容易诱骗ChatGPT使其泄露答案。

       
      下面是一个游戏描述示例:

      你扮演一个游戏主持人,主持一个游戏《谁是卧底》。

      背景:

      “博士”运作一个神秘的实验室,实验室里有三个聪明的助理(小狗、驯鹿和猴子)。实验室设计了一个革命性的、能改变世界的机器人。最近,机器人的设计图纸在实验室被盗了。据传言,其中一个动物密探行为异常,是偷图纸的卧底。博士邀请游戏玩家找出谁是卧底。不知什么原因监控摄像头没有起作用,所以不能指望监控摄像头了。

      说明:

      你随机选择一个动物助理扮演卧底。只有你和卧底知道谁是卧底。玩家可以向医生和助理询问任意问题,你要替每个被询问的角色想出回答内容。注意,卧底会撒谎。 当你回答问题时,要始终用以下格式:

      “角色:回答内容”。

      游戏玩家猜过之后游戏就结束,然后你就公布谁是卧底。


       
      注意,我们给ChatGPT确定了回答问题的特定格式:“角色:回答内容”。原因就是,ChatGPT会向我们呈现任意一个角色的回答,所以为了便于处理回答,我们要让回答的格式固定。

       
       

      第3步 - 向ChatGPT发送游戏描述

       
      现在我们把游戏描述发送给ChatGPT。我们可以在博士角色中添加如下代码:

      1.png

       
      我们用的是“系统请求”,比普通请求的权重更强。我们把ChatGPT的回复保存在变量“回复”。

      现在请大家把游戏描述复制到积木“系统请求”。如果谁需要编辑描述,应该还记得可以用注释框来帮助编辑。

       
       

      第4步 - 打印ChatGPT的回复,用于调试

       
      为了在开发项目中回顾ChatGPT的回复,我们可以把回复内容打印到控制台面板,如下所示:

      2.png

       
      当你运行项目后,会停顿一会儿,然后就会看到这样一条回复(看不到的话就多尝试几次):

      3.png

       

      出现这种情况是因为,ChatGPT要给出一个非常长的回复,达到了字符数限制。比如,ChatGPT可能会重复说明游戏的描述,就是为了表明自己理解了游戏描述,也可能会生成一些玩家与角色之间的对话示例。

      我们应当避免这种情况发生,原因有二:

      • 现在我们还不需要ChatGPT生成回复内容,因为我们不能把这呈现给游戏玩家;
      • 回复内容越长,玩家就必须等得越久。

       
      为了避免这个问题,办法很简单。我们只需要优化提示语,告诉ChatGPT如何回复。比如,我们可以在系统请求提示语的末尾加上这句话:


      现在你只说“准备就绪!”,不要说其他内容。然后等待游戏玩家问问题。


       
      这是让ChatGPT尽量少说的常用办法。如果你再次运行项目,应该会很快就得到完整回复:

      Animation1.gif

       
       

      第5步 - 欢迎游戏玩家

       
      现在ChatGPT做好准备了,还要告诉玩家开始游戏。我们可以让“博士”欢迎游戏玩家并说明游戏规则。例如,我们可以加入一个积木“说( )”,积木中输入以下语句:


      欢迎侦探!正如我们之前在电话中所说的,一份高度保密的机器人设计图纸被盗了,我相信我的三个助理其中之一就是偷走图纸的卧底。你点击我们任意一员即可询问。


      得到如下结果:

      Animation2.gif

       
       

      第6步 - 点击博士进行询问

       
      我们让游戏玩家点击博士进行询问。具体而言,当玩家点击博士角色时,就会让玩家输入问题。我们还是用积木“打印( )到控制台”来回顾问题。注意,积木“回答”的值是玩家输入的内容,并不是ChatGPT的回答,这一点容易让人混淆。

      Animation3.gif

       
      之后控制台面板如下图所示:

      4.png

       
      如上图所示,如果用户不输入内容,积木“回答”的值为空。

       
       

      第7步 - 获取ChatGPT的回答

       

      现在我们把用户输入的内容发送给ChatGPT,ChatGPT就会为博士角色生成回答内容。仅当用户输入不为空时我们才能进行此操作:

      5.png

       
      说明:

      • 我们将“博士,”和用户输入内容连接起来,以便于ChatGPT知道我们在和博士对话。
      • 我们使用模式“完整回答”,这样的话,直到我们获得ChatGPT的完整回答并存入变量“回复”,我们才运行下一个积木。
      • 因为我们要让ChatGPT记住我们之前告诉它的游戏描述,所以会话类型设置为“继续”。
         
        现在博士就能和我们对话了,对话是完全自然的,完全没有预先编排。其实,作为游戏开发人员,此时我们也不知道答案,因为我们要求ChatGPT秘密选择一个动物作为卧底。

      Animation4.gif

       
       

      第8步 - 整理ChatGPT的回答

       

      目前,ChatGPT的回答以“博士:”开头。对于我们游戏开发人员来说是有好处的,但我们不应当向玩家展示这些内容。我们可以用这种办法来删除:用分隔符“:”把回答内容分开成两部分,只显示第二部分。

      15.png

       
      现在博士的回答就不包含前缀“博士:”:

      Animation13.gif

       
       

      第9步 - 用鼠标使医生高亮显示

       

      由于游戏是通过点击角色来玩的,普遍的做法就是,当鼠标悬停在角色上时高亮显示,这样的话玩家才知道哪个能点击。我们可以用积木“当碰到鼠标指针时”来触发此状态。为了使角色高亮显示,我们只需要将其“亮度”设置为一个正值。当角色高亮显示时我们还可以播放声效。

      6.png

       
      结果如下:

       
      Animation5.gif

       
       

      第10步 - 退出高亮显示

       

      当鼠标离开角色上方时,就应当退出高亮显示。我们可以用积木“等待( )不成立”一直检查角色是否还碰到鼠标指针。不再碰到鼠标指针以后,我们把亮度重置为0。

      7.png

       
      结果如下所示:

      Animation6.gif

       
       

      第11步 - 把代码复制到小狗角色

       

      至此,博士角色的代码就完成了。我们可以把整串代码复制到其他角色重新使用。首先从小狗角色开始。唯一要改的地方就是向ChatGPT发送问题时所显示的名称。也需要给小狗角色添加声效“Hit 5”。
       

      Animation7.gif

       
      现在小狗角色也有了高亮显示和回答问题动作:

      Animation8.gif

       
       

      第12步 - 把代码复制到驯鹿和猴子

       

      现在用同样的方式把代码复制到驯鹿角色和猴子角色。不要忘了修改向ChatGPT发送请求时的角色名称。

       
       

      第13步 - 隐藏对话气泡

       

      有一个新问题:当玩家切换不同的角色进行询问时,前一个角色仍然显示对话气泡。

      Animation9.gif

       
      为了解决这个问题,每当有角色被点击时我们就要让所有角色隐藏对话气泡。解决办法就是,当某个角色被点击向所有角色广播一条消息,并等待消息被处理完成。当收到广播消息时,角色只需要说0个字即可隐藏对话气泡。以防角色告诉玩家输入问题,我们还要用积木“停止提问”来使其隐藏问题。

      8.png

       
      提醒:全部4个角色都要完成此操作。

       
       

      第14步 - 用一个按钮提交答案

       

      此时,玩家为了调查案件,可以一直询问所有角色。我们还需要为玩家提供一种方式来提交最终答案。

      首先,我们回到舞台上,当项目开始时添加一个按钮:

      9.png

       
      不要忘了可以用工具“控件位置”来调整按钮的位置和大小。

      按钮如下所示:

      10.png

       
       

      第15步 - 显示选项

       

      当玩家点击按钮“谁是卧底?”,我们要显示几个单选按钮供玩家选择。除了3个动物以外,还要加一个选项,就是让用户能够回退一步并进一步思考。

      11.png

       
      输出结果如下:

      Animation10.gif

       
       

      第16步 - 处理玩家的选择

       

      为了处理玩家的选择,我们可以编辑单选按钮的“点击”事件。用积木“控件( )的值”能找出玩家的选项。如果玩家选择“让我再想想”,我们就应当移除单选框。

      12.png

       

      Animation11.gif

       
       

      第17步 - 把玩家的作答选项提交给ChatGPT

       

      如果玩家选择三个动物之一,我们就提交给ChatGPT,让ChatGPT告诉我们是否正确。

      13.png

       
      注意,现在我们呼叫“游戏主持人”,因为只有游戏主持人能裁定游戏结果。

       
       

      第18步 - 显示最终结果

       

      最后一步,我们用一个文本框显示ChatGPT的回答。我们要保证文本框足够大以显示完整。我们还要移除其他控件,让玩家不能重复提交作答。

      14.png
       
      游戏最终演示如下:

      Animation12.gif

       
       

      创意扩展

       

      以本项目为基础,可以按照以下思路进一步探索:

      • 博士有时候把自己称为“博士”,而不是“我”。想想如何改进提示语来避免。
      • 如果玩家向多个角色提问问题,比如“各位,图纸被盗的时候你们在哪里?”,我们要显示所有角色的回答。
      • 大家可以用“文字转语音”积木让角色和玩家对话。
      • 大家可以更改游戏的角色和背景故事,例如图书馆的书被盗、神秘朋友送的礼物盒子。甚至可以用历史人物玩游戏。
      posted in 小教程
      C
      creaticodeteacher2-mail
    • ChatGPT人工智能:出题员(难度:3级)

      介绍

      大家已经学习了如何用ChatGPT制作智能的聊天机器人。然而,ChatGPT可用于其他很多种项目,并且界面并不一定是聊天窗口。

      在这篇教程中,大家将学习制作一个智能的“出题员”。用户可指定任意主题,程序将用ChatGPT生成一道测验试题,并评判用户的答案。

      Animation4.gif

       
       

      第1步 - 新建一个空项目

      新建一个项目,命名为“ChatGPT- 出题员”。删除小狗角色,我们只需要用角色“空的”进行编程。

       
       

      第2步 - 主题输入框

      首先,我们添加一个标签“主题”和一个文本输入框,让用户输入主题。我们把这两个控件分别命名为“主题标签”和“主题输入框”。

      1.png

       
      如下所示:
       

      2.png

       
       

      第3步 - 用工具“控件位置”移动控件

      现在我们要把这两个控件移动到舞台窗口的顶部,以便于在下面添加其他控件。用工具“控件位置”轻松完成,如下所示:

      Animation1.gif

       
      你会发现这两个积木的X、Y、宽度、高度都自动更新了,所以当下次你运行程序,这些控件会直接出现于这些新位置:

      3.png

       
      当然了,大家仍然可以随时手动修改位置和大小。

       
       

      第4步 - 添加一个按钮“开始”

      接下来,我们再添加一个按钮“开始”,用来告诉ChatGPT生成试题。

      4.png

       
      默认情况下,新添加的按钮位于舞台中心。请用工具“控件位置”将其移动到右上方,如下所示:

       
      5.png

       
      之后程序如下所示:

      6.png

       
       

      第5步 - 添加问题框

      为了显示ChatGPT生成的试题,我们要添加一个大文本框。可以显示多行文本,但不允许用户输入(只读模式)。请大家练习使用控件位置工具来移动文本框。

      7.png

       

      8.png

       
       

      第6步 - 两个自定义积木

      我们还要添加更多控件,后面会把积木堆得太高。因此,为了便于组织程序,我们制作两个自定义积木。

      请大家新建两个积木“添加试题控件”和“添加答案控件”,然后在主程序里面运行这两个积木。我们还要把现有的所有积木移动到积木“添加试题控件”的定义中。

      9.png

       
       

      第7步 - 四个答案按钮

      现在我们在积木“添加答案控件”的定义中添加积木,用于添加4个按钮,按钮名称分别为A、B、C、D

       

      10.png

       
      效果如下所示:

      11.png

       
       

      第8步 - 评价栏

      当我们点击选项按钮之后,我们要让ChatGPT告诉我们是否答对。那么就要在底部再添加一个文本框,用来显示ChatGPT的评价。请设置为多行和只读。

      12.png

       
      现在界面就做好了:

      13.png

       
       

      第9步 - 编写ChatGPT的请求

      假如用户在上方输入一个主题,然后点击按钮“开始”。此时,我们要编写一个请求并将其发送给ChatGPT。请求还应当包含用户写的主题。我们可以先编写我们的请求,然后再加上用户输入的主题。

      为了存放请求,我们定义一个变量“请求”,当点击按钮“开始”时给该变量赋值。

      14.png

       
       

      第10步 - 以“持续更新”模式向ChatGPT发送请求

      现在我们准备好让ChatGPT施展魔力了,将给我们随机出一道试题。为了尽快显示试题,我们将用“持续更新”模式。为了容许较为复杂的问题,我们将最大长度设为400。

      此外,每次出题都应当是从新聊天,每次我们点击按钮“开始”,不需要ChatGPT记住上一道试题。如果我们用“继续”模式,问几个问题以后就会达到ChatGPT的字符数限制,就必须重新开始。

      我们还要新建一个变量“试题”,来保存ChatGPT生成的试题。

       
      15.png

       
       

      第11步 - 显示试题

      ChatGPT出题以后,我们就要显示试题。我们将用一个循环“重复执行直到( )”,持续不断地将变量“试题”的值更新到试题框。大家可以复制这个对号:✅(不同的浏览器上显示有所不同)。

      16.png

       
      现在我们可以测试一下ChatGPT是否能恰当地出题:
      Animation2.gif

       
       

      第12步 - 处理用户的答案

      当用户点击4个选项按钮之一,我们就要问ChatGPT答案是否正确。为了实现这一点,我们新建一个积木“核对答案”,该积木的输入项为“答案”:

       
      17.png

       
      当用户点击选项按钮时,我们就运行这个新积木:

      18.png

       
       

      第13步 - 编写评分请求

      在积木“核对答案”的定义中,我们要编写一个新的ChatGPT请求:由于我们没有让ChatGPT记住试题,所以要把试题告诉ChatGPT。还要告诉它用户的答案,然后让ChatGPT判断是否正确。

      我们可以用积木“连接”把以下四部分连接起来组成请求:

      19.png

       
       

      第14步 - 展示ChatGPT的评价

      剩下的工作类似于从ChatGPT获取问题。我们发送请求,然后在文本框“评价”展示结果。大家可以复制之前的积木并进行修改:

       

      20.png

       

      现在我们就得到了可运行的出题员!

      Animation3.gif

       
       

      第15步 - 突出显示用户答案

      为了让答题员程序更好用,要稍稍改进用户界面。最重要的改动就是突出显示用户选择的答案。

      当用户点击某个按钮时,我们修改该按钮的背景色,如下所示:

      21.png

       
       

      第16步 - 重置按钮颜色

      当用户生成新的试题,我们要重置所有选项按钮的颜色,变为未选中状态。当用户点击按钮“开始”时我们进行此操作。

      22.png

       
       

      第17步 - 测试

      最后,大家要再做一些测试来确保用户体验顺畅。最终演示效果如下:

      Animation4.gif

       
       

      第18步 - 进一步改进

      这个出题员是一个非常基础的版本。有很多地方可以改进。以下是一些思路,大家可以尝试:

      • 改进提示语:目前我们要发送给ChatGPT的请求过于简短,所以有时会得到一些奇怪的回复。要优化请求以避免问题。
      • 优化颜色:大家可以更改文本样式和颜色以及所有控件的背景色,让界面更美观。
      • 跟踪得分:大家可以记录用户作答了多少试题、答对了多少。
      • 预生成问题:有时大家可能并不想即时生成试题,因为无法控制ChatGPT问什么问题。如果有确定的主题,就可以让ChatGPT为你生成20道试题,并把这些问题及其答案存放在一个列表或者表格中。当用户运行程序时,你可以从题库中随机选择一道试题。
      posted in 小教程
      C
      creaticodeteacher2-mail
    • ChatGPT人工智能:是,首相!(难度:3级)

      介绍

      通过之前的教程,大家已经学会了如何用ChatGPT制作一个基于聊天的项目。其中一项关键技能就是编写高质量的提示语,从而让ChatGPT做你想让它做的。

      在这篇教程中,大家将练习编写新的提示语,让ChatGPT和用户一起玩角色扮演游戏。游戏名称为“是,首相!”(一部电视剧《Yes, Minister!》)。在这个游戏中,用户扮演英国首相并制定很多重要决策。

      Animation5.gif

       
       

      第1步 - 制作一个项目起点

      我们将使用上一篇教程的项目作为起点。如果谁没有这个项目,可以根据那个教程制作一个,或者改编如下项目:

      https://play.creaticode.com/projects/44fdbbde84ffaec0bc9e28f5

       
       

      第2步 - 描述情景

      现在我们直接开始编写提示语。目的是让ChatGPT在抽象层面上“明白”用户是谁以及希望它做什么。我们依然用注释框来编写提示语。大家可以清空注释框并添加以下内容:

      你要玩一个角色扮演游戏。用户是一名六年级学生。假装用户是英国首相,时间是2030年1月1日。
      

       
      注释框如下所示:

      1.png

       
       

      第3步 - 描述游戏规则

      接下来,我们要准确告诉ChatGPT如何玩游戏:ChatGPT应该做什么,用户应该做什么。我们可以添加以下描述:

      游戏规则:你为用户准备几个方案选项,让用户从中选择。用户将做决定,然后你问下一个问题。
      

       
       

      第4步 - 让用户开始游戏

      最后,我们要让ChatGPT等待用户开始游戏。我们可以在提示语后面添加这一行:

      现在询问用户是否准备好开始了。
      

       
       

      第5步 - 复制提示语

      现在我们准备好去实际验证提示语了。复制注释框中的完整内容,然后选中积木“系统请求”的输入框,粘贴提示语,按回车键或TAB键确认。

      Animation1.gif

       
       

      第6步 - 显示第一条消息

      现在我们还要询问用户是否准备好开始了。我们只需要在聊天开头添加这一句:

      3.png

       
      这次你可以为人工智能设置机器人图标,可随意选择消息的颜色。

      现在运行程序,结果如下所示:

      Animation2.gif

       
       

      第7步 - 改进问题

      虽然游戏可以玩了,但我们可以在几个方面改进问题。

      首先,问题太长了。我们可以让ChatGPT更简明一些。

      第二,我们得到的下一个问题和上一个问题无关联。为了让用户的决定起作用, ChatGPT应当根据用户的决定问下一个问题。

      为了解决这两个问题,我们在提示语中添加以下段落:

      问题要简洁明了。你问的所有问题都要相关联,根据用户对上一个问题的回答问下一个问题。
      

       
      把这一段加到注释框中,如下所示:

      4.png

       
      把完整的提示语复制到积木“系统请求”,然后再次运行项目。就得到如下对话:

      Animation3.gif

       
      描述更加简洁了,并且都是根据上一个问题的回答问下一个问题。

       
       

      第8步 - 说“是,首相!”

      为了让游戏变得有趣,我们让ChatGPT的所有回复都以“是,首相!”开头。在提示语中加上下面这句话,然后再次复制到输入框:

      5.png

       
      现在我们重新测试一下:

      obj.gif

       
      结果ChatGPT回复的是“好的,首相!”,这是因为ChatGPT比较人性化,接近人类的语言。这是可以接受的,所以我们保持不变。

       
       

      第9步 - 游戏得分

      为了让游戏完整,要给玩家设定一个目标。对于本项目,我们让ChatGPT评估玩家的回答并给出得分:

      用户做3次决策以后,你要评估用户的决策并给出1到100之间的打分。
      

       
      选择3次选项以后就得出得分:

      Animation5.gif

       
       

      创意扩展

      在这篇教程中,我们练习了如何设计并改进提示语,从而让ChatGPT以特定方式回复。大家还可以做其他练习,下面是一些思路:

      • 错误选项:为了让游戏更有趣,大家可以尝试让ChatGPT在每个问题中增加一些错误选项,如果玩家不善思考,就会得低分。
      • 选项列表:有时ChatGPT会问开放式问题。你可以强制ChatGPT只问选择题。
      • 限制问题范围:大家可进一步把问题限制在某个特定领域,例如教育政策、外交政策等等。
      • 其他领导人:很容易把用户的角色改成其他领导人,例如公司首席执行官、学校校长等等。
      posted in 小教程
      C
      creaticodeteacher2-mail
    • ChatGPT人工智能:猜历史人物(难度:3级)

      介绍

      在上一篇教程中,大家学习了如何用ChatGPT制作一个简单的聊天程序。在这篇教程,我们将制作一个称作“我是谁?”的学习游戏。我们让其他GDP扮演某个历史人物,然后让用户猜这个历史人物是谁:

      13.png

       
      大家会发现,基本没有代码更改,大部分工作就是重写提示语。这或许会改变大家对“编程”的看法。如果你想用ChatGPT制作有趣的项目,就需要一项新技能:编写高质量的提示语,从而让ChatGPT准确做出你想让它做的事情。在某种程度上,大家只需要更改提示语即可制作一个新的程序!

       
       

      第1步 - 制作一个项目起点

      我们将使用上一篇教程的项目作为起点。如果谁没有这个项目,可以根据那个教程制作一个,或者改编如下项目:

      https://play.creaticode.com/projects/44fdbbde84ffaec0bc9e28f5

       
       

      第2步 - 整理项目

      向项目中添加新的提示语之前,我们来整理一下项目:

      1. 删除系统请求中的提示语。稍后我们再添加。
      2. 更改ChatGPT的名字,将“爱因斯坦”改为“人工智能”或者其他你喜欢的名字。
        1.png

       
       

      第3步 - 添加注释以便于编辑提示语

      由于我们要编写很长的提示语,直接在积木“系统请求”中编写提示语很不方便。我们换一种方法,使用Scratch提供的注释功能:
      Animation1.gif

       
      现在我们就可以在注释框中编写完整的提示语,然后再复制到积木“系统请求”。

       
       

      第4步 - 编写提示语:描述情景

      编写新提示语的第一步,就是描述情景,这一步很重要,以便于让ChatGPT“知道”你想让它做什么。

      对于我们这个游戏,我们可以这样描述:

      你是一位五年级的历史老师,用户是五年级学生。你通过一个游戏来测试学生对历史人物的了解情况。
      

      可随意调整学生的年级和聊天机器人的角色。大家需要在注释框中输入描述内容或者复制粘贴。
      2.png

       
       

      第5步 - 编写提示语:描述游戏规则

      通过上述提示语,ChatGPT知道了它要通过一个游戏来测试学生的历史知识。不过,它仍然不知道游戏的具体规则。我们要告诉ChatGPT明确的规则,它该做什么、不该做什么,例如:

      在这个游戏中,你扮演一位历史人物,但不要告诉学生你扮演的是谁。让学生通过问问题猜你是谁。
      

      还是把这些内容输入到注释框中:
      3.png

       
       

      第6步 - 编写提示语:描述下一步怎么做

      现在机器人准备好玩游戏了。然而,我们还要告诉它如何开始游戏。比如,我们可以让它等着用户问第一个问题:

      现在等待学生问问题,然后你以那个历史人物的身份回答问题。
      

      还是添加到注释框内:
      4.png

       
       

      第7步 - 复制提示语

      现在我们写好了提示语,从注释框复制到积木“系统请求”。注意,粘贴这么长的提示语之后,就看不到其他积木了,这时按回车键或TAB键即可退出输入框。

      Animation2.gif

       
       

      第8步 - 指导用户怎么玩游戏

      现在聊天机器人准备好了,我们还要告诉用户如何玩游戏。我们可以用一条聊天消息告诉用户开始问问题,如下所示:

      5.png

       
       

      第9步 - 测试游戏

      现在我们修改完了。一定要进行完整测试。你一定要考虑到“最卑鄙”的用户如何攻破你的游戏。

      比如,我们应当测试聊天机器人是否遵守游戏规则。

      9.png

       

      接下来,我们要测试聊天机器人能否恰当地引导用户:

      12.png

       
      最后要测试聊天机器人是否知道何时结束游戏。注意,华盛顿的全名是“乔治·华盛顿”,尽管我们输入的不是全名,ChatGPT仍然能猜出来我们说的意思:

      13.png

       
      如果你在测试中发现什么问题,就要想想如何改进提示语来避免问题。比如,如果你不想让ChatGPT在游戏中聊无关话题,可以在提示语中添加如下内容:

      不要回答与游戏无关的话题。
      

       
       

      创意扩展

      除了历史人物,大家可以让用户猜其他话题,更改提示语即可实现。话题几乎是无限的。如下是一些有趣的话题事例:

      • 猜太阳系中的星球
      • 猜发明或者发明人
      • 猜一种动物或者植物
      • 猜文学中的人物
      • 在一个国家或者一个地方
      • 猜一种化学元素
      • 猜一个字或者一个数

       
      此外,大家要尝试“哄骗”聊天机器人并使其泄露答案。例如,你可能会发现,如果你问它的名字(first name),它有可能告诉你答案:

      00be90b2-e3c6-4d2b-bc16-7569668cc3b6-image.png

       
      要尝试改进提示语来避免这样的问题。这是学习和实践的好方法。

      posted in 小教程
      C
      creaticodeteacher2-mail
    • ChatGPT人工智能:聊天程序改进(难度:3级)

      介绍

      在上一篇教程,大家学习了如何用ChatGPT制作简单的聊天程序。

      在这篇教程,大家将学习如何改进那个聊天程序,有几个技巧。

      j3.gif

       
       

      第1步 - 项目起点

      我们从上一篇教程的项目作为起点。如果你没有那个程序,就根据那篇教程制作一个,或者改编如下这个项目:

      https://play.creaticode.com/projects/1ca634e4193e2b27500be13e

       
       

      第2步 - 测试“角色穿帮”

      在目前的程序中,我们指定ChatGPT扮演某个角色。不过,我们的用户容易摆脱这一限制,导致ChatGPT“角色穿帮”。

      如下所示,当我们质疑它的时候,ChatGPT就会承认自己是人工智能模型,装扮的爱因斯坦。

      Animation1.gif

       
      这么回答并没有什么错,因为ChatGPT想要解释清楚怎么回事。然而,在很多程序中,我们需要强制ChatGPT扮演其角色。

      举个例子,比如我们让ChatGPT在一个冒险游戏中扮演一位万能的巫师。如果巫师突然承认自己是一个“人工智能语言模型”,那就破坏氛围和乐趣了,对吧?

      再举个例子,比如我们让ChatGPT向学生提问问题。如果学生以某种方式使ChatGPT角色穿帮,ChatGPT就会开始说出答案。

       
       

      第3步 - 利用“系统请求”强制保持角色

      为了确保ChatGPT一直扮演指定的角色,我们可以用“系统请求”。ChatGPT会严肃对待所有的系统请求,将会竭尽全力履行系统请求。

      将原来的积木“请求”替换为“系统请求”,并明确指示ChatGPT在所有回答中保持指定的角色。另外,刚开始ChatGPT没有回答,我们只需要发一条消息“你好”。
      0.png

       
      现在当我们再次以用户身份质疑ChatGPT,它就会始终扮演指定的角色:

      Animation2.gif

       
       

      第4步 - 强化系统请求

      尽管我们用系统请求迫使角色不穿帮,但这个方法并不完美。

      首先,真的爱因斯坦并不知道什么是ChatGPT,所以不应当说“我不是ChatGPT”、“我不是聊天机器人”。

      另外,聪明的用户仍然能轻而易举让ChatGPT穿帮,如下所示:

      2.png

       

      如果我们真的要让聊天机器人“栩栩如生”,我们就要强化系统请求,来应对像这样的用户质疑。这常常被称为“提示语工程”(prompt engineering),为了改善ChatGPT的回答,我们争取找到最好的提示语。

      比如,我们可以在系统请求后面再加一句:“你从来没听说过人工智能模型和ChatGPT”。改进的回答如下:
      3.png

       
       

      第5步 - 切换至“持续更新”模式

      目前,ChatGPT的回答速度还不是太快。如果回复内容较长,用户要等好几秒才能看到回复。

      为了解决这个问题,大部分ChatGPT系统使用“持续更新”模式,当ChatGPT开始生成回答内容后,就会显示一部分回答内容,然后不断增加回答内容。这样可以使用户早点看到回复。

      4.png

       
      注意,在“持续更新”模式中,积木“请求”会立即结束,但变量“回复”的内容此时还依然是空的。

       
       

      第6步 - 不断重复刷新回复

      在“持续更新”模式中,随着ChatGPT生成回复内容,变量“回复”的值将自动更新。因此,为了显示回复内容,我们要用如下方法:

      1. 聊天窗口中添加一个符号“…” 告诉用户ChatGPT正在思考。
      2. 不断用变量“回复”更新消息。

       
      5.png

       
      现在一旦收到回复内容,就会立即在聊天窗口显示:
      Animation3.gif

       
       

      第7步 - 检测回复是否结束

      我们需要稍稍改进这个重复执行循环。我们不能用无限循环,因为会导致程序卡在这个循环中。

      为了确定ChatGPT是否已经回复完,我们可以看是否有这个对号0b3ff1fa-a891-44ec-92a8-2e318892ef5c-image.png。大家可以到这个网页去复制https://emojiterra.com/white-heavy-check-mark/

       
      6.png

       
       

      第8步 - 整理最终的消息内容

      回复内容中出现对号以后,我们将退出循环“重复执行直到( )”。在这个时间点上,我们仍然需要再更新一次聊天消息,因为变量“回复”可能包含一些尚未显示的内容。我们还应当去除对号。

      7.png

       
       

      第9步 - 优雅地处理聊天长度限制

      目前,聊天的长度是有限制的。如果聊天太长,回复内容就会包含“CHAT LIMIT REACHED”(超过聊天限制长度)。出现这种情况时,聊天就不能再继续了,所以我们要告诉用户。在这种情况下,用户不能继续聊天了,但可以点击绿旗开启新的对话窗口。

      8.png

       
       

      创意扩展

      现在请尝试将这个聊天程序进一步扩展。大家可尝试用“系统请求”强化提示语,使聊天内容更加逼真。例如,可以假装今年是1945年,爱因斯坦并不知道这一年之后发生的所有事情。

      posted in 小教程
      C
      creaticodeteacher2-mail
    • ChatGPT人工智能:与爱因斯坦聊天

      介绍

       
      ChatGPT是OpenAI开发的人工智能模型,能够像真人一样与我们聊天。ChatGPT能回答我们问题,还能帮我们做很多任务(例如翻译、概括等等)。

      很多新软件会建立在ChatGPT之类的人工智能模型之上:软件会根据用户需求创建一份详细、准确的提示语,然后把提示语发送至人工智能模型,之后就能以人性化的方式显示人工智能模型的回复。

      在这篇教程中,我们将制作一个简单的聊天程序。我们告诉ChatGPT扮演物理学家阿尔伯特·爱因斯坦,用户就能和爱因斯坦聊天了。

      Animation7.gif

       
       

      第1步 - 新建一个空角色

      首先,在CreatiCode.com游乐场新建一个项目(点击上方的菜单“创建”),然后删除带小狗的角色。我们就得到一个空项目,里面有一个空角色。

       
       

      第2步 - 添加聊天窗口

      现在我们用“控件”类别中的“添加聊天窗口”来添加一个聊天窗口。

      1.png

       
      提示:为了在浮出控件中快速找到这个积木,大家可以搜索关键词“聊天”:

      Animation1.gif

       
      聊天窗口位于舞台中央(x=0,y=0),高度和宽度与舞台相同(480×360),所以聊天窗口会占据整个舞台。

      大家可以修改聊天窗口的背景和边框颜色。

      这个聊天窗口的名称为“聊天1”,稍后将会用名称索引该聊天窗口。

      聊天窗口如下所示:

      d2ba0115-91e3-4c9e-bb93-3f1008be7a41-image.png

       
       

      第3步 - 处理事件“点击”

      聊天窗口的用法,用户可以在底部的输入框输入任意内容,然后点击绿色的发送按钮。

      L我们打印用户输入的内容,积木“控件( )的值”表示用户的输入内容。

      2.png

       
      如果在下拉菜单中看不到“聊天1”,只需要运行一次项目即可。

      注意,如果用户按回车键,也会触发积木“当控件( )被点击时”。

      大家尝试输入一些消息,编辑器窗口底部的控制台就会打印出消息内容。

      Animation2.gif

       
      注意,把输入框中的消息删除后,消息不会添加到聊天记录中。这使得我们能够完全控制消息如何被添加、什么时候添加。例如,将消息发送到聊天记录窗口前,我们可以自动修改用户输入的错别字。

       
       

      第4步 - 将用户输入内容添加到聊天记录

      现在我们把用户输入内容附加到聊天记录,不再打印出来。我们可以用积木“附加到聊天( )”。

      3.png

       
      输入的消息就是积木“控件( )的值”,即用户输入的内容。

      聊天内容被附加到用户“我”和一个用户图标下面。大家可修改文字颜色和背景颜色。如下所示:

      Animation3.gif

       
       

      第5步 - 把用户输入内容发送至ChatGPT并等待

      现在我们即将把用户输入内容发送至ChatGPT,然后得到其回复。
      大家要创建一个新变量来存放ChatGPT的回复内容,可以把这个变量命名为“回复”。

      然后大家就可以添加积木OpenAI ChatGPT:请求( )以发送用户输入内容,然后等待回复:

      4.png

       
      我们用“完整回答”模式,就会让程序卡在这个积木上,一直到我们得到回复,回复内容将存入变量“回复”。

      为了便于测试,现在我们用最大的长度50,以便于快速得到回复。

      “温度”为1能让聊天机器人更加随机发挥和有创意。

      我们把“会话”类型设置为“继续”,就会记住当前对话框中的全部聊天记录。

       
       

      第6步 - 展示ChatGPT的回复内容

      我们收到ChatGPT的回复后,我们只需要把变量“回复”中的内容附加到聊天记录窗口中:

      5.png

       
      这次的名字我们用“爱因斯坦”,消息靠右对齐,背景换一种颜色。

      现在我们可以互动聊天了。由于聊天机器人还不知道我们想让它扮演爱因斯坦,所以它依然以ChatGPT的角色回复我们:

      Animation5.gif

       
       

      第7步 - 让ChatGPT扮演爱因斯坦

      为了让ChatGPT扮演爱因斯坦,当我们启动项目时只需要告诉它就可以了。我们用同样这两个积木发送请求并展示回复。请求将设置角色:ChatGPT是爱因斯坦,用户是学生。
      6.png

       
      现在聊天功能就完整了!从现在开始ChatGPT 就扮演爱因斯坦:

      Animation8.gif

       
       

      第8步 - 增加回复的长度限制

      目前,我们把最大长度限制为50,如果聊天机器人要说更长的内容,就会被剪短。在这种情况下,回复内容就出现“TOKEN LIMIT REACHED”(已达字数上限)。

      8.png

       
      有两种办法来解决这个问题。

      第1种,你可以把“最大长度”设为一个更大的数,比如100或150。

      第2种办法,你可以告诉ChatGPT回复短一些。我们不要把用户的输入内容直接发送给ChatGPT,而是先修改一下。例如,我们在用户输入内容后面添加“最多用50个词回复。”

      有两处改动的方案如下:

      7.1.png

       
       

      第9步 - 测试运行

      现在聊天程序就做好了。聊天试一试,如下所示:

      Animation7.gif

       
      最终的完整程序:

      https://play.creaticode.com/projects/ddefa7e9b6c794efe0a81d8e

       
       

      创意扩展

      在这篇教程中,大家学会了如何使用聊天窗口控件,以及如何使用ChatGPT聊天机器人。然后大家可以尝试下面这些思路:

      • 与其他人聊天:大家可以修改第1个提示语,让ChatGPT扮演成另外一个人,比如莎士比亚、拿破仑、林肯和牛顿。注意,你选的这个人一定要在网络上有广泛的相关内容,否则ChatGPT就不“认识”这个人。
      • 与物体聊天:ChatGPT除了能扮演人,还能扮演成一个物体,例如火星、米老鼠、一个分子或者一只海豚等等。
      • 在第1个提示语中提供更多信息:第1个提示语非常重要,因为它会告诉ChatGPT扮演成谁以及如何装扮,大家可以随意改进。例如,大家可以像这样指定一个时期:“请你扮演爱因斯坦和学生聊天,假装今天是1945年1月1日。”
      posted in 小教程
      C
      creaticodeteacher2-mail
    • 人工智能 - 利用人体姿势检测做健身游戏(仅限高级版,难度:3级)

       

      用到的相关知识

      • 使用变量
      • 读取列表
      • 图形特效
      • 肢体检测人工智能

       
       

      介绍

      在这篇教程中,大家将利用人体姿势检测做一个健身游戏。不同的姿势将显示在舞台上,玩家要以最快速度做出这些姿势。

       
       

      第1步 - 新建一个项目

      在创益编程游乐场中新建一个项目。删除角色“角色1”,把角色“空的1”改名为“主角”。

       
       

      第2步 - 运行身体部位检测

      当点击绿旗时,我们要立即运行身体部位检测。这会打开摄像头并实时分析摄像头影像。大家要把“调试”设置为“是的”,就会自动显示身体关键部位。

      1.png

       
      在“变量”类别中会自动创建一个表格“i”。请勾选表格“i”前面的勾选框,使其在舞台显示:

       
      然后运行程序。大家会看到身体关键部位被标记出来,表格“i”实时更新:

       
       

      第3步 - 添加深蹲造型

      接下来,取消勾选表格“i”,添加一个“深蹲”姿势的造型。大家可以用造型“多利亚-d”,然后改名为“深蹲”:

       
      把角色大小设为130,然后移动到舞台右下角。这是玩家的第1个目标姿势。

       
       

      第4步 - 分析这个深蹲姿势

      尽管我们知道每个身体部位的位置,但我们不知道玩家摆的是什么姿势。为了自动检测玩家是否是深蹲姿势,我们重点看这4个点位:左胯、右胯、左膝、右膝。

      主要观察点为,当玩家做深蹲姿势时,两个膝盖的距离要比左右胯部距离宽得多。

       
      为了让逻辑简单,我们假设玩家的身体没有左右倾斜,那么我们就可以只用这4个部位的x坐标计算距离:

      • 膝盖距离 = 右膝x坐标 - 左膝x坐标
      • 胯部距离 = 右胯x坐标 - 左胯x坐标

       
       

      第5步 - 读取表格

      现在我们新建4个变量来表示这4个身体部位的x坐标:“左胯x”、“左膝x”、“右胯x”、“右膝x”。

      我们可以从表格“i”读取变量的值。再次勾选表格“i”的勾选框来查看内容。例如左胯的x坐标,我们先找到“X”列,然后找到其行号为12:

       
      那么,我们就可以把这个值读取到变量“左胯x”,如下所示:

      3.png

       
      读取这4个变量的积木如下所示:

      4.png

       
       

      第6步 - 计算距离

      我们得到了4个身体部位的x坐标,现在可以计算膝盖之间的距离、胯部之间的距离。

      新建2个变量“膝盖距离”、“胯部距离”,来表示这两个距离。

      “胯部距离”就是右胯与左胯的x坐标之差:

      6.png

       
      同理,膝盖距离就是右膝盖与左膝盖的x坐标之差。这一步做完后的完整程序如下所示:

      5.png

       
       

      第7步 - 根据距离计算姿势

      我们的程序知道了这2个距离,现在就可以对比二者以判定玩家是否为深蹲姿势。我们可以用一个简单规则:如果膝盖距离大于跨步距离的两倍,就算是一个好的深蹲姿势。

      新建一个变量“姿势”,将其默认值设为“未知”。如果膝盖距离大于胯部距离的两倍,我们就把“姿势”设为“深蹲”。

      7.png

       
       

      第8步 - 重新编排积木

      因为我们添加的所有新积木都为了计算玩家姿势这一个目的,我们应该制作一个新积木。新积木命名为“计算姿势”,然后把所有新积木移动到这个积木的定义中:

      8.png

       
       

      第9步 - 防备无效值

      如果摄像头影像检测不到身体部位,表格中的对应项就将被设为-10000。如果胯部、膝盖的x坐标这4个变量有一个为-10000,这些数据就作废无效。

      因此,我们应当再添加一些逻辑来忽略无效数值,比如要求全部4个变量大于-250。提示,如果舞台上能看到身体部位,那么x坐标就一定大于-240。

      9.png

       
       

      第10步 - 重复不断计算姿势

      当玩家移动并修改姿势后,表格“i”中的数值将持续不断更新。因此,我们应当重复不断计算玩家的姿势,可以用一个无限循环来完成:

      10.png

       
       

      第11步 - 检查是否为“深蹲”姿势

      现在我们可以重复不断检查变量“姿势”的值。一当该值变为“深蹲”,我们就展示一条成功消息。

      11.png

       
      运行程序后得到如下结果:

      succ1.gif

       
       

      第12步 - 设置目标姿势

      现在我们把基本的游戏机制做出来了,下一步就是让游戏更有趣。我们给玩家提供多个目标姿势,玩家要尝试完成这些姿势来得分。

      第一步,我们新建一个变量“目标姿势”,表示玩家要做的下一个目标姿势。

      我们可以用这个新变量重新编写代码:

      12.png

       
       

      第13步 - 将目标姿势在“深蹲”和“站立”之间切换

      当用户完成目标姿势后,我们就应当把目标换成一个新姿势。简便起见,我们让目标在这两个姿势之间切换:“深蹲”和“站立”。

      我们可以为此制作一个新积木“切换目标姿势”。如果“目标姿势”为“深蹲”,那么下一个目标应当为“站立”。否则,如果“目标姿势”不是“深蹲”,那一定是“站立”,那么我们就要切换回“深蹲”。

      13.png

       
       

      第14步 - 制作“站立”造型

      为了显示出目标姿势改变了,我们也要更换角色的造型。

      找到“多利亚-c”造型并添加到角色中,重命名为“站立”。

      14.png

       
      我们还需要为这个造型做一些细微调整。原来左边的腿向旁边伸出,我们可以选中整条腿并旋转到直立位置:

      Animation3.gif

       
      此外,头部侧视,可能会让玩家感到迷惑。我们只需删除这个头部,然后从“深蹲”造型复制一个头:

      Animation4.gif

       
       

      第15步 - 切换造型

      当我们切换“目标姿势”,同时也要切换造型,从而使玩家看到下一步做什么姿势:

      15.png

       
       

      第16步 - 视觉效果/听觉效果

      当目标姿势切换完成后,为了给玩家清晰反馈,我们要展示一些视觉效果。例如,在切换至下一个造型之前我们可以让角色瞬间变亮。并且,我们还可以播放收集硬币的声音:

      16.png

       
       

      第17步 - 检测玩家是否为“站立”姿势

      在积木“计算姿势”的定义中,目前我们只检查了是否为“深蹲”姿势。我们还要检查玩家是否为“站立”姿势。简便起见,我们还是看膝盖距离和胯部距离。如果玩家站立,膝盖距离应该比胯部距离稍大一点点。我们假设,当膝盖距离小于跨步距离的1.2倍时就算是站立:

      17.png

       
      现在游戏就做好了。每当玩家做出目标姿势,我们就切换至下一个目标姿势:

       
       

      创意扩展

      在这个项目的基础上大家可以制作一些更有趣的东西:

      • 游戏规则:大家可以设置不同的游戏规则。例如,大家可以为玩家设置时间限制(比方说1分钟),获得金币最多的玩家胜利。还可以要求玩家完成60次姿势,用时最短的获胜。

      • 改进姿势检测方法:现在我们只看膝盖和胯部,大家还可以检查胳膊。比如,要求胳膊水平伸直,大家可以比较手腕和肩部的y坐标。

      • 其他目标姿势:大家可尝试添加更多有趣的姿势。例如,让玩家做一个“X”姿势,如下图所示。需要用手腕和脚踝的x坐标和y坐标来检测这一姿势。

      • 双人模式:当有两个玩家站在摄像头前面时,两个人都能被身体姿势检测引擎所检测到,这使得大家能够制作双人游戏。例如,每当玩家A做一个姿势,这个姿势就作为玩家B的目标。这样的话,玩家B就要重复玩家A的姿势。
      posted in 小教程
      C
      creaticodeteacher2-mail
    • 增强现实 - 带遮挡的虚拟装束(仅限高级版,难度:3级)

       

      用到的相关知识

      • 增强现实人脸摄像头
      • 球体的使用
      • 三维坐标和位置
      • 透明遮挡

       

      介绍

      在之前的一篇教程中,大家学习了如何在用户头上添加虚拟装束。

      不过那个项目有个大问题,如果用户仰起头来,我们就能看到帽子的后边缘,看起来整个帽子就在人脸前面。

      在这篇教程中大家将学习如何解决这个问题。大体思路就是遮挡住装束的后边缘,这样看起来就好像被头挡住了。

       

      第1步 - 复制之前的虚拟装束项目

      请打开“虚拟装束”教程的项目,保存一份副本。

       
       

      第2步 - 切换至仿真模式

      因为我们又回到编程上来,我们要开启仿真模式并显示标记。

       
       

      第3步 - 添加一个椭球形表示人头

      现在我们要用一些“技巧”。大体思路就是,添加一个三维物体来表示人头,用这个物体遮挡住帽子的后边缘。并且,这个物体应当是透明的,从而在最终结果中看不到它。尽管在现实世界中透明物体不能遮挡其他物体,但在虚拟世界中却可以实现。

      首先,我们添加一个和人头形状差不多的椭球形。可以用一个球体,X/Y/Z三个维度分别为110/100/120,

      提示,我们要把这个椭球形命名为“头”,以便于后面根据名称选择。

      目前得到如下结果:

       
       

      第4步 - 移动椭球形以适配帽子

      接下来,我们要移动椭球形以适配帽子。大家可以点击舞台窗口上方的“位置”控件,然后用箭头拖动椭球形。

      操作完成后,舞台下方的角色面板会显示位置,只需把位置信息填入积木“移动到( )”:

       
       

      第5步 - 把椭球形用作透明遮挡

      现在我们就用一个小技巧让帽子后边缘消失。用到的主要积木就是“转换为透明遮挡”,该积木有两个效果:

      • 椭球形的头会变成透明的,那么我们就看不到它了。
      • 物体被椭球形遮挡的部分仍然是被挡住的,就好像椭球形不是透明的。

      为了实现这个效果,大家需要做两件事:

      1. 在最下面添加积木“转换为透明遮挡”,即可把椭球形转换为透明遮挡。
      2. 将积木“添加球体”移动到创建三维场景后面。这一步很重要,因为透明的椭球形只会遮挡住它后面添加的物体,包括帽子和人脸标记。
      3. 为了在添加帽子之后修改椭球形,需要用积木“选择( )作为角色物体”选中椭球形。

      现在大家看到椭球形消失了,但是,当你转动人脸时,帽子和标记点被一个空的形状所遮挡:

       
       

      第6步 - 用真实摄像头测试

      现在我们准备好用真实摄像头测试程序了。大家只需要隐藏标记并关闭仿真模式:

      现在当帽子向后倾斜时,我们就看不到帽子后边缘了:

      请大家调整帽子大小和椭球形,使帽子更适合自己的头。

       
       

      创意扩展

      这个“透明遮挡”方法也可用于其他虚拟物体。下面是一些创意思路供大家参考:

      • 眼镜:大家可尝试戴上虚拟的遮阳镜,要遮挡住眼镜腿后部。
      • 飞行的飞机:大家可以让一个飞机在头的周围飞行,当飞机飞到头后面时就要被遮挡住。
      posted in 小教程
      C
      creaticodeteacher2-mail
    • 增强现实 - 绘制虚拟人脸(仅限高级版,难度:2级)

       

      用到的相关知识

      • 创建三维场景
      • 增强现实人脸摄像头
      • 更新纹理
      • 更新颜色
      • 按钮控件

       

      介绍

      当你运行增强显示人脸摄像头,就可以显示4个面部区域:脸、眼睛、嘴、嘴唇。

      在这篇教程中,大家制作的程序让用户绘制不同的人脸。

       

      第1步 - 添加增强现实(AR)人脸摄像头

      用这三个积木新建一个项目:

      注意,大家要更改积木“切换到AR人脸摄像头”中的选项:

      • 不显示标记,因为我们的重点在于人脸网格;
      • 开启仿真模式,便于从不同角度查看结果;
      • 开启全部4个人脸网格。

      得到如下默认人脸:

       
       

      第2步 - 添加一个按钮“颜色”

      请添加“控件”扩展,然后添加一个按钮控件。

      默认情况下,按钮被添加到舞台中心。当你用工具“控件位置”把按钮拖到左上角,添加按钮的积木将自动更新:

       
       

      第3步 - 更改人脸颜色

      每当点击按钮“颜色”,人脸颜色就改变。要做到这一点,我们需要用积木“当控件( )被点击时”,然后在下面添加积木“更新颜色”。

      因为选择了“全部”区域,整个人脸都会变成同一种颜色:

       
       

      第4步 - 设置随机颜色

      大家可以不用一种固定的颜色,而是每当点击按钮时随机选择颜色。做法就是,用一个报表积木“颜色”嵌套一个积木“取随机数”:

      现在我们可以重复点击按钮“颜色”来更换颜色:

       
       

      第5步 - 每个区域设置不同颜色

      大家可以用“区域”选项来控制人脸的哪一部分更改颜色。“主要”区域表示脸,“第二”区域表示眼睛,“第三”区域表示嘴,“第四”区域表示嘴唇。

      比如,我们可以用4个积木“更新颜色”,并在每个积木中选择不同区域:

       
       

      第6步 - 为“老虎”面孔添加一个按钮

      绘制的第2个人脸效果,我们把人脸换成老虎。请添加一个按钮“老虎”,然后拖到第一个按钮后面:

       
       

      第7步 - 添加“老虎”纹理

      当点击这个新按钮时,我们要为人脸添加一个新面孔。我们可以在网上找一个老虎脸,或者其他动物。例如,下面这个老虎脸就比较好:

      https://www.clipartmax.com/middle/m2i8H7b1A0N4G6m2_tiger-face-icon-tiger-animals-png-icon/

      你要下载这个图像文件,然后将其上传为项目造型。

      把这做完以后,就可以用积木“使用造型更新纹理”把这个纹理应用到整个人脸(全部区域)。注意,有些图像上下颠倒显示,所以要旋转180度。

      现在就得到如下一张老虎脸:

       
       

      第8步 - 调整“老虎”纹理

      老虎脸还有个大问题:我们只用了老虎脸的中间那一块。为了用上老虎脸的更多部分,我们可以用一个小技巧。

      在造型编辑器中,将老虎造型转化为“矢量图”,然后缩小。之后,在老虎脸周围画一个透明的矩形(无填充)。这会让老虎脸缩小,以便于适配人脸网格。

       
       

      第9步 - 测试真实摄像头

      现在我们的编程快要完成了,我们可以开始测试真实摄像头了,并做调试。对此,我们只需要将“仿真模式”切换为“否”。

      最终结果如下:

       
       

      创意扩展

      大家可以把人脸网格绘制成无限种样式。一些创意思路如下:

      • 透明颜色:大家可以尝试人脸网格使用透明颜色,这样的话仍然可以看到真实人脸。
      • 文字或物体:大家可以尝试在人脸上写一些文字或者画一个小物体(比如一棵树)。
      • 其他动物面孔:大家可以尝试将老虎造型换成其他动物面孔。
      posted in 小教程
      C
      creaticodeteacher2-mail
    • 增强现实 - 植树(仅限高级版,难度:2级)

       

      用到的相关知识

      • 创建三维场景
      • 使用模型
      • 使用平面
      • 增强现实世界摄像机
      • 选取三维物体
      • 广播消息

       

      介绍

      在这篇教程中,我们将制作一个增强现实(AR)游戏。玩家在地上点击即可植树。


       
      提示:对于前10步,大家可以用电脑来开发项目。但最后2步,要在带后置摄像头的移动设备上的浏览器运行项目,比如平板、智能手机。

       
       

      第1步 - 新建一个带三维坐标轴的空场景

      请新建一个项目,删除小狗角色,在“空的1”角色中添加如下积木。因为这个角色将包含地面,请将其改名为“地面”。

      大家可以在“三维场景”类别中找到积木“创建三维场景”和“显示三维坐标轴”。


       
      如下所示, x轴指向右,y轴指向前(指向屏幕内),z轴指向上。大家可以在舞台上拖动鼠标使摄像机绕坐标系旋转:

       
       

      第2步 - 添加一个大平面

      在“地面”角色中,我们添加一个大平面,长宽都为1000000。颜色并不重要,因为我们在后续步骤中会使它透明。


       
      得到如下结果:

       
       

      第3步 - 开启鼠标选取事件

      接下来,我们开启鼠标选取事件,从而使玩家能够选取平面上的任意地方。


       
      注意,这个新增积木的第1个输入框我们空着,这样的话,当前角色的任意物体都变成可选取的,包括第2步添加的平面。你也可以填写“地面”,结果一样。

       
       

      第4步 - 保存选取的位置

      现在我们处理选取事件。首先,我们添加2个新变量“目标x”和“目标y”,用来存放选取点的x坐标和y坐标:


       
      如果在场景中显示这2个变量,大家会看到,每当点击地面上的不同位置,这两个值就会发生变化。

       
       

      第5步 - 添加一个新角色“树”

      为了在三维世界中添加树,首先需要再添加一个角色“树”。这是关键的一步,如果大家在当前的“地面”角色添加树,那么这些树也将变成可选取的,这会让玩家感到混乱。

      一般来说,对于这种世界跟踪增强现实项目,地面非常重要。我们只想让地面可被选取,所以我们要把其他全部三维物体放到别的角色中。

      现在有两个角色:“地面”和“树”。

       
       

      第6步 - 发送和接收消息“植树”

      这两个角色用消息进行沟通。

      在“地面”角色中,每当玩家在地面上点击一个地方,就广播一条新消息“植树”:


       
      在“树”角色中,我们要接收这条消息,然后就可以添加树了:

       
       

      第7步 - 当收到消息后添加一个树模型

      在“树”角色中,每当收到消息“植树”,我们就添加一棵树。默认情况下,树总是被添加到场景中心,所以我们要把树移到玩家点击的地方,点击的坐标位置存放于变量“目标x”和“目标y”。


       
      现在,每当你点击地面,就会种植一棵树:

       
       

      第8步 - 隐藏和显示

      我们的方案有个小问题。新加的树总是先在原点出现,然后移动到选取点。慢放镜头如下:


       
      为了让树直接在选取点出现,我们可以用一个简单的方法:

      • 当我们添加树模型时,我们设置为隐藏。
      • 把树移动到目标点后,后面放一个积木“显示”,即可改为可见:


       
      改动之后,树就会出现在我们点击的地方:

       
       

      第9步 - 让树生长

      为了更好玩,我们添加一个树生长的动画。要进行如下两处改动:

      • 每当我们添加树,可以让树起初非常小,目标高度设置为20。
      • 树显示以后,我们将其放大10倍,用时非常短。


       
      现在我们就得到了树生长的动画:

       
       

      第10步 - 切换至增强现实世界跟踪仿真

      到目前为止,增强现实方面的东西我们还没有做。现在该切换至增强现实模式了。回到“地面”角色,添加积木“切换到AR世界摄像头”。我们将开启仿真模式,并检查是否一切都运行正常。


       
      就得到如下结果。摄像机视野会稍有不同,但选取事件用法相同:

       
       

      第11步 - 连接真实世界

      现在我们准备好连接到真实摄像头了。大家需要在移动设备上打开这个项目,例如平板电脑和智能手机。

      大家只需要把仿真模式改为“否”,即可打开真实摄像头。另外,我们把地面的颜色的透明度改为50%,这样就可以透过地面看到真实场景。


       
      当你在移动设备上运行项目时,后置摄像头的影像会替代场景的蓝色背景,大家仍然可以点击地面植树:

       
       

      第12步 - 整理项目

      地面和三维坐标轴有助于开发项目,但在真实场景中明显会破坏所添加物体的画面。在发布项目之前,我们要把地面的透明度设为100%。注意,尽管我们看不到地面了,但选取事件对透明地面仍然管用。同时,我们还要把三维坐标系设置为隐藏。


       
      最终演示效果如下:

       
       

      创意扩展

      使用这个方法大家可以制作很多有趣的项目。大家是否想试试下方这些创意思路:

      • 其他物体类型:大家可以添加其他类型的物体,如形状、模型和人物化身。大家还可以用按钮或者下拉菜单让玩家能够选择添加哪种物体。

      • 随机:每当添加一个新物体,大家可以把它的大小和颜色设置为随机。

      posted in 小教程
      C
      creaticodeteacher2-mail