Game development

Load the assets and print them on screen

翻译正在进行中。

这是Gamedev Phaser教程 16 第三步您可以在Gamedev-Phaser-Content-Kit / demos / lesson03.html完成本课程后找到源代码

我们的游戏将围绕屏幕滚动,弹出一个桨,摧毁砖块赚取积分 - 熟悉吗?在本文中,我们将介绍如何将sprite添加到我们的gameworld中。

有一个球

我们开始创建一个JavaScript变量来表示我们的球 - 在游戏初始化代码(我们的var game...块)和preload()函数之间添加以下行

var ball;

注意:为了本教程,我们将使用全局变量。本教程的目的是教导Phaser特定的游戏开发方法,而不是主观的最佳方法。

加载球精灵

使用Phaser加载图像并将其打印在我们的画布上比使用纯JavaScript容易得多。要加载资产,我们将使用game由Phaser创建对象,执行其load.image()方法。preload()函数的底部添加以下新行

function preload() {
    // ...
    game.load.image('ball', 'img/ball.png');
}

第一个参数是我们要提供资产的名称 - 这将在我们的游戏代码中使用,例如我们的ball变量名称,所以我们需要确保它是一样的。第二个参数是图形资源的相对路径。在我们的情况下,我们将加载我们的球的图像(请注意,文件名不一定是一致的,但我们建议,因为它使一切更容易遵循。)

当然,要加载图像,它需要在我们的代码目录中可用。从Github抓住球图像,并将其保存/img在与index.html文件相同位置目录中

现在,要在屏幕上显示,我们将使用另一种Phaser方法add.sprite()create()函数内添加以下新的代码行,如图所示:

function create() {
    ball = game.add.sprite(50, 50, 'ball');
}

这将添加球到游戏,并将其呈现在屏幕上。前两个参数是要添加的画布的x和y坐标,第三个是我们之前定义的资产的名称。就是这样 - 如果你加载你的index.html文件,你会看到已经加载并在画布上渲染的图像!

比较你的代码

您可以在下面的现场演示中查看本课程的完成代码,并使用它来更好地了解它的工作原理:

下一步

打出球很容易; 接下来我们将尝试在屏幕上移动球

文档标签和贡献者

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