creator3d技巧
1)代码红色报错Type 'null' is not assignable to type，解决：null后面加一个！，
比如public startMenu: Node = null;
vscode隐藏.meta文件，搜索files ex，添加**/*.meta，新建ts模板，更改文件D:/CocosDashboard/resources/.editors/Creator/3.4.2/resources/resources/3d/engine/editor/assets/default_file_content/ts
2)与坐标变换计算相关的接口（例如：size 和 anchor）变更如下：需要先获取节点上的 UITransform 组件，再使用对应的接口，node.getComponent(UITransform)!.setContentSize(size);
3)Creator 2.x升级指南里面有api的接口改动。
4) 替换logo，构建发布 -> 替换插屏，勾选插屏的图片。
5) cc.tween(this._Nodes.cardn1).to(1, { x: -500 }, { easing: 'backOut' }).start();backOut到达的时候会超出弹回一下
6)3D模型寻找
7）用cc.tween并行执行动画时，使用.parallel来替换以前的cc.spawn。
8）血量动画 cc.tween(this.hpBar).to(0.3, { progress: 0.6}).start();
9）creator 3d位置转换
10）creator3x的激光实现
11）store.cocos.com插件下载保存位置：
C:\Users\用户名\.CocosCreator\download
C:\Users\1\.CocosCreator\download12）creator3d粒子实现
13）摄像机视角的有趣玩法，实现《饥荒》同款视觉表现，一毛一样
14）oops-framework-demo 在线DEMO上线
https://gitee.com/dgflash/oops-framework
15）creator3.0的listview
16）creator3开发应用App
用来creator3.x来开发app，有点意思的。
17）各种3d的demo https://gitee.com/propertygame/cocos-creator3.x-demos
18）白玉无冰教程
https://github.com/baiyuwubing
https://gitee.com/lamyoung (克隆github)
Cocos Creator 3.0 教程! 标志板！Billboard !
Cocos Creator 3.0 入门 ! 2D 素材 3D 效果!
基础光照模型！Cocos Creator 2D 光照!
四元数与3D旋转实例！Cocos Creator 3D Quaternion !
不好意思，我膨胀了！shader 入门精要！Cocos Creator 3D Shader !
初探雾效果！shader 源码分析与讲解！Cocos Creator 3D Shader Fog !
噪声纹理之消融效果！shader 入门精要！
隐秘的物理粒子系统与渲染 ！Cocos Creator LiquidFun ! （Q弹 果冻 效果）
瞄准器！3D入门实战！拇指射箭！(超简单的射线检测)
多边形裁剪图片与gizmo！（替换mask的一种方案，可作为 gizmo 学习资料）
3D摇杆控制器一种简单实现！(移动与视角控制)
19) 场景要加载skybox，需要在cc.Camera组件里，把ClearFlags设置成SKYBOX，不用默认的SOLID_COLOR。
20）localstorage存数据
21）官方protobuf例子
https://docs.cocos.com/creator/3.0/manual/zh/scripting/modules/example.html?h=protobuf
protobuf creator3.0示例example-3d\npm-case
22) protobuf用在creator3.x上，花了我2天的时间，最后用这个https://github.com/cocos-creator/example-3d/protobuf 解决了，太难了我。其他各式各样的方法，都用不了。我去，真坑。
23）super-scrollview
24) 2d的ui控件，注意Layer要设置为UI_2D组，不然不生效的。记得啦。不能只添加Node，然后添加控件了，还要设置Layer。
25) 资源加载问题
26）UIMeshRenderer 组件参考
27）层级问题childNode.insertChild(maskNode, -999);，放最下面。
28）替换精灵图片，路径不加.png但加字符串：/spriteFrame，嘿嘿，真是神奇的操作啊。
29）图片设置默认格式为spriteFrame：
偏好设置 - 资源数据库，Default Meta点Edit。
点击 edit 会打开一个 json，里面默认是 texture，改成 sprite-frame 就可以修改整个项目的～
30）3.x 中 (cc.UITransform).priority 这个是2.x里面的 zIndex，或者用setSiblingIndex
31）自动图集合图功能,3.x和2.x也不一样。是以当前文件夹下的所有 SpriteFrame 作为碎图资源，打包成一个大的 Sprite Atlas，不是sprite-frame的不会打包进来。
32）Cocos Effect安装这个vscode插件Effect 语法
33）代码创建Node
let hnode = new Node();
hnode.layer = Layers.Enum.DEFAULT;
// 更多
this.uiNode = new Node('UIname');
this.uiNode.layer = Layers.Enum.UI_2D;
// 添加一个UITransform组件, Canvas会自动加不用手动加
const uiTransform = node.addComponent(UITransform);
uiTransform.contentSize = view.getVisibleSize();
// 添加widget
let widget = this.uiNode.addComponent(Widget);
widget.top = 0;
widget.left = 0;
widget.bottom = 0;
widget.left = 0;
// widget.updateAlignment();
director.getScene()!.insertChild(this.uiNode, 999);
// // 添加UITransform
// let uiTransform = this.uiNode.addComponent(UITransform);
// uiTransform.setContentSize(750, 1334);
// uiTransform.setAnchorPoint(0.5, 0.5);
// 添加camera
let node = new Node('Camera');
this.uiNode.addChild(node);
let camera = node.addComponent(Camera);
camera.enabled = true;
// camera.visibility = 41943040;
camera.priority = 1073741824;
camera.clearFlags = gfx.ClearFlag.DEPTH_STENCIL;
camera.clearColor = math.color(0, 0, 0);
camera.projection = renderer.scene.CameraProjection.ORTHO;
camera.far = 2000;
// 添加canvas
let canvas = this.uiNode.addComponent(Canvas);
console.log(canvas);
canvas.cameraComponent = camera;
canvas.alignCanvasWithScreen = true;
let test = new Node();
test.addComponent(Label).string = 'here=====';
this.uiNode.addChild(test);
// 代码添加空图片
var imageObj = new Image();
imageObj.src = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAAA1BMVEX///+nxBvIAAAACklEQVQI12MAAgAABAABINItbwAAAABJRU5ErkJggg==`;
var textureObj = new Texture2D();
textureObj.image = new ImageAsset(imageObj);
var sf = new SpriteFrame();
sf.texture = textureObj;
this.lcSp.getComponent(Sprite).spriteFrame = sf;34）ts文件里面红色报错，看着不爽，如何不显示？用这个描述一下// @ts-ignore
35）Creator 3D 在三维空间中，让一个物体朝向某个方向
const dir = targetPos.sub(this.node.position).normalizeSelf()
const q_tmp = new cc.Quat()
cc.Quat.rotationTo(q_tmp, cc.v3(0, -1, 0), dir)
this.node.setRotation(q_tmp)cc.v3(0, -1, 0)这个参数指的是 node 指向的方向，比如一个子弹的图片头部是朝下的，这个参数就填 cc.v3(0, -1, 0), 如果是朝上的就是 cc.v3(0, 1, 0)
36）炸弹爆炸产生碎片的特效：把当前游戏界面用RenderTexture，存成纹理，把纹理放在一个sprite节点上，再用s用shader做波纹冲击，然后关闭截图元素移动消除。
把摄像机的内容渲染到图片，然后用shader做水波特效
this.material =this.sprite.sharedMaterials[0];
if(!this.texture){
let gl = cc.game ['_renderContext'];
this.texture = new cc.RenderTexture();
this.texture.initwithSize((cc.visibleRect as any).width，(cc.visibleRect as any).height，g1.STENVCIL_INDEX8);
this.camera.targetTexture = this.texture;
(this.camera as any).render();
}
this.sprite.spriteframe = new cc.SpriteFrame(this.texture);
(this.material as any).setProperty('texture", this.texture);
(this.material as any).setProperty('winSize'， cc.v2(cc.winSize.width，cc.winSize.height));37）坐标设置step改0.01为1，不然坐标老是有小数点，看起来不爽。点击cocos creator，偏好设置-通用设置-默认步长数，0.001改为1，就可以了。
38）creator 3.x安装npm包
39）我能否在 Cocos Creator 中使用 npm 包……
40）3.x使用uuid，不能npm安装包，使用这个npmjs uuid min下载 代码let uid = uuidv4();
41）很多好creator 3d例子
42）官方creator3.4.x文档 或者直达各版本https://docs.cocos.com/creator/3.4/manual/zh/
43）官方creator 3.0升级后api改名查询地址
44）截屏base64格式 creator 3.4.0截屏
public static capture(): string {
if (xdSys.platform == xdPlatform.WEB ||
xdSys.platform == xdPlatform.XQWEB ||
xdSys.platform == xdPlatform.JSB) {
let node = xdUIUtil.getUICanvas();
let renderTex: RenderTexture = new RenderTexture();
let winSize = xdUIUtil.getViewSize();
renderTex.initialize({
width: Math.floor(winSize.width),
height: Math.floor(winSize.height),
})
let camera = node.getComponent(Canvas);
camera.targetTexture = renderTex;
director.root.pipeline.render([camera.camera.view]);
let data = this.copyRenderTex(renderTex);
camera.targetTexture = null;
return data;
}
return null;
}
private static copyRenderTex(renderTex: RenderTexture): string {
let arrayBuffer = new ArrayBuffer(renderTex.width * renderTex.height * 4);
let region = new GFXBufferTextureCopy();
region.texOffset.x = 0;
region.texOffset.y = 0;
region.texExtent.width = renderTex.width;
region.texExtent.height = renderTex.height;
director.root.device.copyFramebufferToBuffer(renderTex.window.framebuffer, arrayBuffer, [region]);
if (xdSys.platform == xdPlatform.JSB) {
let path = xdfile.getWritablePath() + 'capture.jpg';
this.saveImageData(arrayBuffer, renderTex.width, renderTex.height, path);
return path;
} else {
return this.toB64(arrayBuffer);
}
}
private static saveImageData(arrayBuffer: ArrayBuffer, w: number, h: number, path: string) {
let imageU8Data = new Uint8Array(arrayBuffer);
//翻转图片
let picData = new Uint8Array(w * h * 4);
let rowBytes = w * 4;
for (let row = 0; row < h; row++) {
let srow = h - 1 - row;
let start = srow * w * 4;
let reStart = row * w * 4;
// save the piexls data
for (let i = 0; i < rowBytes; i++) {
picData[reStart + i] = imageU8Data[start + i];
}
}
jsb.saveImageData(picData, w, h, path);
}
private static toB64(arrayBuffer: ArrayBuffer): string {
let canvas = document.createElement('canvas');
let winSize = xdUIUtil.getViewSize();
let width = canvas.width = Math.floor(winSize.width);
let height = canvas.height = Math.floor(winSize.height);
let ctx = canvas.getContext('2d');
let imageU8Data = new Uint8Array(arrayBuffer);
let rowBytes = width * 4;
let rowBytesh = height * 4;
for (let row = 0; row < rowBytesh; row++) {
let sRow = height - 1 - row;
let imageData = ctx.createImageData(width, 1);
let start = sRow * rowBytes;
for (let i = 0; i < rowBytes; i++) {
imageData.data[i] = imageU8Data[start + i];
}
ctx.putImageData(imageData, 0, row);
}
var base64 = canvas.toDataURL("image/jpeg", 0.7); //压缩语句
return base64;
}其他技术方案分享
45）creator 3.x九宫格Sliced跟2.x不一样，在图片的SpriteFrame下面，选中spriteFrame，在inspector上有Edit按钮~
46）Prefab一直提示要保存，因为新建了ScrollView删除了bar节点，没在ScrollBar里面点X删除，导致每次都要保存。
47）勾选md5后找不到build-template里面的文件，需要点“项目”，“构建模板”，创建index.ejs类的模板。build-template
48）node.position是浅拷贝，要用node.getPosition();`才行，坑啊，我去。
49）暂停tween的动画，
// 在某个需要的时机调用
let tweenObj = cc.tween().start()
tweenObj.stop()
// 如果要停止多个tween, 用个数组来保存所有tween, 或者用标签
let tween1 = cc.tween().tag(1).start()
let tween2 = cc.tween().tag(1).start()
cc.Tween.stopAllByTag(1)
// 如果想暂停某个节点的所有动作, 后续再恢复
let target = this.node
cc.TweenSystem.instance.ActionManager.pauseTarget(target)
cc.TweenSystem.instance.ActionManager.resumeTarget(target)
// 如果想暂停当前的游戏所有动作, 例如做网络重连
let pausedTargets = cc.TweenSystem.instance.ActionManager.pauseAllRunningActions()
cc.TweenSystem.instance.ActionManager.resumeTargets(pausedTargets )50）参考图设置
点击 场景编辑器 右上角的 scene reference 按钮，即可打开 参考图 面板，主要用于辅助开发人员在 场景编辑器 中拼接 UI 时作为对照参考。有点厉害的，以前都是自己添加一个Sprite做参考图。
51）导出，右键scene或者prefab就能导出，找了半天
52）onDestroy别写错了，不然监听不到了
53）网页视频吧mp4播放，自动播放不了，需要用户点击一下才可以自动播放，只要把声音关掉就可以自动播放VideoPlay了。
54）3d模型放在2d的Sprite上，当3d隐藏了在显示的时候会y轴翻转。
55）自定义创建的脚本模板，改ts文件的emplate。
修改
// mac
\CocosDashboard\resources.editors\Creator\3.1.0\resources\resources\3d\engine\editor\assets\default_file_content
// win
C:\CocosDashboard_1.0.14\resources\.editors\Creator\3.4.0\resources\resources\3d\engine\editor\assets\default_file_content这个目录下的名为ts的文件
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('<%Name%>')
export class <%Name%> extends Component {
onLoad() {
}
onDestroy() {
}
start () {
}
// update (deltaTime: number) {
// }
}56）国际化，搜索是否有中文，用正则来搜索中文，中文搜索
^((?!(\*|//)).)+[\u4e00-\u9fa5]57）动态加载Material
@property(MeshRenderer)
meshRendererNode!: MeshRenderer;
_material !: Material;
resources.load('materials/dynamic-load-material', Material, (err: any, material: Material) => {
if (err) {
error(err);
return;
}
this._material = (material as any).addRef();
this.meshRendererNode.setMaterial(material, 0);
})
onDestroy (){
this._material && this._material.decRef();
this._material = null!;
}58）动态加载
59）xocde工程覆盖问题。(CMake配置)[https://docs.cocos.com/creator/manual/zh/advanced-topics/cmake-learning.html]
60）资源释放接口
61）3D 模型怎么实现各个面可以加数字
一个cube上面贴6个文字的quad，cube贴颜色，label的quad用unlit材质Tec选transpaent。cube也可以换成6个quad每个quad单独贴一种颜色。
麻烦肯定是麻烦的，不然的话就自己写shader来实现label和背景图，那样就不需要要那么多quad了，纯数字贴图的label写一个符合自己需求的shader。这样的话也不需要用引擎的label来这么复杂的实现了。
62）职业规范
从cocos2dx直接转了ue4，目前ue4的工作机会也开始多起来了，除了做游戏，还可以考虑vr,工业设计家装可视化之类的行业，不离开cocos,主要是还有一些古老的项目依然需要cocos2dx，依然可能带来一部分收入。不过一直没有碰cocos creator，纯属个人喜好，生态的问题不是个人能决定的，专精小游戏会让职业路走窄是不可避免的，个人能力的上限可能无法突破整个行业的下行，不往更广阔的生态里扩展，确实会随着年纪的增大难以保持增长
63）资源释放
assetManager.releaseAsset(onePrefab)
64） 官方宣传的，ARPG小游戏作品
65）良辰的热更新方法动态改url地址
注意：项目务必放根目录，否则打包各种报错！！！血的教训呀，浪费了大好时间。
注意2：报错java.lang.NullPointerException: Attempt to invoke virtual method 'boolean ja是因为热更新地址写错了。url打错了，第二个URL http:/只有一个/ 。。。复制到浏览器自动加/了。。。
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />https://forum.cocos.org/t/google-play-obb/85119
66）不错的个人分享者文章 https://chenpipi.cn/
67）开源的这个3D炮弹项目 https://gitee.com/ifaswind/cocos-case-projectile
68）cocos分包
69）坑不支持，横竖屏转换了 https://forum.cocos.org/t/topic/127654/2
70）Uncaught TypeError: Cannot read properties of null (reading 'getGFXTexture')
把engine/blog/v3.4.2/cocos/2d/renderer/batcher-2d.ts里361行
改为
if (frame && frame.isValid)71）安卓wss连接问题。需要传证书文件
let s = new WebSocket(url, [], pemAndUrl);72）ios刘海屏问题，千万别用官方的safearea控件，左右下面都会有空格，一点也不正常。添加一个控件IpxrComponent.ts
import { _decorator, Component, Node, sys, view, WidgetComponent } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('IpxrComponent')
export class IpxrComponent extends Component {
onLoad() {
if (this.isIphoneX()) {
this.node.getComponent(WidgetComponent).isAbsoluteLeft = false;
this.node.getComponent(WidgetComponent).left = 0.05;
}
}
isIphoneX() {
if (sys.os == sys.OS.IOS) {
var size = view.getVisibleSize();
if (size.height > size.width) {
return size.height / size.width > 2;
} else {
return size.width / size.height > 2;
}
}
return false;
}
}把需要靠右边的控件，添加这个脚本。
73）Label开启CHAR模式性能好一些CHAR模式。
74) 字体编译工具 https://snowb.org 比bmfont好用
75）内网局域网对战
76）Plane只显示一面的问题，在pipelinestate里设置cullmode为none，就能显示双面啦。creator 3d材质双面的问题就解决啦。
77）一般游戏适配，正常手机宽高比都在1.777777777777778 - 2.2 之间。
横屏->设计分辨率宽高比大于屏幕分辨率 -> 适配高度; 比如设计是1650x750（2.2）->Fix Height
横屏->设计分辨率宽高比小于屏幕分辨率 -> 适配宽度; 比如设计是1334x750（1.78）->Fix Width (1920x1080)
竖屏->设计分辨率宽高比小于屏幕分辨率 -> 适配高度; 比如设计是750x1650（2.2）->Fix Width
竖屏->设计分辨率宽高比大于屏幕分辨率 -> 适配宽度; 比如设计是750x1334（1.78）->Fix Height (1080x1920)
78) creator打开网页一直报错，进不去，是因为脚本删除了，但是挂在节点上的脚本组件没删除，所以一直报错，进不了游戏。
79）代码不能放在resources目录下，pc下没问题，打包到手机就会有奇怪的问题，不能初始化啥的。
80）部分安卓手机 EditBox 需要点两次才出键盘。web-mobile 的解决方案，部分安卓手机 H5 不支持通过脚本的方式唤起输入法（安卓系统问题），必须由 用户手动点击页面 input 才可以。生成个完全透明的 HTML input DOM 元素覆盖在 cocos 的 editbox 上面，点击 input 的时候再执行 editbox.focus() 并移除 input 就可以了。
private generateInput() {
if (!isAndroid) return;
const that = this;
const ipt = document.createElement('input');
ipt.setAttribute('id', 'input-for-focus');
const s = {
position: 'absolute',
zIndex: '99',
width: '4.7rem',
height: '0.57rem',
left: '1.4rem',
bottom: '7.1rem',
outline: 'none',
opacity: '0',
}
Object.keys(s).forEach(k => {
ipt.style[k] = s[k];
});
const editbox = this.node.getChildByPath('Dialog/EditNameContent/EditBox').getComponent(EditBox);
ipt.addEventListener('focus', () => {
editbox.focus();
that.removeInput();
})
document.body.appendChild(ipt);
}
private removeInput() {
if (isAndroid) {
const ipt = document.getElementById('input-for-focus');
if (ipt) {
document.body.removeChild(ipt);
}
}
}81）兼顾测试和自己开发，把链接带上 &autoReload=false 就不会自动刷新了，自己开发的时候不要带这个参数。
82）prefab残留信息清除
把Prefab拖入场景,取消关联再重新设为预制体,可清除冗余信息
83）