Phaser常用api（持续更新）

更新时间 2024年5月21日00:30:09

介绍

Phaser 是一个非常流行的 HTML5 游戏框架，可以用来创建 2D 游戏。通过 npm 安装 Phaser 并使用它编写游戏代码是一个标准的开发流程。下面是一个简单的指南，帮助你使用 npm 安装 Phaser 并编写一个简单的 Phaser 游戏。

Node安装Phaser

步骤 1：初始化项目

1. 打开终端或命令提示符。

2. 创建一个新的项目文件夹，并进入该文件夹：

   mkdir my-phaser-game
   cd my-phaser-game
   

3. 初始化一个新的 npm 项目：

   npm init -y
   

步骤 2：安装 Phaser

在项目中安装 Phaser：

npm install phaser

步骤 3：安装必要的依赖

安装 Phaser 和 Webpack 及其相关插件：

npm install phaser webpack webpack-cli webpack-dev-server html-webpack-plugin --save

步骤 4：phaser创建项目

npm create @phaserjs/game@latest

常用API

配置

1. Phaser.Game: 这是Phaser框架的核心类，用于创建游戏实例。它接受一个配置对象作为参数，该对象可以包含游戏的类型、尺寸、物理引擎设置等。

let config = {  
    type: Phaser.AUTO, // 自动选择渲染器  
    width: 800, // 游戏宽度  
    height: 600, // 游戏高度  
    // ... 其他配置  
};  
let game = new Phaser.Game(config);

图片

继承Phaser.Scene

加载

 this.load.image('bg0', 'assets/bg/sky.png');//bg0是key ,assets/bg/sky.png当前项目图片的地址

创建

	// 创建场景中的元素
       var img= this.add.image(0, 0, 'bg0');

缩放

img.setScale(4);

生命周期方法

1. Phaser.Scene: Phaser使用场景（Scene）来组织和管理游戏内容。每个场景都有自己的生命周期（如预加载、创建、更新、渲染等）和状态。

class MyScene extends Phaser.Scene {  
    preload() {  
        // 预加载资源  
    }  
  
    create() {  
        // 初始化游戏对象  
    }  
  
    update() {  
        // 更新游戏逻辑  
    }  
}

创建精灵

1. Phaser.Sprite: 用于在场景中创建精灵（Sprite）对象。精灵是游戏中的可视元素，可以是图像、动画或其他图形。

let sprite = this.add.sprite(x, y, 'key'); // 'key' 是加载的资源键

多个精灵组合在一起

在Phaser中，如果你想要将多个精灵（Sprites）组合在一起，以便它们作为一个整体进行移动、旋转或缩放，你可以使用几种不同的方法。这里有一些建议的方法：

1. 使用Phaser的Group或Container

   Phaser 3引入了Container，它允许你将多个精灵组合在一起。这样，你可以对整个容器进行移动、旋转和缩放，而不需要单独处理每个精灵。

   let container = this.add.container(x, y); // x和y是容器的初始位置  
   container.add(sprite1); // 添加精灵到容器中  
   container.add(sprite2);  
   container.add(sprite3);  
    
   // 现在你可以对整个容器进行操作  
   container.setPosition(newX, newY);  
   container.setRotation(newRotation);  
   container.setScale(scaleX, scaleY);
   

   Phaser 2使用Group来达到类似的效果，但Container在Phaser 3中提供了更多的功能和灵活性。

2. 使用Physics Groups

   如果你正在使用Phaser的物理系统，并且你的精灵都是物理实体，你可以使用Physics Groups来组合它们。这样，你可以对整组精灵应用物理操作。

   let group = this.physics.add.group();  
   group.create(x1, y1, 'spriteKey1'); // 创建一个精灵并添加到组中  
   group.create(x2, y2, 'spriteKey2');  
    
   // 对整个组应用操作（例如，设置速度）  
   group.setVelocity(xVelocity, yVelocity);
   

3. 使用显示列表（Display List）

   在Phaser中，精灵是添加到显示列表（Display List）中的。这意味着精灵的渲染顺序和层次结构是由它们在显示列表中的位置决定的。你可以通过调整精灵的z索引或它们在容器中的顺序来改变它们的渲染顺序。

4. 手动管理

   如果你不想使用Phaser的内置功能，你也可以手动管理精灵的组合。这意味着你需要自己计算每个精灵的位置、旋转和缩放，并确保在更新或渲染时考虑到它们之间的关系。这种方法更加繁琐，但给了你更多的控制权。

5. 使用插件或扩展

   有些Phaser插件或扩展可能提供了更高级的组合功能。你可以查看Phaser的插件市场或GitHub上的相关项目，看是否有适合你需求的解决方案。

在选择方法时，请考虑你的具体需求、项目的复杂性和你的个人偏好。在大多数情况下，使用Phaser的Container或Physics Groups是最简单、最直接的方法。

物理模型

