第二章 讲故事(1)添加背景和角色
欢迎大家来学习Scraino第二章,这一章我将带领大家来添加几个角色,做一个有意思的小故事,在设计故事的过程中体会编程的乐趣。
本章节主要分以下几个小节来讲述。
1 添加背景
知道Scraino长什么样子,我们就可以来创作一个小故事了。现在舞台区一片空白,太普通了,我们得创建一个故事背景。
大家可以看到右下角有一个更换背景的按钮,我们把鼠标放在上面可以看到出现了很多小按钮,包括“上传背景”、“随机”、“绘制”和“选择一个背景”。

其中“上传背景”我们以后会使用到,这里我们点击“选择一个背景”。
可以看到出现了很多Scraino自带的背景,这里我们选择这个卧室的图片,使它显示在舞台区。

2 添加角色
好,有了故事背景咱们来添加接个角色吧。大家可以看到看到角色区已经有一个橘猫,这是Scraino(或Scratch)的标志,默认打开就有。角色区有一些属性可以调节,包括角色的名称,大小,面朝方向,坐标等。角色及其调整效果都会显示在舞台区,当然我们也可以通过拖动舞台区的角色来改变角色的坐标。现在,我们给橘猫取个名字“小橘”吧。

现在,只有一只橘猫可不能完成一个故事,我们得再加一个过来。可以看到“添加背景”按钮旁边还有一个“添加角色”按钮,我们把鼠标放在上面,和之前一样出现了很多小按钮。我们点击“选择一个角色”,找到下图中的太空狗,把它加进来吧。
好了,现在我们在舞台区得到了下面一幅场景,在卧室中有一只橘猫和一只太空狗。

但太空狗背对着橘猫,不太礼貌,我们让太空狗面对橘猫吧。选中太空狗dot,选中左上角的“造型”,找到水平翻转,让太空狗面对橘猫。在舞台区用鼠标拖动角色,摆放到合适的位置。


3 如何用Scraino编程
故事情节:某天橘猫在家发现了从天坠落的太空狗,于是展开了如下对话:
小橘:咦?你是谁?怎么出现在我家里。
太空狗:我不是普通的狗,我是来自金狗星球的居民。我驾驶宇宙飞船时候出现了一点故障,于是迫降在了地球。
小橘:你身上穿的是什么东西,好酷啊!
太空狗:至于我身上穿的,是最新的宇航服Z793。
小橘:哇!那么说你是太空狗!你能带我去你的星球看看吗?
太空狗:嗯......好吧。
现在,我们得让橘猫和太空狗以文字的形式完成上述对话。
要实现这些对话我们需要到代码区完成代码的编写。那什么是代码呢?
我们点击代码区,如下图,Scraino给我们提供了很多类似积木的指令,而在Scraino中将这些"积木"按照特定的顺序搭建起来就是写代码(或编写程序)。

我们单独拿出一个积木来,可以看到积木上有凹槽和凸起,和我们玩的乐高积木一样,可以将这些积木通过凹槽拼接起来。

程序搭建完后,我们可以点击舞台上方的绿旗,看运行效果。而旁边的红色按钮可以停止程序的运行。

现在我们就看一下编写程序的过程吧!
在我们的设想中,当点击绿旗的时候,程序开始执行,小橘说第一句话:“咦?你是谁?怎么出现在我家里”。
1、首先选中要写程序的角色,这里首先说话的是橘猫,我们点击橘猫。(强调一下:要对哪个角色编写程序一定要先选中这个角色)

2、当绿旗被点击的时候,橘猫开始说话,点击绿旗是一个事件,所以程序一开始先到事件分区拖一个“当绿旗被点击”到脚本区。

3、橘猫说的话以文字的形式显示在舞台上,是外观上的改变,我们点击指令分类区中的外观,正好有一个说话的“积木”,把它拖到脚本区,拼接到“当绿旗被点击”下。白色区域的文字可以编辑,我们输入“咦?你是谁?怎么出现在我家里”,让它说2秒。

4、点击运行看一下效果
“咦?你是谁?怎么出现在我家里”持续了2秒。我们也可以随意更改时间,控制文字显示的时间。

4 添加角色对话
我们把剩下的对话添加进去吧!
太空狗:我不是普通的狗,我是来自金狗星球的居民。我驾驶宇宙飞船时候出现了一点故障,于是迫降在了地球。
我们重复之前的操作,点击太空狗,把“绿旗被点击”和说话积木拖进脚本区。

点击绿旗,看一下程序运行效果。

咦,和我们想要的效果不太一样,橘猫和太空狗同时讲话了,而我们想要的是橘猫说完后,太空狗再讲话,能不能让太空狗等一会再讲话呢?
这里我要先讲一下Scraino程序的运行机制。在Scraino中,当绿旗被点击时,程序从上到下开始依次执行每条积木指令。也就是说,当我们点绿旗的时候,橘猫和太空狗的程序都开始执行。橘猫说第一句话“咦?你是谁?怎么出现在我家里”,说2秒,同时太空狗也开始说第一句话”我不是普通的狗,我是来自金狗星球的居民“说2秒。这就造成了运行结果中的效果。
所以我们需要让太空狗在绿旗被点击后等一段时间。
Scraino给我们提供了一个等待积木如下图,可以设置等待的时间。等待属于控制分区,我们把等待积木拖到太空狗说的第一句话之前吧!

等待积木中的空白区域可以修改等待的时间,那该让太空狗等待多少秒呢?橘猫说完第一句话用了2秒,太空狗接着讲话需要等待2秒。我们在等待积木中输入2。


点击绿旗,再来看一下运行效果吧!



5 练一练
现在大家按照前面的讲解把剩下的对话独立完成吧!
答案将在下一篇文章中解答。
网友评论