H5网页游戏引擎Phaser 3 Hello World 起步指南 官网文档笔记【一】

H5网页游戏引擎Phaser 3 Hello World 起步指南 官网文档笔记【一】

官网:http://phaser.io/tutorials/getting-started-phaser3

1、安装web服务器,apache或者nginx都可以

配置完成后,需要浏览器在 http://localhost 查看一下,确保服务搭建成功。

2、安装环境,

其实就是下载JS包

3、编辑器,用来写代码

vscode就可以,或者notepad++,sublime都行

3、配置环境

html页头引入js文件

4、编写hello world代码,可以直接复制黏贴

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/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>

5、最后再测试下

怎么测试呢?一般web服务器localhost就能直接访问。

刚刷新页面会看到一个黑框,过一会有动画出来

4、完成,就这么简单。

小编这里有个 Hello World 环境

Phaser 3 Hello World 环境Demo入口

版权声明

弈心博客


本文首发site_name,转载请附上博文链接!