菜雞用 Phaser 拾起童年遊戲 02

第 12 屆 iThome 鐵人賽

DAY 2

Modern Web

菜雞用 Phaser 拾起童年遊戲系列第 2 篇

12th鐵人賽

Dino

團隊甘阿餒

2020-09-15 11:22:48

3497 瀏覽

Phaser 是一個免費的2D遊戲框架，用於製作HTML5遊戲，是由 Photon Storm 所開發的。

Phaser 是什麼？

Phaser是一個HTML5遊戲框架，旨在幫助開發人員真正快速地製作功能強大的跨瀏覽器HTML5遊戲。它是專門為利用台式機和移動設備現代瀏覽器的優勢而創建的。瀏覽器唯一的要求是對canvas標籤的支持。

開發環境

一套你慣用的編輯器
- 不管使用哪個編輯器，只要簡單的HTML、CSS、Javascript就可以完成 Phaser 的撰寫，甚至如果你要全部寫在HTML也是可以的喔！
- 筆者則是使用 VSCode ，因為他有live server 外掛可以直接使用 :P
一個瀏覽器
- 基本上 Phaser 是可以支援跨瀏覽器的，所以選擇你所喜愛的瀏覽器即可唷！
- 筆者是使用 Google Chrome
一個準備好開啟遊戲之旅的心，一起來找回童年回憶！

起手式

由於我們做的 Phaser 肯定是需要加載一些圖片、聲音檔、JSON，甚至是 Javascript，所以我們必須為此有個 web server ，要透過 http:// 來進行溝通及加載，可以跟筆者一樣偷懶使用 live server 外掛，或者使用node.js來啟動一個 web server。

先在本地開啟一個 html 將以下程式貼上去，啟動你的 web server 看看有沒有畫面：

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

如果有看到以下畫面(一個移動中的Phaser logo)，代表你的旅程要準備開始了XD