Phaser-游戏之旅

class Game extends Phaser.Game { // 子类继承父类Phaser.Game
    constructor () {  //构造函数
        
        super(width, height, Phaser.CANVAS|Phaser.webgl|Phaser.auto, elementName, null);  //通过super来调用父类(Phaser.Game)构造数
        
        this.state.add('Boot', Boot, true); //添加场景
        this.state.add('Preload', Preload, true);
        this.state.add('Play', Play, true);
        this.state.add('Over', Over, true);
        this.state.start('Boot'); //启动
    }
}

export default class Boot extends Phaser.State {

    //先预紧力。通常情况下，你会使用这个来装载你的游戏资产（或当前状态所需的）
    preload () {}

    //创建被称为一次预载完成，这包括从装载的任何资产的装载。
    create () {
        //show_all规模的模式，展示了整个游戏的同时保持比例看
        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.scale.pageAlignHorizontally = true; //当启用显示画布将水平排列的
        this.scale.pageAlignVertically = true; //当启用显示画布将垂直对齐的

        //物理系统启动：phaser.physics.arcade，phaser.physics.p2js，phaser.physics.ninja或相位。物理。Box2D。
        this.game.physics.startSystem(Phaser.Physics.ARCADE);
        this.state.start('Preload');
    }
}

export default class Boot extends Phaser.State {

    preload () {
        //...
        //加载游戏所需要的资源
    }

    create () {
        this.state.start('Play');
    }
}

image(key, src); //key: 在游戏中使用时的名称、src: 图片地址 

this.load.image('bg', imgPath + 'bg.jpg'); 

spritesheet(key, src, 图片单帧的宽, 图片单帧的高, 帧数, margin, spacing); 另外两个参数我使用的默认值

this.load.spritesheet('master',  imgPath + 'master.png', 280, 542, 14);

image(key, src); //key: 在游戏中使用时的名称、src: 音频地址 

this.load.audio('bgMusic',[mediaPath + 'bg.mp3']);

audiosprite(key, urls, jsonURL, jsonData)  //jsonURL：如果通过数据直接设置设为空， jsonData：json数据（可以自己去生成，见音频处理）

this.load.audiosprite('music', mediaPath + 'audio.mp3', null, audioJSON);

import TopBar from '../prefabs/TopBar';  //顶部
import Person from '../prefabs/Master'; //主人物
import Enemys from  '../prefabs/Enemys'; //两个npc
import Obstacles from  '../prefabs/Obstacles'; //障碍物 
import Bullet from '../prefabs/Bullet'; //子弹（功能目前去掉了）
import Energies from  '../prefabs/Energies'; //能量 
import Death from  '../prefabs/Death'; //死亡画面

//定义一个移动的基准速度，然后通过这个速度去实现不同速度的移动

this.gameSpeed = 300; 

//云
this.cloud = new Phaser.TileSprite(this.game, 0, 132, this.game.width, 408, 'cloud'); //添加到场景中

//TileSprite(game, x|坐标, y|坐标, width|宽, height|高, key|图片名, frame|指定帧数，默认第一帧)

this.cloud.fixedToCamera = true; //固定

this.cloud.autoScroll(-this.gameSpeed / 8 , 0); // 元件移动

export default class Person extends Phaser.Sprite {

    constructor ({game, x, y, asset, frame, floor}) {

        super(game, x, y, asset, 0);
    
        //... 人物的初始化设置
    }
}

//参数： 使用时候的name、 动画运行的帧、time、重复运行
 this.animations.add('init',[0], 10, false);
 this.animations.add('run',[1,2,3,4,5,6], 20, true);
 this.animations.add('jump', [7], 10, false);

 //外部使用： obj.animations.play('run');
 

this.game.physics.arcade.enable(人物对象); //开启人的物理系统
this.body.gravity.y = 1600; //设置人物的重力

this.game.physics.enable(地面对象); //开启地面物理系统
this.floor.body.immovable = true; //这里需要将地面设置为固定不动

this.game.physics.arcade.collide(人物对象, 地面对象,callback); //在update方法里用collide去实时检测这两个元件是否有接触

startBtn = new Phaser.Button(game, x, y, 'btn', null, null, 0, 0);

jumpBtn = new Phaser.Button(game, x, y, 'btn', null, null, 1, 1);

//这里设置第一个null，当按钮按下时的callback。第二个null，callback的上下文环境。

this.createMultiple(num, asset, 0, false); //创建num个贴图为asset的元件

//添加每个元件的信息
let obstacle;
for(var i = 0; i< this.num; i++){
    let EnergyX = (i * this.distance) + (this.distance * this.distanceThan[i]) + 110;
    let EnergyY = Math.floor(this.game.height-295 -140);
    
    //设置元件的物理属性、触碰大小、动画、基点位置等。
    //..
}

this.lastObstacle = obstacle; //保存最后一个信息


//在update中判断是否移出屏幕将其kill，然后重置对象
updata() {
    this.forEach((obstacle)=>{
        if (obstacle.body.right <= 0) {
            obstacle.kill();
            //..
        }
    },this);

    this.forEachDead((obstacle)=>{
        obstacle.reset(x,y);
        //...
        this.lastObstacle = obstacle;
    },this);
}

jumpEvent () {
    
    if(this.isMasterJump) return;

    this.master.body.velocity.y = -700;
    
    //播放跳起动画...
}

//接下来只要在update中检测人物与地面再次接触即可
updata () {
    this.game.physics.arcade.collide(this.master, this.floor, ()=>{
        //人物跳起落地
        if(!this.isDown && this.master.body.touching.down) {
            this.isMasterJump = false;
            this.isDown = true;
            this.master.animations.play('run');
        }
    }, null, this);
}

updata () {
    this.obstacles.forEachExists(this.checkObstacle,this); // 检测柱子位置
}

checkObstacle () {
    this.enemys.enemy1.checkJump(obstacle);
    this.enemys.enemy1.checkDown();
    //..其他操作
}

//检测是否跳起
checkJump (obstacle) {
    if(!this.jump && obstacle.x - this.x < 57 && obstacle.x - this.x > 0){
        //..
    };
}

//检测是否落地
checkDown () {
    if(!this.isDown && this.body.touching.down && this.jump) {
        //..
    };
}

//创建能量条
this.energyBg = new Phaser.Sprite(this.game, 0, 33, 'energyBar', 0);
this.energyCover = new Phaser.Sprite(this.game, 0, 33, 'energyBar', 1);

//创建3条生命
for (var i = 0; i< 3; i++) {
    var x = (i * 43)+3;
    var key = 0;
    if(i >= this.life) {key = 1;} //如果有死亡显示的图形
    let sprite = new Phaser.Sprite(this.game, x, 33, 'heart',key);
    sprite.animations.add('death',[1], 10, false);
    this.heartGroup.add(sprite);
}

//更新能量条
updateEnergy () {
    let distance = this.energyBg.width * (3-this.score) / 3;

    this.energyCover.x = distance;

    this.energyCover.crop(new Phaser.Rectangle(distance, 0, this.energyBg.width * (this.score / 3), 35)); //裁切一个矩形区域

    this.energyCover.updateCrop(); //更新
}

export default class Over extends Phaser.State {
    
    preload () {}
    
    create () {
        //...通过逻辑
    }
}

var audiosprite = require('audiosprite')

var files = ['file1.mp3', 'file2.mp3'];

var opts = {
    output: 'audio',
    format: 'jukebox',
    export: 'mp3',
    loop: 'false'
}
audiosprite(files, opts, function(err, obj) {
    if (err) return console.error(err)

    console.log(JSON.stringify(obj, null, 2))
})