Phaser 基础入门（初学篇，持续更新...）

撑起自己半边天

已于 2022-05-10 15:46:16 修改

阅读量2.5k

点赞数 4

分类专栏： phaser 文章标签：前端 phaser

于 2022-05-09 17:42:02 首次发布

本文链接：https://blog.csdn.net/weixin_43840289/article/details/124667898

版权

phaser 专栏收录该内容

9 篇文章

订阅专栏

在初步的了解中Phaser 比较容易上手的一门游戏语言，能满足日常小游戏的开发。

phaser3：官网

安装：

NPM

npm install phaser

CDN：

<script src="//cdn.jsdelivr.net/npm/phaser@3.51.0/dist/phaser.js"></script>
//或
<script src="//cdn.jsdelivr.net/npm/phaser@3.51.0/dist/phaser.min.js"></script>

创建一个游戏容器：

new Phaser.Game(width, height, renderer, parent, state, transparent, antialias,physicsConfig)

参数说明：
width、height  	//游戏世界的宽高
renderer		//渲染方式：Phaser.CANVAS / Phaser.WEBGL / Phaser.AUTO
parent			//游戏的容器，可以是一个dom元素或id
state			//游戏默认场景
transparent		//画布元素是否透明
antialias		//是否开启抗锯齿
physicsConfig	//物理引擎配置

...
<body>
	<div id="container"></div>
	<script>
		var game = new Phaser.Game(300,400,Phaser.AUTO,'container');
		game.paused = true  //'true'表示暂停
		game.add; 			//游戏对象工厂的一个引用
		game.camera;		//游戏摄像机对象的引用
		game.input;			//游戏中用户交互事件的引用
		game.load;			//游戏资源加载模块的引用
		game.scale;			//游戏缩放模块的引用
		game.sound;			//游戏声音模块的引用
		game.stage;			//游戏舞台对象的引用
		game.world;			//游戏中的世界对象的引用
		game.particles;		//粒子系统的引用
		game.physics;		//物理引擎系统的引用
		game.state;			//场景管理对象的引用
	</script>
</body>

场景对象

创建场景对象Phaser.State的两种形式：

对象形式

{
	init:function(){},     //场景数据初始化
	preload:function(){},	//场景资源预加载
	create:function(){},	//创建显示对象或注册事件等，例如：游戏精灵的创建，游戏某些背景的添加
	update:function(){},	//游戏的每一帧都会调用一次，一般用来更新游戏数据
	render:function(){}		//游戏渲染
}

函数形式

function(){
	this.init = function(){},
	this.preload = function(){},
	this.create = function(){},
	this.update = function(){},
	this.render = function(){}
}

场景方法的执行顺序，也算是生命周期了

在这里插入图片描述
注：create() 方法需要在preload() 里面的资源加载完毕后才会执行

场景的管理（Phaser.StateManager）

var game = new Phaser.Game();
//game.state 可以引用当前游戏的Phaser.StateManager对象
game.state.add(name, state);  //添加场景
game.state.start(name);    	 //运行或者说启动场景

例子：

...
<body>
	<div id="container"></div>
	<script>
		var game = new Phaser.Game(300,400,Phaser.AUTO,'container');
		function state(){
			this.init = function(){},
			this.preload = function(){},
			this.create = function(){},
			this.update = function(){},
			this.render = function(){}
		}
		game.state.add('state', state);
		game.state.start('state');
	</script>
</body>

资源加载

Phaser中游戏 资源加载 使用的是 Phaser.Loader 对象

var game = new Phaser.Game();
//game.load 可以用来引用当前游戏的Phaser.Loader对象
game.load.image();			//加载图片
game.load.spritesheet();	//加载图片集（由多张大小相同，位置规范的图片组合成的图片）
game.load.atlas();			//加载图片集（由多张大小不一，位置不规范的图片组合成的图片）
game.load.audio();			//加载声音
game.load.audiosprite();	//加载声音集（加载由多个音频分段合成的音频文件）
game.load.text();			//加载文本文件
game.load.xml();			//加载xml文件
game.load.binary()			//加载二进制文件

加载事件处理

var game = new Phaser.Game();
//game.load.onFileComplete 返回一个Phaser.Signal事件对象，可以在它上面注册对象
game.load.onFileComplete.add(function(){ //单个资源加载完成事件
	//此时可使用 game.load.progress 属性来获取当前的资源加载进度
	var progress = game.load.progress;  //1表示进度的1%，100表示100%，也就是加载完成了
});
game.load.onLoadComplete.add(function(){
//所有资源加载完成
//some code （可在此加载您的第一个游戏场景）
})

加载示例：

...
	var game = new Phaser.Game()
	//资源加载
	this.preload = function(){
		game.load.image('bgImg','bgimg.jpg');
		game.load.image('startBtn','startbutton.jpg');
		game.load.onFileComplete.add(function(){
			console.log(game.load.progress) //打印加载进度
		})
	}
	this.create = function(){}

舞台、世界以及摄像机对象

舞台对象（Phaser.Stage）

var game = new Phaser.Game()
//修改舞台背景颜色
//注意：颜色值只能是十六进制的写法
game.stage.setBackgroundColor( backgroundColor )

//例子
game.stage.setBackgroundColor(oxff0000)

世界对象（Phaser.World）

var game = new Phaser.Game()
//设置游戏世界边界的大小
game.world.setBounds(x,y,width,height)

摄像机对象（Phaser.Camera）

var game = new Phaser.Game()
game.camera.x = 100;					//摄像机x轴的位置
game.camera.y = 100;					//摄像机y轴的位置
game.camera.focusOn(displayObject);		//让摄像机定位在 displayObject 物体上
game.camera.focusOnXY(x,y);				//让摄像机定位到指定 x,y 这个坐标上
game.camera.follow(target);				//让摄像机跟随 target 这个物体