Phaser笔记-Hello World!

代码如下：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>

    <script>
    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.setBaseURL('http://labs.phaser.io');

        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    }

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

        var particles = this.add.particles('red');

        var emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

        var logo = this.physics.add.image(400, 100, 'logo');

        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        emitter.startFollow(logo);
    }
    </script>

</body>
</html>

运行截图如下：

解释下（下面都总结于官方的API文档）：

config中type: Phaser.AUTO：类型为number，默认值是CONST.AUTO，指定用哪种渲染方式渲染游戏，提供了Phaser.AUTO，Phaser.CANVAS，Phaser.HEADLESS，Phaser.WEBGL.AUTO，如果设置为Phaser.AUTO，他会先设置Phaser.WEBGL.AUTO当这个设置失败后就会选择Phaser.CANVAS。

PhysicsConifg：物理配置，有3个参数，default：提供3个值分别是“arcade”，“impact”，“matter”，这个在作用域在每个场景中。arcade。matter。

config中的scene参数：为游戏创建场景，游戏中可以创建一个或多个，加载的时候从第一个开始；

particle为粒子系统，createEmitter创建了一个发射器速度为100，放缩从1到0，blendMode为混合模式，这个值可以填写很多其中ADD在Canvas和WebGL中都可以使用的作用是：当两个粒子重叠时，他们颜色值进行累加从而构造出新的颜色。

Phaser笔记-Hello World!

猜你喜欢