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

someone
27 3月, 2020

abstract

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

記事

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

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

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

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

step2.Editorの選択

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

step3.phaserのダウンロード


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>
表示確認
webserverで表示

Next Post Previous Post
No Comment
Add Comment
comment url