Making games with phaser

Posted on

在用js做游戏前，对游戏引擎了解一下，Phaser是H5 2D游戏开发的开源（GitHub关注度还蛮高的）免费，支持JS和TS，基于Pixi.js引擎，内置游戏对象的物理属性还可以引用外部引擎，渲染模式同时支持Canvas和WebGL，基于浏览器支持可自由切换。
特点：轻便、免费
（让我最舒服的是，可以引用像matter、arcade的物理引擎），具体自行网上了解。

下载与安装教程

以下是我用phaser做游戏时，过程中遇到的问题

1、碰撞问题


这个问题我到现在我还是懵逼，望指正。

不过在后面我制作中，可以用一个方法解决，在另一个框架crafty.js中发现的，我们可以安排它一手绕过这个问题，用canvas创建一个平台然后 把这平台颜色搞成透明，再加入physics

至于碰撞的详细问题，一般可以在Google或者官网上找到解决方法j(这个网站对于js问题来说还行：https://stackoverflow.com



2、phaser+tile制作游戏地图

tiled是一个制作游戏地图的挺好的软件，嗯，而且易掌握，教程呢，网上找很多例子，这就总结一下我在制作过程中遇到的问题

  1. 当新建tiled地图时，要注意地图块那里的像素问题，因为会在引入地图块集是对应的像素大小
  2. 创建图层时，名称要注意，因为代码引用时需要用到,
  3. 创建新地图时文件类型用.tmx与导出的json放一个文件夹
  4. 注意文件路径！（我就是找了半天总感觉自己代码错了，结果。。。）

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

const gamePlay = {
    key: 'gamePlay',
	preload:function () { 
	this.load.image('background', 'assets/tilesets/bg.png');
	 
	  // At last image must be loaded with its JSON
	  //this.load.atlas('player', 'assets/images/kenney_player.png','assets/images/kenney_player_atlas.json');
	  this.load.image('tiles', 'assets/tilesets/Platform.png');
	  // Load the export Tiled JSON
	  this.load.tilemapTiledJSON('map', 'assets/tilemaps/map-3.json');
	this.load.atlas('player', 'assets/images/kenney_player.png','assets/images/kenney_player_atlas.json',25,25);
	
},

create:function () {
	//const backgroundImage = this.add.image(250, 200,'background').setScale(1.3);

	const map = this.make.tilemap({ key: 'map' });
	//console.log(0001)
	const tileset1 = map.addTilesetImage('bg', 'background');
	const tileset = map.addTilesetImage('Platform', 'tiles');
	const platforms = map.createStaticLayer('Platform', tileset, 0, 200);
	
	map.setLayer(tileset1); 
	const bg = map.createStaticLayer('bg', tileset1, 0, 200);
}

3、随机生成enemy的实现

其实也就跟官网上的教程差不多，注意的点就是group组的运用，与单个处理不一样

1
2
3
4
5
6
7
8
9
10
11
   var group = this.physics.add.group({
             key: 'spider',
             repeat: 2,
             setXY: { x: 12, y: 0, stepX: 500 },
           bounceX: 1,//弹性大小
           collideWorldBounds: true,//实现边界的碰撞
		 
       });
   
       group.setVelocityX(100, 10);
this.physics.add.collider(platforms, group);