一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。
简单介绍
phaser3是一个开源的js游戏引擎，且更新活跃，是目前最受欢迎的js游戏引擎之一，它的优势在于：
- 轻便（只要在html中导入phaser3.js库文件就可以使用）
- 社区活跃（得益于作者的勤奋更新，以及广大开源人士的贡献）。
接下来我会初步使用phaser进行一个rpg小游戏尝试。
1. 搭建结构
phaser3的初步框架类似这样：
<!doctype html>
<head>
<meta charset="UTF-8" />
<title>rpg小游戏</title>
<script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
</head>
<body>
<script type="text/javascript">
var config = {
};
var game = new Phaser.Game(config);
function preload (){
}
function create (){
}
function update ()
{
}
</script>
</body>
</html>
所以重点是你必须在文档中导入phaser3文件，以及自己编写功能的js代码块，当然也可以将代码块写在一个js文件中，再将其导入html文档。
重点看显示功能的script代码块，基础框架由一个进行配置的config对象以及3个函数组成。可以这样理解：proload函数进行预加载资源，create函数创造功能，update函数更新游戏画面。
config配置
简单介绍一下常用的配置属性：
- type指浏览器在加载时用canvas渲染还是webgl渲染，
Phaser.AUTO是用浏览器的默认设置渲染。 - width和height，指游戏界面的宽高
pixelArt: true指定了适合rpg游戏的风格- physics是游戏中的物理机制，如果想让游戏内物体发生碰撞，就需要设置
- scence是游戏场景设置，里面的方法就是下面要介绍的phaser在运行中调用的三个函数
var config = {
type: Phaser.AUTO,
width: 2560,
height: 2560,
pixelArt: true,
backgroundColor: "#898989",
parent: "game-container",
physics: {
default: "arcade",
arcade: {
gravity: { y: 0 }
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
preload函数
proload函数进行预加载资源，在这个rpg游戏中我们要加载地图资源，人物精灵图，以及其他小物件的精灵图。
function preload() {
this.load.image("terrain", "./assets/terrain.png");
this.load.tilemapTiledJSON('mappy', 'assets/废墟.json');
// 精灵表单
this.load.spritesheet('player',
'assets/player.png',
{ frameWidth: 64, frameHeight: 60 } //一帧的宽高
);
//钉子，蘑菇，石头
this.load.spritesheet('tiles_spr',
'assets/terrain.png',
{ frameWidth: 128, frameHeight: 128 } //一帧的宽高
);
}
tiled地图创建
我们要从0创建一个rpg风格的游戏，像这样：
就要先创造一个地图，使用tiled这个软件，这是我们在tiled中创造的地图：
tiled的使用方法可以自行学习，我也推荐这个视频： tiled学习
下一阶段我将介绍如何在phaser3中导入tiled生成的地图文件。
