Phaser知识点总结

Phaser知识点

1. 基本代码框架

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里添加：
physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },

2. 加载图片

function preload ()
{
    this.load.image('sky', 'https://img-blog.csdnimg.cn/019871af78a94614a90011defa9de90a.png');
    this.load.image('ground', 'https://img-blog.csdnimg.cn/e21ef7cc9a4e4665892fed352efdbe33.png');
    this.load.image('star', 'https://img-blog.csdnimg.cn/61cad081ae31499e96a6e07327758328.png');
    this.load.image('bomb', 'https://img-blog.csdnimg.cn/d21caf1056a14bc19e8476649a26539f.png');
    this.load.spritesheet('dude', 
        'https://img-blog.csdnimg.cn/421cc50b0bf04982b387e344c1a0c9d5.png',
        { frameWidth: 32, frameHeight: 48 }
    );
}

3. 添加静态图片
function create ()
{
    this.add.image(400, 300, 'sky');
    this.add.image(400, 300, 'star');
}

4. 添加物理引擎中静止的物体组

var platforms;
 
    this.add.image(400, 300, 'sky');
 
    platforms = this.physics.add.staticGroup();
 
    platforms.create(400, 568, 'ground').setScale(2).refreshBody();
 
    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');

5. 添加游戏角色

player = this.physics.add.sprite(100, 450, 'dude');
 
player.setBounce(0.2);
player.setCollideWorldBounds(true); 

player.body.setGravityY(300);
 
this.physics.add.collider(player, platforms);

6. 为角色添加动画

在create里：

this.anims.create({
    key: 'turn',
    frames: [ { key: 'dude', frame: 4 } ],
    frameRate: 20
});
 
this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
});

7. 角色的键盘控制

在create里：

    this.input.keyboard.on('keydown', function (event) {

        console.dir(event);

    });

    //  Hook to a specific key without creating a new Key object (in this case the A key)

    this.input.keyboard.on('keydown-A', function (event) {

        console.log('Hello from the A Key!');

    });

    this.input.keyboard.on('keyup-RIGHT', function (event) {

        console.log('right up!');

    });
    
    
//  Create a Key object we can poll directly in a tight loop

    BKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.B);
    
    //添加多个key，使用时keys.P.isDown
    keys = this.input.keyboard.addKeys('P,H,A,S,E,R');
    

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

在update里：

    if (BKey.isDown)
    {
        console.log('B!');
    }

if (cursors.left.isDown)
{
    player.setVelocityX(-160);
 
    player.anims.play('left', true);
}
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);
}

8. 生成一组物理引擎中的非静止物体

stars = this.physics.add.group({
    key: 'star',
    repeat: 11,
    setXY: { x: 12, y: 0, stepX: 70 }
});
 
stars.children.iterate(function (child) {
 
    child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
 
});
 
this.physics.add.collider(stars, platforms);

9. 检测一个角色与一组物体的碰撞

function collectStar (player, star)
{
    star.disableBody(true, true);
}
 
this.physics.add.overlap(player, stars, collectStar, null, this);

10. 鼠标单击角色
    var sprite = this.add.sprite(400, 300, 'eye').setInteractive();

    sprite.on('pointerdown', function (pointer) {
        this.setTint(0xff0000);
    });

    sprite.on('pointerout', function (pointer) {
        this.clearTint();
    });

    sprite.on('pointerup', function (pointer) {
        this.clearTint();
    });

11. 添加“点”

    var graphics = this.add.graphics({ fillStyle: { color: 0x2266aa } });

    var point1 = new Phaser.Geom.Point();// point at 0/0
    var point2 = new Phaser.Geom.Point(100);// point at 100/100
    var point3 = new Phaser.Geom.Point(400, 300);// point at 400/300

    graphics.fillPointShape(point1, 15);
    graphics.fillPointShape(point2, 15);
    graphics.fillPointShape(point3, 15);
    
12. 添加“线”
   
    var graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa } });
    var line = new Phaser.Geom.Line(100, 500, 700, 100);
    graphics.strokeLineShape(line);
    
13. 线条复制动画

var graphics;
var line;

function create ()
{
    graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa, alpha: 0.6 } });

    line = new Phaser.Geom.Line(100, 300, 400, 300);

    lines = [];
}

function update ()
{
    Phaser.Geom.Line.Rotate(line, 0.03);

    lines.push(Phaser.Geom.Line.Clone(line));

    graphics.clear();

    graphics.strokeLineShape(line);

    for(var i = 0; i < lines.length; i++)
    {
        Phaser.Geom.Line.Offset(lines[i], 3, 0);
    }

}

14. 添加“圆”
    var circle = new Phaser.Geom.Circle(400, 300, 100);

    var graphics = this.add.graphics({ fillStyle: { color: 0xff0000 } });
    graphics.fillCircleShape(circle);
    

15. 圆的动画

var graphics;
var circles;

function create ()
{
    graphics = this.add.graphics({ lineStyle: { color: 0x00ff00 }, fillStyle: { color: 0x00ff00 }});

    circles = [];

    for(var y = 0; y < 6; y++)
    {
        for(var x = 0; x < 8; x++)
        {
            circles.push(new Phaser.Geom.Circle(50 + x * 100, 50 + y * 100, Phaser.Math.Between(-50, 50)));
        }
    }
}

function update ()
{
    graphics.clear();

    for(var i = 0; i < circles.length; i++)
    {
        var circle = circles[i];

        circle.radius += 0.5;
        if(circle.radius >= 50)
        {
            circle.radius -= 100;
        }

        if(!circle.isEmpty())
        {
            graphics.fillCircleShape(circle);
        }
        else
        {
            graphics.strokeCircleShape(circle);
        }
    }
}