跑完2000步,卡卡汗流浃背,不过似乎又找回了那种身轻如燕的感觉。
与此同时,系统切换了场景,卡卡发现自己在一片森林的边缘。一条小河从森林里流出来,挡住了去路。
“这是永恒之河,代表时间的流动”,AI助手提示,“水很深,你必须踩在河面上的目标之靶上才能通过”。
卡卡发现河面上确实漂浮着箭靶一样的物体,一直延伸到对岸。他试着跳上去,稍微有点晃动,但感觉还能承受自己的重量,他开始寻找下一个落脚点。
“远大的目标不是一蹴而就的,必须先分解成一个个的阶段目标,专注当前位置,紧盯下一个目标,才不会随波逐流”,AI助手友好地说,“请小心脚下”。
“对极了”,卡卡说着跳到下一个落脚点,”看我的!“。
学习目标
- 了解 Scratch 提供的绘图,使用绘图编辑器绘制简单的角色造型;
- 掌握 Scratch 舞台的坐标系统,理解通过设置X、Y坐标对角色进行舞台定位的方法。
编程实战
本节我们编写程序,为小猫加上“立定跳远”的技能。
第一步:场景与角色布置
新建一个Scratch 3.0项目。这个作品除了默认的小猫卡卡之外,我们需要若干个“箭靶”(代表目标)角色,这个是 Scratch 中没有的。怎么办呢?自己动手,丰衣足食,我们要请出本节的主角——绘图编辑器了。
还记得添加角色的方式吗?在角色列表区右下角有一个小猫头按钮,将鼠标移动到按钮上,会弹出一个新角色菜单(不要直接点击,那样会进入默认角色库):
在此菜单中点击画笔图标,就会进入绘图编辑器:
这其实也就是角色的“造型”标签的内容,不过由于是自己绘制角色,Scratch 为我们新建了一个空的“造型1”。如果你在现有的角色上打开造型标签,则会显示该角色的所有造型,你可以进行修改。Scratch 自带的这个绘图编辑器虽然功能不多,但足够我们发挥创意了,我们将在以后的学习中,逐步发现它的强大之处。
现在,面对空空荡荡的画布,你是不是有些迷茫,不知道怎么下笔呢?别担心,任何复杂的造型都是由最基本的形状构成的,我们从最简单的做起,一步一步来。
首先,你需要注意画布中心那个灰色的小圆点(仔细看,不太明显),这个是我们要绘制造型的“中心点”,在后面的课程学习中,如果要计算角色的准确位置,就是以中心点所在位置为准,如果角色要旋转,也是基于中心点旋转。不理解这一点也没关系,你只要知道造型中心点是在这里,用到的时候自然知道到这个位置来寻找即可。
在功能菜单区有“填充”和“轮廓”两个下拉式的菜单,点击它们右侧的向下箭头就可以选择颜色。这里我选择填充色为白色(拖动滑块,颜色和饱和度的滑块向左到0,亮度向右到100就是白色)、轮廓为红色(颜色0,饱和度100,亮度100),轮廓后面的那个数字是粗细,设置为25,然后在绘图工具区选择绘制圆形的工具,用鼠标在绘图区域拖动,画出一个扁扁的椭圆:
用相同的方法再画一个大小差不多的椭圆,但是轮廓和填充都是白色:
在绘图工具区选择箭头工具,然后用鼠标拖动刚刚画好的白色椭圆,将它“移动”到红框椭圆的上方,但不要完全盖住,这样就形成了一个带有立体感的圆盘。此时你会注意到椭圆四周出现了一个方框和八个圆点,如果图形的大小不合适,拖动这些圆点就可以调节形状大小:
再画一个小一点的红色椭圆,放在白色椭圆中心位置:
最后画一个最小的黄色椭圆放在红色椭圆中心,一个平放的箭靶就基本上画好了。如果觉得形状不满意,你可以用移动工具选中它之后进行调整。注意这些圆的中心与我们前面所说的“造型中心点”要基本重合。
最后,在角色属性中将画好的角色大小设置为50,用鼠标右键点击这个角色,再点击“复制”,舞台上就会出现一个一模一样的箭靶。把它们的位置按照图中的方式排列好,再把小猫拖动到第一个箭靶上,场景初步布置完成。
第二步:使用坐标定位角色
接下来我们需要编写代码,让卡卡先从第一个箭靶上跳到第二个箭靶上,然后再跳到第三个箭靶上。
上一节我们学习了使用移动步数的方式让小猫动起来,这次我们要实现的是“跳”,不能沿着一条线“走”过去。这就要用到X、Y坐标定位。
什么是X、Y坐标定位? 举个例子,你和爸爸妈妈一起开车出去,是不是经常会用到导航软件?只要输入目的地位置,导航软件就会计算出一条到达目的地的最佳路线,而且开车过程中还会在地图上显示你当前的位置。软件怎么知道我在地图上什么位置呢?
地图上的任意一个点都是由经度、纬度决定的,东西方向是经度,南北方向是纬度。你手机中GPS芯片会与卫星通信确定当前位置的经纬度,软件用这个经纬度把你的位置显示在地图上,这就叫坐标定位。
那么 Scratch 中的坐标是什么样的呢?要想了解清楚,你可以通过角色列表区右下方的选择一个背景按钮,从 Scratch 3.0 自带的背景库中找到一个叫“Xy-grid的背景”并确认,你会发现舞台区变成了这个样子:
原来,和经纬度相似的是,Scratch 中的坐标是用X、Y两个数据组成的。横向的数值是X,从左向右为-240到240,中间为0,纵向的数值是Y,从下向上为-180增加到180,中间为0。这样,X=0、Y=0的坐标就是舞台的正中心位置,可以表示为(0,0),括号内第一个数字是X的值,第二个数字为Y的值。
相应地,小猫卡卡和我们自己绘制的角色在舞台上的位置都可以用它们的X、Y坐标来定位。我们要修改它的位置,只需要设置它的X、Y值就可以。现在你知道属性列表区上方的X、Y是干什么的了,而且为什么在小猫走动的时候X值会来回变化了。
从角色属性中,你会看到小猫的当前位置是(-155,-89),现在把小猫拖动到第二个靶盘上,会发现它的坐标变成了(-9,-61):
此时,你可以在运动类指令区找到一条指令,在1秒内滑行到-9,-61。把它拖动到代码区,再把小猫拖动到原来位置,点击执行这条指令,就会发现小猫很快移动到了第二个靶盘上,这就是快速设置X、Y坐标的方法。运动指令区还有一些其它与X、Y坐标相关的指令,比如增加X、Y坐标,分别设置X、Y坐标的值等等,你都可以试试。运动指令区还有两个特殊的指令,它们是椭圆形的,不能执行,但是是两个保存X、Y值的变量。只要用鼠标选中它们前面的对勾,舞台上就会显示出当前这个角色的X、Y坐标值。
显然,直接用“滑行到X、Y”坐标,小猫的样子还是移动,不是“跳”,我们可以改进一下代码,小猫在跳起的过程中会先向右上方移动一点,到图中所示的位置,然后再移动到第二个靶盘上。我们可以再拖动一条滑行指令过来,与刚才的滑行指令结合在一起,然后把小猫拖动到第一个靶盘,点击执行:
小猫的动作确实像“跳”了,但感觉特别慢。我们可以把指令前面的“1”秒这个数值修改小一点,改为0.5,为了方便,再在前面加一条“移到X、Y坐标”的指令(它与滑行指令的区别就是瞬间移动,你看不到移动的过程),这样每次点击指令,小猫都会从第一个靶盘跳跃到第二个靶盘上,动作也相对自然一些了:
用这种方法,你还可以再增加代码,让小猫从第二个靶盘跳到第三个靶盘上。注意刚刚提到的技巧,当你把小猫拖到某个位置时,指令区的滑行指令数值就会设置为小猫当前位置的坐标,这时再拖动滑行指令就不需要修改X、Y值了,非常方便:
最后我们再完善一下代码,在两次靶盘跳跃中间增加一个等待指令,最前面加上绿旗执行指令:
第三步:加上背景图
代码编写完成,你也掌握了X、Y坐标的用法,再用Xy-grid这个背景就不合适了。打开 Scratch 内置的背景库,将背景设置为Water and Rocks,我们使用它代表故事中的“永恒之河”(未来你还会掌握如何寻找更合适的背景素材并导入到 Scratch的方法),这个作品就很有场景感了。
现在每次点击绿旗运行程序,小猫都会先“复位”到河流中的第一个靶盘位置,再依次跳到第二、第三个靶盘上,本节程序完成。
指令小贴示
- 移到【X】【Y】:对角色直接定位,指定一个X、Y坐标构成的位置,角色会马上移动到这里,你几乎看不到过程,一般用于在程序开始时对角色设定初始位置;
- 在【X】秒内滑行到【X】【Y】:使用这个指令,你会看到角色在指定的时间内“滑”到指定的位置,这是制作动画的一种方式。
课后思考
X、Y坐标构成的定位系统非常灵活,你可以直接控制角色在指定的时间内出现在舞台的任何位置,而不用让角色“行走”,这为角色提供了很大的自由度,是我们编写各类程序,尤其是游戏类小程序必需掌握的,请多练习几次。
本节通过使用滑动指令,我们模拟了小猫跳跃的过程,但它的动作多少还有些生硬。你能在它跳跃的过程中再增加一些滑动指令,让小猫跳动的指令更加“平滑”一些吗?