H5网页游戏引擎Phaser 3 Hello World 起步指南 官网文档笔记【一】
官网:http://phaser.io/tutorials/getting-started-phaser3
1、安装web服务器,apache或者nginx都可以
配置完成后,需要浏览器在 http://localhost 查看一下,确保服务搭建成功。
2、安装环境,
其实就是下载JS包
3、编辑器,用来写代码
vscode就可以,或者notepad++,sublime都行
3、配置环境
html页头引入js文件
4、编写hello world代码,可以直接复制黏贴
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.setBaseURL('http://labs.phaser.io');
this.load.image('sky', 'assets/skies/space3.png');
this.load.image('logo', 'assets/sprites/phaser3-logo.png');
this.load.image('red', 'assets/particles/red.png');
}
function create ()
{
this.add.image(400, 300, 'sky');
var particles = this.add.particles('red');
var emitter = particles.createEmitter({
speed: 100,
scale: { start: 1, end: 0 },
blendMode: 'ADD'
});
var logo = this.physics.add.image(400, 100, 'logo');
logo.setVelocity(100, 200);
logo.setBounce(1, 1);
logo.setCollideWorldBounds(true);
emitter.startFollow(logo);
}
5、最后再测试下
怎么测试呢?一般web服务器localhost就能直接访问。
刚刷新页面会看到一个黑框,过一会有动画出来
4、完成,就这么简单。
小编这里有个 Hello World 环境