Cocos Creator （webgl模式下怎么让canvas背景透明）

Posted 2021-02-17

 

　　项目中构建出web-mobile包后，打开main.js

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

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

　　cc.macro.ENABLE_TRANSPARENT_CANVAS = true;

 

　　 示例代码：

  1 (function () {
  2 
  3     function boot () {
  4 
  5         var settings = window._CCSettings;
  6         window._CCSettings = undefined;
  7 
  8         if ( !settings.debug ) {
  9             var uuids = settings.uuids;
 10 
 11             var rawAssets = settings.rawAssets;
 12             var assetTypes = settings.assetTypes;
 13             var realRawAssets = settings.rawAssets = {};
 14             for (var mount in rawAssets) {
 15                 var entries = rawAssets[mount];
 16                 var realEntries = realRawAssets[mount] = {};
 17                 for (var id in entries) {
 18                     var entry = entries[id];
 19                     var type = entry[1];
 20                     // retrieve minified raw asset
 21                     if (typeof type === ‘number‘) {
 22                         entry[1] = assetTypes[type];
 23                     }
 24                     // retrieve uuid
 25                     realEntries[uuids[id] || id] = entry;
 26                 }
 27             }
 28 
 29             var scenes = settings.scenes;
 30             for (var i = 0; i < scenes.length; ++i) {
 31                 var scene = scenes[i];
 32                 if (typeof scene.uuid === ‘number‘) {
 33                     scene.uuid = uuids[scene.uuid];
 34                 }
 35             }
 36 
 37             var packedAssets = settings.packedAssets;
 38             for (var packId in packedAssets) {
 39                 var packedIds = packedAssets[packId];
 40                 for (var j = 0; j < packedIds.length; ++j) {
 41                     if (typeof packedIds[j] === ‘number‘) {
 42                         packedIds[j] = uuids[packedIds[j]];
 43                     }
 44                 }
 45             }
 46         }
 47 
 48         // init engine
 49         var canvas;
 50 
 51         if (cc.sys.isBrowser) {
 52             canvas = document.getElementById(‘GameCanvas‘);
 53         }
 54 
 55         if (false) {
 56             var ORIENTATIONS = {
 57                 ‘portrait‘: 1,
 58                 ‘landscape left‘: 2,
 59                 ‘landscape right‘: 3
 60             };
 61             BK.Director.screenMode = ORIENTATIONS[settings.orientation];
 62             initAdapter();
 63         }
 64 
 65         function setLoadingDisplay () {
 66             // Loading splash scene
 67             var splash = document.getElementById(‘splash‘);
 68             var progressBar = splash.querySelector(‘.progress-bar span‘);
 69             cc.loader.onProgress = function (completedCount, totalCount, item) {
 70                 var percent = 100 * completedCount / totalCount;
 71                 if (progressBar) {
 72                     progressBar.style.width = percent.toFixed(2) + ‘%‘;
 73                 }
 74             };
 75             splash.style.display = ‘block‘;
 76             progressBar.style.width = ‘0%‘;
 77             cc.director.setClearColor(new cc.Color(0,0,0, 0));//插入设置透明色
 78             cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {
 79                 splash.style.display = ‘none‘;
 80             });
 81         }
 82         cc.macro.ENABLE_TRANSPARENT_CANVAS = true;//修改状态属性
 83         var onStart = function () {
 84             cc.view.resizeWithBrowserSize(true);
 85 
 86             if (!false && !false) {
 87                 // UC browser on many android devices have performance issue with retina display
 88                 if (cc.sys.os !== cc.sys.OS_ANDROID || cc.sys.browserType !== cc.sys.BROWSER_TYPE_UC) {
 89                     cc.view.enableRetina(true);
 90                 }
 91                 if (cc.sys.isBrowser) {
 92                     setLoadingDisplay();
 93                 }
 94 
 95                 if (cc.sys.isMobile) {
 96                     if (settings.orientation === ‘landscape‘) {
 97                         cc.view.setOrientation(cc.macro.ORIENTATION_LANDSCAPE);
 98                     }
 99                     else if (settings.orientation === ‘portrait‘) {
100                         cc.view.setOrientation(cc.macro.ORIENTATION_PORTRAIT);
101                     }
102                     cc.view.enableAutoFullScreen([
103                         cc.sys.BROWSER_TYPE_BAIDU,
104                         cc.sys.BROWSER_TYPE_WECHAT,
105                         cc.sys.BROWSER_TYPE_MOBILE_QQ,
106                         cc.sys.BROWSER_TYPE_MIUI,
107                     ].indexOf(cc.sys.browserType) < 0);
108                 }
109 
110                 // Limit downloading max concurrent task to 2,
111                 // more tasks simultaneously may cause performance draw back on some android system / brwosers.
112                 // You can adjust the number based on your own test result, you have to set it before any loading process to take effect.
113                 if (cc.sys.isBrowser && cc.sys.os === cc.sys.OS_ANDROID) {
114                     cc.macro.DOWNLOAD_MAX_CONCURRENT = 2;
115                 }
116             }
117 
118             // init assets
119             cc.AssetLibrary.init({
120                 libraryPath: ‘res/import‘,
121                 rawAssetsBase: ‘res/raw-‘,
122                 rawAssets: settings.rawAssets,
123                 packedAssets: settings.packedAssets,
124                 md5AssetsMap: settings.md5AssetsMap
125             });
126 
127             if (false) {
128                 cc.Pipeline.Downloader.PackDownloader._doPreload("WECHAT_SUBDOMAIN", settings.WECHAT_SUBDOMAIN_DATA);
129             }
130 
131             var launchScene = settings.launchScene;
132 
133             // load scene
134             cc.director.loadScene(launchScene, null,
135                 function () {
136                     if (cc.sys.isBrowser) {
137                         // show canvas
138                         canvas.style.visibility = ‘‘;
139                         var div = document.getElementById(‘GameDiv‘);
140                         if (div) {
141                             div.style.backgroundImage = ‘‘;
142                         }
143                     }
144                     cc.loader.onProgress = null;
145                     console.log(‘Success to load scene: ‘ + launchScene);
146                 }
147             );
148         };
149 
150         // jsList
151         var jsList = settings.jsList;
152 
153         if (false) {
154             BK.Script.loadlib();
155         }
156         else
157         {
158             var bundledScript = settings.debug ? ‘src/project.dev.js‘ : ‘src/project.js‘;
159             if (jsList) {
160                 jsList = jsList.map(function (x) {
161                     return ‘src/‘ + x;
162                 });
163                 jsList.push(bundledScript);
164             }
165             else {
166                 jsList = [bundledScript];
167             }
168         }
169 
170         // anysdk scripts
171         if (cc.sys.isNative && cc.sys.isMobile) {
172             jsList = jsList.concat([‘src/anysdk/jsb_anysdk.js‘, ‘src/anysdk/jsb_anysdk_constants.js‘]);
173         }
174 
175         var option = {
176             //width: width,
177             //height: height,
178             id: ‘GameCanvas‘,
179             scenes: settings.scenes,
180             debugMode: settings.debug ? cc.DebugMode.INFO : cc.DebugMode.ERROR,
181             showFPS: (!false && !false) && settings.debug,
182             frameRate: 60,
183             jsList: jsList,
184             groupList: settings.groupList,
185             collisionMatrix: settings.collisionMatrix,
186             renderMode: 0
187         }
188 
189         cc.game.run(option, onStart);
190     }
191 
192     if (false) {
193         BK.Script.loadlib(‘GameRes://libs/qqplay-adapter.js‘);
194         BK.Script.loadlib(‘GameRes://src/settings.js‘);
195         BK.Script.loadlib();
196         BK.Script.loadlib(‘GameRes://libs/qqplay-downloader.js‘);
197         qqPlayDownloader.REMOTE_SERVER_ROOT = "";
198         var prevPipe = cc.loader.md5Pipe || cc.loader.assetLoader;
199         cc.loader.insertPipeAfter(prevPipe, qqPlayDownloader);
200         // <plugin script code>
201         boot();
202         return;
203     }
204 
205     if (false) {
206         require(window._CCSettings.debug ? ‘cocos2d-js.js‘ : ‘cocos2d-js-min.js‘);
207         var prevPipe = cc.loader.md5Pipe || cc.loader.assetLoader;
208         cc.loader.insertPipeAfter(prevPipe, wxDownloader);
209         boot();
210         return;
211     }
212 
213     if (window.jsb) {
214         require(‘src/settings.js‘);
215         require(‘src/jsb_polyfill.js‘);
216         boot();
217         return;
218     }
219 
220     if (window.document) {
221         var splash = document.getElementById(‘splash‘);
222         splash.style.display = ‘block‘;
223 
224         var cocos2d = document.createElement(‘script‘);
225         cocos2d.async = true;
226         cocos2d.src = window._CCSettings.debug ? ‘cocos2d-js.js‘ : ‘cocos2d-js-min.js‘;
227 
228         var engineLoaded = function () {
229             document.body.removeChild(cocos2d);
230             cocos2d.removeEventListener(‘load‘, engineLoaded, false);
231             window.eruda && eruda.init() && eruda.get(‘console‘).config.set(‘displayUnenumerable‘, false);
232             boot();
233         };
234         cocos2d.addEventListener(‘load‘, engineLoaded, false);
235         document.body.appendChild(cocos2d);
236     }
237 
238 })();