一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天3D植物，点击查看活动详情。
简单介绍
phaser3是一个开源的js游戏引擎，且更新活跃，是目前最受欢迎的js游戏引擎之一，它的优势在于：
接下来我会初步使用phaser进行一个rpg小游戏尝试。
1. 搭建结构
phaser3的初步框架类似这样：
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配置
简单介绍一下常用的配置属性：
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生成的地图文件。
