phaser3-实现瓦片地图

phaser3如何实现瓦片地图？

如上图所示首先要准备一个工具

Tiled

然后把准备好的图片精灵导入进工具里面，随便涂涂画画，很简单，网上有资料。

最后导入JSON格式的瓦片文件给phaser3使用即可。

class SceneB extends Phaser.Scene {
constructor() {
super({ key: 'sceneB' })
this.controls = null;
this.map = null;
this.marker;
}
preload() {

this.load.image('mapImg', './static/map.png');
this.load.tilemapTiledJSON('mapJson', './static/json3.json');
}

create() {
//绘制
var text = this.add.text(10, 10, 'Scene A', {
font: '16px Courier',
fill: '#ffffff',
});
// 绘制瓦片地图
this.drawTileMap();

}
// 绘制瓦片地图
drawTileMap(){

this.map = this.make.tilemap({ key: 'mapJson'});
var tiles = this.map.addTilesetImage('map1','mapImg'); // 'l1',
var layer = this.map.createLayer('layer1', tiles, 0, 0);
console.log(this.map.heightInPixels, this.map.widthInPixels);



//如果单击游戏对象，则会触发此事件。
//我们可以使用它在游戏对象本身上发出“clicked”事件。
this.input.on('gameobjectup', function (pointer, gameObject)
{
// console.log(pointer, gameObject)
gameObject.emit('clicked', gameObject);
}, this);
// 设置相机边界和地图边界保持一致
this.cameras.main.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels);
var cursors = this.input.keyboard.createCursorKeys();
console.log(cursors)
var controlConfig = {
camera: this.cameras.main,
left: cursors.left,
right: cursors.right,
up: cursors.up,
down: cursors.down,
speed: 0.5
};
// 创建操作相机配置
this.controls = new Phaser.Cameras.Controls.FixedKeyControl(controlConfig);
// this.controls.cameras.setBackgroundColor()
console.log('camera', this.controls.camera, );

// 绘制纯色背景
// this.add.rectangle( 0, 0 ,this.map.widthInPixels,this.map.heightInPixels,'0xffffff');

}


//如果单击游戏对象，则会触发此事件。
//我们可以使用它在游戏对象本身上发出“clicked”事件。
this.input.on('gameobjectup', function (pointer, gameObject)
{
// console.log(pointer, gameObject)
gameObject.emit('clicked', gameObject);
}, this);

// 设置相机边界和地图边界保持一致
this.cameras.main.setBounds(0, 0, gWidth, gHeight);
var cursors = this.input.keyboard.createCursorKeys();
console.log(cursors)
var controlConfig = {
camera: this.cameras.main,
left: cursors.left,
right: cursors.right,
up: cursors.up,
down: cursors.down,
speed: 0.5
};
// 创建操作相机配置
this.controls = new Phaser.Cameras.Controls.FixedKeyControl(controlConfig);
}

clickHandler(box) {
console.log('监听---', box)
box.fillAlpha = (1);
}

update(time, delta) {
// console.log('aaa', time, delta)
// 需要实时更新
this.controls.update(delta);
}
}

查看更多关于phaser3-实现瓦片地图的详细内容...