Phaser3で簡単にゲームを作ってみる

someone

27 3月, 2020

abstract

知り合いがPhaser3を使用してアプリをリリースした。
カンタン、軽量、無料でゲームを作れるらしい。
なのでちょっと手を出してみた。

記事

日本語の紹介記事https://hyperts.net/html5-phaser/

作ってみる[公式チュートリアル]

公式:https://phaser.io/tutorials/making-your-first-phaser-3-game/part1

導入編

step1.Webサーバーのダウンロード

XAMP環境が推奨なのでxampでやる。

https://www.apachefriends.org/index.html

step2.Editorの選択

とりあえずVSCodeがあるのでそれにする

step3.phaserのダウンロード

https://phaser.io/download/stable

step4.index.htmlを編集する

web root(最初に読み込む場所)にindex.htmlを作成する。

web rootは下記に編集する。

c: > xamp > apahe > conf > httpd.conf

htdocsが規定しているので変更する

# DocumentRoot: The directory out of which you will serve your

# documents. By default, all requests are taken from this directory, but

# symbolic links and aliases may be used to point to other locations.

#

DocumentRoot "C:/xampp/htdocs/phaser"

<Directory "C:/xampp/htdocs/phaser">

しかし、403エラーが出たのでアクセス権限をIPに付与する。

httpd.confのrequireをdenied -> grantedに変更する

<Directory />

    AllowOverride none

    Require all granted

</Directory>

コードは下記

<!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>