zoukankan      html  css  js  c++  java
  • 利用青瓷布局自定义加载的场景,而不是自己改写qici-loading

    加载界面如果全部通过自己手动布局不仅不美观,还很难控制。借用原生的场景切换加载效果,来实现我们游戏的加载效果。

     没有做加载修改的原来的加载顺序:

     
    黑乎乎界面->(游戏定制的加载)你的第一个场景->(游戏定制加载)你的第二个场景->(游戏定制加载)你的第三个场景
     
    一般思路
    自己定义装载界面->(游戏定制的加载)你的第一个场景->(游戏定制加载)你的第二个场景->(游戏定制加载)你的第三个场景
     
    我的思路:
    屏蔽默认黑乎乎->(定制游戏加载画面)你的第一个场景留空->(定制游戏加载画面)你的第二个场景
     
    一般小游戏就是加载玩,直接在里面玩耍,过程中其实不应该有游戏切换的情况
    那么我就把所有游戏都放在第二个场景里面。第一个场景由于是空的,绝大部分资源也被黑乎乎界面加载了,
    所以理论上第一个场景的加载界面是不会出现的。然后我们又通过屏蔽掉gameSVG关闭掉原来的显示
    所以效果就是,白屏,和客户以为在打开,这个感觉重叠了,然后第一个场景是空的,
    为我们加载基础脚本带来了方便。然后第一个场景绑定一个场景转跳,跳到第二个场景
    这时候激活游戏的预加载机制,显示我们的loading画面。因为库已经加载进来了,
    我们的加载就可以做适配界面等等基于库的操作。加载资源体验比较好。
    最后加载完了可以在第二场景完成所有游戏的交互。大功告成
     
    目前还是要动手修改loading函数里面加个屏蔽svg,为啥屏蔽,因为不屏蔽会有bug,为了省事,不看就好。呵呵
     
    用来绑定UIRoot跳转的脚本。绑定在第一个空场景中
    /**
     * by Again 2016-3-13 0.51.23
     * 加载这个节点后第一次刷新后转跳到指定节点
     */
    var NextScene = qc.defineBehaviour('qc.demo.NextScene', qc.Behaviour, function() {
        // 初始化代码
        this.loaded = false;
    }, {
        // 需要序列化的场景资源名称
        scene: qc.Serializer.STRING
    });
    NextScene.prototype.awake = function() {
        this.loaded = false;
    };
    
    // 加载下一场景唤醒
    NextScene.prototype.update = function() {
        var self = this;
        if (self.loaded === false) {
            self.loaded = true;
    
            // 切换到指定场景
            if (self.scene) {
                self.game.scene.load(self.scene, false, function() {
                    // 方式1:预加载中,我们可以做一些资源的加载操作
                }, function() {
                    self.game.log.trace('loading new sence ok ({0})', self.scene);
                });
            }
        }
    }
    UIRoot绑定
    用来显示加载状态的脚本,重载下方几个on事件更新你界面元素的状态。
    /**
     * 场景加载的进度提示获取
     */
    var LoadingUI = qc.defineBehaviour('qc.demo.LoadingUI', qc.Behaviour,
        function() {
            var self = this;
            this.clue = null;
    
            //默认显示
            this.onShow = function() {
                self.gameObject.visible = true;
                self.gameObject.alpha = 1;
            };
            //默认消失
            this.onHide = function() {
                self.gameObject.visible = false;
                self.gameObject.alpha = 0;
            };
            //默认加载中
            this.onLoading = function(loaded, total) {
                self.game.log.trace("loading :{0}/{1}",loaded,total);
            };
        }, {
        }
    );
    
    // 初始化处理
    LoadingUI.prototype.awake = function() {
        // 关注场景开始切换和切换结束的事件
        var self = this;
        //设置响应事件
        this.addListener(self.game.scene.onStartLoad, function() {
            // 场景加载开始,显示本界面
            if (typeof(self.onShow) === "function") {
                self.onShow();
            };
        });
        this.addListener(self.game.scene.onEndLoad, function() {
            // 场景加载完毕,隐藏本界面
            if (typeof(self.onHide) === "function") {
                self.onHide();
            };
        });
    }
    
    // 帧调度,保证本界面永远在其他界面之上
    LoadingUI.prototype.update = function() {
        var self = this,
            loaded = self.game.assets.loaded,
            total = self.game.assets.total;
        // 场景加中
        if (typeof(self.onLoading) === "function") {
            self.onLoading(loaded, total);
        };
    };
    
    
    /////////////////////////////////////////////////////////////////////
    // 对外接口
    LoadingUI.prototype.setOnShow = function(callback) {
        this.onShow = callback;
    };
    
    LoadingUI.prototype.setOnHide = function(callback) {
        this.onHide = callback;
    };
    
    LoadingUI.prototype.setOnLoading = function(callback) {
        this.onLoading = callback;
    };
     
     
  • 相关阅读:
    bzoj1059: [ZJOI2007]矩阵游戏
    NEW
    bzoj2438: [中山市选2011]杀人游戏
    bzoj4554: [Tjoi2016&Heoi2016]游戏 二分图匹配
    【高精度】模板 (C++)
    【BZOJ4025】二分图 LCT
    读入/输出模板
    一些 Markdown 语法
    题解 P3732 [HAOI2017]供给侧改革
    题解 CF1598A Computer Game
  • 原文地址:https://www.cnblogs.com/Again/p/5271087.html
Copyright © 2011-2022 走看看