Navigation

    CreatiCode Scratch Forum

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

    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
    • 三维物理 - 弹珠游戏(难度:5级)

      用到的相关知识

      • 为物体添加高亮
      • 复制到镜像位置
      • 为三维场景启用物理引擎
      • 为三维物体添加物理实体
      • 向物理实体施加力
      • 限制物理实体运动的速度和方向

      介绍

      在这篇教程中,我们将利用物理引擎制作一个弹珠游戏:

       
       

      第1步 - 新建一个空场景

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

      在“主角”角色中添加如下积木,将创建一个空的三维场景、显示三维坐标轴并启用物理引擎,物理引擎的重力设置为-1000。

      1.png

       
      得到如下结果:

       
       

      第2步 - 新增4个角色

      在这个游戏中,有4种物体:桌子、球、扳机和目标。

      2.png

       

      如同二维的Scratch项目,每种物体用一个角色来组织代码,是个好理念。因此,我们新增4个角色,分别为“桌子”、“球”、“扳机”和“目标”。

      3.png

       
       

      第3步 - 广播4条消息

      为了告诉每个角色建造各自的部分,我们要从主角角色广播4条消息:

      4.png

       
      注意,这些消息我们用的是“广播( )并等待”,这样的话,每一步完成以后才进行下一步。

       
       

      第4步 - 每个角色接收消息

      在这4个新角色中,第1个积木就是“当收到( )”,这样的话,每当主角角色发出消息后,其他角色就知道自己该工作了。

      例如,在“桌子”角色中,我们接收消息“添加桌子”:

      5.png

       
      其他3个角色类似。

       
       

      第5步 - 添加带三个侧面的方形管子

      现在我们编辑“桌子”角色。桌子可以用一个带三个侧面的方形管子制作。我们让下端开口,从而使球有机会滚出桌子。

      大家自己决定桌子的大小和颜色。比如,宽500,长1050,高110,边缘厚度可以为50:

      d2.gif

       
      添加方形管子的积木如下:

      6.png

       
       

      第6步 - 木材材质

      大家可以根据喜好为桌子设置材质,使桌子看起来更逼真。例如,大家可以选择材质“木材07”,大小为1000:

      7.png

       
      得到如下结果:

       
       

      第7步 - 为方形管子设置物理实体

      现在我们为方形管子添加物理实体。因为它不动,所以质量设为0。因为我们要让球在边上反弹,所以恢复系数要高,比如80。最后,为了让球碰到边缘后旋转,我们要设置一定的摩擦系数,比如20。

      8.png

       
       

      第8步 - 添加一个斜面

      接下来,我们在右下角添加一个斜面,就是一个盒子,x/y/z三维度大小为200/50/100。绕z轴旋转到-45度,然后移动到 x坐标160、y坐标-410。最后添加同样的材质。

      d5.gif

       

      这一步的积木如下:

      9.png

       
       

      第9步 - 为斜面添加物理实体

      我们要为斜面添加和方形管子一样的物理实体,从而当弹珠碰到桌子的每一个边缘时都有同样的反弹效果。

      10.png

       
       

      第10步 - 将斜面复制到左边

      左边需要同样的斜面,用积木“复制到镜像位置”能轻松实现,模式为“左右”:

      11.png

       
      现在“桌子”角色就完成了:

       
       

      第11步 - 添加球

      现在我们切换至“球”角色来添加球。首先添加一个直径为30的球体,命名为“球”。移动至y坐标-400、z坐标10。自己可以随意添加喜欢的材质。程序如下所示:

      12.png

       
      得到如下结果:

       
       

      第12步 - 为球添加物理实体

      因为球要四处弹跳,所以球的质量应当大于0。那我们用默认质量100就可以了。把恢复系数设为100,会非常有弹性。摩擦系数要小一点,比如20,这样的话,当球碰到其他物体时就会旋转,但不会减速太多。

      13.png

       
       

      第13步 - 切换至顶部摄像机视角

      现在我们改成从顶部观看整个桌面。大家要切换至“主角”角色,添加积木“设置摄像头”,然后设置距离和视角:

      14.png

       
      现在看到的视角如下所示。看起来桌面像是立起来的,y轴正方向向上,y轴负方向向下。

       
       

      第14步 - 使球“落下”

      现在看起来好像球是悬浮着。为了让球自动向下滚动,我们可以对其物理实体施加y轴负方向的力。切换至“球”角色并添加如下积木:

      15.png

       
      从现在这个视角看起来球就是“向下落”:

       
       

      第15步 - 添加扳机盒子

      接下来,切换至“扳机”角色,在下部添加一个扳机盒子来托住球和击球。x/y/z三维度大小为150/40/100,然后移动至y坐标-480。大家可以随意挑选材质。

      16.png

       
      结果如下所示:

       
       

      第16步 - 为扳机添加物理实体

      现在我们为扳机开启物理引擎。我们要将扳机上下移动,但不受球和重力的影响,所以我们把质量也设为0。把恢复系数设为80,从而使球能够反弹,当球落下来后还能托住球。把摩擦系数设为100,这样的话,如果球正在旋转,球就会被弹到不同的方向。

      17.png

       
      这一步完成后,球会停在扳机上:

       
       

      第17步 - 添加圆柱体目标

      现在我们切换至“目标”角色,添加一些圆柱体作为目标。每当球碰到这些目标,玩家就得分。

      添加第1个目标的方法如下,添加一个直径为60、高为100的圆柱体。命名为“10”,即当球碰到这一目标时玩家所得的分数。将其移动到桌面上部,y坐标300,x坐标50。

      18.png

       
      得到结果如下:

       
       

      第18步 - 为目标开启物理引擎

      现在我们为这个目标添加圆柱体的物理实体。因为目标不动,所以质量应当为0。把恢复系数设为120,使目标非常有弹性。如果恢复系数大于100,意味着当球撞到目标时会获得额外的能量。此外,把摩擦系数设为100,就会使球旋转。

      19.png

       
       

      第19步 - 再添加3个目标

      将添加第一个目标的3个积木复制副本,用以添加更多目标。如下所示,这些积木再添加三个圆柱体目标,分别命名为“5”、“4”、“1”。

      20.png

       
      添加的目标如下所示:

      94ab05ac-e357-4dfc-8de1-9a5379f27448-image.png

       
       

      第20步 - 扣动扳机

      当玩家按下空格键,我们要快速将扳机下移到y坐标-540。当玩家松开空格键,我们要将其移回初始位置y坐标-480,时间比下移时稍长。

      在“扳机”角色添加如下积木:

      21.png

       
      现在我们就可以用板机打球了:

       
       

      第21步 - 碰到目标时广播消息“击中目标”

      每当球碰到目标,我们就要展示一些视觉效果/听觉效果,并且使玩家的得分增加。

      若要完成这一事件,每当球碰到目标角色中的物体时就要广播一条碰撞消息。

      首先,添加积木“当收到(消息)参数( )”,点击下拉菜单新建一条消息“击中目标”。同时,新建一个变量“击中信息”。

      22.png

       
      接下来,在“目标”角色添加如下积木(放在添加4个目标的积木下方):

      23.png

       
      这个积木将确保,每当球碰到任意一个目标时都会广播这一消息。

       
       

      第22步 - 提取目标名称

      当我们收到消息“击中目标”,变量“击中信息”将会告诉我们哪两个物体在哪个位置碰撞了。在这个游戏中,我们只需要知道碰撞的目标的名称,即“击中信息”被逗号分隔开的第2部分。请新建一个变量“目标名称”,用于存放目标的名称:

      24.png

       
      比如说,“击中信息”所包含的内容为“球,1,22.696,-78.908,9.598”,那么“目标名称”就为“1”。

       
       

      第23步 - 目标高亮显示

      每当目标被球碰到,我们就使它短时间高亮显示白光:

       
      为了做这个效果,我们要在广播碰撞消息后创建高亮层:

      25.png

       
      我们还要根据名称选择目标,并将其添加到高亮层,较短时间后再将其移出高亮层:

       
       

      第24步 - 限制球的速度

      如果大家一直玩这个游戏,应该会发现一个小问题,有时球太快了,以至于会直接穿过目标或者是桌子边缘。

      through.gif

       
      分步解析,物理引擎把球从位置1向上移到位置3。球从来没接触到粉色目标,所以物理引擎“不知道”两者碰到过。

      27.png

       
      为了解决这个问题,我们要限制球的速度,从而使球不会穿过目标。为了做到这一点,把如下积木添加到球角色中,使球的速度永远不超过1500:

      28.png

       
       

      第25步 - 整理场景

      现在游戏就可以玩了。最后再进入主角角色整理一下场景。

      首先,隐藏三维坐标轴。

      第二,大家可以选一个别的场景,或者添加别的天空作为背景。这要在设置摄像机距离之前完成。

      第三,我们可以沿y轴补充一些光,让物体的侧面更明亮。

      29.png

       
      游戏的最终演示效果如下:

       
       

      创意扩展

      大家可以把这个项目扩展成多种形式。一些创意思路如下:

      • 不同的目标:大家可以把目标设置成不同的形状/颜色/大小/位置。

      • 视觉效果/听觉效果:为了让游戏更好玩,当球碰到目标和桌子边缘时,大家可以播放声音,或者使球高亮。

      • 游戏结束:大家可以通过检查球的z坐标来判断球是否掉落到桌子外面,如果是的话,就展示一条消息“游戏结束”。

      • 得分:大家可以用一个新变量“得分”记录玩家的得分。每当碰到目标时就增加得分。

      • 奖励:大家可以在桌面上添加一些游戏道具,当球碰到道具后就获得奖励。例如,大家还可以再添加一个球,玩家用两个球能碰到更多目标。

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维物理 - 迷你台球游戏(难度:4级)

       

      用到的相关知识

      • 为三维物体添加物理实体
      • 设置物理实体的移动速度
      • 获取物理实体的属性
      • 更新颜色
      • 网格材料
      • 按钮控件
      • 标签控件

       
       

      介绍

      在这篇教程中,我们将利用物理引擎制作一个简单的迷你台球游戏。玩家用一个白色的母球把一个红色的目标球打进球袋里。

       
       

      第1步 - 新建一个项目

      在创益编程游乐场新建一个项目。删除带小狗的“角色1”,我们只需要角色“空的1”。

      请添加如下积木来初始化一个空场景,开启物理引擎,并设置摄像机和三维坐标轴。

      1.png

       
       

      第2步 - 创建3个新积木

      请创建3个新积木:

      • 添加球桌:用于添加一个带球袋的台球桌;
      • 添加球:用于添加台球:
      • 检查目标:用于检查目标球是否落入球袋中。

      初始化场景之后依次运行这三个积木:

      2.png

       
      根据积木代码所执行的任务进行组织编排,是个好办法。

       
       

      第3步 - 添加4个平面

      现在我们开始制作台球桌。简单起见,我们将制作一个中间有一个方形球袋的球桌。

      首先添加4个平面,然后向对角方向移到4个角:

       
      添加和移动平面的积木如下所示。例如蓝色平面,其中心点的x坐标为5000,是宽度10000的一半,所以它的左边缘与y轴重叠。

       
       

      第4步 - 移动这4个平面形成一个方形的洞

      接下来,我们把每个平面在x和y方向上都移动100,从而在中心形成一个200×200的方形的洞。

       
      代码改动如下。例如,蓝色平面的中心向右移动, X坐标从5000改为5100,那么它的左边缘与y轴的间隙为100。

       
       

      第5步 - 添加网格材料

      现在添加一些网格线,让这4个平面看起来像是一个整体:

       
      应用网格材料的积木如下所示。全部4个平面使用同样的积木。大家可以随意选择颜色:

      5.png

       
       

      第6步 - 添加物理实体

      现在我们还需要为这4个平面添加物理实体,平面可以用“盒子状”的物理实体。因为台球桌不移动,所以“质量”应当为0。并且,为了模拟真正的台球桌,我们要设置较低的恢复系数和较高的摩擦系数。

      4个平面都添加如下积木:

      6.png

       
       

      第7步 - 制作球袋底部

      一旦球落入方形球袋中,我们就要使球停在里面。要做到这一点,我们可以在桌面下方90的地方添加一个方形平面。因为球的直径为100,这可以保证球会停在球袋中。

       
      球袋底部的恢复系数应当为零,从而使球不会跳出来。还应当为静止的,所以质量为0。添加球袋底部的三个积木如下:

      7.png

       
       

      第8步 - 制作目标球

      我们做好了球桌,现在去编辑积木“添加球”。首先,我们添加一个红色的球,命名为“目标球”。为了让球看起来像是个塑料球,我们可以修改其光泽度和亮度:

       
      添加球的积木如下所示:

      8.png

       
       

      第9步 - 为目标球添加物理实体

      我们把球的质量设为100,从而使它被碰撞后会移动。我们还要把恢复系数设置高一些,以便于当母球碰到它后速度会比较快。另外,我们还要让目标球静止,在我们击球前使它不移动。当我们击球后会解除静止状态。

      9.png

       
       

      第10步 - 制作母球

      接下来我们添加一个白色的“母球”:

       
      添加母球的积木非常相似,与目标球的物理实体完全相同。

      10.png

       
       

      第11步 - 添加一个瞄准球

      为了帮助玩家指定将母球瞄准哪里,我们添加一个黄色的“瞄准球”。我们将把母球射向这个瞄准球。因为瞄准球并不是真的,我们使它部分透明,还要让用户能够在桌子上拖动这个球。注意,因为瞄准球也有物理实体,所以当我们拖动时不会与目标球重叠。另外,因为目标球是静止的,所以瞄准球不会影响目标球的位置。

       
      添加瞄准球的积木如下:
      11.png

       
       

      第12步 - 添加新控件

      现在我们要让玩家能够击球。首先,添加3个控件供玩家操作:

      • 一个滑动条,让玩家指定击母球的速度;
      • 按钮“击球”,用球杆击母球;
      • 按钮“重置”,重新玩。

      12.png

       
      添加控件的积木如下:

      13.png

       
       

      第13步 - 击母球

      当玩家点击按钮“击球”,我们就应当把母球射向目标球。我们可以利用滑动条的数值设置母球的物理实体的速度,积木如下:

      14.png

       
      不过,当我们点击按钮“击球”,母球根本不动。原因就是,我们创建母球和目标球的时候把二者都设置成了静止。因此,我们要首先解除静止:

      15.png

       
      现在母球就能发射出去了:

       
      还有个问题。黄色的瞄准球只是用来帮我们瞄准母球,并不让它撞到目标球。因此,当母球被击出后,我们就要删除瞄准球。完整代码如下:

      16.png

       
      现在母球就会向瞄准球移动,然后碰撞目标球:

       
       

      第14步 - 重置球

      当点击按钮“重置”时,我们应当使球归位,让玩家重新玩。这一步其实很简单:我们只需要再次运行积木“添加球”。因为这3个球都有名称,当我们重新创建这3个球时,原来的球就自动被移除。

      17.png

       
      当你点击“重置”时的情景如下:

       
       

      第15步 - 恢复瞄准球的位置

      当玩家击球并点击“重置”后,最好是把瞄准球放在玩家之前瞄准的地方。这样的话,玩家就可以根据上一次的尝试继续调整瞄准球的位置。

      要实现这一点,我们要做3个改动:

      • 新建两个变量“x”和“y”,把初始值设为瞄准球的初始坐标:

       

      • 在积木“添加球”中用这2个变量设置瞄准球的位置:

       

      • 当我们击出母球之后,把瞄准球的新位置存入这2个变量:

       
      做这些改动后,每当我们移动了瞄准球,我们点击“重置”后瞄准球都会回到上一次移动的位置:

       
       

      第16步 - 检查是否进球

      当目标球落入球袋后,我们可以看到其z坐标正好为-40。这是因为球袋底部的z坐标为-90,球的半径为50。

       
      知道了这一点后,我们可以重复不断地检查目标球的z坐标来判断是否进球:

      21.png

       
      当我们知道进球以后,可以用一个标签展示成功消息。

      22.png

       
      现在如果我们运行程序,连按钮都不出现了。不要惊慌失措,原因是,积木“检查目标”包含一个无限循环,所以积木“检查目标”后面的所有积木都不运行。为了解决这个问题,我们只需要把积木“检查目标”移到程序的底部:

      23.png

       
      游戏的最终演示效果如下:

       
       

      创意扩展

      现在大家已经学会了如何制作基本的游戏,可以把这个项目扩展成多种形式,让游戏更好玩。一些创意思路如下:

      • 把球放在不同位置:把母球和目标球换个位置。

      • 墙和障碍物:大家可以在球桌上放一些其他物体作为墙和障碍物,例如盒子、圆柱体,会阻挡母球和目标球,让游戏更有难度。另一方面,台球有时候需要从这些物体上反弹进入球袋。

      • 多个目标球:玩家要把多个球打入球袋。

      • 多个球袋:可以添加多个球袋,玩家要选择瞄准哪个球袋。

      • 坡道:大家可以在球桌上添加一些坡道,使母球和目标球能够飞起来越过障碍物,或者跳上更高一层的球桌。

      • 多个级别:像大多数游戏一样,大家可以设计多种难度级别。当玩家熟练以后,就会喜欢更有难度的级别。

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维 - 穿越障碍游戏(难度:5级)

       

      用到的相关知识

      • 社区模型
      • 三维文字
      • 读取表格
      • 复制物体
      • 三维物体的速度
      • 化身动画

       
       

      介绍

      在之前的一篇教程,大家制作了人物在桥上跑步的项目。在这篇教程,我们将在那个项目的基础上制作一个穿越障碍游戏。玩家控制跑步者,收集越多金币越好,但不能撞到路途中的障碍物。

       
       

      第1步 - 将之前那个项目保存一份副本

      请打开之前那个教程的项目,保存一份副本。然后取一个描述性的名称,如“穿越障碍游戏”。

       
       

      第2步 - 角色“游戏道具”

      现在添加一个空角色,命名为“游戏道具”。我们将在这个角色中添加和管理所有的游戏道具,比如路障和金币。

       
       

      第3步 - 广播和接收消息“添加游戏道具”

      和其他角色一样,我们要在“主角”角色中广播一条消息“添加游戏道具”:

      1.png

       
      然后在角色“游戏道具”中处理这一消息:

      2.png

       
       

      第4步 - 用网格做位置标记

      我们要指定把游戏道具放在哪里。尽管我们可以把道具放在任意位置,但如果我们把桥的甲板作为网格,就会简单得多,只需要把道具放在每个网格的中心。

      例如,我们可以把甲板分成三列。甲板宽度为300,那么每一列的宽度就为100。这三列的中心分别为x = -100、x = 0、x = 100。

       
      同样,我们可以把甲板分成很多行,每一行的宽度为100。行的中心为y = 100、y = 200……以此类推

       
      分好行和列之后,就能指定把道具放在哪里。比如,如果我们想在第2行第3列放一个蘑菇,那么蘑菇的位置为x = 100,y = 200。

       

       
      再举个例子,如果我们想在第3行第1列放一块石头,那么石头的位置为x = -100,y = 300。

       
       

      第5步 - 添加一个表格“道具”

      为了存放游戏道具的位置,我们使用一个表格。请进入“变量”类别,新建一个表格“道具”。

      因为我们把甲板分成3列,我们就在表格中新建3列,分别命名为1、2、3。尽管大家可以进行手动更改,但是用下方这4个积木会更快:

       
      我们还要为表格添加60个空行,这样的话,我们就可以把游戏道具放在y坐标为100至6000的位置。可以用如下重复执行循环来添加空行:

       
       

      第6步 - 向“道具”表格添加数据

      现在我们向表格中添加一些数据,用以指定我们在夹板上放置道具的位置。比方说,我们要在第3行第2列放置一个路障,我们就可以在表格中写上“障”,如下所示:

      Animation1.gif

       
      现在我们添加更多路障。比如,在第7行的第1列和第3列添加两个路障:

      5.png

       
      大家可以随意添加更多数据,但这些已经足够我们开始编程了。

       
       

      第7步 - 添加第1个路障

      因为我们将要在场景中使用好多个路障,我们可以先添加一个,剩下那些就复制产生。

      因为创益编程平台上没有路障模型,所以我们无法使用积木“添加模型”。但我们可以在第三方网站上找一个路障模型,第三方网站如Sketchfab.com。搜索“路障(road block)”会出现很多模型,我们就用下图中标出来的这个模型:

      c8eaac64-5fb9-4118-b760-36f75a76a177-image.png

       
      大家可以把模型下载为GLB格式,然后上传为社区模型。如果你想用同样的模型,就无需做这一步。

      当添加这个社区模型时,请把高度设置为50,从而不会太大。另外,将其命名为“障”,与表格中表示路障的名称相同。

      6.png

       
      现在与跑步者相同的位置就会出现一个路障:

      Animation2.gif

       
       

      第8步 - 将第1个路障隐藏到桥下方

      我们要复制第1个路障并放置在甲板上。我们并不需要显示第1个路障本身。因此,我们可以把第1个路障下移,隐藏在桥下面。

      7.png

       
      可能有人就好奇了,如果你把跟踪摄像机设置为“自由”模式,仍然能看到桥下面的路障:

      Animation3.gif" class=" img-responsive img-markdown" width="606" height="452" />

       
       

      第9步 - 遍历表格“道具”的行和列

      现在我们就要遍历表格“道具”的每一个单元格,并读取其中的内容。我们需要用2个遍历循环,为这2个遍历循环新建2个变量“行”、“列”。因为表格“道具”中有60行,所以变量“行”应当从1走到60。表格“道具”中有3列,所以变量“列”应当从1走到3。

      8.png

       
       

      第10步 - 读取表格“道具”中单元格的值

      如果给出任意单元格的行号和列号,我们就能读出该单元格的值并存入一个新变量“道具类型”。

      9.png

       
       

      第11步 - 复制路障

      当我们检查表格中的每一个单元格,变量“道具类型”的值为“”或者“障”,如果为“障”,就表示我们要在该行该列放置一个路障。

      为了复制副本,我们要选择添加的第一个路障,然后使用积木“复制物体”。

      10.png

       
       

      第12步 - 移动副本

      复制副本以后,我们还要将其移动到甲板上的目标行和列。我们需要用行号和列号计算x坐标和y坐标:

      • x坐标:如果列号为1,那么x就等于-100;如果列号为2,那么x就等于0;如果列号为3,那么x就等于100。尽管我们可以用三个积木“如果”,但用这些积木计算x坐标会更简单:11.png

      • y坐标:第1列的y坐标为100,第2列的y坐标为200,所以我们只需把行号乘以100即可得到y坐标:12.png

       
      把上述积木结合起来,我们就可以这样移动复制的物体:

      13.png

       
      现在就出现了3个路障,分别与表格中的3个“障”字对应。第3行有一个,第7行有两个。

       
       

      第13步 - 使程序加速

      如果我们要复制很多个副本,上述代码会比较慢。为了提高速度,我们可以新建一个积木“添加道具”,并将其设置为“运行时不刷新屏幕”。

      15.png

       
      然后,把添加路障的所有积木都移到这个新积木的定义中:
      Animation4.gif

       
      之后当我们添加更多道具时,这一改动会让程序运行更快。

       
       

      第14步 - 为跑步者设置关卡

      开始编写“跑步者”角色中的代码。

      当跑步者在甲板上跑动时,我们要检查跑步者是否被路障挡住。因为我们能通过“道具”表格知道所有路障的位置,所以我们只需要找出跑步者的当前位置,然后在表格里面查找。

      注意,只有当跑步者进入新的一行时我们才需要检查。例如,第1行的y坐标为100,只有当跑步者到达y坐标为100时我们才检查是否有路障。之后,等到跑步者到达y坐标为200时再进行检查。

      我们在“跑步者”角色中用如下这些积木实现这个思路。用一个新变量“新行”来表示要检查跑步者的下一行,初始值为1。当跑步者的y坐标大于100(1个100),我们在一个对话泡泡中显示其y坐标,然后把“新行”增加到2。之后,当跑步者跑过y坐标为200(2个100),我们再次显示y坐标并把“新行”增加到3,以此类推。

      16.png

       
      现在,当跑步者在甲板上跑过每一行时我们就会看到其y坐标:

      Animation5.gif

       
       

      第15步 - 计算跑步者所在列

      现在我们知道了跑步者所在的行,还要知道所在的列。甲板上只有三列。中间一列(第2列)的x坐标介于-50和50之间。因此,如果跑步者的x坐标小于-50,那就位于第1列;如果x坐标大于50,那就位于第3列。

      17.png

       
      现在就可以看到打印出的列号:

      Animation6.gif

       
       

      第16步 - 检查跑步者所在位置的道具类型

      假如我们知道了跑步者所在的行号和列号,就可以读取“道具”表格以找出该位置的道具类型。如果为“障”字,那么跑步者就碰到了一个路障,我们就应当立即停止无限循环,然后广播一条消息“游戏结束”。

      18.png

       
       

      第17步 - 使跑步者和摄像机停止

      当“跑步者”角色收到消息“游戏结束”,就应当使跑步者和转换器物体“摄像机”(控制跟踪摄像机)停止。

      19.png

       
      如下所示,如果跑步者碰到路障就会停止:

      Animation7.gif

       
       

      第18步 - 动画“打败”

      为了让游戏更有趣,我们让跑步者转过身来面向摄像机,然后展示动画“打败”:

      20.png

       
      如下所示:

      Animation8.gif

       
       

      第19步 - 游戏结束消息

      除了显示失败泄气的动画,我们还要显示一个大标题消息“游戏结束”,用一个标签控件或者是对话气泡很容易实现。下面是用对话气泡实现:

      21.png

       

      结果如下所示:

       
       

      第20步 - 在“道具”表格中添加金币

      除了路障,我们还要在桥上放置一些金币。首先,我们在表格中选择一些单元格并添加文字“币”。例如,在第3、5、7行有3个金币:

      22.png

       
       

      第21步 - 添加初始金币

      现在我们切换至“游戏道具”角色。

      与添加路障相同,我们先添加一个金币,然后复制很多副本。如下所示,

      23.png

       
       

      第22步 - 复制金币

      我们使用复制路障的相同代码来复制金币。另外,我们可以让金币绕z轴旋转。

      24.png

       
      在甲板上添加的金币如下图所示:

       
       

      第23步 - 收集金币

      现在进入“跑步者”角色编辑。

      我们可以检测跑步者是否碰到金币,与检查路障相同。我们需要创建一个新变量“得分”,用以记录跑步者收集了多少金币。当游戏开始时该变量设为零。

      25.png

       
      每当跑步者碰到一个金币,得分就加1:

      26.png

       
      现在我们就能看到,每当跑步者碰到金币,得分就会增加:

      Animation10.gif

       
       

      第24步 - 为金币命名

      跑步者碰到金币之后,就应当把金币从场景中删除。要做到这一点,我们首先要进入“游戏道具”角色,为每一枚金币命名一个不同的名称。比如,我们可以把金币的行号和列号拼接起来组成一个名称:

      27.png

       
       

      第25步 - 移除金币

      在“游戏道具”角色中,我们要响应新消息“移除道具”,这条消息会把要被移除的金币的名称作为参数。大家要新建一个变量“道具名称”,

      28.png

       
       

      第26步 - 发送消息“移除道具”。

      现在我们返回“跑步者”角色,当我们知道要移除金币时就广播消息“移除道具”。我们可以把行号和列号拼接起来作为名称,当广播消息时把该名称作为参数:

      29.png

       
      当跑步者收集金币后,金币就会立即消失:

      Animation11.gif

       
       

      第27步 - 宣布成功

      如果跑步者能够通过全部60行,游戏就算成功完成。我们现在只是为了简单演示,让跑步者通过10行就宣布玩家成功,可以在跑步者角色中广播一条新消息“成功”来实现:

      30.png

       
       

      第28步 - 处理消息“成功”

      处理消息“成功”的代码类似于处理消息“游戏结束”的代码,只需修改动画和在界面上打印的文字:

      31.png

       
      演示效果如下:

      Animation12.gif

       
       

      创意扩展

      现在大家制作好了游戏的全部组件,现在该做成一个完整的游戏了。一些思路示例如下:

      • 道具地图:显然,大家应该在表格“道具”中添加更多数据,用于添加更多的路障和金币。
      • 显示得分:大家可以用一个标签来显示得分。此外,每当玩家收集一枚金币,大家可以在后面用一个对话泡泡显示“+1”。
      • 其他道具:除了路障和金币,大家还可添加其他道具,例如植物、路标、财宝箱等等。
      • 使控制更简单:现在玩家控制跑步者在x坐标的范围太广。为了让游戏更简单,大家可以让跑步者的x坐标限制为-100、0和100。例如,如果玩家按下向右键,就让跑步者一直向右跑到x坐标为100。
      • 蹦跳和滑步:大家可以让跑步者跳过路障、在障碍物下面滑过去。提示,大家可以检查跑步者的z坐标来判断是否跳过路障。
      • 声效:大家可以在游戏过程中播放声音,比如当跑步者收集一枚硬币、当游戏结束时等等。
      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维物理 - 蹦蹦球游戏(难度:3级)

       

      用到的相关知识

      • 为三维场景启用物理引擎
      • 为三维物体添加物理实体
      • 获取物理实体的属性
      • 拖动物体
      • 广播消息
      • 选取事件
      • 名称和角色物体

       
       

      介绍

      在本篇教程中,大家将利用物理引擎制作一个三维游戏。如下所示,玩家可以移动、旋转一个反弹板,让球落到目标平台上。

       
       

      第1步 - 新建一个空场景

      首先,在创益编程游乐场新建一个项目,删除角色1,然后添加如下积木,将创建一个空的三维场景,显示三维坐标轴,并将摄像机距离设置为800。

       
      得到如下空场景:

       
       

      第2步 - 为场景启用物理引擎

      在场景中使用物理引擎之前,我们必须要启用物理引擎。把场景的重力设置为-500,会让球落得很快。

       
       

      第3步 - 广播3条消息

      这个游戏有3个主要部件:反弹板、球和目标平台。为了让项目更有条理,我们广播3条消息,每一步骤一条:

       
      注意:前2条消息我们用的是“广播( )并等待”,以便于板和目标都添加好以后我们才添加球。

       
       

      第4步 - 添加3个空角色

      用多个角色来组织代码也是个好办法。在这个项目中,我们为3个物体创建3个角色:“板”、“目标”和“球”。

      添加空角色的方法就是,鼠标移至右下角的圆按钮上,在弹出菜单中选择“绘制”。

       
       

      第5步 - 制作反弹板

      现在我们在“板”角色中添加一个盒子作为反弹板。

      当该角色收到消息“添加板”,就会添加一个盒子,大小为100×100×30。大家可以随意选择一种颜色。还要绕y轴顺时针旋转30度:

       
      要在“板”角色中添加如下积木:

       
       

      第6步 - 为反弹板添加物理实体

      尽管我们可以看到这个盒子,但物理引擎“看不到”,因为物理引擎只作用于物理实体。因此,我们要为这个盒子添加物理实体,设置为“盒子”形状。因为我们不想让盒子受重力而降落,所以要将其“质量”设置为0。另一方面,因为我们要让球在这个板上反弹,所以要把恢复系数设置为100%。

      添加物理实体的积木如下:

       
       

      第7步 - 使板可拖动

      在这个游戏中,我们要让玩家能够四处拖动反弹板。我们可以用如下积木为盒子开启拖动。注意,我们要让玩家只能改变盒子的x坐标和z坐标,所以拖动模式要设置为“平面”,方向设置为y轴方向。这样就能确保盒子能够在x方向和z方向上拖动,但其y坐标永远为0,保持不变。

       
      现在大家就可以像下面这样拖动盒子了:

       
      注意,大家仍然可以拖动背景绕摄像机旋转。

       
       

      第8步 - 使反弹板旋转

      除了移动反弹板,我们还可以让玩家能够旋转反弹板,让玩家在设计球的反弹路径上有更多选择。

      为了与拖动区分开来,当点击时我们旋转反弹板。在三维项目中,这可以用“选取事件”来实现。提示,“选取”与“拖动”的区别在于,鼠标指针是否在同一个地方按下并松开。

      在“板”角色中,我们需要开启选取事件,然后编写选取事件。具体来说就是,我们将选中被鼠标点击的物体,然后将其绕y轴轻微旋转。

       
      现在大家就可以移动和旋转这个板了:

       
       

      第9步 - 添加目标平台

      接下来,我们切换至“目标”角色。当该角色收到消息“添加目标”,就会添加2个盒子作为球的目标平台。如果球停在这个平台上而不落下,游戏就算成功。

       
      为了简单起见,我们把这两个盒子的恢复系数都设为0,这样的话,球落到上面就不会反弹。

       
       

      第10步 - 添加球

      现在我们准备要在“球”角色中添加球了。

      当该角色收到消息“添加球”,就添加一个大小为50的球。大家可以随意选择一种喜欢的颜色。我们让球从z坐标为200的地方落下。因为我们要让球下落,所以球的质量不能为0。恢复系数要设为100,以便于从反弹板上反弹。

       
      球落下的情景:

       
       

      第11步 - 接连不断地丢下小球

      在游戏成功之前,玩家要一直调整反弹板,尝试不同的位置。为了让游戏简单点,我们每5秒丢下一个球,这样的话,玩家就无需点击按钮重新开始。

      我们用一个无限循环不断丢下新的球。为了避免场景中有太多球,我们用一个小技巧:我们把球命名为“球”,那么,当我们要添加相同名称的新球时,原有的“球”物体就被删除。

       
      现在这个游戏就可以不停地玩了:

       
       

      第12步 - 球的z坐标

      我们的游戏将一直持续到玩家成功将球反弹到目标平台上。球停到目标平台上之后我们就要停止游戏。

      为了判断球是否成功停在平台上,我们可以检查球的z坐标。如果球停在目标平台上没有落下,其z坐标应当为一个固定值。

      我们通过将球的z坐标打印到控制台面板上来找出其z坐标。注意,我们获取的是球的物理实体的z坐标,因为当球被物理实体控制时球本身的z坐标不变。

       
      运行这段程序获取z坐标:

       
      结果证明,当球停在目标平台上时,其z坐标约为-170。提示,我们也可以计算出这个数值:目标盒子位于-200,其厚度为10,所以它的上表面的z坐标为-195。球的半径为25,那么球的中心位置为-195 + 25 = -170。

       
       

      第13步 - 判断游戏成功与否

      现在我们根据球的物理实体的z坐标来判断玩家是否成功。我们需要将z坐标取整并与-170对比。

      当我们判定球停在目标平台上后,可以用一个标签控件来显示成功消息。我们还要终止无限循环,就不再生成新的球。

       
      成功消息如下:

       
       

      第14步 - 整理代码

      把游戏做好了,现在该整理一下代码。在“空的1”角色中,我们应当隐藏三维坐标系,并换成一个更好看的场景,比如“蓝天”。

       
      游戏的最终演示效果如下:

       
       

      创意扩展

      大家可以把这个游戏改编成多种形式。下面是一些思路:

      • 多个反弹板:大家可以为玩家提供多个反弹板,并设计游戏等级,玩家必须用上所有反弹板并让球落到目标平台上。

      • 不同的反弹板类型:大家可以为反弹板设置不同的恢复系数。此外,当点击反弹板时,大家可以使它绕x轴或z轴旋转,而不绕y轴旋转。

      • 障碍物:大家可以再添加一种物体作为障碍物,玩家无法移动和转动障碍物。这会让游戏更有趣。

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维物理 - 蜘蛛侠篮球(难度:5级)

      用到的相关知识

      • 为三维场景开启物理引擎
      • 为三维物体添加物理实体

       
       

      介绍

      在这篇教程中,大家将利用物理引擎制作一个有趣的篮球游戏:

      Animation8.gif

      思路就是,用绳子将篮球与空中的挂钩相连接,篮球就会像蜘蛛侠一样摇荡。玩家可以决定什么时候添加绳子、什么时候去除绳子,从而让篮球落进篮筐里。

       
       

      第1步 - 新建一个带物理引擎的空场景

      首先,在创益编程游乐场新建一个项目,删除带小狗的角色1,然后把“空的1”角色改名为“主角”。

      在主角角色中添加如下积木,将创建一个以蓝天为背景的三维场景,显示三维坐标轴,并启用物理引擎,重力为-500。

      1.png

       
      得到如下场景:

       
       

      第2步 - 制作4个新积木

      在这个游戏中,4个主要的组件分别为篮筐、挂钩、篮球及其托盘。我们制作4个新积木来组织积木代码:

      2.png

       
       

      第3步 - 用方形管子制作篮筐

      制作篮筐的方法,我们可以使用开口的方形管子。如下三个积木将添加一个方形管子,开口大小为150×150,深度为80。为篮筐设置“方形管子”形状的物理实体,质量设为0以使其停留在空中。恢复系数设为0,这样球就不会弹出去。摩擦系数设为100,能减慢球的滚动。篮筐上绘制绿色方格和白线。

      3.png

       
      就得到如下篮筐:

      s1.gif

       
       

      第4步 - 移动并转动篮筐

      接下来,我们将篮筐沿着y轴向前移动,以便于篮球有一些摇摆的空间。另外,我们将篮筐绕x轴旋转45度,以便于使其开口朝向我们。

      4.png

       
      篮筐的新位置如下:

      s1.gif

       
       

      第5步 - 添加挂钩

      现在我们制作挂钩。我们用一个圆环来表示挂钩。对于圆环的物理实体,因为没有“环状体”,我们只需要用“球体”或“盒子”。挂钩的形状无关紧要,因为它不会与其他物体碰撞。因为圆环要保持静止,所以其质量设为0。恢复系数和摩擦系数都不重要。大家可以随意添加一种颜色的网格材料。

      5.png

       
      做出来的挂钩如下:

      s1.gif

       
       

      第6步 - 移动并转动挂钩

      为了让篮球能摇摆较长距离,挂钩需要移动到很高的位置。另外,挂钩应当竖立。用如下2个积木实现:

      6.png

       
      现在挂钩如下所示:

      s1.gif

       
       

      第7步 - 制作篮球托盘

      篮球托盘就是位于篮球下方的一个小平面。游戏开始后,篮球会在托盘上弹跳,一直到用户将篮球连接到挂钩。

      我们把托盘放到y坐标-500处,那么当篮球连接到挂钩时就会向前摇摆。为了让篮球反弹,托盘的恢复系数要设为100%。

      7.png
       
      托盘如下所示:

      s1.gif

       
       

      第8步 - 添加篮球

      最后一个组件就是篮球。注意,篮球要命名,并且需要将z偏移设为25,也就是其高度的一半。

      篮球要放在托盘的正上方。恢复系数也必须为100%,以便于从托盘上弹跳。此外,篮球的摩擦系数要设为100%,以便于落入篮筐之后快速停止滚动。

      8.png

       
      现在大家运行程序,就会得到如下弹跳的篮球:

      s1.gif

       
       

      第9步 - 添加跟踪摄像机

      因为篮球要向前摆动,所以我们要用跟踪摄像机来跟踪篮球。使摄像机拍摄篮球的角度和水平夹角为45度,以便于判断何时将篮球与挂钩连接、何时断开连接。我们还要把摄像机设置为“自由”模式,这样的话玩家就能自由调节摄像机。

      9.png

       
      现在篮球位于摄像机视野中央:

      s1.gif

       
       

      第10步 - 添加按钮控件

      为了让玩家将篮球与挂钩连接、断开连接,我们用一个按键事件或者按钮点击事件。在这个项目中,按钮是个更好的选择,因为玩家可以在手机或者平板上玩这个游戏。

      后面这个积木将在舞台右下角添加一个按钮。因为玩家第1个操作是把篮球与挂钩连接,所以我们要在按钮上显示“连接”。

      10.png

       
      按钮的默认样式如下:

      17.png

       
       

      第11步 - 修改按钮样式

      为了让按钮更美观一些,我们用下面这2个积木修改其背景和字体样式:

      11.png

       
      现在按钮如下所示:

      18.png

       
       

      第12步 - 将篮球与挂钩连接

      现在我们准备做本项目最重要的一步。为了让篮球看起来像是用绳子连接到挂钩上,我们要做两件事。

      • 第一,我们要添加一个距离约束,让篮球与挂钩保持相同距离。有了距离约束,篮球就不会下落,而是在挂钩下面来回摆动。
      • 第二,我们要在篮球与挂钩之间连一条线,用来表示“绳子”。注意,我们用的是可移动的线,绳子会随篮球移动。

      注意,当我们添加距离约束时,第1个输入框应当为“挂钩”,因为挂钩是静止的,而篮球要摇摆。“可移动的线”将随篮球移动,为了让线看起来像绳子,我们将其纹理改为“地毯”。

      12.png

       
      现在如果我们点击“连接”,就会出现一根绳子,看起来好像篮球在摇摆。

      Animation1.gif

       
       

      第13步 - 删除篮球托盘

      当篮球绕挂钩摇摆时,有时还会碰到篮球托盘:

      Animation2.gif

       
      为了解决这个问题,当我们将篮球与挂钩连接后,删除篮球托盘即可:

      13.png

       
       

      第14步 - 游戏分阶段

      篮球与挂钩连接后,玩家的下一个操作就是断开连接,这一操作会将篮球抛向篮筐。为了让用户界面简洁,这一操作我们还是用同一个按钮。

      由于我们将同一个按钮用于不同的用途,我们想一个办法来跟踪当前的“游戏阶段”。在这个游戏中,有3个阶段:

      • 第1阶段:从游戏开始到玩家将篮球与挂钩连接;
      • 第2阶段:从玩家将篮球与挂钩连接到玩家将二者断开连接;
      • 第3阶段:篮球与挂钩断开连接之后。

      我们可以用一个变量“阶段”来表示游戏处于哪一阶段。新建这一变量,在游戏开始时将其设置为1:

      14.png

       
       

      第15步 - 在第1阶段点击按钮

      现在,当点击按钮时我们就可以运行不同的积木代码。只有当变量“阶段”为1时才运行现有这些积木代码:

      15.png

       
       

      第16步 - 为第2阶段做准备

      完成第1阶段后,我们要进入第2阶段,就要把变量“阶段”更新为2。同时,我们要把按钮改为显示“断开链接”,因为玩家要在第2阶段断开绳子:
      16.png

       
      现在当我们点击按钮时,按钮就会改变:

      Animation3.gif

       
       

      第17步 - 在第2阶段点击按钮

      在第2阶段,当用户点击按钮后,我们就应当移除距离约束和绳子,从而让篮球自由飞出去。同时我们还要删除按钮,因为玩家不需要再操作什么了。然后把变量“阶段”更新为3。

      19.png

       
      现在就可以玩游戏啦!点击“连接”即可添加绳子,点击“断开连接”即可抛出篮球:

      Animation5.gif

       
       

      第18步 - 检查成功与否

      在第3阶段,我们要检查篮球是否落入篮筐中。我们可以用一个无限循环每秒检查一次:

      20.png

       
       

      第19步 - 检查篮球的位置和速度

      如果篮球已经落入篮筐中,就不会再动了,其z坐标应当不变。我们可以用如下这两个“获取”积木检查两个值:

      Animation6.gif

       
      z速度应当接近0,z位置应当约为-131.8。我们用这两个条件检查成功与否,如果成功就显示一个标签。
       
      21.png

       
      现在我们就会得到如下的成功消息:

      Animation7.gif

       
       

      第20步 - 修改标签样式

      为了让标签更美观一些,我们可以修改其背景和文字样式:
       
      22.png

       
      现在的成功消息如下所示:

      23.png

       
       

      第21步 - 整理程序代码

      最后要整理一下程序代码,要隐藏三维坐标轴:

      24.png

       
      游戏最终演示效果如下:

      Animation8.gif

       
       

      创意扩展

      大家可以把这个项目扩展成多种形式。以下是一些思路:

      • 修改参数:大家可以把篮球、挂钩和篮筐移到别的位置。可以更改篮球或篮筐的大小,还可以更改场景的重力。

      • 2个挂钩:从第1个挂钩断开连接后,可以让玩家在第三阶段再连接到另一个挂钩,然后在第4阶段断开连接。第2个挂钩还可以在不同方向上。这就会让游戏更有难度。示例如下:

      Animation9.gif

       

      • 障碍物:为了让游戏更具挑战性,大家可以添加一些静止的障碍物,玩家必须要躲避障碍物。
      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维物理 - 汽车冲撞盒子墙(难度:3级)

      介绍

      在这篇教程中,大家将制作一个简单的物理仿真游戏。玩家将驾驶汽车冲撞一摞盒子,能撞飞越多盒子得分越高。

       
       

      第1步 - 新建一个带物理引擎的空场景

      首先,在创益编程游乐场新建一个项目,删除带小狗的角色1,然后把“空的1”改名为“主角”。

      在“主角”角色中,添加以下积木。将创建一个空的三维场景,显示三维坐标轴,并启用物理引擎,重力为-1000.
      1.png

       
      得到如下结果:

       
       

      第2步 - 添加一个广阔的地面

      接下来,利用平面添加一个广阔的地面,宽4000,长15000,然后为地面添加网格材料,大家可以用自己喜欢的颜色:
      2.png

       
      制作的地面如下所示:

       
       

      第3步 - 为地面设置物理实体

      地面不能动,所以质量应当设置为0。其恢复系数和摩擦系数对于这个游戏来说并不重要。设置物理实体的积木如下:

      3.png

       
       

      第4步 - 添加一个坡道

      接下来,我们为汽车添加一个坡道,就是一个小平面,宽600,长1000。大家可以根据喜好添加网格材料。把坡道绕x轴旋转一个小角度,比如15度,然后移到前面,以便于给汽车留一些加速空间。

      4.png

       
      汽车坡道如下所示:

       
       

      第5步 - 为坡道设置物理实体

      为坡道设置与地面相同的物理实体:

      3.png

       
       

      第6步 - 广播2条消息

      到目前为止,我们已经搭建好了平台。接下来,我们就要添加靶位盒子和玩家的汽车。做法就是,在“主角”角色广播如下这2条消息:
      5.png

       
       

      第7步 - 角色“靶子”

      要添加靶位盒子,最好在一个新角色中来做。添加一个空角色并命名为“靶子”,然后在这个角色中接收“添加靶子”事件:

      6.png

       
       

      第8步 - 添加盒子墙

      为了在角色“靶子”中添加盒子墙,我们可以用2个新变量“x”和“z”,并用2个嵌套的遍历循环来控制这2个变量。盒子大小为100,第1个变量循环的x坐标从-200走到200,第2个变量循环的z坐标从50走到450。盒子的y坐标都相同,为5500。添加盒子的积木代码如下:

      7.png

       
      添加的盒子墙如下所示:

      t4.gif

       
       

      第9步 - 设置不同颜色

      为了让盒子外观各不相同,我们可以为每个盒子应用随机颜色的网格材料:

      Animation1.gif

       
      现在的盒子墙如下:

      t6.gif

       
       

      第10步 - 为盒子墙设置物理实体

      最后,我们需要为每个盒子设置物理实体,只有这样才能让汽车与盒子相撞。设置一个较大的摩擦系数,以便于盒子不太容易滑动:

      8.png

       
       

      第11步 - 角色“汽车”

      现在我们准备添加汽车了。和之前一样,我们还是在一个新角色中操作,新角色命名为“汽车”,在这个角色中处理消息“添加汽车”:
      9.png

       
       

      第12步 - 添加汽车模型

      首先,我们添加“赛车”模型,高度为50。

      0e648f1b-7d62-494e-a38f-85d8054fa86f-image.png

       
      添加的“赛车”模型如下:

      t7.gif

       
       

      第13步 - 启用汽车仿真模拟

      接下来就是本教程最重要的一步,用如下积木[启用汽车模拟]:(/topic/750/car-with-physics-simulation):
      11.png

       
      汽车的质量是单个盒子的10倍。较大的恢复系数将会使汽车撞到盒子后将盒子飞弹出去。轮胎摩擦系数10%会使轮胎有点打滑,这样的话,当前轮转向时,车身就会有点漂移。

       
       

      第14步 - 添加跟踪摄像机

      现在我们添加一个跟踪摄像机,当汽车转向时会跟随汽车。“主方向”设置为“自由”,以便于玩家能够随时缩放和转动摄像头。
      12.png

       
      跟踪摄像机的新视角如下所示:

       
       

      第15步 - “D”、“A”键控制方向

      现在要让玩家能够用键盘驾驶汽车。我们用一个无限循环来检查按键。

      首先,我们处理前轮的转向角度。当按下“D”健,我们让车轮右转15度;当按下“A”健,左转15度;如果没有按下按键,车轮笔直向前。
      13.png

       
      从车底可以清晰看到前轮的动作:

       
       

      第16步 - 按“W”键向前行驶

      接下来我们要处理发动机动力和刹车系数,这两项独立于转向角度。

      当按下“W”键,我们设置一个较大的正数动力,设置刹车系数为0。
      14.png

       
       

      第17步 - 按“S”键向后行驶

      同理,如果按下“S”键,我们就要把发动机动力设置成负数,从而使汽车倒退:
      15.png

       
       

      第18步 - 按“空格”键刹车

      当按下“空格”键,我们就要把发动机动力设置为0,刹车系数设为10%。这样的话,汽车就会重复不断减速10%。如果没有按下任何按键,我们把发动机动力和刹车系数都设为0。
      16.png

       
       

      第19步 - 星空背景

      最后,为了让场景更美观,我们可以在“主角”角色中设置一个星空背景,还要隐藏三维坐标系:
      17.png

       
      游戏最终演示效果如下:

       
       

      创意扩展

      在这篇教程的基础上,大家可以改编成更有趣的游戏,以下是一些思路建议:

      • 不同的靶子:大家可以更改盒子墙的位置、形状和数量,盒子不必都叠在一起。
      • 不同的坡道:大家可以设计不同的坡道,还可以提供多个坡道。
      • 不同的目标:玩家把所有盒子都撞出平台就算完成游戏。
      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维 - 物理益智游戏(难度:3级)

       

      用到的相关知识

      • 广播消息与接收消息

       
       

      介绍

      在这篇教程中,大家将利用物理引擎制作一个三维益智游戏。玩家点击哪个盒子就会删除哪个盒子,目标就是让球滚进篮子里。

       
       

      第1步 - 新建一个项目,带4个空角色

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

      之后再添加3个空角色,分别命名为“盒子”、“篮筐”和“球”。这样的话,我们就可以利用不同角色为场景中的不同物体编排代码积木。

       
       

      第2步 - 新建一个空场景

      现在我们开始编排“主角”的代码。请添加以下积木,将会创建一个空的三维场景并显示三维坐标轴。我们还要把摄像机拉远,以便于看到添加的全部物体。

      1.png

       
      大家可以用按钮“+”在“三维场景”类别快速添加这些积木:

       
      当你点击绿旗后就得到如下结果:

       
       

      第3步 - 开启物理引擎

      若要在项目中使用物理引擎,要先为场景启用物理引擎。我们把重力设为-1000,会让球快速下落。

      2.png

       
       

      第4步 - 广播消息“添加盒子”与接收消息

      现在该添加盒子了。“主角”角色向“盒子”角色发送消息,“盒子”角色将完成制作盒子的实际工作。

      在“主角”角色,添加积木“广播( )并等待”,消息为“添加盒子”。“等待”将确保盒子被成功添加后再继续添加其他物体。

      3.png

       

      在“盒子”角色中,我们用如下积木接收消息:

      4.png

       
       

      第5步 - 添加一个带网格线的盒子

      在“盒子”角色中,我们创建第一个盒子,并应用“网格材料”。盒子网格线的颜色可随意挑选。

      5.png

       
      这些积木将会在场景中央生成一个大小为100的盒子:

       
       

      第6步 - 给盒子添加物理实体

      现在为盒子添加物理实体。参数如下:

      • 形状:因为我们应用于盒子物体,形状应当为“盒子”。
      • 质量:质量设置为0,保证盒子不移动、不旋转。
      • 恢复系数:设置一个较大值80%,从而使球在盒子上有较好的弹性。
      • 摩擦系数:设置一个较小值30%,从而使球在盒子上滚动时不会减速太多。

      6.png

       
       

      第7步 - 从中心矩阵复制

      现在我们要把这个盒子复制很多份,5行、5列。积木“从中心矩阵复制”专门用于此用途。注意,有2个积木包含“矩阵复制”,一定要选对。

      7.png

       
      这个积木会沿x轴左右分别复制2列。同理,会把这些列前后分别复制2行。另外,由于第1个盒子具有物理实体,那么复制出来的全部盒子都具有同样的物理实体。

      s6.gif

       
       

      第8步 - 把网格线移到边缘上

      我们发现一个问题就是网格线的帮助不大。我们想要网格线显示盒子边缘,而不是盒子中心。解决办法就是在每个方向上将网格线移动50单位:

      8.png

       
      现在我们可以清晰看到5行、5列盒子:

      s7.gif

       
       

      第9步 - 上面加一层盒子

      接下来,我们要在这一层盒子上方加一层盒子。我们首先添加一个新盒子,然后将其移动到第1个盒子上方。因为第1个盒子的z坐标为0,第2个盒子的z坐标应该为100。

      9.png

       
      第2个盒子在这里:

      s8.gif

       
       

      第10步 - 修改颜色并复制新盒子

      现在我们可以把这个新盒子作为“种子”来制作另一层盒子。大家可以从上方复制三个积木,然后换成其他颜色:

       
      现在制作出如下两层盒子:

       
       

      第11步 - 第三层

      通过“制作副本”也能快速添加第3层盒子。大家只需要修改z坐标和颜色:

       
      现在我们就做好了全部三层盒子:

       
       

      第12步 - 开启选取事件

      我们要让玩家能够点击盒子即可删除。为了做到这一点,我们首先要为盒子开启选取事件:

      10.png

       
      这个积木会确保“盒子”角色中添加的全部盒子都会响应鼠标选取事件,所以我们不需要一个个盒子去处理。

       
       

      第13步 - 删除鼠标选中的盒子

      每当鼠标选中某个盒子,这个盒子的名称就会保存在变量“被选取物体名字”。因此,我们利用对应的名称删除盒子,如下所示:

      11.png

       
      现在大家可以尝试点击盒子以删除。注意,仍然可以拖动鼠标指针来旋转摄像机,该操作不会删除盒子。

       
       

      第14步 - 消息“添加球”

      现在就该添加球了。首先,我们要从“主角”角色向“球”角色发送一条命令消息。

      在“主角”角色中,添加积木“广播( )并等待”,其中的消息为“添加球”:

      12.png

       
      然后在“球”角色中,添加以下积木来接收消息:

      13.png

       
       

      第15步 - 添加一个排球

      现在我们在“球”角色中添加一个排球模型。排球大小为190,比两层盒子稍微小一点。我们还要把“z坐标偏移”设置为其高度的一半,也就是95。这是因为所有模型的原点都在其底部,但我们要让排球绕着自身的中心旋转。

      14.png

       
       

      第16步 - 移动排球

      排球的初始位置为x: 100,y: 100,z: 400

      15.png

       
      球在盒子上方离开一定距离。球不落下是因为我们还没有给球添加物理实体,所以还不受物理引擎驱动。

       
       

      第17步 - 给球添加物理实体

      现在我们给排球添加一个球形物理实体。“质量”应当设置为1,从而会由于重力下落。“恢复系数”和“摩擦系数”与盒子相同。

      16.png

       

      添加过物理实体后,排球就会落下并在盒子上弹跳。当我们移除排球下方的盒子,排球会继续下落:

       
       

      第18步 - 消息“添加篮筐”

      这个游戏的最后一个物体就是方形篮筐。跟其他物体一样,我们要用一个新消息“添加篮筐”。

      在“主角”角色中,广播这条消息:

      17.png

       
      然后在“篮筐”角色中,接收这条消息:

      18.png

       
       

      第19步 - 添加一个方形管子

      接下来在“篮筐”角色中用代码积木制作篮筐。

      篮筐可以用一个方形管子来制作,4个侧面加1个底。开口大小为200乘200,比排球稍大一点。

      为篮筐应用网格材料,然后移动到盒子的前下方:

      19.png

       
      篮筐如下所示:

       
       

      第20步 - 为篮筐添加物理实体

      篮筐用来盛放排球,所以也需要一个物理实体。我们可以用“长方管子”形状,这种形状的物理实体只能用于长方管子。

      其“质量”应当为0,这样它就不会移动。“恢复系数”也设置一个较小值,从而使排球不会弹出来。

      20.png

       
      现在就可以玩游戏了!如果排球滚到篮筐里,就会停在里面。

       
       

      第21步 - 检查是否成功

      如果玩家未能把球放进篮筐里,可以重新开始游戏。如果球进了篮筐,我们要有一个办法宣布玩家已经成功了。

      由于球在篮筐中不会移动,所以我们可以检查2个条件:由于球没有在空中下落,球在z方向的速度应当为0。球的z坐标应当为一个固定值。我们在“球”角色中运行这个积木即可找出z坐标。
      46fd7cd3-fb20-4e0a-81a8-b6e959bfde6e-Animation5.gif

       
      因此,我们只需在“球”角色中重复不断检查这二个条件:

      67a60a23-3fe4-4c53-a658-8971f7ec1809-21.png

       
       

      第22步 - 添加标签控件“成功!”

      当玩家成功后,我们可以显示一个大标签“成功!”,这可以用标签控件来做。请添加“控件”扩展,然后在“球”角色中添加如下积木:

      23a34e8b-98f2-4249-bc61-d789a19af16b-22.png

       
      注意:大家首先要运行积木“添加标签”,在舞台上添加标签之后,再添加积木“为控件设置背景”和“为控件设置字体”,并从下拉菜单中选择“标签1”。

       
       

      第23步 - 调整“添加球”和“添加篮筐”的顺序

      如果大家现在运行项目,会发现场景中没有添加篮筐。原因就是,在“主角”角色中我们等着“添加球”完成以后才能添加篮筐。然而,由于消息“添加球”会触发“球”角色中的“重复执行”循环,这个循环永远不会停止,我们就要永远等下去。

      若要解决这个问题,请进入“主角”角色,调整这2条消息的顺序:

      db6030fe-141b-4875-a586-5214f1843e50-Animation6.gif

       
       

      第24步 - 整理

      最后,整理一下场景,在“主角”角色做3个小改动。第一,换成“蓝天”场景。第二,隐藏三维坐标轴。第三,把摄像头的俯视角度设置为65度。

      622da2cd-d41d-4fcc-9e59-639001b27914-23.png

       
      游戏的最终演示效果如下:

       
       

      创意扩展

      现在大家学会了如何制作基本的游戏,有很多办法来改进这个游戏:

      • 把球/篮筐换个位置:把球和篮筐移动到别的位置,玩游戏就要用不同的方法。

      • 不同的盒子:把盒子摆放在不同位置,可以摆放无限种形式。

      • 倾斜的盒子:盒子可以稍微倾斜一点,制作一些有趣的斜坡。

      • 某些盒子不可删除:为了让游戏增加难度,大家可以让某些盒子不可删除。玩家就必须想办法绕过障碍物。

      • 奖品:为了让游戏更好玩,大家可以在场景中放置一些奖品。例如,大家可以在盒子里放一枚金币,如果球碰到这枚金币,球就缩小一半或者场景中出现一些新盒子。

      • 游戏规则:大家可以添加一些游戏规则,比如时间有限、删除的盒子数量有限。另外,大家可通过检查球的z坐标来判断玩家是否失败。

      • 游戏升级:当玩家完成一个级别的游戏后,可以显示一个按钮让玩家进入下一个级别继续玩。

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维 - 桥上跑步(难度:4级)

       

      用到的相关知识

      • 化身动画
      • 矩阵复制
      • 更新颜色
      • 按钮控件
      • 场景中添加雾气

       
       

      介绍

      在这篇教程中,大家将制作一个动画,一个人物在一座长桥上奔跑。可作为很多有趣游戏的模板。

       
       

      第1步 - 新建一个项目,3个角色

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

      再添加2个新角色“桥”和“跑步者”。

      Animation1.gif

       
       

      第2步 - “蓝天”场景

      现在我们创建一个蓝天三维场景。此外,为了便于判断x/y/z方向,在开发代码期间可以显示三维坐标轴。


       

      在“主角”角色中添加如下积木:

      1.png

       
       

      第3步 - 广播2条消息

      接下来,我们要广播2条消息告诉另外2个角色:“添加桥”、“添加跑步者”。我们不能用积木“广播”,而是要用“广播并等待”,这样的话,我们等到那两个角色都完成创建后再继续。

      2.png

       
       

      第4步 - 添加桥

      在“桥”角色中,当收到消息“添加桥”,就在场景中添加模型“铁桥1”,高度为910。

      3.png

       
      注意,桥模型的原点不在其底部,而是在桥的甲板上方。这样的话,当我们在场景中添加人物和物体,将会出现在甲板上,而不是在桥下。

       
       

      第5步 - 更改颜色

      大家可以把桥改为自己喜欢的颜色。桥模型的“主要”区域指的是红色的桥塔,“第二”区域指的是连接桥塔和甲板的缆绳。例如,把桥塔改成蓝色、缆绳改成绿色,如下所示:

      4.png

       
      现在桥如下所示:

       
       

      第6步 - 把桥复制30次

      显然,对于跑步者来说桥太短了。我们要复制多个桥的副本并排成一条路。有个很方便的方法来复制桥并放到特定位置:“矩阵复制”。你只需要指定复制多少行、多少列、多少层,以及副本之间的距离。

      在这个程序中,我们要沿y轴复制30个桥,两两之间的距离为2400。因此,我们要这样使用积木“矩阵复制”:

      5.png

       

      立即就出现了30座桥。这些桥的几何形状和材质都一样,所以这一步很快,外观都是一样的。

       
       

      第7步 - 添加一条路

      因为我们要让人物在桥上奔跑,所以要在甲板上的轨道上铺一条路。路就用一条很长的灰色平面,遮挡住下面的轨道。添加路平面后如下所示:

       
      新增积木:

      6.png

       
       

      第8步 - 添加一些雾

      建设桥的最后一步,我们添加雾气。远处的物体被雾笼罩,这种环境能激励玩家探索场景。

      在本项目中,我们将使用“线性”雾,这让玩家能看到离摄像机近的物体,又能完全隐藏远处的物体。大家还可随意为雾加一点颜色,比如天空蓝:

      7.png

       
      添加雾之后的效果如下:

      fog3.gif

       
       

      第9步 - 添加跑步人物化身

      现在我们切换至“跑步者”角色,开始做跑步人物。首先,当该角色收到消息“添加跑步者”,就向场景添加一个人物。大家可随意挑选一个喜欢的人物,命名为“跑步者”,以便之后引用该人物。

      8.png

       

      这个人物站在桥上,面向前方:

       
       

      第10步 - 添加动画

      初学者一个常见错误就是忘记添加动画。建议大家添加人物化身后立即添加动画。请添加这5个常用动画:“胜利”“打败”“跳在空中”“滑下”和“跑”。

      9.png

       
       

      第11步 - 添加重力加速度

      和动画一样,一开始就要设置重力加速度,因为重力加速度在整个游戏中一般不变。

      10.png

       
       

      第12步 - 添加跟踪摄像机

      因为跑步者一直向前跑,我们要用追踪摄像头跟随跑步者。为了看得更远,我们把“z位移”设为100(与人物高度相同),这样摄像机就能看到人物的头,而不是人物的脚。并且,我们要把摄像机的“主方向”设为“目标”(即人物),那么,如果人物转向,摄像机也跟着转向。

      11.png

       
      摄像机新视野如下:

       
       

      第13步 - 按钮“开始”

      尽管我们可以让跑步者立即开始跑,但最好是让玩家准备好以后玩家自己启动开关。做法为,回到“主角”角色,添加“控件”扩展,然后在两个广播消息后面添加一个按钮“开始”。可随意自定义按钮的大小和颜色。

      告诉大家一个小窍门,应当先运行积木“添加按钮”,以便于先在舞台上添加按钮,然后添加另外两个积木来更改字体和背景。这样的话,这两个积木默认选中的是这个按钮。

       
       

      第14步 - 消息“开始”

      当点击按钮“开始”之后,我们应当隐藏按钮,然后向其他所有角色广播消息“开始”。

      12.png

       
       

      第15步 - 开始跑

      现在切换到“跑步者”角色。当跑步者收到消息“开始”,就要通过设置人物的“前进速度”使其向前跑。还要把人物化身的“跑步”动画设置为循环模式。

      13.png

       
      现在桥上就有了一个真正的跑步者!

       
       

      第16步 - 向右前方跑

      我们要让玩家能够使跑步者左右转向。当按下向右按键,我们让跑步者面向右前方(60度),跑步者就将向这个方向跑:

      15.png

       

      当我们按下向右按键,如下所示:

       
       

      第17步 - 向左前方跑

      如果向右按键没有被按下,我们可以检查是否按下向左按键。如果按下向左按键,就让人物向左前方跑;否则就恢复向前跑。

      16.png

       
      现在可以用左右箭头控制人物向全部3个方向跑。

       
       

      第18步 - 跳动

      当用户按下向上按键,我们把跑步者的“上升速度”设置为250,使其向上跳。同时,我们开始动画“跳在空中”。

      17.png

       
      效果如下所示:

       
       

      第19步 - 恢复跑步动画

      当人物落地,应当切换回动画“跑”。我们可以等到人物的z坐标非常小时切换。

      18.png

       
      现在动画就修改好了:

       
       

      第20步 - 动画“滑下”

      当按下向下按键,我们让人物在甲板上滑倒。这个动画只需播放一次,所以我们要把“循环”设置为“否”。并且,我们要设置为“需等待的”,以便于动画能运行完。这个动画结束后,我们就返回动画“跑”。

      19.png

       
      滑倒动画如下:

       
       

      第21步 - 摄像机新目标

      还有一个问题我们要解决。目前,当人物转向或跳动,摄像机会随之移动,这样看起来好像桥在动。这会让玩家晕头转向。更好的办法就是让摄像机向正前方移动,而跑步者可以四处跑动。

      为了实现这一点,我们首先要为摄像机添加一个新的目标物体,那么摄像机就无需再跟踪跑步者。我们可使用一个转换器结点,命名为“目标”:

      20.png

       
       

      第22步 - 让新目标“跑”

      当跑步者开始跑,我们要让物体“目标”以同样的速度前进,使其与人物始终保持相同距离。之后,我们再选择跑步者并使其跑动。

      21.png

       
      现在,如果跑步者跳起来,而物体“目标”不跳,那么摄像机就不跳动。

       
       

      第23步 - 当转向时跑得更快

      当跑步者斜着跑,就会比摄像头要慢,所以会从摄像头视野中消失:

       
      为了解决这个问题,我们要让人物斜着跑的时候速度更快。事实证明,如果我们使跑步者的斜向前进速度为400,在y轴上的速度依然是200。如果跑步者恢复沿y轴跑,那么我们就要把速度重置为200。

      22.png

       
      跑步者的最终演示效果如下:

       
       

      创意扩展

      现在大家学会了如何制作基本的跑步动画,有很多方法可以进行个性化和改进。一些创意思路如下:

      • 把跑步者限制在甲板范围内:大家可以为主球和目标球设置不同的坐标位置。

      • 添加声效:当跑步者跳起或滑倒,大家可以添加一些有趣的声效。

      • 其他动画:大家可尝试让跑步者做更多事情,如飞行、跑更快。

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维 - 带距离感应器的自动驾驶汽车(难度:3级)

       

      用到的相关知识

      • 创建三维场景
      • 更新纹理
      • 使用盒子
      • 使用模型
      • 三维物体的速度
      • 人工智能距离感应器
      • 广播消息
      • 三维旋转
      • 追踪摄像头
      • 矩阵复制
         
         

      介绍

      在本篇教程中,我们将在汽车上安装“距离感应器”,汽车就能自动躲避障碍物。

       
       

      第1步 - 创建三维场景“草地”

      新建一个项目,使用积木“创建三维场景”载入“草地”场景。还要添加三维坐标系以显示三维坐标轴。


       

       

      第2步 - 添加一个新角色“障碍物”

      添加一个新角色,命名为“障碍物”。

      在主角色中,广播一条消息来“添加障碍物”:


       

      在新角色“障碍物”中,当收到广播消息,就添加一个盒子,大小为100,然后移动至位置——y坐标:500,z坐标:50。大家可随意更换其纹理:


       
      现在就得到这样一个盒子:

       
       

      第3步 - 添加汽车

      在主角色中,添加一个汽车模型,高度为60。大家可随意更改其颜色。


       

      汽车被放在场景中央,面对前方的盒子:

       
       

      第4步 - 向前开车

      接下来,我们为车设置“前进速度”100。


       
      汽车就会按照预期向前行驶,并且会穿过盒子。

       
       

      第5步 - 添加跟踪摄像机

      当汽车到处行驶,很快就走出摄像机的视野。我们可以添加一个“追踪摄像头”,当汽车行驶和转向时就会跟踪汽车。

      注意:你需要把方向设置为“目标”,以便于摄像机总是与汽车面向同一方向。另外,“透视度”设为60%,当障碍物遮挡住汽车时,障碍物就变成半透明。


       
      现在应该就能使摄像机跟踪汽车,如下所示:

       
       

      第6步 - 打开前方距离感应器

      接下来,我们要为汽车添加前方距离感应器,以便于让汽车能发现前方的障碍物有多远。

      如下图所示,我们只需开启“前”感应器。现在为了调试用途,将其设为可见。由于汽车高度为60,我们把“z位移”设为30。此外,现在我们只用一个感应器。


       

      现在就能看到前方的距离感应器光束了:

       
       

      第7步 - 当汽车离障碍物太近就停下

      现在我们测试一下距离感应器是否管用。我们可以用一个“重复执行”循环不断检查与前方障碍物的距离,当距离小于250时就停下来。


       
      果然,汽车向前行驶一段距离后停了下来:

       
       

      第8步 - 向左转躲开障碍物

      我们不让汽车停止,而是让汽车左转躲开障碍物。

      做法为,设置“前进速度”为0的积木删除,换成积木“左转3度”。


       
      如下图所示,汽车距离盒子小于250时就开始左转,会一直转到感应器检测不到盒子:

       
       

      第9步 - 换成5个距离感应器

      我们的方案仍然有个问题。汽车会斜着撞到盒子上,原因就是,尽管中间的感应器光束碰不到盒子,汽车右半部分仍然会撞到盒子。

       
      为解决这个问题,我们把1个距离感应器换成5个。这样的话,汽车右前角的感应器光束会碰到盒子,告诉我们仍然有障碍物。


       

      现在汽车会一直左转到5根光束都碰不到障碍物:

       
       

      第10步 - 第二个障碍物

      现在我们的代码应该能适用于任意数量的障碍物。测试方法为,进入“障碍物”角色,再添加一个障碍物。提示,大家只需要复制第一个盒子,比重新添加要快得多。


       
      如下所示,汽车可以躲开这两个盒子:

       
       

      第11步 - 更多一些障碍物

      现在我们尝试添加更多障碍物,利用积木“矩阵复制”。

      在“障碍物”角色,我们可以将盒子沿x轴、y轴方向矩阵复制20行、20列。盒子在x轴、y轴方向的间隔距离均为500。为复制的盒子设置一定程度的随机位置、随机大小和随机方向。

      我们还要把初始的盒子移到场景的左下角(x坐标、y坐标均为负值),这样才能让汽车从障碍物中间开始出发。


       

      从上方看去如下图所示,初始的盒子在左下角,汽车在最中央。


       

      当我们运行程序,汽车能躲开所有障碍物:

       
       

      创意扩展

      大家可以把这个项目扩展成多种形式。以下是一些创意想法:

      1. 不同形状的障碍物:大家可以尝试用球形、圆柱形,甚至是模型。距离感应器适用于各种障碍物。

      2. 左右转向:目前汽车总是左转来躲开障碍物。大家能不能试试左右随机转向?

      1. 先减速再转向:目前汽车如果躲闪不及,仍然会撞到障碍物。我们可以改为检测到障碍物时先减速,躲过障碍物后再恢复正常速度。

      2. 三维迷宫:大家还可以把汽车改为飞机,让飞机在空中飞过障碍物迷宫。飞机要能够上升、下降来躲避障碍物。

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维/人工智能 - 可持续发展目标7 - 利用距离感应器控制光源(难度:2级)

       

      用到的相关知识

      • 创建三维场景
      • 使用模型
      • 使用柱体和管子
      • 使用光源
      • 更新物体纹理
      • 人工智能距离感应器
      • 广播消息与接收消息
      • 使用盒子
      • 调整物体大小
      • 三维坐标和位置
      • 三维物体的速度
      • 三维旋转
      • 追踪摄像头

       
       

      介绍

      可持续发展目标是联合国于2015年正式发布的17个目标。这17个目标是大家都要完成的学习清单。

      本篇教程是关于节省电能,与第7个目标“负担得起的清洁能源”相关。

      在如下三维动画中,我们在隧道入口处利用距离感应器检测是否有车进入隧道,并自动打开隧道内的灯光:

       
       

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

      新建一个项目,删除角色“角色1”,把角色“空的1”重命名为“主角”。

      添加积木“创建三维场景”以加载空场景,再添加三维坐标系以显示三维坐标轴。


       

       
       

      第2步 - 绿地上一条路

      接下来,我们在一片广阔的绿地上添加一条很长的路,用一个平面表示绿地,用盒子表示路。注意,路的宽度为100。


       
      结果如下所示:

       
       

      第3步 - 隧道管子

      接下来,添加一个管子来表示隧道。需要旋转至朝向y轴,并向前移动,使一端与原点对齐。其直径也为100,这样的话上半部分刚好遮住路。


       
      依次运行每个积木的结果:

       
       

      第4步 - 暗光源

      接下来,删除场景内的所有光源,然后添加一个较暗的光源:


       
      现在隧道看起来很暗了,这样的话,我们在隧道内添加光源以后才会形成较好的反差:

       
       

      第5步 - 用一个新角色添加感应器盒子

      现在我们在隧道前部添加一个感应器盒子。更合理的办法就是,新建一个角色来管控传感器,这样就更容易找到代码,并且这个角色中的所有积木都将应用于感应器。

      首先,“主角”角色广播一条消息“添加感应器”。


       
      然后,在名为“感应器”的新角色中,添加一个大小为5的小盒子。将其移动至y坐标为-50处,以便于当汽车进入隧道前就可以检测到汽车。


       
      盒子如下所示:

       
       

      第6步 - 在盒子左侧添加距离感应器

      在“感应器”角色中,为盒子开启距离感应器 。提示,我们把盒子放在了马路右侧,所以只需要检测它左侧走过的物体。


       
      大家可以看到盒子左侧发射的传感器射线,长度为60。驶过的汽车所报告的距离会小于60。

       
       

      第7步 - 定期检验感应器读数

      若要使用距离感应器,我们只需要重复不断地读取感应器的数值。每当发现与左侧物体的距离小于60,意味着有汽车正在驶过,那么我们就要广播一条消息“打开灯光”:


       

      注意,每次读取以后要等待0.5秒,这样就不会读取太频繁。只要整个汽车驶过感应器的时间超过0.5秒,我们就会检测到。当然了,如果你想处理开得很快的车,就要缩短这个等待时间。

       
       

      第8步 - 在隧道内添加光源

      接下来,我们要用一个新角色在隧道内添加光源。

      首先,“主角”角色广播一条消息“添加光源”:


       
      然后,添加一个新角色“光源”。每当它收到广播消息,就在隧道入口处的穹顶添加一个聚焦光源.

      我们用圆锥体来表示光源,但需要把尺寸缩小到5%。

      此外,由于默认情况下聚焦光源向前照射,为了使它向下照射,我们需要绕x轴旋转90度。


       
      这三个积木的分步演示如下:

       
       

      第9步 - 用变量循环添加4个光源

      现在我们成功添加了一个光源,接下来用变量循环添加4个。我们将使用一个新变量“i”,让它从1走到4。4个灯分别命名为“灯1”、“灯2”、“灯3”、“灯4”,同时,位置要分别移动至y坐标100、200、300、400。变量“i”用来计算名称和y坐标。


       
      现在隧道内就有了4盏灯:

       
       

      第10步 - 开关灯

      为了节省电能,我们要让隧道内的灯默认情况下为关闭状态。在后面添加一个积木即可,每添加一个光源之后就先关闭它。


       
      之后,每当距离感应器发送消息“打开灯光”,我们就可以遍历每个灯并打开。

       
       

      第11步 - 添加汽车

      最后一步,我们要添加一辆汽车,最好在一个新角色中添加,新角色命名为“汽车”。

      首先,“主角”角色广播一条消息来“添加汽车”:

       
      然后,添加一个名为“汽车”的新角色,每当该角色收到消息“添加汽车”,就添加汽车物体。我们把汽车的起点y坐标设为-200,汽车就会驶过感应器盒子。我们把前进速度设为50,在感应器盒子旁边驶过时就不会太快:


       
      现在我们就可以观察到当汽车驶过感应器盒子时灯光打开:

       
       

      第12步 - 使用跟踪摄像头

      为了从汽车视角查看灯光效果,我们可以用追踪摄像头在汽车后面跟随汽车拍摄。只需要在“汽车”角色中添加如下积木:


       
      从汽车后面看到的情景如下:

       
       

      第13步 - 整理项目

      在发布项目之前,我们要整理一下项目,删除一些不必要的物体。

      第一,在“主角”角色中隐藏三维坐标轴:


       
      第二,在“感应器”角色中,让感应器盒子变得很小,因为不需要看到这个盒子。


       
      第三,还是在“感应器”角色中,隐藏感应器射线:


       
      最终演示结果如下:

       
       

      创意扩展

      大家可以用自己的创意想法扩展这个项目,可以扩展成很多种形式。以下是一些例子:

      • 关灯:大家可以在隧道出口处再装一个距离感应器,当汽车驶过后关闭灯光。

      • 不止一辆车:如果有多辆汽车,只有当所有汽车通过隧道后才能关闭灯光。

      • 双向交通:如果隧道内双向通行,你应该如何修改感应器来处理这种情况?

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维 - 虚拟装束(仅限高级版,难度:2级)

       

      用到的相关知识

      • 创建三维场景
      • AR人脸摄像头
      • 使用模型
      • 三维旋转
      • 三维坐标和位置

       
       

      介绍

      在这篇教程中,将在摄像头检测出的人脸上添加一个虚拟的帽子。


       
       

      第1步 - 加载一个“空”场景

      请在创益编程游乐场新建一个项目,删除小狗角色“角色1”,然后在“空的1”角色中添加下列积木。

      利用“三维场景”类别中的积木“创建三维场景”来加载“空”场景。

       
       

      第2步 - 开启AR人脸摄像头

      现在请开启AR人脸摄像头。先使用仿真模式,并且显示人脸标记。


       
      就会得到如下人脸标记:

       
       

      第3步 - 添加帽子物体

      接下来,我们利用积木“添加模型”添加一个帽子。因为头部高度大约为100,我们把帽子的目标高度设置为80。


       
      当你运行程序时,会发现帽子离人脸标记较远。这是预料之中的,因为帽子被添加到场景原点,而人脸标记被添加到y坐标为300的位置。

       
       

      第4步 - 使帽子贴到人脸标记上

      为了使帽子移到头部位置,我们可以让帽子依附到一个人脸标记点。例如,我们可以用“鼻梁”标记点。我们使用AR人脸摄像头时,人脸对象的名称总是为“ARHead”。一定要在下拉菜单中选择对应的角色,目标高度仍为80。


       
      现在帽子移到了鼻梁标记点的上方。为了有助于大家分辨出哪个标记点是鼻梁,下方截图中显示为绿色。

       
       

      第5步 - 旋转帽子

      大家可能注意到了,帽子的方向不对。尖的一侧应当在前面。大家可以将帽子旋转180度:

      旋转帽子前后对比如下:

       
       

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

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

      现在帽子会跟踪人脸,但位置有些偏离:

       
       

      第7步 - 移动并转动帽子

      帽子看起来有3个问题。

      • 第一,其位置太靠前、太低。我们要向后、向上移动。
      • 第二,向上倾斜,我们要沿x轴向下旋转。
      • 第三,有点小,我们要增加目标高度。

      这个具体值应当因人而异。

       
      现在帽子看起来真实多了:

       
       

      创意扩展

      大家可以用这个方法在用户面部添加其他虚拟物体。有以下一些思路供参考:

      • 切换装束:可以添加一个按钮,当用户点击按钮时,移除当前装束,并添加一个新装束。提示,大家可以在“模型”库中搜索“帽”、“耳机”、“王冠”等等,不限于“帽”。
      • 搞笑的眼球:可以用足球或篮球盖住用户的两只眼睛。
      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维 - 点选字母(难度:2级)

       

      介绍

      在本教程,我们将开发一个简单的选项程序,有3个字母“A”“B”“C”,点选每个字母时会展示对应的动画,每个字母的动画互不相同。

       
       

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

      新建一个项目,删除小狗角色,在“空的1”角色中添加如下积木。积木“创建三维场景”和“显示三维坐标轴”位于“三维场景”类别中。


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

       
       

      第2步 - 添加造型:字母“A”

      接下来,切换至“造型”选项卡,点击左下角按钮并打开造型库。找到字母“A”的造型“发光字-A”,并选择该造型。

       
       

      第3步 - 将“发光字-A”挤出为三维字母

      现在要把字母添加到我们的三维世界中。造型图像是二维的,没有厚度,为了使它出现厚度,我们将使用“三维物体”类别中的积木“增厚造型”。

      要选中造型“发光字-A”,侧面颜色设置为白色,新物体命名为“A”。

       
       

      第4步 - 让字母旋转

      为了好玩,我们让字母旋转。可以设置速度“Z轴旋转”,即可让字母绕z轴旋转。可尝试不同的速度,如200。


       
      现在就得到一个旋转的三维字母A,如下所示:

       
       

      第5步 - 添加造型“发光字-B”并挤出增厚

      接下来,我们添加造型“发光字-B”。

       
      然后,复制代码积木使这个新字母增厚并旋转。不要忘了命名为“B”。如果还是命名为“A”,那么原来那个字母对象“A”就会被删除。

       
      现在2个字母对象一起旋转:

       
       

      第6步 - 把字母“B”移到左边

      为了把两个字母分开,我们可以把字母“B”移到左边。因为x轴指向右,我们可以把“B”的x坐标设为负值。

      注意,对象“A”不会移动,因为在积木“将x设为”的前面最后添加的对象是“B”,所以这个积木只作用于对象“B”。此时,对象“B”是活跃的“角色对象”,所有操作都是针对对象“B”,一直到另一个对象被选取作为新的角色对象。

      得到如下结果:

       
       

      第7步 - 在右边添加字母“C”

      添加字母“C”的步骤相同,可以重复使用添加“B”的积木。

      现在有3个字母物体:

       
       

      第8步 - 开启物体选取

      接下来,我们让用户能够用鼠标选取这3个对象。方法就是用积木“开启选取事件”。输入框空着,以便于当前角色中的全部对象都变成可选取的。

       
       

      第9步 - 处理选取事件

      为了让物体被选中时做一些动作,我们要使用帽子积木“当这个角色中的一个物体被选取时”。

       

      添加这个帽子积木后,每当某个物体被选中,报告积木“被选取物体名字”就会告诉我们该物体的名称。如果没有物体被选中,该积木就报告一个空值。可通过在舞台上显示该积木的值来验证:

       
       

      第10步 - 选中被鼠标选取的物体对象

      假如我们要让被选取的物体跳动,在此之前,**一定要把选取的物体设置为角色物体。**否则,动作积木就无法应用到对应的物体。

      可利用名称选择物体,使用积木“被选取物体名字”来获取物体的名称。注意舞台下方的物体列表,现在当你点击不同的物体,角色物体名称就随着变动。

       
       

      第11步 - 让字母“B”跳动

      假如我们要让字母“B”被选取时跳动。通过检查“被选取物体名字”来检验被选取物体是否为字母“B”。然后通过设置“上升速度”让它跳起,然后设置一个较大的“重力加速度”让它快速下落:


       
      现在只有点击字母“B”时才会跳动:

       
       

      第12步 - 让字母“A”摆动

      相同地,当点击字母“A”时,我们让它微微摆动。可通过绕“y轴”旋转来实现:


       
      结果如下:

       
       

      第13步 - 让字母“C”膨胀

      最后,字母“C”,我们让它膨胀再回缩,可使用积木“更新比例”:


       
      最终结果如下:

       
       

      创意扩展

      你可以进一步扩展这个项目,以下是一些思路:

      • 其他物体:“选取”事件是三维程序中最常见的用户互动方式,可用于任意物体。
      • 其他动画效果:你可尝试当物体被选取时修改物体的颜色/纹理/光泽/动画。
      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维 - 带孔的立方体(难度:2级)

       

      先修科目

      • 三维 - 魔方(难度:2级)

       

      用到的相关知识

      • 创建三维场景
      • 使用变量
      • 使用变量循环
      • 使用盒子
      • 父子对象关系
      • 物体命名
      • 三维物体的速度
      • 将物体导出为GLB文件
      • 社区模型

       
       

      介绍

      在这篇教程中,我们将制作一个带孔的立方体,并且我们可以利用变量控制孔的位置。预览如下:

       

      第1步 - 改编并检查

      请在浏览器新标签打开下方项目,然后改编。

      https://play.creaticode.com/projects/0068cbafa5ad0c465f966315

      这个项目基于教程《三维 - 魔方(难度:2级)》,这个教程制作了一个包含5层、5行、5列的盒子阵列。

      由于所有盒子是一样的,所以看起来就是一个大的立方体。另外,自制积木“添加盒子“设置为”运行时不刷新屏幕“,让程序运行更快。

       

      第2步 - 在中间留一个缝隙

      现在我们开始在立方体中开一些孔。关键思路就是某些条件为真时不添加盒子。

      首先,添加一个积木“如果<>那么…否则…”,把条件设置为“x = 0”。然后就可以把添加盒子的积木放到“否则”分支里面。这样的话,每当变量x为0,我们就不添加盒子,就会在立方体中间留出一个缝隙。

       

      第3步 - 留一个洞

      我们改进一下条件,现在我们留一个洞,而不是一个缝隙。

      具体方法就是,检查x和y是否同时为0,只有满足此条件时,我们才不添加盒子。结果,在这个新的程序中有5个盒子略过没有加进去。

       

      第4步 - 第二个洞

      接下来,我们再添加一个洞,从前到后穿过立方体。这次我们要用一个新的条件:变量x和z都为0。只需要再添加一个积木“如果<>那么…否则…”,如果两个条件有一个成立就不添加盒子。

       

      第5步 - 第三个洞

      现在请大家尝试添加第三个洞,从左到右穿过立方体。

      包含3个“如果<>那么…否则…”分支的完整程序如下:

       

      第6步 - 使内部空间更大

      假如我们要在立方体内部挖一个更大的空间,可以把条件设置为:如果三个变量x、y、z全部小于等于100,我们就不添加盒子。提示,积木“绝对值( )”用来取绝对值,那么,如果x为-100,“绝对值(-100)”就为100.

      结果如下:

       

      第7步 - 添加一个转换器父节点

      到目前为止,所有盒子都是相互独立的。为了把所有盒子变为一个对象,我们要将一个别的对象设置为所有盒子的父节点。

      做法就是,首先添加一个新的“转换器”对象,命名为“方块”。这个对象不可见,但我们仍然可以用来控制它的子对象。

      然后,我们要把“方块”设置为所有盒子的父节点:

       

      第8步 - 使立方体旋转

      尽管我们得到的立方体和前面的一样,但现在我们能够利用父节点把所有盒子当做一个对象来控制。

      例如,我们使整个立方体绕z轴旋转。其做法为,首先要根据名称选取转换器对象“方块”。这样的话,下面的所有积木都会应用到这个父对象。然后,我们把父节点的“z轴旋转”速度设置为100,所有子对象盒子就会随父对象一起旋转。

       

      第9步 - 把这个立方体导出为GLB文件。

      如果你想让别人使用你刚刚制作的立方体,就可以导出为GLB文件。GLB格式是一种三维模型格式,就好比JPEG是二维图像格式,很多三维软件接受GLB格式文件。

      若要导出物体对象,只需要使用如下积木,并指定所要导出的对象名称“方块”。所有子对象都会被导出,这样就确保整个立方体导出为一个模型文件。

       

      第10步 - 上传并分享自己的GLB模型文件

      你可以在创益编程社区分享自己做的GLB模型文件。这种模型被称为”社区模型“。

      只需进入“我的东西”页面,点击“三维模型”,然后根据引导上传GLB文件。上传以后,所有用户都能把你的模型加载到他们的场景中。

       

      创意扩展

      这个项目可以改编成多种样式。下面是一些创意想法:

      1. 不同的条件:你可以尝试其他条件,如“x + y = 100”、“x * y = 10000”诸如此类。

      2. 其他形状:把盒子换成球体或柱体,作为堆叠积木。

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维 - 魔方(难度:2级)

       

      用到的相关知识

      • 创建三维场景
      • 使用变量
      • 使用变量循环
      • 使用盒子
      • 在控制台打印消息
      • 三维坐标和位置

       
       

      介绍

      在本教程,我们将制作一个魔方,预览如下:

       

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

      首先新建一个项目,删除角色1,在“空的1”角色中添加如下这些积木。积木“创建三维场景”和“显示三维坐标轴“在”三维场景“类别中。


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

       
       

      第2步 - 添加一个盒子

      现在添加魔方的第一个盒子。在“三维物体”类别中找到积木“添加6色盒子”,然后把6个面的颜色换为自己喜欢的任意颜色。3个维度可以保持100不变。


       
      这个盒子将被添加到位置(x=0, y=0, z=0),也就是说其中心点位于三维坐标系的原点。你可以放大进行验证。

       
       

      第3步 - 在右侧再放一个盒子

      现在再添加一个盒子。要把这个盒子移到不同的位置,以免和第一个盒子重叠。
      如下所示,你可以先复制积木“添加6色盒子”,然后把新盒子的x坐标设为100。


       
      注意:尽管有2个盒子,但看起来像是一个宽盒子,因为两者之间没有缝隙。

       
       

      第4步 - 减小盒子的尺寸

      为了让盒子之间有一个小缝隙,我们可以减小盒子尺寸,还可以增加盒子之间的间距。比如,我们把盒子尺寸从100减至98:


       
      现在2个盒子之间就有了一个缝隙:

       
       

      第5步 - 添加第三个盒子

      添加第三个盒子与第二个盒子类似,就除了要放到左边,x坐标为-100:

       
       

      第6步 - 使用变量循环

      尽管非常容易像这样复制积木来添加盒子,但有更快的方式来编写这个程序。例如,我们可以用“变量循环”。
      你需要定义一个新变量“s”,然后用变量循环让s从-100走到100,步长为100。这样的话,s从-100开始,然后变为0,然后变为100。

       
      现在我们修改程序,用变量s来创建和移动盒子:

      现在我们得到了同样的结果,而程序更容易修改。例如,若要修改盒子的颜色和尺寸,只需要在一个积木中修改。

       
       

      第7步 - 3排盒子

      现在我们制作了一排3个盒子,接下来我们要制作3排(9个盒子)。这3排分别放在不同的y坐标上:-100、0、100。

      需要定义一个新变量“t”,然后添加一个新的变量循环,使t取值-100、0、100。


       
      现在我们把这个新的变量循环放到原有变量循环外面,然后用变量s和t移动盒子。

       
       

      第8步 - 打印变量x和y

      由于程序运行非常快,根本看不到程序的运行过程。你可以用一个很方便的工具来帮助你了解事件的顺序:打印日志。
      做法就是,在变量循环中添加积木“打印( )到控制台,然后添加一个积木“将( )( )( )通过( )连接”,用以读取变量x和y。

       
       

      第9步 - 3层盒子

      最后一步,我们要创建3层盒子(27个)。这3层竖着叠起来,z坐标分别为-100、0、100。
      修改方法类似,就是再加一个变量循环,使用新变量“u”。为了把盒子移到某个z坐标,你要用积木“将z设为( )”。

       
       

      第9步 - 5乘5乘5

      因为我们用的是变量循环,很容易修改变量的范围。例如,我们可以让这3个变量都从-200走到200,每个变量就取5个值(-200、-100、0、100、200)。


       
      5层魔方如下:

       
       

      创意扩展

      从这个基本的魔方项目,你可以扩展成多种形式。下面是一些创意想法:

      1. 其他形状:魔方并不一定非要用四方块,对吧?你可以尝试用其他形状,如球形、圆柱体。

      2. 随机旋转:每个盒子可以随机朝向不同的方向。添加每个盒子时,你可以用积木“旋转到x( ) y( ) z( )”进行随机旋转。

      3. 其他整体形状:除了立方形,你还可以用变量循环把盒子堆成其他形状,比如金字塔形、树形。

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维 - 停车让行标志(难度:2级)

       

      用到的相关知识

      • 创建三维场景
      • 使用柱体
      • 三维旋转
      • 三维文字

       
       

      介绍

      在本篇教程中,我们将制作一个停车让行标志,如下所示:

       
       

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

      新建一个项目,删除小狗角色,然后在“空的1”角色中添加如下这些积木。积木“创建三维场景”和“显示三维坐标轴”位于“三维场景”类别中。


       

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

       
       

      第2步 - 添加一个八边柱体

      因为停车让行标志有8个侧面,我们可以用积木“添加柱体”来制作。因为停车标志很薄,所以“高度”应当比直径小得多。


       
      你就会得到如下物体:

       
       

      第3步 - 旋转柱体

      这个柱体有个问题:它的尖角指向前方,而我们要让侧面指向前方。因此,我们需要旋转一定角度:


       

      为了做到这一点,需要让柱体绕z轴旋转22.5度。你可以用方向工具精确设置旋转角度。


       

      使用如下积木进行旋转:


       

      如果你好奇为什么是22.5度,可以计算一下旋转角度:8个侧面,每个侧面角度为360÷8=45度,一半就是22.5度。

       
       

      第4步 - 让柱体“站立起来”

      因为停车让行标志都是竖着的,我们需要再旋转一下这个柱体。缓慢旋转过程如下图所示。试试看你可以自己实现吗?


       
      我们要让柱体绕x轴旋转90度:

       
       

      第5步 - 添加白边

      接下来,请尝试添加如下白边。你能想到是如何添加的吗?


       

      白边可以用比这个柱体稍大一点的柱体。我们只需要复制红色柱体的积木并增加其半径。为确保新柱体不会覆盖到红色柱体的前后面,我们需要让新柱体薄一点,把高度设置为7:

       
       

      第6步 - 添加文字“停”

      最后一步,我们要添加三维文字“停”。其宽度也应当为100,以便于让文字适合柱体区域。


       
      注意:当你添加文字后,文字在柱体内部,所以我们看不到。需要把文字沿y轴移到前面,就会在柱体前面显示了。

       
      下面是完成的程序,供大家参考:

      5.png

       
       

      创意扩展

      这个项目可以扩展成多种形式。下面是一些创意想法:

      1. 其他交通标志:你可以按照这个方法制作其他交通标志,使用不同的文字和不同的颜色。

      2. 路名:你可以尝试在停车让行标志上方添加路名标志牌,两者都要绑在柱子上。

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维 - 把制作的飞碟存为模型(难度:2级)

       

      用到的相关知识

      • 父子对象关系
      • 物体命名
      • 三维物体的速度
      • 将物体导出为GLB文件
      • 社区模型

       
       

      介绍

      在之前的教程中,大家学会了如何制作外星飞碟。在本教程中,大家将学习如何控制飞碟飞行,以及如何让别人也能使用你做的飞碟模型。

       
       

      第1步 - 将之前的飞碟项目保存副本

      首先,进入创益编程网站“我的东西”页面,找到你之前做的飞碟项目。如果还没做,请先学习这篇教程。

      把飞碟项目保存副本,并重新命名,比如“飞行的飞碟”。推荐大家要保存项目副本,这样的话,如果你不小心误删了某个积木或者角色,就可以从原项目恢复过来。

       
       

      第2步 - 为飞碟的每个组件命名

      目前,我们的飞碟有3个组件。为了让这3个组件成为一体,我们需要用“父子对象关系”把它们绑定到一起。

      方法为,首先需要为每个组件命名,例如,主体命名为“主体”,另外2个组件分别命名为“组件1”和“组件2”:

       
       

      第3步 - 建立父子关系

      现在我们把“主体”设置为2个子组件的父节点。


       
      注意:这一步完成后,运行项目时仍然看不到什么区别,但现在飞碟可作为一个对象了,而不是3个。

       
       

      第4步 - 让飞碟飞行、旋转

      做个小实验,我们让飞碟飞行、旋转。为了控制整个飞盘,我们要选择父对象“主体”作为角色对象。当我们设置了“主体”的旋转速度和上升速度,子对象就会跟随做同样动作。

       
       

      第5步 - 将飞碟保存为模型文件

      假如你非常喜欢自己做的飞碟模型,想在其他项目使用这个飞碟,也想让别人使用。那么,就需要把飞碟对象保存为GLB文件。

      只需运行这一个积木(可放在代码编辑器的任意地方):

       

       

      第6步 - 减小模型文件

      GLB模型文件有时非常大。加载大型文件需要花较长时间,所以大家一般更喜欢较小的模型文件。

      为了让文件变小,我们可以将球体的“侧面数”由64减至32或16。外观质量没有太大变化,而文件就小多了。

       
       

      第7步 - 上传并分享社区模型

      现在我们有了GLB文件,就可以上传为新的“社区模型”,以便于你自己和创益编程上的其他用户免费使用该模型。

      做法为,进入“我的东西”页面,点击“3D模型”类别。点击“共享一个新模型”,然后选择你要上传的GLB文件。


       
      注意,根据文件大小不同,上传一个模型文件有时需要好几分钟。

       
       

      第8步 - 在新项目中使用社区模型

      为了试验新模型,你可以新建一个带空场景的项目,然后用积木“添加社区模型”来加载模型:


       
      这时你就可以像使用模型库中的其他模型一样来使用这个飞碟对象。

       
       

      创意扩展

      你可以用这个方法制作并分享很多种模型,例如一个房子、一张笑脸。

      此外,你可以尝试通过修改飞碟的几何形状和材质来让模型文件更小。例如,试试将侧面数由64减至32或16,看看文件是否变小。

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维 - 随机彩盒三维艺术(难度:2级)

       

      用到的相关知识

      • 使用盒子
      • 取随机数
      • 三维坐标和位置
      • 颜色的使用

       
       

      介绍

      在本教程中,大家将用很多盒子建造一个三维世界,并将学习如何利用随机数建造三维艺术。

       
       

      第1步 - 新建一个项目

      首先,在创益编程游乐场新建一个项目,删除角色1,在角色“空的1”中添加如下积木:


       
      一个空的三维场景就创建好了。

       
       

      第2步 - 添加10个盒子

      接下来,我们用“重复执行”循环来添加10个盒子。你可以为盒子设置任意颜色。


       
      注意,因为这些盒子都重叠在一起,所以看上去就只有一个盒子:

       
       

      第3步 - 将盒子移动到随机位置

      为了让盒子分开,我们可以利用积木“取随机数”,把它们移动到随机的X/Y/Z坐标。


       
      每个盒子的x坐标取-300至300之间的一个随机数,y坐标和z坐标同样:

       
       

      第4步 - 盒子形状随机

      接下来,我们把每个盒子改成随机形状。因为盒子的形状由长、宽、高决定,就可以把这3个数设置为随机数。


       
      注意:盒子的三个维度都不能为负数,所以都取10至100之间的随机数。

       
       

      第5步 - 盒子颜色随机

      现在我们也让盒子颜色随机。为了做到这一点,我们不能用拾色器下拉菜单来设置颜色。而是要用颜色计算器积木。在这个项目中,我们让颜色、饱和度随机,亮度为100。


       
      因此,每次我们都能得到不同颜色的盒子。因为我们使“颜色”的值取1至30之间的随机数,生成的颜色就为红、绿之间的随机颜色。

       
       

      第6步 - 添加更多盒子

      现在我们尝试使用更多盒子,并扩大颜色和位置的范围:


       
      你会发现结果更有趣了,但运行时间也更长了:

       
       

      第7步 - 提速

      为了让程序提速,常用的方法就是不让屏幕刷新:不要每添加一个盒子就刷新一次屏幕,而是等到全部盒子添加完毕后,仅刷新一次屏幕。

      为了做到这一点,我们新建一个积木“添加盒子”,并勾选“运行时不刷新屏幕”:


       
      然后,把重复执行循环移到积木“添加盒子”的定义中:


       
      现在我们的程序至少要快10倍了!

       
       

      第8步 - 设置天空背景

      最后,为了让场景更好看,我们可以添加一个星空背景。注意,把天空设置为星空后,我们还需要把摄像头移近些:

       
      最终演示效果如下:

       
       

      创意扩展

      尝试使用你学到的新方法来制作不同的作品。下面是一些创意想法:

      • 不同的形状:不要只用方形盒子,何不试试其他形状?
      • 不同角度:还可以随机旋转物体,对吧?
      • 物体都放到地面上:把所有物体都放到地面上,就像在草地上一样。
      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维 - 无人机飞行(难度:1)

       

      覆盖的关键课题

      • 创建三维场景
      • 设置物体速度
      • 使用模型
      • 追踪摄像头

       
       

      介绍

      在这个教程中,我们会操控无人机跨越一个场景:

       

       

       

      步骤 1 - 创建一个三维场景

      创建一个新项目,并移除小狗角色。在“空白1”角色中,添加绿旗积木以及"创建三维场景"编程积木。请选择一些自带物体的场景,比如“城堡”、“城市”、“花园”和“村庄”。需要注意的是,如果你的电脑运行得比较慢,“城市”和“村庄”场景需要用更长时间来加载。

       

       

       

      步骤 2 - 添加一个无人机模型

      你可以通过积木"添加模型"来添加一个无人机模型。点击输入框“请选择”,将会弹出模型库,你可以选择自己喜欢的模型。需要注意的是,你需要为无人机设置一个合理的高度,以便它看起来不会太大,也不会太小。

       

       

      需要注意的是,如果你把这个积木独立开来,只点击这个积木,运行速度会比较快。如果你把这个积木放到“创建三维场景”积木下面并一起运行,那就会需要更长时间。

       

      步骤 3 - 添加一个追踪摄像头

      因为无人机会到处飞行,我们不能使用静止的摄像头。相反,我们需要使用一个"追踪摄像头",无论目标物体去哪里,这种摄像头就会跟随到哪里。

       

       

      需要注意的是,你需要把”主方向“设置为”目标“,从而使摄像头永远和无人机面向同一个方向。

       

      步骤 4 - 新建一个积木”操控按钮“

      为了把所有操控逻辑都放在同一个地方,让我们首先新建一个积木,名为”操控按钮“。你还可以为这个积木选择一个新的颜色。

       

       

       

      步骤 5 - 当”e“键被按下的时候上升

      我们让无人机在按下”e“键时升起,在没有按键被按下时停下。我们需要一个”重复执行“循环来持续检查”e“键是否被按下。要让无人机上升和停止,我们可以把对应的"上升速度"分别设置成400和0。

       

       

      按下”e“键时如下所示:

       

       

       

      步骤 6 - 当”q“键被按下时下降

      每当”q“键被按下的时候,我们应该把”上升速度“设置成一个负数,以便无人机会下降。你自己可以添加这个逻辑代码吗?

       

       

      修改程序如下:

       

       

      使用“上升速度”的一个好处就是无人机将不会降落到地面以下(Z坐标为0)。请尝试做做看。

       

      步骤 7 - 当”a“键被按下时左转

      每当“a”键被按下时,我们应该通过设置“Z轴旋转”速度来使无人机左转。同样地,当没有按键被按下时,我们应该把Z轴旋转速度重置为0:

       

       

      需要注意的是,这是一个新的“如果-否则”分支,而它应该被放置在前一个的“如果-否则”分支的下方,这是因为处理旋转速度和上升速度的逻辑并没有依赖关系,是相互独立的。举个例子,无人机可以同时上升和旋转。

       

       

       

      步骤 8 - 当”d“键被按下时右转

      接下来,你可以自己尝试让无人机在按下“d”键时右转吗?

       

       

      这是其中一个办法,我们只需要把“Z轴旋转”从-100设置成100。

       

       

       

      步骤 9 - “w” 和 "s"键用以向前移动和向后移动

      最后,我们需要再添加两个按键:“w”键让无人机向前飞,而“s”键让无人机向后飞。你可以把对应的“前进速度”分别设置成一个正数和一个负数。

       

       

      添加新积木的方法如下:

      最终程序如下所示,以供参考。

       

      创意扩展

      你可以有很多办法来扩展这个程序。下面是一些创意想法:

      1. 更换无人机: 你可以选择一些其他模型用以飞行,并可以更改其颜色 和材质。

      2. 寻宝游戏: 你可以尝试在场景内放置一些奖品,并让玩家寻找奖品。

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维 - 迷宫游戏(难度:3级)

      用到的相关知识

      • 创建三维场景
      • 绘制造型
      • 将二维造型挤出为三维物体
      • 调整物体大小
      • 更新物体纹理
      • 三维物体的速度
      • 三维方向和旋转
      • 在场景中添加化身
      • 追踪摄像头
      • 化身动画
      • 用射线投射检查物体碰撞

       
       

      介绍

      在本教程中,我们将制作一个简单的三维迷宫游戏,一个人物角色在你设计的迷宫中跑动。效果如下:

       

      第1步 - 创建一个“草地“场景

      首先新建一个项目,并删除小狗角色。在“空的1”角色中,添加绿旗积木和积木“创建三维场景”。注意,你需要点击输入框并选择“草地“场景。这是个轻量级的场景,有一大块草坪和蓝天。

       

      第2步 - 在造型编辑器中添加几个矩形方框

      现在我们来设计迷宫。添加一个空的角色,命名为“迷宫”。进入造型编辑器选项卡,绘制矩形方框。更改为无填充色,在轮廓中拾取一种颜色,然后绘制多个方框。这些方框将转化为三维迷宫的城墙。

       

      第3步 - 在城墙上打开几个缺口

      现在我们需要在城墙上打开几个缺口。我们可以用橡皮擦工具擦除部分城墙并形成缺口;

       

      第4步 - 将二维造型挤出为三维

      现在我们把这个二维迷宫挤出为三维迷宫,要使用“挤出”工具。

      在第一个角色中,发送一条消息——“添加迷宫”:

      在“迷宫”角色中,当收到“添加迷宫”消息,就运行积木“挤出”:

      现在就可以在三维场景中看到迷宫了:

       

      第5步 - 旋转迷宫并缩放迷宫

      三维迷宫有些问题,是竖着的,而且太小了。因为x轴朝向右,为了把迷宫变成水平的,我们将其绕x轴旋转270度(或-90度)。

      我们还可以把迷宫三个维度都放大20倍。迷宫角色更新后的代码如下。

      现在我们就得到一个漂亮的三维迷宫:

       

      第6步 - 更换城墙材质

      为了让城墙更逼真,我们可以更换城墙材质,通过在迷宫角色中添加如下积木来实现。大家可以随意尝试不同的材质。

      就会得到更好看的城墙,如下所示:

       

      第7步 - 添加人物角色

      接下来,我们回到第一个角色,用如下积木添加人物角色:

      默认情况下,这个人物站在中央:

       

      第8步 - 添加一个“追踪”摄像头

      为了让游戏玩家总是能看到人物前面的东西,我们在人物后面添加一个“追踪”摄像头,“主方向”设置为“目标”。这意味着摄像头方向永远与人物的方向一致。

      当人物跑动时,摄像头会跟随人物,我们就不能再用鼠标指针来旋转摄像头。

       

      第9步 - 按“W”键前进

      为了让人物跑动,我们要制作一个新的积木,命名为“操作键”,用以操作按键事件。在这个新积木的定义中,首先编辑“W”键,“W”键让人物向前跑。注意,在“重复执行”循环中我们要设置简短的等待时间,否则人物就跑得太快了。

      现在,如果我们按“W”键,人物就向前奔跑,摄像头会一直跟随人物:

       

      第10步 - 左转、右转

      接下来,我们再添加2个按键:按“A”键左转,按“D”键右转。注意,这个新的逻辑与“W”键无关,所以我们可以同时进行跑动和转向。

      现在,人物可以在三维迷宫内穿行了:

       

      第11步 - 添加跑步动画

      为了让人物跑动,我们需要做两处改动。

      首先,需要为人物加入“跑”动画。就如同教人物如何跑步:

      然后,我们要根据是否按下“W”键来启动动画“跑”还是“待命”。注意,我们不需要添加“待命”动画,因为,当人物载入场景时默认添加“待命”动画。

      这一步完成后,人物就出现奔跑动画:

       

      第12步 - 撞到城墙即停止

      最后一步,我们要让人物碰到城墙后停止前进,从而让人物寻找迷宫出路。

      首先,我们要在人物角色和迷宫角色之间打开碰撞。“Z位移”要设置为人物高度的一半,在这个项目中为50。若需深入了解这个积木,请查看这篇教学内容。

      接下来,我们需要更改人物移动的方式。不用积木“移动”,而是要用积木“设置速度”让人物奔跑和停止。

      得到的最终结果如下:

       

      创意扩展

      从这个基本的迷宫游戏,你可以扩展成多种形式。下面是一些创意想法:

      1. 不同场景:这个迷宫游戏还可以做成乌龟在水下迷宫游泳、飞机在空中迷宫飞行。

      2. 路径标记:如果迷宫太过复杂,游戏玩家可能需要一些方法来标记他走过哪些路。

      3. 奖品:我们可以在迷宫中放置一些宝石,让游戏玩家捡宝石,宝石能让游戏玩家跑得更快甚至可以跳过城墙。

      4. 分多种级别:你可以检查人物的位置,看是否走出迷宫。如果成功走出迷宫,你可以展示“已完成级别“信息,然后游戏玩家点击一个按钮进入下一级别。

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 三维 - 艺术字(难度:2级)

       

      用到的相关知识

      • 三维文字
      • 图像处理特效
      • 设置摄像头参数

       
       

      介绍

      在本教程,大家将利用三维文字和图像处理特效制作精美的三维艺术字。

      b10.gif

       
       

      第1步 - 新建一个项目

      在创益编程游乐场中新建一个项目。删除角色“角色1”,然后在角色“空的1”添加如下积木,即可初始化一个空场景。

      1.png

       
       

      第2步 - 设置背景

      现在我们用自己喜欢的颜色制作一个漂亮的背景。同时,要用图像处理特效添加深色的边角。需要添加如下2个积木:

      2.png

       
      注意:对于图像处理特效,我们使用“抗锯齿”和“锐化”效果,可使三维文字更加光滑。另外,“泛光强度”设置为55,以便于使文字闪烁光芒。

      这一步完成后会得到类似如下结果:

      1851d734-c460-45b6-ae9e-e1de40892373-image.png

       
       

      第3步 - 添加三维文字

      我们使用“三维加厚文字”,这种文字具有厚度,并支持很多种有趣的字体。

      你可以选择任意文字、任意字体类型。这个例子中使用字体“Happy Holidays”。注意,我们把文字命名为“c”,以便于稍后删除。

      3.png

       
      文字如下所示:

      b5.gif

       
       

      第4步 - 给文字添加自发光颜色

      为了让文字发光,我们需要给文字添加自发光颜色,比如白色。可以用如下积木“更新颜色”:

      4.png

       
      现在整条文本更亮了,尤其是当我们从上下观看时更亮。这是因为场景“空无”有2个发光源,上下各一个。

      b6.gif

       
       

      第5步 - 添加水平光

      为了让文字在前方看时更亮,我们需要再添加水平光:

      5.png

       
      由于我们添加了“辉光效果”,现在我们从前方看,文字就会闪光。

      b7.gif

       
       

      第6步 - 旋转摄像头

      为了从不同角度观察文字上的闪光,我们可以为摄像机添加动画,通过设置摄像头属性来完成。下图中3个积木使摄像头从水平角度210度开始旋转,向右旋转到角度150度,用时4秒,然后使摄像头回到180度的中心位置:

      6.png
       
      结果我们就得到如下旋转、闪光的文字:

      b8.gif

       
       

      第7步 - 摄像头拉近

      最后,使摄像头向文字拉近,文字就变得越来越大。很容易做到这一点,就是把摄像头距离在几秒内缩小到0:

      7.png

       
      就得到如下效果:

      b9.gif

       
       

      第8步 - 删除文字

      在上一步,尽管摄像头的距离为0,我们仍然能看到一部分文字。我们可以在最后删除文字,就解决了这个问题:

      8.png

       
      最终结果如下:

      b10.gif

       
       

      创意扩展

      请大家亲自动手制作其他样式的艺术字。下面是一些创意想法:

      • 调整颜色/材质/字体:通过使用不同的颜色、材质和字体,让文字外观有所不同。

      • 不同的动画:你可以更改摄像头绕文字旋转的方式,或者使文字移动或旋转。

      • 把单词分解为字母:不把整个单词当做一个三维文字对象,而是把每个字母都作为一个单独的文字对象,并为它们添加不同的动画。

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 二维 - 可持续发展目标1 - 非洲贫困率(难度:3)

       

      主要的相关课题

      • 绘制造型
      • 克隆角色
      • 图形特效积木
      • 变量简介
      • 读取表格
      • 在舞台上打印文字
      • 积木——“当碰到( )时”

       
       

      介绍

      可持续发展目标 是联合国于2015年正式通过的17个目标。这17个目标是每个人都要完成的学习清单。

      本教程是关于非洲国家的贫困率,与第一个目标“消除贫困”相关。

      在本项目中,用户可以在地图上选择一个国家,然后显示这个国家贫困线以下的人口比例。这些人口日收入不足1.9美元,很难满足食品和医疗等基本需求。大部分贫困国家在非洲,这张地图清楚地告诉我们哪些国家最需要帮助。

       

      第1步——改编模板项目

      首先,点击下方链接,即可打开项目模板:

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

      点击按钮“改编”,即可生成自己的改编项目。注意,你需要登录之后才能操作这一步。

      1.png

      该项目包含一个角色“非洲各国”,里有55个造型。每个造型就是一个国家的地图,造型就以国家名称命名。还有一个表格“非洲国家”,包含了这55个国家的贫困率。

       

      第2步——画一个深色的背景

      首先画一个渐变色背景。点击“舞台”图标,然后画一个矩形,要覆盖整个舞台。然后选择渐变填充模式,选2种自己喜欢的颜色:

       

      第3步——为背景添加标题

      在背景上添加标题,就写一个“非洲贫困率”。你可以用文本工具“T”在背景上添加文字。还可以更改文字的颜色、位置和大小。

       

      第4步——创建55个克隆体

      现在我们准备好添加地图了。因为有55个国家,我们要为角色“非洲各国”创建55个克隆体,让每个克隆体显示不同的造型。

      为了创建这些克隆体,你可以用一个计数循环“让变量(i)从( )走到( ) 步长( )”,和一个新变量“i”,这个变量就会从1走到55。在计数循环中创建克隆体,用变量“i”作为克隆体的编号ID。

       

      第5步——每个克隆体显示不同的造型

      接下来,我们要处理每一个克隆体。首先要使用积木“当作为克隆体启动时”,并在下面添加2个积木。

      • 我们将根据“克隆体ID”切换至不同的造型。每个克隆体都有自己的“克隆体ID”,各不相同。“克隆体ID”是一个介于1至55之间的一个数,那么这些克隆体将显示从造型1至造型55。
      • 原始角色“非洲各国”设置为隐藏。那么,当某个克隆体切换至对应造型之后,我们需要显示该克隆体。

       

      第6步——移动每个克隆体

      我们看不到整个地图,而地图随着造型变换,造型的位置决定了地图的位置。这容易解决,就是把每个克隆体向左上方移动。

       

      第7步——不让屏幕刷新

      目前,创建全部55个克隆体需要一定时间,因为添加每个克隆体之后,屏幕会刷新以显示地图的变化。为了让程序运行更快,我们创建一个不刷新屏幕的新积木,并把代码积木放到这个新积木的定义中。这样的话,只有当添加完全部55个克隆体后,屏幕才会刷新。

       

      第8步——将克隆体设置为随机颜色和随即亮度。

      接下来,我们要让地图好看一些,方法就是把每个克隆体设置为不同的颜色和亮度。注意,要让地图亮一些,但不能太亮,我们就选40至70之间的一个随机数。

       

      第9步——从列表读取贫困率

      为了显示贫困率,首先需要在每个克隆体中读取表格。请新建一个变量“贫困率”并选择“仅适用于当前角色”。这样的话,每个克隆体都有一个变量“贫困率”。

      现在就可以利用列名“数据”和行号“克隆体ID”从表格中读取贫困率。之所以能做到这一点,是因为造型和表格中的行都是按顺序排序的,并且一一对应,所以造型1的国家与表格的第一行的国家是同一个。

       

      第10步——显示国家名称和贫困率

      每当用户点击任意一个国家,我们就要显示这个国家的名称和贫困率。我们可以用积木“当角色被点击”,在所有克隆体上都起作用。然后让角色说出国家的名称和贫困率。注意,国家名就是造型的名称。

      现在这个项目就可以运行了:

       

      第11步——鼠标指到的国家高亮显示

      为了让地图更具交互性,我们将鼠标指到的国家高亮显示。这一事件被称为“当碰到(鼠标指针)时”,我们只需要把克隆体的亮度增加50:

       

      第12步——恢复亮度

      还有个小问题:当鼠标移开某个国家之后,这个国家仍然是高亮的。为了恢复初始亮度,需要等到鼠标移出某个国家后再使亮度减小50:

      最终结果如下:

       

      下一步

      这个项目还可以扩展成其他样式,有很多种方法。如下是一些例子:

      • **在舞台上打印贫困率:当鼠标指到某个克隆体,我们就在舞台上打印对应的国家和贫困率。

      • **其他指标:除了贫困率,还可以显示其他一些重要的指标,如平均寿命或者儿童死亡率.

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 克隆角色

      介绍

      在有些项目中,我们需要用到很多个表现相同的对象。例如,我们想让10只小狗在舞台上随意走动。比较幼稚的方法就是创建10个小狗角色并分别添加代码积木。问题是,大部分代码是相近的,所以我们要重复添加相同的积木10次。

      更好的方法就是用“克隆”。当我们克隆某个角色,就是新建这个角色的副本,包括其代码积木、造型和声音。不过,一个主要区别就是,只有当程序开始运行后我们才新建角色副本。所以,在程序开始后,我们对角色的代码和造型所做的全部更改都会完好无损地复制过去。当程序结束时,所有克隆体都被自动删除。

      与克隆相关的所有积木都在“控制”类别:

       

      如何克隆?

      可使用该积木进行克隆:

      • 角色列表:第一个参数指定克隆哪个角色。“自己”就是该积木所在的本角色。如果项目中还有其他角色,例如“篮球”、“棒球”,其名称也会显示在该列表中。

      • 克隆体ID编号:第二个参数可以给克隆体赋值一个数字或文本。如果空着,就会给新的克隆体赋值一个随机的唯一ID。

      例如,这个程序会创建3个克隆体,ID编号分别为“1”、“2”、“3”。

      注意:你看不出来有3个克隆体,因为克隆体都和原角色重叠在一起,位置、大小和造型都完全一样。

       

      创建克隆体后运行的代码

      生成克隆体后,为了让克隆体做一些行为,你可以在这个积木下面添加新的代码积木:

      例如,这段代码让每个克隆体移动到随机位置,这样我们就能清楚看到全部克隆体。注意,原角色不受克隆体行为的影响。

       

      克隆体ID编号

      当创建好所有克隆体之后重新调用这个积木,每个克隆体被赋值一个唯一ID。利用这个积木,每个克隆体都能找出自己的ID。

      例如,我们可以让克隆体报告自己的“克隆ID”:

       

      让克隆体删除自身

      利用这个积木,克隆体做完行为后就可以删除自身:

      注意:不能在这个积木下面连接其它积木,因为克隆体已经被删除。

      在如下示例中,我们让每个克隆体说出自己的“克隆ID”,时长2秒,然后删除自身。

       

      获取克隆体的信息

      舞台下方的角色面板只显示原角色的信息。无论如何,原角色仍然能利用这个积木根据克隆体的ID获取其信息:

      • 属性名称:第一个下拉菜单包含了所能读取的克隆体的属性列表,比如位置、方向和造型。

      • 角色名:第二个下拉菜单指定你想查询哪个角色或者克隆体。
        例如,生成3个克隆体后,你可以通过原角色获取克隆体的“x位置”。

       

      利用消息与克隆体通信

      尽管你可以在积木“当作为克隆体启动时”下面添加克隆体的代码积木,但这些积木只能运行一次。与克隆体“通话”的另一种方式就是广播消息。其好处就是,你什么时候都可以发送消息。

      例如,在这个程序中,生成所有克隆体后,我们在原角色广播“消息1”。还有一个积木用来接收这个消息。因为所有克隆体的代码与原角色相同,所以都会运行这一叠积木“当收到消息( )”。

      注意:原角色尽管不是克隆体,但也会响应“消息1”,并且也有一个随机“克隆ID”。一个普遍的做法就是,只让克隆体运行,隐藏原角色。比如,我们可以检查一下“克隆ID”是否属于我们赋予克隆体的ID范围。如果不是,那我们就在原角色的代码中,所以什么都不做并隐藏角色。

      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 二维 - 可持续发展目标1 - 非洲贫困率(难度:3)

       

      主要的相关课题

      • 绘制造型
      • 克隆角色
      • 图形特效积木
      • 变量简介
      • 读取表格
      • 在舞台上打印文字
      • 积木——“当碰到( )时”

       
       

      介绍

      可持续发展目标 是联合国于2015年正式通过的17个目标。这17个目标是每个人都要完成的学习清单。

      本教程是关于非洲国家的贫困率,与第一个目标“消除贫困”相关。

      在本项目中,用户可以在地图上选择一个国家,然后显示这个国家贫困线以下的人口比例。这些人口日收入不足1.9美元,很难满足食品和医疗等基本需求。大部分贫困国家在非洲,这张地图清楚地告诉我们哪些国家最需要帮助。

       

      第1步——改编模板项目

      首先,点击下方链接,即可打开项目模板:

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

      点击按钮“改编”,即可生成自己的改编项目。注意,你需要登录之后才能操作这一步。

      1.png

      该项目包含一个角色“非洲各国”,里有55个造型。每个造型就是一个国家的地图,造型就以国家名称命名。还有一个表格“非洲国家”,包含了这55个国家的贫困率。

       

      第2步——画一个深色的背景

      首先画一个渐变色背景。点击“舞台”图标,然后画一个矩形,要覆盖整个舞台。然后选择渐变填充模式,选2种自己喜欢的颜色:

       

      第3步——为背景添加标题

      在背景上添加标题,就写一个“非洲贫困率”。你可以用文本工具“T”在背景上添加文字。还可以更改文字的颜色、位置和大小。

       

      第4步——创建55个克隆体

      现在我们准备好添加地图了。因为有55个国家,我们要为角色“非洲各国”创建55个克隆体,让每个克隆体显示不同的造型。

      为了创建这些克隆体,你可以用一个计数循环“让变量(i)从( )走到( ) 步长( )”,和一个新变量“i”,这个变量就会从1走到55。在计数循环中创建克隆体,用变量“i”作为克隆体的编号ID。

       

      第5步——每个克隆体显示不同的造型

      接下来,我们要处理每一个克隆体。首先要使用积木“当作为克隆体启动时”,并在下面添加2个积木。

      • 我们将根据“克隆体ID”切换至不同的造型。每个克隆体都有自己的“克隆体ID”,各不相同。“克隆体ID”是一个介于1至55之间的一个数,那么这些克隆体将显示从造型1至造型55。
      • 原始角色“非洲各国”设置为隐藏。那么,当某个克隆体切换至对应造型之后,我们需要显示该克隆体。

       

      第6步——移动每个克隆体

      我们看不到整个地图,而地图随着造型变换,造型的位置决定了地图的位置。这容易解决,就是把每个克隆体向左上方移动。

       

      第7步——不让屏幕刷新

      目前,创建全部55个克隆体需要一定时间,因为添加每个克隆体之后,屏幕会刷新以显示地图的变化。为了让程序运行更快,我们创建一个不刷新屏幕的新积木,并把代码积木放到这个新积木的定义中。这样的话,只有当添加完全部55个克隆体后,屏幕才会刷新。

       

      第8步——将克隆体设置为随机颜色和随即亮度。

      接下来,我们要让地图好看一些,方法就是把每个克隆体设置为不同的颜色和亮度。注意,要让地图亮一些,但不能太亮,我们就选40至70之间的一个随机数。

       

      第9步——从列表读取贫困率

      为了显示贫困率,首先需要在每个克隆体中读取表格。请新建一个变量“贫困率”并选择“仅适用于当前角色”。这样的话,每个克隆体都有一个变量“贫困率”。

      现在就可以利用列名“数据”和行号“克隆体ID”从表格中读取贫困率。之所以能做到这一点,是因为造型和表格中的行都是按顺序排序的,并且一一对应,所以造型1的国家与表格的第一行的国家是同一个。

       

      第10步——显示国家名称和贫困率

      每当用户点击任意一个国家,我们就要显示这个国家的名称和贫困率。我们可以用积木“当角色被点击”,在所有克隆体上都起作用。然后让角色说出国家的名称和贫困率。注意,国家名就是造型的名称。

      现在这个项目就可以运行了:

       

      第11步——鼠标指到的国家高亮显示

      为了让地图更具交互性,我们将鼠标指到的国家高亮显示。这一事件被称为“当碰到(鼠标指针)时”,我们只需要把克隆体的亮度增加50:

       

      第12步——恢复亮度

      还有个小问题:当鼠标移开某个国家之后,这个国家仍然是高亮的。为了恢复初始亮度,需要等到鼠标移出某个国家后再使亮度减小50:

      最终结果如下:

       

      下一步

      这个项目还可以扩展成其他样式,有很多种方法。如下是一些例子:

      • **在舞台上打印贫困率:当鼠标指到某个克隆体,我们就在舞台上打印对应的国家和贫困率。

      • **其他指标:除了贫困率,还可以显示其他一些重要的指标,如平均寿命或者儿童死亡率.

      posted in 小教程
      C
      creaticodeteacher2-mail
    • 列表的使用

      介绍

      大家已经学过了列表简介、用积木编辑列表以及读取列表。本文将介绍其他一些有关列表使用的高级积木。

       
       

      列表排序

      可以用以下积木使列表项按顺序排列:

      Animation1.gif

       
      提醒一下,这个积木也可以用于文本组成的列表。对每个列表项的第1个字符进行比较并确定大小。而中文字符的大小是根据Unicode编码确定的。例如,“秋高气爽”要小于“风和日丽”,因为在Unicode编码中,“秋”排在“风”前面。

      如果两个列表项的第1个字符相同,则比较第2个字符,以此类推。例如,“冰天雪地”要小于“冰清玉洁”,因为两者都以“冰”开头,第2个字符“天”在Unicode编码中排在“清”前面。

      注意,英文字母不区分大小写。

      Animation2.gif

       
       

      随机打乱列表

      积木“随机打乱( )中各项的顺序”,为每一个列表项随机分配一个位置,类似于洗牌。

      Animation3.gif

       
      举个例子,比方说你需要打印全班学生的姓名,但你想让名单随机排序,这样的话别人就猜不出下一个是谁。你只需要随机打乱姓名列表。

      Animation4.gif

       
       

      反转列表

      可以用积木“反转列表( )”使列表顺序反转。第一项变为最后一项,第二项变为倒数第二项,以此类推。如果你反转2次,就得到和原来一样的列表。

      Animation5.gif

       
       

      把列表项连接成字符串

      可以把列表的所有项连接成一个长字符串,并且可以指定一个分隔符放在相邻项之间。

      Animation6.gif

       
       

      把字符串分割成列表项

      与“连接”相反的就是“分割”。你可以把一个长字符串分割成若干个列表项,并且可以指定分隔符。

      Animation7.gif

       
       

      将一个列表附加到另一个列表

      可以把一个列表附加到另一个列表,也就是说把一个列表的全部项附加到另一个列表的底部。例如,当你把“数字2”附加到“数字1”,列表“数字2”不变,只是它的3个列表项会被附加到列表“数字1”底部。

      Animation8.gif

       
       

      把一个列表复制到另一个列表

      还可以把一个列表复制到另一个列表。首先会把目标列表的原有项全部删除,复制之后,两个列表完全相同。

      Animation8.5.gif

       
       

      生成随机数列表

      “运算”类别的积木“在( )和( )之间取随机数”会生成某一范围内的随机数。如果你想生成一系列随机数,就可以用如下积木。

      注意:如果允许重复,就有可能出现相同的数。如果不允许重复,生成的列表就没有相同的项。

      Animation9.gif

       
       

      遍历一个列表

      你可以遍历一个列表并查看列表中的所有项。

      首先,你可以用积木“对于每个项目( ) 在( )”,把列表中的每一项的值赋给变量:

      Animation10.gif

       
      还可以用一个索引变量访问列表中的所有项。索引变量从1一直涨到等于列表的长度。可以在这个循环中用变量读取列表。

      Animation11.gif

      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 计算两点之间距离的运算积木

       

      先修科目

      • 组装积木

       

      什么是“直线距离”?什么是“曼哈顿距离”?

      假如你在上方地图的起点,你想走到终点。如果你沿直线行走,路线的长度就是这两点的直线距离。在地图上用黄线来表示。

      不过,在很多情况下你无法走直线。比如说,街区之间有房屋和建筑物,就像曼哈顿市一样。在这种情况下,你必须沿着横向街道和纵向街道行走。这些线的总长度就是这两点的“曼哈顿距离”。

      起点与终点之间的直线距离和曼哈顿距离,下方还有几个例子:
       
      示例1:

       

      示例2:

       
      示例3:

       
       

      积木

      积木“计算距离x( ) y( ) 到 x( ) y( ) 方法(直线距离/曼哈顿距离)”是运算类别的报表积木。


       

      这个积木怎么用?

      这个积木会显示两个指定点的距离。

      在创益编程中,“点”、“角色的位置”都是用x坐标、y坐标来定义的。

       
      需要在积木中输入两个点的坐标值,并点击下拉菜单选择“直线距离”或“曼哈顿距离”。

      用法如下:


       

      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 检测某个键是否被按下

      介绍

      可以用如下2个侦测类别中的布尔积木检测某个键是否被按下:

       
       

      积木:“【请选择】键被按下?”

      当这个积木运行的时候,如果指定的键被按下,积木就报告“true(真)”;否则就报告“false(假)”。

      Animation1.gif

      在下拉菜单中点击任意一个键即可选中该键:

      Animation2.gif

       
      假如你选择“任意”键,如果任意一个键被按下,这个积木就报告“true(真)”。

       
       

      积木:“(请输入)键被按下?”

      对于这个积木,你可以输入指定的键,而不是在下拉菜单中选择。还可以把变量作为输入值:

      Animation3.gif !

       
      注意:这个积木的输入值不区分大小写。

       
       

      一个常见错误

      一个常见错误就是用单个积木“如果( )那么”来检测是否按下键:

      Animation4.gif

      这行不通,因为当你点击绿旗按钮时,程序就迅速运行完这2个积木——“如果( )那么”和“( )键被按下?”。因此,当你点击绿旗之后再按下向右箭头,程序就没有反应,因为程序早已经结束了。

       
       

      结合“重复执行”、“如果( )那么”

      大多数情况下,正确方式就是将侦测积木“( )键被按下?”与积木“重复执行”、“如果( )那么”一起使用。这样的话,程序会重复不停地检测是否按下某个键。

      例如,当按下向左箭头时球向左转,当按下向右箭头时球向右转。

      Animation5.gif

       
       

      同时检测2个键

      还可以检测2个键是否同时被按下。例如,当同时按下“a”和“w”,球就转动。如果只按下一个键,球就不转。

      Animation6.gif

      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 检测是否按下了鼠标键

      介绍

      可以用侦测类别中的这个布尔积木检测是否按下任意一个鼠标键:

      如果鼠标键被按下,并且运行该积木的时候鼠标指针在舞台内,该积木就报告“true(真)”,否则就报告“false(假)”。

      Animation1.gif

       
       

      常见错误

      一个常见错误就是用单个积木“如果( )那么”来检测是否按下鼠标:

      Animation2.gif

      这行不通,因为当你点击绿旗按钮时,程序就迅速运行完这2个积木——“如果( )那么”和“鼠标键被按下?”。因此,当你点击绿旗之后再按下鼠标键,程序就没有反应,因为程序已经结束了。

       
       

      结合“重复执行”、“如果( )那么”

      大多数情况下,正确方式就是将积木“鼠标键被按下?”与积木“重复执行”、“如果( )那么”一起使用。这样的话,程序会重复不停地检测是否按下鼠标。

      例如,当按下鼠标时球转动,如下所示:

      Animation3.gif

       
      注意:在舞台上的任意位置按下鼠标即可使该积木报告“true(真)”。并不是非得在角色上点击。

      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 鼠标的x坐标、y坐标

      介绍

      可以用侦测类别的如下2个报表积木获取鼠标指针的当前位置:

       

      在这篇文章已经提到,舞台上的x坐标介于-240和240之间,y坐标介于-180和180之间。

      3cb12307-022d-43a5-a4b0-9427f70dd1d5-image.png

       
      当你点击代码编辑器中的积木“鼠标的x坐标”,由于鼠标已经超出舞台边缘,其值就是舞台的下限,即-240:

       
       

      重复说鼠标位置

      可以用如下代码在一个“重复执行”循环中重复说鼠标位置:

      Animation2.gif

      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 用积木编辑表格

      先修科目

      • 表格简介

       

      介绍

      你可以用积木轻松地编辑表格,比如添加行、删除行、修改项的值。

       

      添加行

      积木“添加到表格”会在表格最后添加一行,然后设置一整行的值或部分项的值。这个积木最多容纳12个值,所以用这个积木最多能填充前12项的值。

      注意:值的顺序一定要与表格中列的顺序匹配。空的输入框将被忽略。

       

      插入行

      还可以在特定行号插入一行。为了给插入行腾出空间,现有的行将会下移。同样最多可以填充12项:

       

      替换一行

      如果你知道行号,就可以用如下积木替换一行的全部项。其他行不受影响。

       

      替换一项

      有时你只需要替换一项,保持这一行的其他项不变。如果你知道这一项的行号和列名,就可以用这个积木替换其值:

       

      更改项的值

      有些时候,你只想使某一项的当前值相对更改一定数量。比如,如果某人的生日刚过,你要让他的年龄加1。再比如,如果某人输了比赛,你要把他的分数减一些。下面这2个积木分别使项的值增加和减少:

       

      按照行号删除行

      如果你知道要删除的那一行的行号,就可以用如下积木删除这一行。下面的行上移以填满空缺。

       

      删除所有行

      你还可以删除所有行,即清空表格。列的结构不变:

       

      查找列中的值并删除所在行

      有时候我们只想找到表格某一列的特定值并删除所在行。你可以用如下积木指定列以及在这一列要找的值。

       

      插入列

      还可以在表格中插入列。要指定插入列的名称和位置。所在位置的列以及右边的列都向右移一列。

      注意:这种操作不常用,因为正常情况下表格结构是固定的,我们只修改行和项。

       

      删除列

      还可以删除表格中的一整列,需要指定列名,英文字母不区分大小写。

       

      删除所有列

      如果你要重新定义整个表格,就可以删除所有列,然后重新添加列。

       

      继续学习

      • 读取列表
      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 读取表格

       

      先修科目

      • 表格简介

       

      介绍

      读取表格类似于读取列表,不同的是,你要指定列名和行号。在接下来的示例中,我们将使用表格“学生”。这个表格有4列、3行。

       

      获取表格的行数

      你可以用积木“表格( )的行数”获取表格的行数。如果表格为空,该积木就报告0。

       

      读取项的值

      如果你知道要找的某一项的列名和行号,可以用这个积木读取其值。

       

      参数

      • 行号:行号介于1与表格总行数之间。
      • 列名:列名不区分大小写。例如,“Name”和“name”都可以代表“NAME”这一列。

       

      示例

       

      读取一整行

      有时你需要读取一行所有项的值。就可以用这个积木获取所有值并将其连接在一起。

       

      参数

      • 行号:行号介于1与表格总行数之间。
      • 表格名称:从下拉菜单中选择表格名称。
      • 分隔符:用什么字符隔开这一行的不同列的值。

       

      示例

       

      查找列中的某一项

      可以用这个积木查找列中的某一项:

       

      参数

      • 要查找的项:要查找的项的值。
      • 列名:从哪一列中查找。
      • 表格名称:从下拉菜单中选择表格名称。

       

      示例

      例如,我们可以在“姓名”这一列查找某一名学生,该积木会返回行号。如果不存在这一项,该积木就返回值-1。如果存在多个相同的项,就返回第一个的行号。

       

      查找列中包含某一部分的那一项

      有时你不想进行精确匹配。比如,你只知道某一项的一部分,而不是这一项的完整内容。就可以用这个积木查找包含某一部分的那一项:

       

      参数

      • 要查找的项的一部分:你要找的那一项的部分内容。
      • 列名:从哪一列中查找。
      • 表格名称:从下拉菜单中选择表格名称。

       

      示例

      比如,我们知道某个学生姓“姜”,但不知道他的全名。我们就可以查找姓名包含“姜”的学生。这个积木将返回行号。如果没有姓名包含“姜”,这个积木就返回-1。

       

      用另外一列查找某一列

      有时候你要用另一列查找某个表格。例如,你想知道学号为“101”的学生的身高。为了解决这个问题,就用这个积木:

       

      参数

      • 目标列:要查询的那一列,比如本例中的“身高”。
      • 表格名称:从下拉菜单中选择表格名称。
      • 检查列:要检查的那一列,比如本例中的“学号”。
      • 检查列的值:在检查列你要找的值,比如本例中的101。

       

      示例

      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 积木——“到( )的距离”

       

      先修科目

      • 组装积木

       

      介绍

      积木“到( )的距离”是侦测类别的报表积木。


       

      这个积木怎么用

      这个积木会告诉你本角色到选定角色的距离。你可以点击下拉菜单选择“鼠标指针”或其他角色作为目标对象。


       
       

      到(鼠标指针)的距离

      当你选择“鼠标指针”作为目标对象,该积木会显示本角色到鼠标指针的距离。

      如下所示,每当点击积木“到(鼠标指针)的距离”,就显示球员(本角色)到鼠标指针的距离。无论鼠标指针在舞台中还是舞台外,这个积木都管用。


       

      到(角色)的距离

      如果你选择某个角色作为目标对象,该积木就显示本角色到选定角色的距离。

      如下所示,每当点击积木“到(篮球)的距离”,积木就显示球员(本角色)到篮球(选定角色)的距离。

      注意:项目中至少要有2个角色,然后才能从下拉列表中选择另一个角色。


       
       

      动画

      你可以用积木“到( )的距离”制作下面这个篮球游戏动画。
      每当篮球与篮筐的距离小于等于70,背景就显示“进球得分!”


       

      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 积木——“颜色( )碰到(另一种颜色)?”

       

      先修科目

      • 组装积木
      • 绘制造型

       

      说明

      积木“颜色( )碰到( )?”是侦测类别的布尔积木。


       

      这个积木怎么用?

      这个积木告诉我们本角色上的颜色是否碰到另一种颜色。

      第一个输入框 表示本角色上的任意一种颜色,
      第二个输入框 是其他角色的颜色或舞台本身的颜色。


       

      动画

      你可以用积木“颜色( )碰到( )?”制作一个棒球比赛动画。
      如下所示,当球棒上的黄色碰到球上的白色,角色就说“得分”。


       

      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 下拉菜单控件

       

      先修科目

      • 通过标签控件简要介绍控件

       

      说明

      下拉菜单控件可以让用户从一系列选项中选择一项。相比于让用户在输入框中输入选择项,下拉菜单更简单易用,相比于为每一个选项添加一个按钮,下拉菜单占用的屏幕空间也更少。

       

      添加下拉菜单控件

      可以用这个积木添加下拉菜单控件:

       

      参数

      • 中心位置:下拉菜单的中心的x坐标、y坐标。
      • 大小:下拉菜单的宽度和高度。
      • 列表:为了指定选项列表,首先需要创建一个列表,并把所有选项放到这个列表中。之后就可以在该积木中指定这个列表。比如,你可以创建一个列表“性别”,并加入2项:“男生”、“女生”。然后在这个积木中“使用列表”后面选择“性别”。

      • 控件名称:下拉菜单的名称,以便于在其他积木中引用它。

       

      当用户在下拉菜单中选择一项

      当用户在下拉菜单中选择后,我们的程序需要对此响应。你可以把代码放到这个帽子积木下面:

      注意:你需要先把下拉菜单控件添加到舞台上,然后才能在这个积木的菜单“请选择”中选择下拉菜单的名称。

       

      从下拉菜单中选择选项

      为了找出下拉菜单中当前选中的是哪一项,可以用这个报表积木:

      注意:你需要先把下拉菜单控件添加到舞台上,然后才能在这个积木的菜单“请选择”中选择下拉菜单的名称。

       

      示例

      在这个示例中,我们添加一个下拉菜单“菜单1”,有2个选项。

      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 画笔扩展(第1部分)

       

      先修科目

      • 颜色的使用

       

      介绍

      在创益编程游乐场,你可以用画笔扩展直接在舞台上绘画。首先需要添加画笔扩展,如下所示:

      如何用画笔绘画?

      当我们在纸上绘画,分3步:

      1. 把笔放下,接触到纸;
      2. 移动画笔,同时保持画笔在纸上;
      3. 当我们画完以后,抬起笔来。

       

      积木:“落笔”、“抬笔”

      如果要用角色在舞台上绘画,就要把角色当成画笔。因此,需要用这2个积木把笔放到纸上以及抬起笔来。

      比如画一条线,我们可以先落笔,然后移动角色,最后抬笔:

      注意:画笔是在角色的中心点绘画,所以角色会覆盖部分绘画,可通过隐藏角色来解决。其实,即便你一直隐藏角色,角色仍然充当画笔。

       

      擦除全部绘画

      如果要擦除舞台上的全部绘画,可使用这个积木“全部擦除”:

       

      笔的粗细

      修改画笔大小可使画笔更加粗。笔尖是个圆,画笔大小就是这个圆的直径。

      首先,你可以用积木“将笔的粗细设为( )”直接设置画笔粗细:

      另外,你还可以利用积木“将笔的粗细增加( )”来增减画笔粗细。比如,每当绘图时使画笔粗细增加10:

       

      画笔颜色

      有3种方式修改画笔的颜色。

      • 第一种方法,使用积木“将笔的颜色设为( )”,这个积木提供一个调色板。提示,透明度也管用。另外,如果你不移动角色,积木“落笔”仍然在角色中心画一个大圆点。

      • 第二种方法,使用积木“将笔的<颜色/饱和度/亮度/透明度>设为( )”,让你可以直接设置这4个属性的值。

      • 第三种方法,使用积木“将笔的<颜色/饱和度/亮度/透明度>增加( )”,让你可以使这4个属性的当前值相对增减一定数量。

       

      图章

      除了用画笔绘图,你还可以把角色造型当成橡皮图章来用。当你运行积木“图章”,角色就会在舞台上绘制其本身。

      posted in 二维积木
      C
      creaticodeteacher2-mail
    • Youtube播放器控件

      介绍

      你可以在舞台上添加Youtube视频播放器,就可以在项目中播放Youtube视频。郑重提示:您有责任确保自己播放的视频适合儿童观看,否则您的CreatiCode账号以及全部项目将被立即删除。

      要使用Youtube视频播放器,首先要添加扩展“控件”:

       
       

      添加Youtube播放器

      你可以用这个积木向舞台添加Youtube播放器:

      • 播放器视频网址:你可以把任意的Youtube视频网址复制到这个输入框。提示,你要用鼠标右键点击,然后在弹出菜单中“复制”、“粘贴”:

       

      • 中心位置:视频播放器的中心位置。如果你要让视频在舞台中心,就设置x=0,y=0。

       

      • 视频窗口大小:播放器窗口的宽度和高度。注意,如果你要让播放器窗口能放入舞台窗口,那么它最宽480,最高360。
         
      • 控件名称:可以为视频播放器命名。视频播放器添加至舞台后,其名称就会出现于其他相关积木的下拉列表中,以便于用这个名称控制视频播放器(比如开始、停止)。

       

      • 背景还是前景:这个输入框控制着视频播放器窗口是否覆盖舞台上的其他东西。如果你选择“背景”,视频就充当背景,其他角色和图画就在视频前面;如果你选择“前景”,视频就会遮挡舞台上除了控件以外的其他东西。另外,如果视频位于背景,用户就无法手动播放视频、停止视频。:

       
       

      视频播放器控制

      把视频播放器添加到舞台之后,你可以用这个积木向播放器发送指令。在下拉菜单“请选择”指定控制哪个播放器。

      • 开始:载入视频后开始播放。注意,视频被添加到舞台后不会自动开始。必须用这个积木开始播放视频。

      • 暂停:使视频暂停。“暂停”之后如果运行“开始”,视频就会从暂停的地方继续播放。

      • 停止:使视频停止并重置视频播放时间。“停止”之后如果你运行“开始”,视频就会从头开始。

      • 静音:以静音模式播放视频,所以没有声音。

      • 取消静音:使视频恢复正常声音。

       

      跳转至某个时间点

      使用积木“将控件( )中的视频跳转至第( )秒”,可以跳转至视频的任意时间点。

      第一个输入框让你指定秒数。比如,如果你想跳过视频的前2分钟,就可以跳转至120秒。

       

      当前视频时间

      你还可以利用这个报表积木找出视频的当前时间。它会显示视频已经播放了多少秒。

      比方说,你要使视频播放1分钟后自动停止,那么就可以等待视频时间大于60秒:

      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 自制积木——第2部分

       

      先修科目

      • 自制积木——第1部分

       
       

      介绍

      在上一篇知识自制积木——第1部分,大家已经学习了自制积木的基础知识。

      这一篇知识将介绍自制积木的2个高级选项。

       
       

      运行时不刷新屏幕

      “屏幕刷新”也被称为“屏幕更新”,意思就是计算机更新屏幕上显示的东西。通常情况下,计算机需要擦除舞台上原有的所有东西,然后再重新画所有东西。因为这个过程非常之快,所以看起来东西就在舞台上移动。

      比如,我们利用画笔扩展,移动角色即可画出一些阶梯。这需要好几秒钟才能完成,因为每移动一次,计算机就需要擦除舞台上的绘画和球,然后根据更新的球的位置和阶梯重新绘制。另外,舞台下面角色窗格中的信息也会随之更新,例如球的x坐标、y坐标。

       
      假如我们不需要显示球的动画,只需要在舞台上显示最终结果,就可以跳过屏幕刷新,从而使程序运行更快。

      若要这么做,就自制一个积木,然后勾选选项“运行时不刷新屏幕”。

       
      接下来,把绘画所用的全部积木装配到这个新积木的“定义”堆栈。当你再次运行程序,它会立即完成,因为跳过了中间的全部屏幕刷新。只绘制最终结果。

       
      总之,无论是二维项目还是三维项目,如果你想让程序运行更快,不需要显示中间步骤动画,那么自制积木就应当把所有步骤“封装”起来,就勾选“运行时不刷新屏幕”。

       
       

      制作一个返回值的报表积木

      默认情况下,自制积木是“堆栈积木”。你也可以改为“报表积木”,那么积木就报告一个值,就是运行该积木的结果。

      比方说,你想制作一个积木计算2个数的平均值,类似于“运算”类别的积木“+”。

      首先,当你定义积木时,应当勾选“圆形”选项:

       
      下一步,在这个新积木的“定义”堆栈,你可以用浮出控件中的积木“返回( )”来设置该积木的结果值。

       
      现在看到的这个新积木“平均数”就是圆形的。当你点击时会返回一个数:

      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 自制积木——第1部分

       

      先修科目

      • 组装积木

       
       

      介绍

      当你编写Scratch程序,游乐场提供了很多积木供你选择。不过,你还可以自制积木。自制积木需以下3步:

      1. 定义新积木:告诉系统新积木长什么样;
      2. 实现新积木:告诉系统这个积木要做什么;
      3. 使用新积木:之后能够从浮出控件把这个新积木拖放至程序中。

       
       

      一个完整示例

      在这个完整但简单的示例中,我们依次完成这3个步骤。

       

      定义新积木

      定义新积木方法:打开“自制积木”类别,然后点击“制作新的积木”。为积木输入名称,名称任意取,例如“奔跑”,然后点击“完成”。就会看到浮出控件有一个新的积木“奔跑”,代码区域有一个积木“定义奔跑”。

       

      实现新积木

      现在我们要把别的积木添加到堆栈“定义奔跑”,就像构建其他代码堆栈一样。比如,每当我们运行积木“奔跑”,就让角色右移5步,如下所示:

       

      使用新积木

      现在已经定义并实现了积木,就可以在程序其他地方使用了。例如,每当点击角色,就让角色奔跑:

      系统每当遇到积木“奔跑”,就会跳到堆栈“定义奔跑”,并依次完成堆栈中的所有积木。

      这就是自制积木的一个简单例子。下面我们看一些不同种类的自制积木。

       
       

      定义一个带输入参数的积木

      游乐场提供的很多积木都带输入参数。例如,积木“说( )”带一个输入参数,以便于说不同的东西。你也可以让自制积木带输入参数。

      当你定义积木时,可添加3种输入:

      1. 数字或文字:这个输入框为椭圆形,可接受数字或文字。
      2. 布尔型:这个输入框两侧为三角形的尖,可接受布尔型积木。
      3. 颜色:这个输入框为色值。

      现在我们修改积木“奔跑”,使其带3个输入参数,分别为“次数”、“落笔”和“颜色”:

      如上所示,修改积木的定义后,积木“定义奔跑”在堆栈中装配了3个输入积木,以供你使用。注意,你只能在这个堆栈中使用这3个积木。

      比如,我们可以用输入值“次数”控制移动了多少步,用输入值“落笔”控制是否落笔,用输入值“颜色”控制画笔的颜色:

       
       

      使用带输入参数的积木

      使用新的积木“奔跑”就跟使用别的积木一样。只需要设置这3个输入参数。例如,如果你把第一个参数设置为4,角色就移动4步。

      当你点击角色时,就会看到这样:

       
       

      如何删除自制积木?

      若要删除自制积木,必须找出来你在哪里使用了自制积木,并将其全部删除,然后就可以删除“定义”堆栈。如果仍然有地方在使用自制积木,就不能删除“定义”堆栈。

       
       

      修改自制积木的颜色

      修改自制积木的颜色:在“自制积木”类别中点击按钮“设置自制积木的颜色”。
      Untitled3.png

      出现一个弹窗让你选择自制积木的颜色。点击“改变”即可设置完成。

      示例如下:


       

       
       

      继续学习

      • 自制积木——第2部分
      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 扩展——“翻译”

      介绍

      可以用“翻译”扩展把文本翻译成目标语言。

       
       

      添加翻译扩展

      点击左下角的扩展按钮,然后选择“翻译”扩展即可添加:

       
      这个扩展有2个积木:

       
       

      积木:“访客语言”

      积木“访客语言”告诉我们当前用户使用的本地语言。如果你把游乐场的界面换成另一种语言,这个积木所报告的语言也会随之更改。

       
       

      积木:“将( )译为( )”

      这个积木有2个输入框:

      • 你要翻译的文本;
      • 目标语言,可以从下拉列表中选择。

      因为这是个报表积木,所以会直接报告一个值,这个值就是翻译后的文本。

       
       

      翻译成用户的语言

      我们可以把以上2个积木组合,即可实现一个有用的功能:自动翻译成用户的语言。

      比如你的项目要向用户说“欢迎!”。就可以把积木“访客语言”放到积木“将( )译为( )”的语言选择器,从而句子就翻译成用户所使用的语言。

      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 表格简介

       

      介绍

      大家知道,列表能存储一个由数字、文本组成的序列。表格则可以存储多个相关联的列表。比方说我们要存储5名学生的学号和姓名。我们不必用2个列表,更好的办法是用一个带有2列的表格,以便于清楚哪个学号对应哪个姓名。

       

      新建表格

      新建表格方法:打开“变量”类别,然后点击“添加新表格”。给表格命名,名称要唯一,还要指定表格“适用于所有角色”还是“仅适用于当前角色”。

       

      表格重命名

      如果你想更改表格的设置,则鼠标右击表格名称,然后选择“重命名表格”。

       

      删除表格

      删除表格方法:鼠标右击表格名称,然后选择“删除XX表格”。

       

      添加列

      向表格添加列:点击灰色按钮“+”。你可以输入一个新的列名,例如“姓名”、“年龄”,然后按回车键确认。

       

      重命名列

      当你点击列后面的下拉箭头,有个选项可以重命名列。

       

      删除列

      同样,在下拉菜单中有个选项可以删除列。

       

      添加行、删除行

      你可以用左下角的按钮“+”添加行。若要删除行,先选中该行,然后点击右侧按钮“x”。

       

      加入数据

      你可以选中任意一个单元格添加数据。提示,你可以用Tab键跳到下一个项。

       

      修改字体大小

      你可以用表格名称后面的按钮 + 和 - 修改字体大小。

      继续学习

      • 读取表格
      posted in 二维积木
      C
      creaticodeteacher2-mail
    • 读取列表

      先修科目

      • 用积木编辑列表

      介绍

      列表就像是很多个按顺序排列的变量。你可以通过列表项的位置读取其值,还可以获取列表的信息。

       

      获取列表的长度

      这个报表积木告诉你列表中有多少项。

       

      示例

      注意,列表项的位置索引号从1至列表长度。例如,如果你要在列表最后一项前插入项,就可以用列表长度作为位置索引。

       

      读取指定位置的列表项的值

      如果你知道某一项的位置,就可以用这个积木读取其值:

      位置索引最小为1,最大为列表长度。例如,获取最后一项的值,方法如下:

       

      按照值搜索列表项

      你不仅可以按照位置获取列表项,如果你知道某一项的值,还可以找到该项的位置。

       
      如果找不到该值,报告的值就为0:

       

      列表是否包含某个值

      利用这个积木可以判断列表是否包含某个值,报告结果为“true(真)”或者“false(假)”。

       

       

      搜索某一项的一部分

      有时候你想找到包含某个值的项。换句话说,你要搜索某一项的一部分。可以用这个积木:

      例如,在学生姓名列表中,你想找到第一个姓“王”的学生的索引号,方法如下:

      posted in 二维积木
      C
      creaticodeteacher2-mail