Laya Air遊戲開發模式之傳統MVC模式(基礎篇)

沒錯這次要介紹的開發模式就是開發界中的萬油精🙈MVC模式

一、什麼是MVC模式

MVC簡單來說就是三個詞：Model（模型）、View（視圖）和Controller（控制器）：

Model：是遊戲中的"數據層"，也就是程序需要操作的數據或信息。

View：是直接面向最終用戶的"視圖層"。它是提供給用戶的操作界面，是程序的外殼。

Controller：就是遊戲中最核心的"控制層"，數據與視圖之間的通信都通過Controller來控制

每一層幾乎都是相互獨立的，對外提供調用的接口，一般的我們當玩家從"視圖層"做出響應，就會傳遞到"控制層"，控制層再改變數據層,“數據層”反饋給"控制層",再發送到視圖層(其實在開發中也常會用到數據驅動的方式：當"數據層"發生改變的時候，直接通過事件派送的方式反饋到視圖層)

二、實例解釋MVC模式

只是簡單的介紹理論可能有些萌新會覺得懵逼，這裏使用TypeScript語言在Laya Air遊戲引擎通過"玩家升級"的小例子來簡單說明：

1.首先在節點下創建"up"、"ProgressBar"節點，分別用於監聽獲取經驗事件和顯示當前經驗值進度條：

 

2.分別創建View、Contoller、Model文件夾並創建對應的腳本組件：

3.將model腳本掛載到進度條節點上，將Controller腳本掛到場景節點下用於控制遊戲的邏輯(在實際開發中會根據不同的場景、UI創建不同的ctrl)：

4.給model層的腳本寫上基本數值(爲了方便這裏以表的形式)並導出：

var user_info = {
    cur_grade:1,

    set_cur_grade(grade){
        this.cur_grade = grade;
    },

    get_cur_grade(){
        return this.cur_grade;
    }
}

export {user_info};

5.轉到View層的腳本寫上改變進度條的方法：

export default class proressbal_model extends Laya.Script{
    constructor(){
        super();
    }

    chang_cur_progress(per:number,gra:number):void{
        var blood_progress:Laya.ProgressBar =  this.owner as Laya.ProgressBar;
        var percentage:Laya.Text = this.owner.getChildByName("per") as Laya.Text; 
        var grade:Laya.Text = this.owner.getChildByName("grade") as Laya.Text; 
        blood_progress.value = per / 100; //屬性最大爲1
        percentage.text = per + "%";
        grade.text = "Lv." + gra;
    }
}

6.接下來就是最關鍵的Controller層的game_ctrl腳本,首先導入View層和Model層的腳本，分別獲取進度條節點和"獲取經驗"按鈕節點，按鈕添加點擊監聽事件,當View層發生改變的時候，Controller層捕獲到事件，通過計算再傳回View層和Model層：

import {user_info} from "../view/user_info_view";
import proressbal from "../model/proressbal_model";
export default class game_ctrl extends Laya.Script{
    public cur_grade_per:number = 0; //當前進度條
    public cur_grade:number = 0;  //當前等級
    constructor(){
        super();
    }

    onAwake(){
        var grade_up_but =  this.owner.getChildByName("up");
        var pro = this.owner.getChildByName("ProgressBar");
        var proressbal_com = pro.getComponent(proressbal);
        this.cur_grade = user_info.get_cur_grade();
        //初始化
        proressbal_com.chang_cur_progress(0,this.cur_grade);
        //開始監聽
        grade_up_but.on(Laya.Event.CLICK,this,()=>{
            //假設這裏每次點擊獲取30點經驗值、每到達100升級一次
            this.cur_grade_per += 30;
            if(this.cur_grade_per >= 100){
                this.cur_grade_per = 0;
                user_info.set_cur_grade(++this.cur_grade);
            }
            proressbal_com.chang_cur_progress(this.cur_grade_per,this.cur_grade);
        });
    }
}

最後是顯示效果：

三、寫在最後

ok，MVC的講解基本上就這點內容，只要記住試圖層是負責可視化的界面，控制層是負責遊戲的邏輯，模型層負責底層存儲的數據，在實際開發中不同場景可能都會對應一個或多個View+Controller+Model腳本，其實這只是非常傳統(老)的MVC模式(作者也只是從Unity3d引擎那邊借鑑過來翻譯成Laya引擎版本來說明的)，Laya引擎雖然在h5遊戲引擎性能方面非常強大但在編輯器方面的確存在許多bug，後面還會介紹一種另一種經過修改版的mvc模式就是爲了避開使用laya的2d編輯器(3d是Unity引擎負責)，一種所有可視化界面都通過代碼動態加載的模式。

 

謝謝閱覽奎斯文章