网站地图    收藏   

主页 > canvas引擎 > Phaser游戏引擎 >

phaser3-实现瓦片地图

来源:未知    时间:2021-07-11 18:18 作者:小飞侠 阅读:

[导读] phaser3如何实现瓦片地图? 如上图所示首先要准备一个工具 Tiled 然后把准备好的图片精灵导入进工具里面,随便涂涂画画,很简单,网上有资料。 最后导入JSON格式的瓦片文件给phaser3使...

phaser3如何实现瓦片地图?

QQ20210711-181816.png

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

Tiled

image.png

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

image.png

最后导入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);
}
}


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论