zoukankan      html  css  js  c++  java
  • cocos creator集成小游戏去掉背景

    在游戏开发过程中,如果小游戏是集成到APP里面,就可能会需要,

    把cocos本身自带背景给去掉,让玩家有一种,游戏浮在app上的视觉效果。

    在这里提供分享一种方法,可能会给开发者带来帮助。

    如果不加以处理,会默认成黑色。

    首先将creator工程打包成H5项目后,在build文件夹下,找到打包后的h5文件夹,进入找到main.js,打开找到cc.game.run,在前面加上cc.macro.ENABLETRANSPARENT_CANVAS = true;

    在main.js中加入如下两行即可让canvas变透明

    cc.director.setClearColor(new cc.Color(0,0,0, 0));

    cc.macro.ENABLE_TRANSPARENT_CANVAS = true;

    添加的位置在:

     1  65         function setLoadingDisplay () {
     2  66             // Loading splash scene
     3  67             var splash = document.getElementById('splash');
     4  68             var progressBar = splash.querySelector('.progress-bar span');
     5  69             cc.loader.onProgress = function (completedCount, totalCount, item) {
     6  70                 var percent = 100 * completedCount / totalCount;
     7  71                 if (progressBar) {
     8  72                     progressBar.style.width = percent.toFixed(2) + '%';
     9  73                 }
    10  74             };
    11  75             splash.style.display = 'block';
    12  76             progressBar.style.width = '0%';
    13  77             cc.director.setClearColor(new cc.Color(0,0,0, 0));//插入设置透明色
    14  78             cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {
    15  79                 splash.style.display = 'none';
    16  80             });
    17  81         }
    18  82         cc.macro.ENABLE_TRANSPARENT_CANVAS = true;//修改状态属性
    19  83         var onStart = function () {}

    然后在同目录下修改style-mobile.js文件,将和颜色有关的background都改为transparent,这样,不管是loading页面还是游戏中的背景都会变为透明了。

    另外在Cocos引擎中,Canvas的背景,其颜色也是默认为黑色的,需要修改:

    参考文档:https://www.cnblogs.com/luorende/p/10750851.html

         https://blog.csdn.net/xw1110280055/article/details/84886411

  • 相关阅读:
    document.createElement在IE和Firefox下的差异
    css3:基础知识
    XMLTProcessor根据XSLT样式规则将节点转换为document对象
    Sql:查看数据库表和表结构的语句
    前端性能优化方法总结
    vue-resource 设置请求的参数以formData形式以及设置请求的过滤器
    vuex
    vue 随笔3
    vuex
    vue随笔2
  • 原文地址:https://www.cnblogs.com/Hunter-541695/p/14364111.html
Copyright © 2011-2022 走看看