1. 零基础入门

1.1. 教程介绍

这是我们新的教程专题栏目——Makecode Arcade初级编程教程,旨在由浅入深深度讲解图形化积木块的含义,类型, 以及积木块在游戏中的使用方法,来理解图块化积木块的运用,尝试独立制作游戏,培养同学们的编程思维能力。

适合年纪:8岁+

1.2. 课前准备

  1. 上网电脑

  2. Xtron掌机

1.3. 课程目标

  1. 了解Makecode Arcade

  2. 在模拟器以及Xtron中体验社区游戏

  3. 创建游戏项目,了解项目结构

  4. 分享游戏

1.4. 什么是Makecode Arcade ?

MakeCode Arcade,是微软发布的一个基于网页且对初学者友好的程序代码编辑器,开发者可以使用图形化模块或 JavaScript编程游戏,在玩游戏中学会编程。

网址: https://arcade.makecode.com

TIPS:无需安装软件,无需注册,只需要一台电脑登录MakeCode arcade编程网页即可编程。

1.5. 进入编程环境,体验游戏

我们通过Arcade网站首页的积木块游戏来了解一下编程环境的各个部分。

1.打开编程网址首页,如果你是第一次使用Arcade,显示的是默认的英文, 你可以点击右上角的设置,选择语言,切换成你想要的语言。

../../../_images/1.gif

2.滚动鼠标,找到【积木块类游戏】, 点击【Falling Duck】打开示例。

../../../_images/2.gif

编程环境

../../../_images/3.webp

3.在左边的模拟器上,你可以体验一下游戏的效果。点击任意按键开始游戏,每次按键按下之后,duck会往上跳动一次, 顺利穿过一个树桩得分+1。

../../../_images/4.gif

TIPS:你编写的游戏实时效果会在模拟器上展示,你可以实时的调试和优化自己的游戏。

4.平台中间的工具箱中,有编程所需要的积木块,拖动积木块到代码区来实现游戏中的功能,工具栏中包含精灵,控制器, 游戏,音乐,场景,游戏信息,循环,逻辑,变量,数学等等类别的积木块,在后期的教程中,会通过游戏带同学们熟悉各个 积木块的使用方法。

5.平台右边的代码区,你可以看到方块中对应的积木块的图形化代码,点击切换成【{}JavaScript】,你可以看到对应的JS 代码。

../../../_images/5.gif

TIPS:在Arcade平台上,你可以通过积木块编程入门,将积木块放到工作区来构建程序,当学生具备一定基础时,再进阶到JS 编程,逐渐锻炼你的逻辑思维以及增进你的编程技巧。

1.6. 项目下载到Xtron

1.Xtron处于关机状态,把Xtron用USB连接到电脑上,屏幕显示如下的F4图案,如果屏幕显示的不是这个图案,那么按下Xtron 的【RST】按键。

../../../_images/6.png

2.点击左下角的【下载】按键,选择Ovobot Xtron。

../../../_images/7.gif

3.找到刚才下载的.uf2 文件,右击鼠标,选择发送到Xtron。

../../../_images/8.gif

4.现在我们可以在Xtron上体验这个游戏了。

../../../_images/9.png

1.7. 新建项目,制作游戏

体验完社区游戏之后,我们要开始自己的游戏编程。首先,我们需要新建一个项目。

1.回到主页,点击【新建项目】,为项目起一个名字。

点击创建进入编程环境,代码区默认有一个当开机时积木块。

../../../_images/10.gif
2.现在,我们来创建一个游戏角色,这里我们称为精灵。

精灵工具箱中选择将mySprite设为精灵类型Player积木块放到当开机时内部。

../../../_images/11.png
3.给精灵设置精灵名字,形象和类型。

▲ mySprite为精灵的名字,你可以为精灵自定义一个想要的名字。下拉mySprite选择重命名变量设置一个精灵名字,比如“玩家”,“炸弹”,“敌人”,“披萨”等等。

../../../_images/12.png

▲ 精灵后面灰色框点击进入绘制精灵页面,精灵的形象可以点击最上方的编辑器自己绘制精灵形象,也可以点击图库选择资料库中的精灵形象。

编辑器自己绘制精灵形象:

../../../_images/13.png

图库中选择资料库中的精灵形象:

../../../_images/14.png

▲ 选择任意一个喜欢的精灵形象,点击完成,就可以在模拟器上看到精灵啦!

../../../_images/15.png ../../../_images/16.png

▲ 精灵的类型有Player(玩家),Projectile(弹射物),Food(食物),Enemy(敌人),还可以自定义添加精灵类型。

../../../_images/17.png
4.添加使用按键控制精灵移动

▲ 控制器工具箱中选择使用按键移动mySprite积木块到创建精灵积木块下方。

../../../_images/18.png

▲ mySprite下拉选择玩家。

../../../_images/19.png
5.现在在模拟器上的精灵可以通过键盘或鼠标来控制其移动。

同样,我们也可以把自己的项目下载到Xtron中。

../../../_images/20.png

1.8. 保存项目

1.下载项目文件

点击编程网页中的下载,弹出硬件选择窗口,我们选择Ovobot Xtron,下载的游戏文件保存到下载文件夹中。

../../../_images/21.png

如果想继续编程该游戏,打开makecode Arcade网站,首页选择导入-导入已下载的游戏文件继续编程。

../../../_images/22.png ../../../_images/23.png

TIPS:这种保存文件方式即可以用于导入到硬件体验游戏又可以保存到电脑中以便下次继续编程。

2.发布游戏链接

除了下载,你还可以用分享的方式向朋友展示你的作品。点击【发布项目】,会生成一个项目链接,通过这个链接, 你的朋友可以访问到你的作品,并且可以在他的电脑上编辑你的程序。

../../../_images/24.gif

TIPS:这种保存文件方式可以通过分享链接的形式分享给你的朋友或者发布在社交平台让他人可以访问到你的游戏作品, 但不能用于硬件。

3.保存项目文件png格式

编程区选择最下方保存按钮,保存PNG格式,下次继续编程时将其导入或拖动到编辑器中以重新加载游戏。

../../../_images/25.png ../../../_images/26.png

TIPS:这种保存文件方式适合保存游戏在电脑中以方便继续编程。