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;
    };
     
     
  • 相关阅读:
    Maidsafe-去中心化互联网白皮书
    The Top 20 Cybersecurity Startups To Watch In 2021 Based On Crunchbase
    Top 10 Blockchain Security and Smart Contract Audit Companies
    The 20 Best Cybersecurity Startups To Watch In 2020
    Blockchain In Cybersecurity: 11 Startups To Watch In 2019
    004-STM32+BC26丨260Y基本控制篇(阿里云物联网平台)-在阿里云物联网平台上一型一密动态注册设备(Android)
    涂鸦开发-单片机+涂鸦模组开发+OTA
    000-ESP32学习开发-ESP32烧录板使用说明
    03-STM32+Air724UG远程升级篇OTA(阿里云物联网平台)-STM32+Air724UG使用阿里云物联网平台OTA远程更新STM32程序
    03-STM32+Air724UG远程升级篇OTA(自建物联网平台)-STM32+Air724UG实现利用http/https远程更新STM32程序(TCP指令,单片机程序检查更新)
  • 原文地址:https://www.cnblogs.com/Again/p/5271087.html
Copyright © 2011-2022 走看看