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引擎负责)，一种所有可视化界面都通过代码动态加载的模式。

 

谢谢阅览奎斯文章