個人第一個上線小程序，案例實戰篇二——LayaAir遊戲開始界面開發

不知不覺個人第一個小程序已經上線一週了，uv也穩定的上升着。

不少人說個人小程序沒啥用，我默默一笑，內心說：「它一直敦促我學習，敦促我進步」。個人以一個小程序初衷是經驗分享，目前先把經驗分享到博客園，邊學習邊完善小程序。同時我會持續學習，持續更新，功能定會一每天的完善起來。

歡迎你們掃碼體驗。

閒話少敘，今天咱們一塊兒來練習LayaAirIDE搭建遊戲開始界面。

既然要開發遊戲，那天然少不了圖片素材，你們能夠根據實際狀況自行備圖。大體一下幾種素材圖片：

一、一張背景圖片（750*1333）

二、開始按鈕背景圖片，尺寸本身選擇便可

三、遊戲規則按鈕背景圖片，尺寸本身選擇便可

四、其它的遊戲名稱圖片和Logo之類的圖片能夠自行選擇

素材準備好了，下面就是一個字，幹！

第一步：新建一個空的LayaAir 空項目（PS:不會的話，清先跳轉個人第一個上線小程序，案例實戰篇一）

第二步：咱們建立一個StartScene的場景，而且設置其寬度750，高度1333，點擊肯定

第三步：咱們將場景切換到編輯模式，在Assets文件處右鍵-》新建目錄-》並命名爲images文件夾。如圖：

而後咱們把準備好的圖片素材拖拽至images文件夾上便可將圖片放入該文件夾中。

第四步：咱們選中StartScene.scene場景文件，對場景進行編輯。

咱們想場景中拖入一個image，並向其經常使用屬性skin中拖入咱們準備好的背景素材。

咱們繼續向場景中拖一個button，並設置其var 屬性爲btnRule，設置其stateNum爲1,向其經常使用屬性skin中拖入咱們準備好的規則背景素材。

咱們繼續向場景中拖一個button，並設置其var 屬性爲btnStart,設置其stateNum爲1,向其經常使用屬性skin中拖入咱們準備好的開始背景素材。

第五步：咱們把窗口切換到IDE的代碼模式，在src目錄下面新建一個scripts的文件夾，在scripts文件夾右鍵-》新建模板文件-》新建腳本文件，命名爲StartScene點擊肯定生成腳本文件，腳本和場景關聯你們能夠參考第一步。代碼以下：

export default class StartScene extends Laya.Scene {

    constructor() { super(); }
    onBtnRoleClick(){

    }
    onBtnStartClick(){

    }
    onEnable() {
        this.btnRule.on(Laya.Event.CLICK,this,this.onBtnRoleClick);
        this.btnStart.on(Laya.Event.CLICK,this,this.onBtnStartClick);
    }

    onDisable() {
    }
}

　　

最終效果圖：

 

如果喜歡微信小遊戲開發，不妨和我一塊兒學習成長！！！

原文出處：https://www.cnblogs.com/wyang/p/10290218.html