MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Initialize the framework

这篇翻译不完整。请帮忙从英语翻译这篇文章

这是Gamedev Phaser教程系列的第一课. 在课程完成之后,你可以在Gamedev-Phaser-Content-Kit/demos/lesson01.html找到源码.

在我们开始写游戏的功能之前,我们需要创建一个用来内部渲染游戏的基础架构.使用HTML就能做到 — Parser框架将生成所需的 <canvas> 元素.

游戏的HTML

HTML文档结构非常的简单,这个游戏将整个被渲染在框架生成的<canvas> 元素上. 拿起你最爱的编辑器,挑一个好目录,创建一个HTML文档,存成index.html,然后写下下面的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Phaser Workshop - lesson 01: Initialize the framework</title>
    <style>* { padding: 0; margin: 0; }</style>
    <script src="js/phaser.min.js"></script>
</head>
<body>
<script>
    var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {
      preload: preload, create: create, update: update
    });
    function preload() {}
    function create() {}
    function update() {}
</script>
</body>
</html>

下载Phaser

下面我们将下载Phaser的代码,并应用到我们的HTML文档中.

  1. 进入 Phaser 下载页面.
  2. 选择最适合你的下载项 — 我们建议选择min.js,因为它最小,而且你不太可能想去看它的源码
  3. 将Phaser的源码存到一个和index.html同级的 /js 的目录下
  4. 在上面第一个 <script> 标签里写下phaser的路径.

捋一捋我们干了些啥

这个时候我们在header里定义了charset, <title> 和一些基础的css来重置默认的margin和padding. 我们也用 <script> 标签向页面引入了Phaser源码. body里有第二个 <script> 标签, 我们将在里面写JavaScript代码来渲染和控制游戏.

<canvas> 元素是由框架自动生成的. 我们是通过创建一个Phaser.Game对象并赋给了game变量来初始化的. 参数是:

  • width和height设置 <canvas> 宽高.
  • 渲染方式. 其它三个选项是 AUTO, CANVAS 和 WEBGL. 我们可以指定使用后面两个或者使用AUTO来让Phaser来选择用哪个. 如果WebGL可用的话,一般会选择WebGL,否则就回退到Canvas 2D.
  • <canvas>的id.如果canvas已经存在的话,就用这个 (我们制定为null,因为我们想要Phaser自己新建.)
  • The names to use for Phaser's three key functions that load and start the game, and update the game loop on every frame; we will use the same names to keep it clean.
    • preload takes care of preloading the assets
    • create is executed once when everything is loaded and ready
    • update is executed on every frame.

Compare your code

Here's the full source code of the first lesson, running live in a JSFiddle:

Next steps

Now we've set up the basic HTML and learned a bit about Phaser initialization, let's continue to the second lesson and learn about scaling.

文档标签和贡献者

 此页面的贡献者: Haruhi
 最后编辑者: Haruhi,