社区前端游戏框架LollipopCreator v1.0.X正式开源

时间:2022-07-24
本文章向大家介绍社区前端游戏框架LollipopCreator v1.0.X正式开源,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

社区开源前端creator游戏框架,与后端LollipopGo完美结合;可以开发微信小游戏,棋牌游戏,实时对战游戏等2D游戏。

地址:https://github.com/Golangltd/LollipopCreator

版本刚刚开源,后续会持续更新!

框架文档地址:GameAIs.Com

LollipopGo:cocos creator前端游戏框架

LollipopGo游戏框架

游戏客户端开发中,由于制作人或者策划立项的不同,导致前端开发并不像后端框架不变,例如 2D游戏开发,引擎选择就比较多,Unity、cocos、 白鹭等都可以,本系列就是给大家开源一套cocos creator引擎开发的2D游戏框架LollipopGo。 creator 系统为例,给大家梳理下前端2D游戏架构的基础设计思想。

  • 如何设计
  • 流程分析
  • 实例代码
  • 注意事项

如何设计

1. 整个框架采用模块化设计,分为公用模块,管理器模块,场景资源、子游戏资源,框架结构清晰
2. 游戏前端LollipopGo框架支持主场景模式+子游戏模式,同时也支持单个游戏单场景开发
3. 同时前端游戏框架有完善的后端框架支持,都是彬哥开源项目,并不用担心对应框架还要自己写服务器了
4. 近期就会更新到github,具体等社区通知

流程分析

1. 通信方式websocket,数据格式:json,数值支持加密
2. 前端框架支持http,websocket,与后端LollipopGo服务器框架完美结合
3. 热更等全部支持,子游戏拓展等都很方便

实例代码

// UIMgr 代码
let Effects = {
    "NoEffect": { show: (layer) => { }, hide: (layer, finish) => { finish() }, },
}

cc.Class({
    extends: cc.Component,

    properties: {
        uiParent: cc.Node,
        mask: cc.Node, // 半透明屏蔽层
        tipTempNode: cc.Node,

        model: { // for MVC
            visible: false,
            get: function () {
                return this._model
            }
        }
    },

    onLoad: function () {
        window.UIMgr = this
        this._model = {
            prefabs: {},
            cache: {}, // layers cache
            stack: [], // layers stack
            urls: [],
        }

        this.mask.parent = this.uiParent
        this.mask.active = false
    },

    checkIsLoaded: function (key) {
        return !!this.model.prefabs[key]
    },

    syncLoad: function (key, cb) {
        cb = cb || function () { }

        let subs = key.split(':')
        let url = (subs.length == 2) ? `SubModules/${subs[0]}/prefabs/ui/${subs[1]}` : `Master/prefabs/ui/${key}`
        if (this.model.prefabs[key]) {
            cb()
        } else {
            cc.loader.loadRes(url, (err, prefab) => {
                if (err) {
                    return cc.log(err)
                }
                this.model.prefabs[key] = prefab
                this.model.urls.push(url)
                collectMgr.register(url)
                cb()
            })
        }
    },

    // usage: UIMgr.show({multi:true, effect:'MoveFromLeft', name:"MessageBox"}, ...)
    // usage: UIMgr.show("MessageBox", ...)
    show: function (name) { // params: multi, effect
        if (!name) return;

        let args = Array.prototype.slice.call(arguments)
        let params = {}
        args.splice(0, 1)

        if (typeof (name) != 'string') {
            params = name || {}
            name = params.name
            if (!name) return;
        }

        let setupLayer = (layer) => {
            let count = this.model.stack.push(layer)
            layer.node.zIndex = count * 2 + 2
            layer.node.parent = this.uiParent
            layer.effect = params['effect'] ? Effects[params['effect']] : Effects['NoEffect']
            layer.effect.show(layer)
            if (layer.node.onenter) {
                layer.node.onenter.apply(null, args)
            }
        }

        this.syncLoad(name, (url) => {
            cc.log('show ', name)

            if (params.multi || this.model.cache[name] == null) {
                let layer = {
                    name: name,
                    node: cc.instantiate(this.model.prefabs[name]),
                    pfbURL: url,
                }

                this.model.cache[name] = layer
                setupLayer(layer)
            } else {
                let layer = this.bringToTop(name)
                if (layer) { // 单个实例且此实例已经在显示中
                    if (layer.node.onenter) {
                        layer.node.onenter.apply(null, args)
                    }
                } else {
                    layer = this.model.cache[name]
                    setupLayer(layer)
                }
            }

            this.resetMask()
        })
    },

    bringToTop: function (name) {
        for (let i = 0; i < this.model.stack.length; i++) {
            let layer = this.model.stack[i]
            if (layer.name == name) {
                this.model.stack.splice(i, 1)
                this.model.stack.push(layer)
                return layer
            }
        }
        return null
    },

    topName: function () {
        return this.model.stack.length == 0 ? "" : this.model.stack[this.model.stack.length - 1].name
    },

    topNode: function () {
        return this.model.stack.length == 0 ? "" : this.model.stack[this.model.stack.length - 1].node
    },

    pop: function () {
        if (this.model.stack.length > 0) {
            this.close(this.model.stack[this.model.stack.length - 1].node)
        }
    },

    close: function (node) {
        if (node instanceof cc.Component) {
            node = node.node
        } else if (typeof (node) == 'string') {
            if (this.model.cache[node]) {
                node = this.model.cache[node].node
            } else {
                return
            }
        }

        let found = null
        for (let i = 0; i < this.model.stack.length; i++) {
            let layer = this.model.stack[i]
            if (layer.node == node) {
                this.model.stack.splice(i, 1)[0]
                found = layer
                break
            }
        }

        if (!found) {
            return
        }

        found.effect.hide(found, () => {
            found.node.parent = null
            this.resetMask()
        })
    },

    clear: function () {
        this.model.stack.forEach((layer) => {
            layer.node.parent = null
        })

        if (globalCfg.memoryCollectImmediate) {
            this.model.urls.forEach((url) => {
                collectMgr.release(url)
            })
        }

        this.model.stack.length = 0
        this.model.urls.length = 0
        this.model.cache = {}

        this.resetMask()
    },

    resetMask: function () {
        let count = this.model.stack.length
        this.mask.active = (count != 0)
        this.mask.zIndex = count * 2 + 1
    },

    showTip: function (text) {
        let node = cc.instantiate(this.tipTempNode)
        node.active = true;
        node.parent = this.tipTempNode.parent
        node.getChildByName('value').getComponent(cc.Label).string = text

        node.Run(
            cc.delayTime(2),
            cc.fadeOut(0.5),
            cc.callFunc(() => {
                node.parent = null
            })
        )
    },
});

版权申明:内容来源网络,版权归原创者所有。除非无法确认,我们都会标明作者及出处,如有侵权烦请告知,我们会立即删除并表示歉意。谢谢。