一、安装
1、游戏引擎下载地址：https://phaser.io/download/stable
2、引入游戏引擎文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Game Demo</title> <!-- 引入 JS 文件 --> <script src="js/phaser.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> </body> <script type="text/javascript"> </script> </html>
3、使用 JavaScript 脚本初始化 2D 游戏
<script type="text/javascript">
var config = {
type: Phaser.AUTO, // 游戏渲染器。Phaser.AUTO(自动选择)，Phaser.WEBGL, Phaser.CANVAS，Phaser.HEADLESS(不渲染)。
width: 800, // 游戏高度
height: 600, // 游戏宽度
physics: {
default: 'arcade', // 引入 Arcade 物理引擎
arcade: {
gravity: { y: 300 }, // 设置重力值
debug: false, // 不开启 debug
}
},
scene: {
preload: preloadGame,
create: createGame,
update: updateGame
}
};
var game = new Phaser.Game(config);
function preloadGame() {
// 游戏资源预加载函数
}
function createGame() {
// 游戏场景创建函数
}
function updateGame() {
// 游戏逻辑实现函数
}
</script>4、点我下载这个zip文件，它含有本教程每一步的代码和资源。
二、加载资源
// 游戏资源预加载函数
function preloadGame ()
{
this.load.image('sky', 'assets/sky.png'); // 加载图片，并将资源标识名设置为 sky
this.load.image('ground', 'assets/platform.png'); // 加载图片，并将资源标识名设置为 ground
this.load.image('star', 'assets/star.png'); // 加载图片，并将资源标识名设置为 star
this.load.image('bomb', 'assets/bomb.png'); // 加载图片，并将资源标识名设置为 bomb
this.load.spritesheet('dude', 'assets/dude.png', {frameWidth:32, frameHeight:48}); // 加载精灵表单，并且以 32 * 48 的尺寸切割图片
// PS：sprite sheet（精灵表单），可以把它看作是一张巨大的图片，里面放着许许多多的 sprite（图片）
}三、创建游戏背景
// 游戏场景创建函数
function createGame() {
// 在Phaser 3 中，所有游戏对象的定位都默认基于它们的中心点
// 这个背景图像的尺寸是800 x 600像素，所以，如果我们显示它时将它的中心定在0 x 0，你将只能看到它的右下角。
// 如果我们显示它时定位在400 x 300，你能看到整体。
// 400和300是图像坐标的 x 值和 y 值
/*this.add.image(400, 300, 'sky');
this.add.image(400, 300, 'star');*/
// 当然。你可以用setOrigin(设置原点)来改变这种情况。
// 比如代码this.add.image(0, 0, 'sky').setOrigin(0, 0)，将把图像的绘制定位点重置为左上角
// 咱刚入门为了理清逻辑，就先将绘制定位点重置为左上角吧。
this.add.image(0, 0, 'sky').setOrigin(0, 0);
// PS：如果你先放star(星星)图像，它将被sky(天空)图像盖住。
}