1. Phaser.Physics: Phaser支持多种物理引擎（如Arcade Physics、Matter.js等），用于处理游戏中的物理模拟和碰撞检测。

this.physics.add.sprite(x, y, 'key'); // 创建一个具有物理属性的精灵

碰撞机制

(Physics & Collision Detection)

Phaser提供了多种物理引擎，其中Arcade Physics是最常用的。你可以使用this.physics.add.sprite()方法来创建带有物理属性的精灵，并使用collide方法来检测碰撞。

let player = this.physics.add.sprite(x, y, 'player');  
let enemy = this.physics.add.sprite(x2, y2, 'enemy');  
  
this.physics.add.collider(player, enemy, function (player, enemy) {  
    // 处理碰撞事件  
});

动画

1. Phaser.Tweens: 用于创建和管理补间动画的类。补间动画可以在一段时间内平滑地改变对象的属性（如位置、旋转、透明度等）。

this.tweens.add({  
    targets: sprite,  
    x: 400,  
    duration: 2000,  
    ease: 'Linear',  
    repeat: -1,  
    yoyo: true  
});

音效控制

1. Phaser.Sound: 用于加载、播放和控制游戏音效的类。

this.load.audio('soundKey', 'path/to/sound.mp3'); // 加载音效  
this.sound.add('soundKey').play(); // 播放音效

代码示例

// 假设你已经加载了一个音频文件  
this.load.audio('backgroundMusic', 'path/to/your/audiofile.mp3');  
  
// 在预加载完成后...  
this.create = function () {  
    // 添加音频到声音管理器  
    let backgroundMusic = this.sound.add('backgroundMusic');  
  
    // 设置音频为循环播放  
    backgroundMusic.loop = true;  
  
    // 播放音频  
    backgroundMusic.play();  
};

游戏资源

1. Phaser.Loader: Phaser的加载器类，用于加载游戏的资源（如图像、音频、数据等）。

this.load.image('key', 'path/to/image.png'); // 加载图像资源

图集功能

加载图集 (Spritesheets)

在Phaser中，你可以使用this.load.spritesheet()方法来加载图集。这个方法需要图集的URL、图集中每个小图的宽度和高度，以及一个可选的帧名称映射。

this.load.spritesheet('key', 'assets/sprites/myspritesheet.png', { frameWidth: 32, frameHeight: 32 });

对图集进行操作

加载图集后，你可以使用this.anims.create()方法来创建动画，并指定从哪个图集中提取帧。

this.anims.create({  
    key: 'myAnimation',  
    frames: this.anims.generateFrameNames('key', { prefix: 'frame', start: 1, end: 8, zeroPad: 2 }),  
    frameRate: 10,  
    repeat: -1  
});  
  
// 在某个精灵上播放动画  
let sprite = this.add.sprite(x, y, 'key', 'frame01.png');  
sprite.anims.play('myAnimation');

用户控制

键盘事件监听

简介

1. isDown：检测键是否当前按下。

2. isUp：检测键是否当前未被按下，与 isDown 相反。

3. downDuration(duration)：检测键是否在指定的持续时间内被按下，返回一个布尔值。

4. upDuration(duration)：检测键是否在指定的持续时间内未被按下，返回一个布尔值。

5. reset(): 重置键盘控制器，将所有键的状态重置为未按下状态。

this.cursors = this.input.keyboard.createCursorKeys();  
  
this.input.keyboard.on('keydown-A', function (event) {  
    // 当'A'键被按下时执行的代码  
});  
  
// 或者监听任意键  
this.input.keyboard.on('keydown', function (event) {  
    console.log('Key Pressed: ' + event.key);  
});

定义其他键

//定义其他键
this.cursors = {
    keyA: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A),
    keyD: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D),
    keyW: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W),
    keyS: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S),
    left: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT),
    right: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT),
    up: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP),
    down: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN),
    space: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE),
    abcd: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE)
};

//
if (cursors.left.isDown || cursors.keyA.isDown) {
            this.setScale(-1, 1);
            this.anims.play('moveX', true);
            this.setVelocityX(-this._speed);
        } else if (cursors.right.isDown || cursors.keyD.isDown) {
            this.setScale(1, 1);
            this.anims.play('moveX', true);
            this.setVelocityX(this._speed);
        } else if ((cursors.up.isDown || cursors.keyW.isDown) && this.body.touching.down) {
            this.anims.play("moveY", true);
            this.setVelocityY(-this._speed * 5);
        } else {
            this.setVelocityX(0);
        }
    }

鼠标事件监听

this.input.mouse.on('pointerdown', function (pointer) {  
    // 当鼠标按钮被按下时执行的代码  
    // 可以使用pointer.x和pointer.y来获取鼠标位置  
});  
  
this.input.mouse.on('pointermove', function (pointer) {  
    // 当鼠标移动时执行的代码  
});

以上只是Phaser中相关功能的基本用法。为了更深入地了解这些功能，建议查阅Phaser的官方文档和示例代码。