从零开始做太极(四):创造模式(一)

本篇教程实现的效果如下:

0.效果预览二.gif

1.打开上一篇教程的项目文件,加入美术资源,然后打开创造模式场景CreateMode,删除上一篇教程中为了测试而加上的Label节点:

1.导入美术资源.jpg

2.加入背景图,并将Canvas的设计分辨率改为1334*750:

2.加入背景图.jpg

3.在Canvas节点中加入太极节点,然后在太极节点中加入黑眼和白眼两个节点,并分别设置它们的Position属性为100*100和-100*-100:

3.加入太极和眼.jpg

4.接下来我们要实现:太极和眼不断旋转,点击(触摸)背景图,它们往相反的方向旋转。首先我们新建一个TaiJi脚本,将其挂载在taiJi节点上:

4.新建太极脚本.jpg

5.打开TaiJi脚本,写入两个属性:

// 是否向右旋转

isRotateRight:{

    default:true,

    displayName:”是否向右旋转”

},

// 旋转时每帧变化的角度

rotationChange:{

    default:0,

    displayName:”每帧角度变化”,

},

然后在update里面写入以下代码,让角度根据旋转状态不断变化:

if(this.isRotateRight){

    this.node.rotation += this.rotationChange;

}else{

    this.node.rotation -= this.rotationChange;

}

5.写入让太极不断旋转的-代码.jpg

接着保存脚本,在taiJi节点的属性检查器中将“每帧角度变化”属性设为1。预览游戏,我们可以看到太极节点和眼一起顺时针旋转。

5.效果预览一.gif

6.接着我们来实现点击屏幕,改变太极旋转方向的效果。我们把背景图设置为一个按钮,被点击时改变太极的旋转方向。

首先,在属性列表里加入按钮的声明:

// 控制旋转方向的按钮

rotateControlBtn:{

    default:null,

    type:cc.Node,

    displayName:”控制旋转方向的按钮”

}

然后在onLoad函数里注册按钮的监听事件:

// 注册按钮的触摸事件

this.rotateControlBtn.on(“touchend”,function(){

    // 改变旋转方向

    this.isRotateRight = !this.isRotateRight;

},this);

6.注册按钮的监听事件.jpg

保存脚本,然后将背景图节点拉到taiJi节点的“控制旋转方向的按钮”属性里:

6.挂载按钮节点.jpg

保存场景,预览游戏,你将得到以下效果:

0.效果预览二.gif

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