2. 制作姓名牌

2.1. 教程介绍

上节课我们用素材库的形象创建了精灵,同时也讲解了编辑器可以绘制想要的精灵形象。在这一节课,让我们化身为小小 设计师,利用图形编辑器来绘制图形,制作自己的姓名牌。这是我们新的教程专题栏目——Makecode Arcade初级编程教 程,旨在由浅入深深度讲解图形化积木块的含义,类型,以及积木块在游戏中的使用方法,来理解图块化积木块的运用, 尝试独立制作游戏,培养同学们的编程思维能力。

游戏名称:小小设计师

目标:绘制自己的姓名牌

重点知识:图像编辑器的使用

2.2. 课前准备

图形编辑器等于我们绘画所准备的画板,画笔,橡皮擦等工具,在图形编辑器里,可以充分发挥想象力和创造力去绘 制喜欢的形象,那么图形编辑器中每个工具具体怎么使用呢?

../../../_images/name1.webp

这节课我们会讲解图形编辑器中的工具使用方法以及利用图形编辑器来为自己的姓名牌设计背景和形象。

在进入到新的班级认识新同学时,老师会让同学们做个自我介绍或者贴个姓名牌在座位上,可以帮助大家尽快熟悉起来, 很多小朋友也手工制作过这样的姓名牌吧👇👇👇。

../../../_images/name2.webp ../../../_images/name3.webp

在Arcade中,我们可以用编程的方式将姓名牌编写到游戏掌机中,做一个独一无二的酷炫姓名牌。

2.3. 步骤分解

  1. 加载背景颜色到场景并设置一个基础背景色。

  2. 加载游戏背景图片到场景,编辑器工具介绍。

  3. 绘制游戏背景图片,在背景中添加姓名,卡通元素。

2.4. 动手实践

1.加载背景颜色到场景并设置一个基础背景色

👉浏览器输入网址:

https://arcade.makecode.com/

新建项目取名“小小设计师”。

../../../_images/name4.png

👉场景工具箱中托取设置背景颜色为积木块到当开机时内部。

../../../_images/name5.png ../../../_images/name6.png

👉点击灰色框选择一个喜欢的背景颜色。

../../../_images/name7.png

2.加载游戏背景图片到场景,编辑器工具介绍

👉场景工具箱中选择设置背景图片为积木块到当开机时内部,设置背景颜色积木块下方。

../../../_images/name8.png

👉点击灰色框进入图形编辑器界面,绘制像素化图形。

像素画是一种以像素为基本单位来制作的电脑绘图表现形式,是在视觉上由很明显的一格格的像素拼凑而成的栅格化艺术形式,和马赛克以及十字绣有相似之处。

Arcade中图形编辑器采用的是16色的像素图块来绘制图形,像素化图形操作简单,不需要太多的美术基础也可上手绘制。

背景图形编辑器使用介绍

../../../_images/name9.png ../../../_images/name10.webp

TIPS:按住Alt键调用吸取颜色工具,可吸取画布中的颜色。点击完成保存图形,不想保存点击图形编辑器外任意位置即可返回。

👉绘制姓名牌

编辑器的各个工具介绍好了,下面就是同学们动手实践操作的环节了,同学们可以先在本子上手绘一个姓名牌草稿。

以老师制作一个姓名牌为例

构思姓名牌的构成:

边框,姓名,卡通形象

实施步骤:

1.设置背景颜色

2.设置背景图形(边框+姓名)

3.创建精灵

4.设置精灵位置

老师在背景图形编辑器中制作的姓名牌:

../../../_images/name11.webp

创建精灵积木块中的图库中选择一个精灵形象:

../../../_images/name12.png

设置精灵位置:

../../../_images/name13.png

屏幕显示效果:

../../../_images/name14.png

TIPS:创建精灵的图形编辑器和创建背景图形编辑器一样,同学们可以自己绘制,也可以在图库中选择,当然你还可以先选择图库中的精灵形象,在此基础上修改精灵形象变成自己喜欢的精灵。

下面就请同学们动手尝试制作一个自己的姓名牌吧!绘制好满意的姓名牌后,将程序下载到Xtron体验。

../../../_images/name15.png