Canvas的摄像机Color去除勾选
在打包后的web-mobile文件夹下的main.js中的`setLoadingDisplay`方法添加
TypeScript
cc.director.setClearColor(new cc.Color(0, 0, 0, 0));在`setLoadingDisplay`方法后添加
TypeScript
cc.macro.ENABLE_TRANSPARENT_CANVAS = true;最后的main.js的总体修改代码如下
TypeScript
function setLoadingDisplay () {
// Loading splash scene
var splash = document.getElementById('splash');
var progressBar = splash.querySelector('.progress-bar span');
onProgress = function (finish, total) {
var percent = 100 * finish / total;
if (progressBar) {
progressBar.style.width = percent.toFixed(2) + '%';
}
};
splash.style.display = 'block';
progressBar.style.width = '0%';
cc.director.setClearColor(new cc.Color(0, 0, 0, 1)); // 添加，透明不能为0，可能会有问题
cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {
splash.style.display = 'none';
});
}
cc.macro.ENABLE_TRANSPARENT_CANVAS = true; // 添加在同文件下的`style-mobile.css`文件修改body修饰
CSS
background-color: transparent;不过设置这个每次打包都需要重新设置，可以使用自带的模版打包，把修改完的main.js和style-mobile.css复制到和build同级目录的build-templates文件夹下，目录要和build保持一致
注意：设置Canvas透明通道之后，会导致拥有透明通道的图颜色出现严重偏差，在任意启动脚本内添加以下代码
TypeScript
// 解决Canvas透明导致的图片透明通道问题
(() => {
//@ts-ignore
cc.Texture2D.prototype._deserialize = function (data) {
let Texture2D = cc.Texture2D
let fields = data.split(',');
// decode extname
let extIdStr = fields[0];
if (extIdStr) {
//@ts-ignore
var result = Texture2D._parseExt(extIdStr, this._format);
if (result.bestExt) {
this._setRawAsset(result.bestExt);
this._format = result.bestFormat;
}
else if (result.defaultExt) {
this._setRawAsset(result.defaultExt);
//@ts-ignore
cc.warnID(3120, result.defaultExt, result.defaultExt);
}
else {
//@ts-ignore
throw new Error(cc.debug.getError(3121));
}
}
if (fields.length === 8) {
// decode filters
this._minFilter = parseInt(fields[1]);
this._magFilter = parseInt(fields[2]);
// decode wraps
this._wrapS = parseInt(fields[3]);
this._wrapT = parseInt(fields[4]);
// decode premultiply alpha
this._premultiplyAlpha = true;
this._genMipmaps = fields[6].charCodeAt(0) === 49;
this._packable = fields[7].charCodeAt(0) === 49;
}
}
//制更改cocos的混合模式
//@ts-ignore
cc.Sprite.prototype._updateMaterial = function () {
let texture = this._spriteFrame && this._spriteFrame.getTexture();
if (texture) {
texture.setPremultiplyAlpha(true)
}
// make sure material is belong to self.
let material = this.getMaterial(0);
if (material) {
if (material.getDefine('USE_TEXTURE') !== undefined) {
material.define('USE_TEXTURE', true);
}
material.setProperty('texture', texture);
} else {
return;
}
material.setBlend(
true,
//@ts-ignore
cc.gfx.BLEND_FUNC_ADD,
cc.macro.ONE, this._dstBlendFactor,
//@ts-ignore
cc.gfx.BLEND_FUNC_ADD,
cc.macro.ONE, this._dstBlendFactor
);
}
})()