pokon548's 博客

探索微创新,为发烧而生

用 Arcade 学习写一款 RPG 游戏 —— 入门

pokon548's Avatar 2019-08-08

  1. 1. 先睹为快
  2. 2. 确认环境是否可以无误运行 Arcade
  3. 3. Arcade 的项目是保存在你的设备上的
  4. 4. 先玩玩看
  5. 5. 开始下一节

你有没有一个想要自己编写游戏的梦想呢?但是却苦于没有太多的编程经验而无从下手?现在有了 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 上已有的游戏或者教程,你会受益良多的的。
这也是我第一次试着写教程,所以肯定有一些不足的地方。还望各位能够提建议 :)我会虚心接受的。

开始下一节

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

本作品采用知识共享署名 3.0 中国大陆许可协议进行许可。您可以在遵守此协定的前提下对本文进行再发布、分享、修改等。

本文最后更新于 天前,文中所描述的信息可能已发生改变