油漆盒 ============ 描述 --------------- 你用过油漆盒吗?油漆盒中的彩色画笔可以用来绘制多彩的世界。今天,我们将制作出一个独特的油漆盒。下面让我们来一起看看吧。 点击绿旗开始。 .. raw:: html 或者点击 `Paint Box `_, 然后在 Scratch 官网学习在线课程。 所需组件 --------------------------------- 首先,需要准备以下组件: - A RasPad 3 - Scratch 3 (在线或者离线) 你会学到 --------------------- - 使用画笔扩展功能进行绘制。 - 让角色随着鼠标移动。 - 修改服装的大小和光标的位置。 - 使用滑块修改变量的值。 课程指南 -------------- 布置画板,增加画笔扩展功能 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 首先,我们删除之前的角色,然后将 Pencil 角色和 Block-X 角色添加到 Scratch。 上传角色列表中的Eraser.svg、Red.sprite、Blue.sprite、Green.sprite、Yellow.sprite等文件(之前从 `raspad3.git `_ 上下载的),最后将 Pencil 角色和 Block-X 角色的大小分别更改为50和25。 .. image:: img/paint_box1.png :width: 600 :align: center 然后添加扩展功能 **Pen** 。 .. image:: img/paint_box2.jpg :width: 700 :align: center 为 Pencil 添加绘图功能 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 单击 Pencil 角色。首先,我们需要让 Pencil 随着鼠标移动。如果按下鼠标按钮,我们会调用 Pen 扩展函数中的「落笔」块,它可以沿着光标的轨迹进行绘制。否则就会调用「抬笔」块停止绘图。 .. image:: img/paint_box3.png :width: 400 :align: center 点击绿旗,尝试用鼠标控制铅笔画一个笑脸。您会发现图像不是从 Pencil 的尖端绘制的。 .. note:: 由于光标不在铅笔尖上,所以绘制的线是从铅笔的中间绘制的。 点击 **造型**, 选择整个 Pencil 角色并移动它直到画笔尖端与十字光标对齐。 .. image:: img/paint_box4.png :width: 500 :align: center 改变铅笔的绘画颜色。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 如何实现当我们点击舞台下方的颜色选项时,Pencil 会切换相应的颜色? 首先我们为红色部分编写代码,当它被点击时,广播发出一个“红色”消息。 .. image:: img/paint_box5.png :width: 300 :align: center 然后返回到铅笔部分的代码,当它收到“红色”消息时,我们将铅笔的颜色更改为红色。 .. image:: img/paint_box6.png :width: 400 :align: center 同样的方法,为蓝色部分编写代码,当它被点击时,广播发出一个“蓝色”消息。 .. image:: img/paint_box7.png :width: 300 :align: center 再次返回铅笔部分的代码。当它收到“blue”消息时,我们将 Pencil 的颜色更改为蓝色。 在绘画之前,我们清除舞台上的场景并将铅笔颜色设置为红色。 .. image:: img/paint_box8.png :width: 400 :align: center 增加清晰绘图功能。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 有时我们在绘制时会发生意外,所以我们需要添加一个擦除的功能。首先选择 Block-X 角色,当它被点击时,清除所有屏幕。 .. image:: img/paint_box9.png :width: 300 :align: center 然后为铅笔设置一个新的造型, 单击 "造型" 选项, 从左下角的图标中选择 **上传造型** 选项来上传 **Eraser.svg** 文件。 适当修改橡皮擦的大小,然后将其放置在光标的右上角。 .. image:: img/paint_box10.png :width: 700 :align: center 开始为橡皮擦编写代码,当它被点击时,广播发出一条“橡皮擦”消息。 .. image:: img/paint_box11.png :width: 300 :align: center 然后继续为铅笔添加代码,当收到橡皮擦发来的信息时,铅笔就会切换成橡皮擦。 这样当我们点击橡皮擦时,就可以让铅笔切换变成橡皮擦了。 然后将颜色改为与舞台背景色一致的白色,从而实现局部擦除的功能。 .. image:: img/paint_box12.png :width: 400 :align: center 切换画笔以以及它的宽度 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 当铅笔切换成橡皮擦时,我们可以通过点击绘图板上的红色和蓝色将橡皮擦重新切换回铅笔。 .. image:: img/paint_box13.png :width: 400 :align: center .. image:: img/paint_box14.png :width: 400 :align: center 我们还可以随时改变铅笔的宽度。 新建一个名为 "width" 的变量, 然后右击舞台上的 "width" 变量,选择滑杆,你就可以在舞台上看到一个滑块,通过它可以改变“width”变量的值。 .. image:: img/paint_box15_1.jpg :width: 400 :align: center .. image:: img/paint_box15_2.jpg :width: 400 :align: center 用变量 "width" 来调整铅笔的大小。 .. image:: img/paint_box16.png :width: 400 :align: center 限制铅笔的绘画范围 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 只有当铅笔进入绘图区,才可以进行绘画。 .. image:: img/paint_box17.png :width: 600 :align: center 当钢笔进入工具栏时,也就是当y坐标小于等于-120时,我们需要调用「pen up」函数停止绘画。 .. image:: img/paint_box18.png :width: 600 :align: center 挑战 ---------- 相信你很快就能掌握并实现这个游戏,下面可以添加额外的内容来使你的游戏更丰富。 - 添加更多颜色画笔来制作属于您的油漆盒。