你有没有一个想要自己编写游戏的梦想呢?但是却苦于没有太多的编程经验而无从下手?现在有了 Microsoft 家出的 Arcade 平台,只需轻轻拖动方块即可完成游戏编写!不需要你拥有任何的编程经验。 最关键的一点是:它是一个免费的在线编程平台。这也就意味着:

  • 你不需要为使用这个平台付费,且
  • 你不需要对你的电脑做太多繁琐的环境部署操作。只要有一个合适的浏览器就可以开始了(至于什么是合适的浏览器,后文再讲)。

不过,正因为这是一个浏览器端的项目,所以你需要确保你的设备配置较高,以免在加载较多的 JavaScript 卡崩了你的设备。对于数据的丢失,pokon548 不负任何责任 :)

这个平台为移动端专门有优化过界面,故请放心地在移动平台上使用 Arcade。操作的逻辑和电脑版没有太大的差异。 pokon548 只是为了方便演示,才使用了电脑。其实并不是只有电脑才能使用这个平台。

先睹为快

在开始之前,先看看 Arcade 长啥样吧: 丰富的官方示例和教程,不怕找不到学习的材料。 深度截图20190808121854.png 深度截图20190808121945.png

编辑器界面。可以看到所有的游戏逻辑都不是由代码组装起来的,而是一个一个的方块(如果你知道 Scratch,那么这样的界面对你而言应该是再熟悉不过了。什么,你不知道 Scratch 是何物?没关系 点我 马上了解)。 深度截图20190806160334.png 深度截图20190808122323.png

还能在浏览器上即时游玩你编写的游戏深度截图20190808122404.png

你也有一个博客?不妨考虑下把你写的游戏以 html 代码的放肆插入到博客里吧!据说这样做的博主都提升了自己的“博客回头率”(误)。 深度截图20190808122537.png

怎么样,感觉是不是还不错?那么我们就继续吧!

确认环境是否可以无误运行 Arcade

为了确保你的环境适合运行 Arcade,而不会出现“写完游戏但保存不到本地”等尴尬情况,请一定按照下面的步骤检查你的环境。

  1. 点击 这个链接 ,进入到 Arcade 网页里。 如果浏览器支持的话,应该最终会出现下面这个界面: (因为我已经用过 Arcade 很多次了,所以“我的项目”里有一些我自己的东西。你可能没有,但不用担心。这不会影响到后面步骤的操作 :)) 深度截图20190808123422.png 如果浏览器不支持 Arcade,那么你应该会看到这个界面: 深度截图20190808130153.png 如果你是后一种情况,那么你就需要安装一个新的浏览器了。个人推荐 Firefox 或者 Chrome,它们对于新标准的支持程度较好。

  2. 找到“积木块类游戏”板块,随意点一个游戏(比如说这里的“Falling Duck”)。并点击“打开示例”。 深度截图20190808124039.png 深度截图20190808124044.png

  3. 等待项目加载完毕后,观察界面最后是不是长这个样子。 深度截图20190808124330.png 如果界面元素有任何缺失,都说明浏览器支持程度不好。换一个浏览器吧。

  4. 点击左边的“播放键”,观察游戏是否可以正常在线运行。 深度截图20190808124502.png 不能就换浏览器。

  5. 点击左下角的“下载”,硬件随便点一个(比如说这里的 Meowbit),测试是否能正常下载代码。

  • 这一步很多浏览器做不了!!
  • 这一步很多浏览器做不了!!!
  • 这一步很多浏览器做不了!!!请务必认真对待。 深度截图20190808124841.png 深度截图20190808125022.png 如果能够正常下载代码,最后浏览器应该会提示你下载一个叫做“arcade-……..-.uf2”的文件(如下图所示)。 深度截图20190808125017.png 如果下载的文件名是一串由”data:“开头的字符串,或者压根就没有提示有文件可以下载,那么换浏览器。

如果以上步骤均通过,那么恭喜你,Arcade 在你的设备上可以正常运作!:)

Arcade 的项目是保存在你的设备上的

注意:Arcade 是一款应用。这也意味着在你第一次在线加载完毕之后,后面你不需要联网也可以打开这个页面。 你所有的项目也是保存在设备本地的。没有存在微软服务器上这一说!除非你使用了“分享”功能!因此,请不要没事的时候就清理一次浏览器的缓存,不然你的项目分分钟没掉!!

那么,有人肯定会问了:我设备上有一些软件会特别热心的帮我清除浏览器缓存,我该怎么办?没关系。参照下面的步骤把你的项目保存到文件里就好了。 首先,你要先进入编辑器界面。待项目加载完毕后(进度圈不再转的时候),点击下方的“保存按钮”(软盘样子)。 深度截图20190808133220.png 如果一切正常,最后浏览器应该会提醒你下载一个“png”文件(一定有人会问:哎一个图像文件怎么能存储我的项目呢?其实这是一种叫做“二进制拷贝”的东西,具体原理可以戳 这里深度截图20190808133334.png 深度截图20190808133648.png 将其妥善的保存在设备上即可。如果要让 Arcade 重新加载这个项目,只需要在主界面点击“导入”。 深度截图20190808133804.png 在弹出的对话框里点击“导入文件…”,上传你之前保存的“png文件”即可! 深度截图20190808133934.png

先玩玩看

那么,这篇文章也就到此为止了。后续的内容将会在新的博文里推出。在继续之前,pokon548 强烈建议你多看看或者玩玩 Aracde 上已有的游戏或者教程,你会受益良多的的。 这也是我第一次试着写教程,所以肯定有一些不足的地方。还望各位能够提建议 :)我会虚心接受的。

开始下一节

当你已经可以独立完成这一章节的所有内容后,你就可以进行下一步的学习了!如果是这样,请 点这里