---

theme: channing-cyan

本文已參加【新人創作禮】活動，一起開啟掘金創作之路。

---

📒部落格首頁：何名取 的個人主頁 - 文章 - 掘金 (juejin.cn)\ 🎉歡迎關注🔎點贊👍收藏⭐️留言📝\ ❤️期待一起交流！\ 🙏作者水平很有限，如果發現錯誤，求告知，多謝！\ 🌺有問題可私信交流！！！

---

建立螢幕

前言

上節已經對Maroon in Trouble小遊戲進行了簡單介紹，介紹遊戲的玩法時可以明確地知道此遊戲有三個背景介面，分別是遊戲的開始介面、遊戲中介面和遊戲結束介面。本節先介紹一下游戲檔案的整體結構，然後對遊戲的開始介面、遊戲中介面和遊戲結束介面分解並研究學習。

檔案結構

Maroon in Trouble由資原始檔、js邏輯和qml元件組成。 其中資原始檔中包含audio遊戲音效和gfx圖片檔案。

qml部分的主檔案是maroon.qml檔案。遊戲的開始介面、遊戲中介面和遊戲結束介面分別是：

• NewGameScreen.qml
• GameCanvas.qml
• GameOverScreen.qml

遊戲開始介面

從圖中我們可以看到有背景圖片、氣泡、logo、小黃魚和一個按鈕。背景、logo和開始按鈕都是靜態地，不需要動畫或者粒子系統。從水底向上浮動的氣泡是粒子系統發射的，而在氣泡中游動的小黃魚使用的是迴圈的動畫效果，在它周圍籠罩它的氣泡也是一樣的。

其中從海底向上浮動的氣泡在整個遊戲過程中也是持續存在的，因此將發射氣泡的粒子系統放置在主檔案中。在maroon.qml中編寫程式碼： ```qml ParticleSystem { id: particles anchors.fill: parent

        ImageParticle {
            id: bubble
            anchors.fill: parent
            source: "content/gfx/catch.png"
            opacity: 0.25
        }

        Wander {
            xVariance: 25;
            pace: 25;
        }

        Emitter {
            width: parent.width
            height: 150
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 3
            startTime: 15000

            emitRate: 2
            lifeSpan: 15000

            acceleration: PointDirection{ y: -6; xVariation: 2; yVariation: 2 }

            size: 24
            sizeVariation: 16
        }
    }

``` 這裡的氣泡發射系統對QML中粒子系統的使用比較完整，將粒子系統的四個組成全部用到了，包括ParticleSystem粒子系統、ImageParticle渲染器、Emitter發射器和Wander影響器。

接下來是小黃魚的遊動動畫： ```qml Image { source: "gfx/logo-fish.png" anchors.top: parent.top

    SequentialAnimation on x {
        loops: Animation.Infinite
        NumberAnimation { from: x + 148; to: x + 25; duration: 2000; easing.type: Easing.InOutQuad }
        NumberAnimation { from: x + 25; to: x + 148; duration: 1600; easing.type: Easing.InOutQuad }
    }
    SequentialAnimation on anchors.topMargin {
        loops: Animation.Infinite
        NumberAnimation { from: 100; to: 60; duration: 1600; easing.type: Easing.InOutQuad }
        NumberAnimation { from: 60; to: 100; duration: 2000; easing.type: Easing.InOutQuad }
    }
}

``` 小黃魚的遊動使用的是順序動畫，改變圖片的x和錨的位置即可實現斜向的迴圈運動。

氣泡的動畫與小黃魚的遊動基本類似，與小黃魚的區別在於圖片本身的寬度也會產生變化。 ```qml Image { source: "gfx/logo-bubble.png" anchors.top: parent.top

    SequentialAnimation on x {
        loops: Animation.Infinite
        NumberAnimation { from: x + 140; to: x + 40; duration: 2000; easing.type: Easing.InOutQuad }
        NumberAnimation { from: x + 40; to: x + 140; duration: 1600; easing.type: Easing.InOutQuad }
    }
    SequentialAnimation on anchors.topMargin {
        loops: Animation.Infinite
        NumberAnimation { from: 100; to: 60; duration: 1600; easing.type: Easing.InOutQuad }
        NumberAnimation { from: 60; to: 100; duration: 2000; easing.type: Easing.InOutQuad }
    }
    SequentialAnimation on width {
        loops: Animation.Infinite
        NumberAnimation { from: 140; to: 160; duration: 1000; easing.type: Easing.InOutQuad }
        NumberAnimation { from: 160; to: 140; duration: 800; easing.type: Easing.InOutQuad }
    }
    SequentialAnimation on height {
        loops: Animation.Infinite
        NumberAnimation { from: 150; to: 140; duration: 800; easing.type: Easing.InOutQuad }
        NumberAnimation { from: 140; to: 150; duration: 1000; easing.type: Easing.InOutQuad }
    }
}

```

此時，整個開始介面的動態效果已經完全做好了，只需將其餘的靜態部件加入即可完成一個完整的遊戲開始介面。