创建页面

最近更新时间:2022-01-10 15:46:06

注意:

因产品策略调整,游戏联机对战引擎后续将与云开发 CloudBase 整合为新产品形态,现将该产品保持维护状态,不再接收新用户使用申请,老用户仍可正常使用。

操作场景

一般帧同步游戏都包含至少三个页面:主页、房间、游戏页。
本文档指导您在 Hello World 项目中,分别创建实现 MainView 主页、RoomView 房间页和 GameView 游戏页三个页面。

前提条件

已在 view 文件夹下创建 BaseView.js 文件。

操作步骤

  1. 在 BaseView.js 文件中,实现页面 onInit、onUpdate、onDestory 三个生命周期方法。并调用 requestAnimationFrame,用于驱动画面更新。示例代码如下所示:
    // 页面基类
    import * as Util from "../Util.js";
    const Global = Util.Global;
    export default class BaseView {
        // 页面内组件数组,如 Button、MsgBox
        components = [];
        constructor() {
            // 使用每个页面自己的 onUpdate 函数进行渲染
            AnimateUtil.callback = this.onUpdate.bind(this);
            // 初始化页面背景
            Util.ctx.fillStyle = 'white';
            Util.ctx.fillRect(0, 0, Util.width, Util.height);
            wx.hideLoading();
            this.onInit();
        }
        // 页面的生命周期
        // onInit: 进入页面前调用
        // onUpdate: 渲染层页面更新时调用
        // onDestroy: 离开页面后调用
        // 子类可以实现这三个方法
        onInit() { }
        onUpdate() { }
        onDestroy() { }
        // 跳转到其他页面
        open(ViewClass) {
            this.onDestroy();
            // 清除页面组件
            this.components.forEach(component => component.onDestroy());
            this.components = [];
            // 跳转
            setTimeout(() => new ViewClass());
        }
        // 添加组件
        addComponent(component) {
            this.components.push(component);
            component.render();
        }
        // 显示 toast
        toast(title) {
            wx.showToast({
                title,
                icon: 'none',
            });
        }
        // 显示 loading
        loading(title) {
            wx.showLoading({
                title,
            });
        }
        // 显示 Dialog
        dialog(content, confirm) {
            wx.showModal({
                title: '提示',
                content,
                success(res) {
                    if (res.confirm) {
                        confirm && confirm();
                    }
                }
            })
        }
    }
    // 页面定时渲染
    const AnimateUtil = {
        callback: () => { },
        run: () => {
            AnimateUtil.callback && AnimateUtil.callback();
            requestAnimationFrame(AnimateUtil.run);
        }
    }
    AnimateUtil.run();

MainView 主页

  1. 在 view 文件夹下,创建 MainView.js 文件,继承 BaseView 实现一个包含有一个按钮和文本框的页面。示例代码如下所示:

    // 游戏主页
    import * as Util from "../Util.js";
    import BaseView from "./BaseView.js";
    import Component from "../component/index.js";
    const Global = Util.Global;
    export default class MainView extends BaseView {
        constructor() {
            super();
        }
        onInit() {
            const button = new Component.Button(20, 20, "快速加房");
            const msgBox = new Component.MsgBox(20, 100, "");
            this.addComponent(button);
            this.addComponent(msgBox);
        }
        onUpdate() { }
        onDestroy() { }
    }
    Global.MainView = MainView;

  2. 在根目录的 game.js 中导入 Util.js 和 MainView.js,并实例化 MainView。示例代码如下所示:

    // 导入 MGOBE.js
    import "./MGOBE.js";
    // 获取 Room、Listener 对象
    const { Room, Listener, ErrCode, ENUM } = MGOBE;
    import * as Util from "./Util.js";
    const Global = Util.Global;
    // 导入页面
    import "./view/MainView.js";
    // 启动页为 MainView
    new Global.MainView();

  3. 编译后即可在左侧模拟器中看到效果。如下图所示:
    主页

RoomView 房间页

  1. 在 view 文件夹下,创建 RoomView.js 文件,用于实现一个包含有两个按钮和一个文本框的页面。示例代码如下所示:

    // 房间页
    import * as Util from "../Util.js";
    import BaseView from "./BaseView.js";
    import Component from "../component/index.js";
    const Global = Util.Global;
    
    export default class RoomView extends BaseView {
    
        button;
        msgBox;
    
        constructor() {
            super();
        }
    
        timer;
    
        onInit() {
    
            const button1 = new Component.Button(20, 20, "准备");
            this.button = button1;
    
            const button2 = new Component.Button(150, 20, "退出房间");
    
            const msgBox = new Component.MsgBox(20, 100, "");
            this.msgBox = msgBox;
    
            this.addComponent(button1);
            this.addComponent(button2);
            this.addComponent(msgBox);
        }
    
        onUpdate() { }
    
        onDestroy() { }
    }
    
    Global.RoomView = RoomView;
    

  2. 将 game.js 替换为以下代码,导入 RoomView.js,并将启动页换成 RoomView(也就是实例化 RoomView)。

    // 导入 MGOBE.js
    import "./MGOBE.js";
    // 获取 Room、Listener 对象
    const { Room, Listener, ErrCode, ENUM } = MGOBE;
    
    import * as Util from "./Util.js";
    const Global = Util.Global;
    
    // 导入页面
    import "./view/MainView.js";
    import "./view/RoomView.js";
    
    // 启动页为 RoomView
    new Global.RoomView();
    

  3. 编译后就能看到效果。如下图所示:
    房间页

GameView 游戏页

  1. 在 view 文件夹下,创建 GameView.js 文件,用于实现一个包含有一个按钮和一个文本框的页面。示例代码如下所示:

    // 帧同步游戏页面
    import * as Util from "../Util.js";
    import BaseView from "./BaseView.js";
    import Component from "../component/index.js";
    const Global = Util.Global;
    
    export default class GameView extends BaseView {
    
        msgBox;
    
        constructor() {
            super();
        }
    
        onInit() {
            const button = new Component.Button(20, 20, "结束帧同步");
    
            const msgBox = new Component.MsgBox(20, 100, "");
            this.msgBox = msgBox;
    
            this.addComponent(button);
            this.addComponent(msgBox);
        }
    
        onUpdate() { }
    
        onDestroy() { }
    }
    
    Global.GameView = GameView;
    

  2. 将 game.js 替换为以下代码,导入 GameView.js,并将启动页换成 GameView。

    // 导入 MGOBE.js
    import "./MGOBE.js";
    // 获取 Room、Listener 对象
    const { Room, Listener, ErrCode, ENUM } = MGOBE;
    
    import * as Util from "./Util.js";
    const Global = Util.Global;
    
    // 导入页面
    import "./view/MainView.js";
    import "./view/RoomView.js";
    import "./view/GameView.js";
    
    // 启动页为 GameView
    new Global.GameView();

  3. 编译后就能看到效果。如下图所示:
    房间页

目录