Phaser 3入门

严阳秋

2023-12-01

Phaser是什么?

Phaser是一个HTML5游戏框架，它的目的是辅助开发者真正快速地制作强大的、跨浏览器的HTML5游戏。做这个框架，主要是想发掘现代浏览器（兼及桌面和移动两类系统）的优点，。对浏览器的唯一要求是，支持画布（canvas）标签。

我们先看一段代码:

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload () { }
function create () { }
function update () { }

解释:

配置: config

（配置）对象意味着你怎么配置Phaser游戏。有很多选项可以放在这个对象里，当你的Phaser知识增加时，你会碰到它们。不过在本教程中，我们只打算设置渲染器（renderer）、尺寸和默认Scene（场景）。
type
属性type可以是Phaser.CANVAS，或者Phaser.WEBGL，或者Phaser.AUTO。这是你要给你的游戏使用的渲染环境（context）。推荐值是Phaser.AUTO，它将自动尝试使用WebGL，如果浏览器或设备不支持，它将回退为Canvas。Phaser生成的画布元素（canvas element）将径直添加到文档中调用脚本的那个节点上，不过也可以在游戏配置中指定一个父容器，如果你需要的话。
width/height
属性width和height设定了Phaser即将生成的画布元素的尺寸，在此例中是800 x 600 像素。这是游戏显示所用的分辨率，而你的游戏世界（world）可以是任意尺寸

Phaser.Game
一个Phaser.Game对象实例（instance）赋值给一个叫game的局部变量，上述配置对象传给这个实例。这将开始启动Phaser的过程。

在Phaser 2 中，对象game用作几乎所有内部系统的入口，并常常是通过全局变量访问它。在Phaser 3 中不再如此，在全局变量中存储游戏实例不再有用。

preload(): 加载资源

Phaser启动时会自动找到这个函数，并加载里面定义好的所有资源
this.load.image(key, url)
this.load.spritesheet(key, url, conf );
key: 键值(下面的’sky’),这个字符串是一个链接，指向已加载的资源，你在代码中生成游戏对象时将用到它。你可以随意使用任何有效的JavaScript字符串作为键值。

this.load.image('sky', 'assets/sky.png'); // 加载静态图片
this.load.image('ground', 'assets/ground.png'); // 加载静态图片
this.load.spritesheet('dude',   'assets/dude.png',  { frameWidth: 32, frameHeight: 48 }  ); // 加载精灵表单,一张背景图,上面有很多不同状态的小图像

create() : 创建

显示图像: this.add.image(x, y, ‘sky’);

this.add.image(400, 300, ‘sky’); // 400,300画布中心点
也可以使用 this.add.image(0, 0, ‘sky’).setOrigin(0, 0)，将把图像的绘制定位点重置为左上角

在Phaser 3 中，所有游戏对象的定位都默认基于它们的中心点。这个背景图像的尺寸是800 x 600像素，如果我们显示它时将它的中心定在0 x 0，你将只能看到它的右下角。如果我们显示它时定位在400 x 300，你能看到整体。

层级

this.add.image(400, 300, ‘sky’)
this.add.image(400, 300, ‘ground’)
这种情况下,ground会覆盖sky

物理系统: this.physics

使用Arcade（游乐场）物理系统（Physics system）
增加physics配置

var config = {
    ...,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },
    ...
};

function create(){
	this.physics.add.staticGroup()
}

Group

那么什么是组呢？如其名所示，是把近似对象组织在一起的手段，控制对象全体就像控制一个统一的个体。你也可以检查组与其他游戏对象之间的碰撞。组能够生成自己的游戏对象，这是通过便利的辅助函数如create实现的。物理组会自动生成已经开启物理系统的子项（children），省得你处理时跑腿。

静态物理组: staticGroup

var platforms = this.physics.add.staticGroup()

生成一个静态物理组,在Arcade物理系统中.
静态物体只有位置和尺寸。重力对它没有影响,完全是静态的。用作地面和平台很完美
动态物体可以通过外力比如速度（velocity）、加速度（acceleration），得以四处移动。它可以跟其他对象发生反弹（bounce）、碰撞（collide），此类碰撞受物体质量和其他因素影响。

上面的platforms就相当于一个平台,我们可以在组里面生成每一项
platforms.create(x, y, key)

// 坐标(400,568),放大2倍,刷新body,platforms是静态组,变动的时候不会自动更新,需要刷新body
platforms.create(400, 568, 'ground').setScale(2).refreshBody(); 
platforms.create(600, 400, 'ground');

物理组: group

stars = this.physics.add.group({
    key: 'star', // 需要用到的资源key值
    repeat: 11, // 重复的个数
    setXY: { x: 12, y: 0, stepX: 70 } // 设置位置,初始是x: 12，y: 0，然后x步进70,第一个子项12x0；第二个远离70像素，位于82x0；第三个在152x0，依次类推...
});

stars.children.iterate(function (child) {
	child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});

// this.physics.add.collider(stars, platforms); // 设置stars和静态物理组碰撞器,下面会讲到

生成物理精灵: sprite(x, y, key);

精灵是通过物理游戏对象工厂函数生成的，通俗来说就是默认拥有一个动态物体。

var player = this.physics.add.sprite(100, 450, 'dude');
player.setBounce(0.2); // 设置反弹,落地后反弹一点点
player.setCollideWorldBounds(true); // 设置精灵坐在的游戏的边界为画布大小,确保精灵一直在视野中

物理精灵在生成时，即被赋予body属性，这个属性指向它的Arcade物理系统的Body。它表示精灵是Arcade物理引擎中的一个物体。物体对象有很多属性和方法

player.body.setGravityY(300); // 在一个精灵上模仿重力效果,值越大感觉越重，下落越快

overlap: 是否重叠

this.physics.add.overlap(player, stars, collectStar, null, this);
// 组player与组stars是否有重叠;
function collectStar (player, star) {
    star.disableBody(true, true); // start销毁掉
}

碰撞器: collider(obj1,obj2)

碰撞器:它接收两个对象，检测二者之间的碰撞，并使二者分开

bombs = this.physics.add.group({key:'bomb',...});
player = this.physics.add.sprite(100, 450, 'dude');

this.physics.add.collider(player, bombs, hitBomb, null, this);  // 设置player 和 bombs 碰撞. 
function hitBomb(player, bomb){ // 当每一个bom碰到了player的时候
	// set...
}

文本: text(x,y,str,{…style}) / setText(str)

scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
scoreText.setText('Score: ' + score); // 设置文字内容

16 x 16是显示文本的坐标位置。'score: 0’是要显示的默认字符串，接下来的对象包含字号、填充色,

定义动画: anims()

创建一个名字为"left"的动画,
'left’动画使用0, 1, 2, 3帧，跑动时每秒10帧。'repeat -1’告诉动画要循环播放

this.anims.create({
    key: 'left', // 还可以创建,right,turn
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

键盘控制: keyboard.createCursorKeys()

if (cursors.left.isDown) { // 左键按下
    player.setVelocityX(-160);
    player.anims.play('left', true); // 上面创建的left动画
} else if (cursors.right.isDown) { // 右键按下
    player.setVelocityX(160);
    player.anims.play('right', true);
} else { // 其他按下
    player.setVelocityX(0);
    player.anims.play('turn');
}
if (cursors.up.isDown && player.body.touching.down) { // 上键按下的时候精灵正在下落
    player.setVelocityY(-330);
}