Phaser3学习笔记

1 新建 方块 rect，新建颜色，

点击事件 pointerup，颜色设置明亮度 更加10%添加，重新在设置
方块明亮度

 

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: {
        create: create
    }
};

var game = new Phaser.Game(config);

function create ()
{
    var color1 = new Phaser.Display.Color(150, 0, 0);
    var color2 = new Phaser.Display.Color(150, 0, 0);

    var rect1 = this.add.rectangle(200, 300, 200, 400, color1.color);
    var rect2 = this.add.rectangle(420, 300, 200, 400, color2.color);

    this.input.on('pointerup', function () {

        //  brighten the color by 10%
        color2.brighten(10);

        rect2.setFillStyle(color2.color);

    });
}

 2222222222222222

解释一下代码， 先写配置，载入图片和声音，鼠标有样式，over，out，下去，起来，样式变化，只有在down的时候 才播放剩余，这这么回事，
资源里一共9个声音，同时有按钮绑定对应声音的功能

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create
    },
    pixelArt: true,
    audio: {
        disableWebAudio: true
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('title', 'assets/pics/catastrophi.png');

    this.load.spritesheet('button', 'assets/ui/flixel-button.png', { frameWidth: 80, frameHeight: 20 });

    this.load.bitmapFont('nokia', 'assets/fonts/bitmap/nokia16black.png', 'assets/fonts/bitmap/nokia16black.xml');

    this.load.audioSprite('sfx', 'assets/audio/SoundEffects/fx_mixdown.json', [
        'assets/audio/SoundEffects/fx_mixdown.ogg',
        'assets/audio/SoundEffects/fx_mixdown.mp3'
    ]);
}

function create ()
{
    this.add.image(400, 300, 'title');

    var spritemap = this.cache.json.get('sfx').spritemap;

    var i = 0;
    for (var spriteName in spritemap)
    {
        if (!spritemap.hasOwnProperty(spriteName))
        {
            continue;
        }

        makeButton.call(this, spriteName, 680, 115 + i*40);

        i++;
    }

    this.input.on('gameobjectover', function (pointer, button)
    {
        setButtonFrame(button, 0);
    });
    this.input.on('gameobjectout', function (pointer, button)
    {
        setButtonFrame(button, 1);
    });
    this.input.on('gameobjectdown', function (pointer, button)
    {
        this.sound.playAudioSprite('sfx', button.name);

        setButtonFrame(button, 2);

    }, this);
    this.input.on('gameobjectup', function (pointer, button)
    {
        setButtonFrame(button, 0);
    });
}

function makeButton(name, x, y)
{
    var button = this.add.image(x, y, 'button', 1).setInteractive();
    button.name = name;
    button.setScale(2, 1.5);

    var text = this.add.bitmapText(x - 40, y - 8, 'nokia', name, 16);
    text.x += (button.width - text.width) / 2;
}

function setButtonFrame(button, frame)
{
    button.frame = button.scene.textures.getFrame('button', frame);
}

 

3 解释一下代码， 通过 data存储数据，通过 text来设置数据，填充和 字体，设置数组数据的text会自动换行很简单 同时也高速了 text的存放位置

 

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: {
        create: create
    }
};

var game = new Phaser.Game(config);

function create ()
{
    //  Using the Scene Data Plugin we can store data on a Scene level
    this.data.set('lives', 3);
    this.data.set('level', 5);
    this.data.set('score', 2000);

    var text = this.add.text(100, 100, '', { font: '64px Courier', fill: '#00ff00' });

    text.setText([
        'Level: ' + this.data.get('level'),
        'Lives: ' + this.data.get('lives'),
        'Score: ' + this.data.get('score')
    ]);
}

 

4 一个脊柱，可以自己在晃动的，场景加了一个， 载入了 位置和 spine，面板上添加了


var config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    scene: {
        preload: preload,
        create: create,
        pack: {
            files: [
                { type: 'scenePlugin', key: 'SpinePlugin', url: 'plugins/SpinePlugin.js', sceneKey: 'spine' }
            ]
        }
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.setPath('assets/spine/demos/');

    this.load.spine('set1', 'demos.json', [ 'atlas1.atlas' ]);
}

function create ()
{
    this.add.spine(400, 600, 'set1.spineboy', 'idle', true);
}


5  给图片添加 位置的方法，经纬度为0，0，设置orgine为0
    this.load.image('logo', 'assets/sprites/phaser.png');

    this.add.image(0, 0, 'logo').setOrigin(0);

6 这个太牛了， 一个人物精灵，设置了缩小，和倾斜的角度，然后有三种状态， 跑步，发射，站着时的晃动，都是动态的，不需要update方法也能执行

 

var config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    backgroundColor: '#2d2d66',
    scene: {
        preload: preload,
        create: create,
        // update: update,
        pack: {
            files: [
                { type: 'scenePlugin', key: 'SpineCanvasPlugin', url: 'plugins/SpineCanvasPlugin.js', sceneKey: 'spine' }
            ]
        }
    }
};

var controls;

var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('logo', 'assets/sprites/phaser.png');

    this.load.setPath('assets/animations/spine/');

    this.load.spine('boy', 'spineboy.json', 'spineboy.atlas');
}

function create ()
{
    this.add.image(0, 0, 'logo').setOrigin(0);

     //this.spine.skeletonRenderer.debugRendering = true;
    // this.spine.skeletonRenderer.triangleRendering = true;

     var spineBoy = this.add.spine(600, 550, 'boy', 'run', true);

    var spineBoy3 = this.add.spine(400, 300, 'boy', 'idle', true);
    spineBoy3.setScale(0.3);
    spineBoy.setScale(0.3);
     spineBoy.setAngle(-45);

     var spineBoy2 = this.add.spine(200, 400, 'boy', 'shoot', true);

     spineBoy2.setScale(0.3);

    var cursors = this.input.keyboard.createCursorKeys();

    // var controlConfig = {
    //     camera: this.cameras.main,
    //     left: cursors.left,
    //     right: cursors.right,
    //     up: cursors.up,
    //     down: cursors.down,
    //     acceleration: 0.06,
    //     drag: 0.0005,
    //     maxSpeed: 0.5
    // };

    // controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
}

// function update (time, delta)
// {
//     controls.update(delta);
// }

 

7 屏幕中心点照相机跟随效果，实现背景地图移动的功能，设置世界的 大小，添加精灵的位置，当前地图的中心点，添加update事件，键盘
事件后进行绑定修改player位置，世界会跟着变化

 

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

function preload() {

    game.load.image('background','assets/tests/debug-grid-1920x1920.png');
    game.load.image('player','assets/sprites/phaser-dude.png');

}

var player;
var cursors;

function create() {

    game.add.tileSprite(0, 0, 1920, 1920, 'background');

    game.world.setBounds(0, 0, 1920, 1920);

    game.physics.startSystem(Phaser.Physics.P2JS);

    player = game.add.sprite(game.world.centerX, game.world.centerY, 'player');

    game.physics.p2.enable(player);

    cursors = game.input.keyboard.createCursorKeys();

    game.camera.follow(player);



}

function update() {

    player.body.setZeroVelocity();

    if (cursors.up.isDown)
    {
        player.body.moveUp(300)
    }
    else if (cursors.down.isDown)
    {
        player.body.moveDown(300);
    }

    if (cursors.left.isDown)
    {
        player.body.velocity.x = -300;
    }
    else if (cursors.right.isDown)
    {
        player.body.moveRight(300);
    }

}

function render() {

    game.debug.cameraInfo(game.camera, 32, 32);
    game.debug.spriteCoords(player, 32, 500);

}