F2E 2nd 第五關「 90 秒挑戰遊戲」 挑戰筆記

發表於 更新於 分類於 Disqus：

本作品大致製作完成，但在縮放視窗時，物件大小有誤；文章短期內不會更新。

這次的挑戰比較特別。
我看了這次直播的影片：《HTML5 Canvas 遊戲開發超入門#2》 X 《THE F2E 2nd》，覺得 Mick 老師介紹的 Phaser 遊戲框架很方便有趣，影片介紹也很詳盡，適合跟著做；所以嘗試用 Phaser 來製作這次的內容，也因此選了六角的設計稿。
雖然大部分是跟著直播影片做的，但因為直播介紹的跟設計稿的內容有點不同，所以我還是依據設計稿將細節調整過。

作品

Lynn 的 F2E 2nd 作品列表 / 第五關： 90 秒挑戰遊戲

設計稿

採用 吳俊儀 Junior 的設計稿。

基本結構

首先，在 HTML 中放入一個要產生遊戲內容的區塊，再引用 phaser 和自己的 .js 檔。

1
2
3
4
5
<body>
    <div id="game"></div>
    <script src="js/lib/phaser.min.js"></script>
    <script src="js/index.js"></script>
</body>

再來寫好遊戲的基本設定，宣告遊戲的實體。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const config = {
    type: Phaser.AUTO,  // 官方推薦的圖形呈現方式，如果瀏覽器支援就使用 WebGL，否則會使用 Canvas
    width: gameWidth,
    height: gameHeight
    parent: 'game',     // 遊戲產生的區塊 id
    scene: [            // 場景物件
        gameStart,
        gamePlay,
        gameEnd,
    ],
    backgroundColor: 0x7EBE8D,
}

const game = new Phaser.Game(config);

從上面可以看到，我將遊戲分為 gameStart 、 gamePlay 和 gameEnd 三個場景，再分別實作。
場景物件的結構如下：

1
2
3
4
5
6
7
8
9
10
11
12
const gameStart = {
    key: 'gameStart',
    preload: function () {
        // 載入時要執行的內容
    },
    create: function () {
        // 進入場景時要執行的內容
    },
    update: function () {
        // 更新畫面時要執行的內容
    }
}

接著就介紹各場景的實際內容。

Game Start

如果以 HTML 、 CSS 的方式來思考，遊戲的起始畫面很簡單；就是左邊有一張圖，右邊有一個白色方塊，方塊裡面有標題、副標題和按鈕。
但在 Phaser 裡面，這些元素都是不同的物件，要先載入所需的資源，再宣告物件，並指定物件的行為。

preload

先載入圖片：

1
2
3
4
5
6
preload: function () {
    this.load.image('img-title', './img/img-title.png');
    this.load.image('text-title', './img/txt-title.png');
    this.load.image('text-subtitle', './img/txt-subtitle.png');
    this.load.image('button', './img/btn-press-start.png');
},

待續