如何将Creator 2D版本迁移到3D版本

最近一直在研究如何把Creator V2.1.2版本的游戏移植到Creator V2.1.1,虽然只差了一个版本,但是内容却大相径庭,前者是Creator的一个2D版本,后者是3D版本,这就导致了版本迁移的时候出现诸多bug。

(一)图片显示白块

   

打开游戏后发现图片或者文字变成白块显示,解决方案:

找到白块的Node,点击Sprite或者Label组件里的Materials属性,点击X号

所有的Sprite和Label重新加载Material就可以正常显示了

(二)脚本中的API弃用警告

例如:'cc.Node.rotation' is deprecated, please use 'cc.Node.angle' instead.

如果你觉得警告很烦,就改到最新的API,如果不改也不会导致游戏无法正常运行。

这里需要注意的是rotation改为angle可能会导致Node的旋转角度出现问题,

将node.rotation改成 -node.angle就可以了

(三)Sprite渲染错误

这是个很奇怪的问题,如果一个节点在场景中的,如果一个节点active为true,就能够正常显示,如果节点active为false,在脚本中设置了某个时间为true,这个节点就可能渲染不出来。打开碰撞检测系统的 debug,可以看到碰撞盒是在那个位置的,但是sprite却没有渲染出来。

解决方案:

打开Creator中sprite默认的shader,修改里面的代码如下:

// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.  

// Note: Current format version is experiment, the format may be changed.
// The future format may not be compatible, you may need to update the script manually.

// 注意:当前版本的格式是实验性的,之后还会进行修改。
// 后续版本的格式不保证兼容当前格式,可能需要手动升级到最新版本。,
%{
  techniques: [
    {
      passes: [
        {
          vert: vs
          frag: fs
          cullMode: none
          blend: true
        }
      ]
      layer: 0
    }
  ]
  properties: {
    texture: {
      type: sampler2D
      value: null
    }
    alphaThreshold: {
      type: number
      value: 0.5
    }
  }
%}

%% vs {

precision highp float;

uniform mat4 cc_matViewProj;

#if _USE_MODEL

#endif

attribute vec3 a_position;
attribute lowp vec4 a_color;

#if USE_TEXTURE
  attribute mediump vec2 a_uv0;
  varying mediump vec2 v_uv0;
#endif

varying lowp vec4 v_color;

void main () {
  mat4 mvp;
  
  #if _USE_MODEL
    mvp = cc_matViewProj;
  #else
    mvp = cc_matViewProj;
  #endif

  #if USE_TEXTURE
    v_uv0 = a_uv0;
  #endif

  v_color = a_color;

  gl_Position = mvp * vec4(a_position, 1);
}

}

%% fs {

precision highp float;

#if USE_TEXTURE
  uniform sampler2D texture;
  varying mediump vec2 v_uv0;
#endif

#include <alpha-test>

varying lowp vec4 v_color;

void main () {
  vec4 color = v_color;

  #if USE_TEXTURE
    color *= texture2D(texture, v_uv0);
    #if _USE_ETC1_TEXTURE
      color.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
    #endif
  #endif

  ALPHA_TEST(color);

  gl_FragColor = color;
}

}

修改完成后,发现渲染就正常了,具体的原因如果大家感兴趣的话可以自己研究一下,希望对大家有所帮助。

Cocos Creator模拟砸金蛋3d旋转效果 | 附代码egg.zip // Learn TypeScript: // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/typescript.html // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/typescript.html // Learn Attribute: // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/reference/attributes.html // Learn life-cycle callbacks: // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html const {ccclass, property} = cc._decorator; @ccclass export default class Game extends cc.Component { @property Count: number = 5; @property(cc.Prefab) prefab: cc.Prefab = null; @property(cc.Node) nodeParent: cc.Node = null; private mEggs: cc.Node[] = []; // LIFE-CYCLE CALLBACKS: // onLoad () {} start () { } // update (dt) {} onClick(event, data){ switch(data){ case 'add':{ this.addEggs(); break; } case 'move':{ this.moveEggs(); break; } case 'stop':{ this.stopMoveEggs(); break; } } } addEggs(){ if(this.Count <= 0){ return; } this.mEggs = []; const N = 360 / this.Count; for(let i = 0; i < this.Count; i++){ let egg = cc.instantiate(this.prefab); let js = egg.getComponent('Egg'); js.setRadian(i * N * Math.PI / 180); js.updatePos(); egg.parent = this.nodeParent; this.mEggs.push(egg); } } moveEggs(){ for(let i = 0; i < this.mEggs.length; i++){ this.mEggs[i].getComponent('Egg').setMove(true); } } stopMoveEggs(){ for(let i = 0; i < this.mEggs.length; i++){ this.mEggs[i].getComponent('Egg').setMove(false); } } }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值