cocos2dx实现翻书效果。

因为项目需求,需要使用cocos实现3d翻书的效果,刚开始确实没有什么思路,cocos2d做3d的效果这不是开玩笑吗。但是,再难也得做啊,没办法。

后来想到cocos2dx的例子里有个类似的效果,不过那个是个action,后来看了看感觉还可以,只是效果和我的需求有点差异,但终归是找到了实现的思路,于是开始看cocos2dx的源码,主要用到的是cocos的网格动画,涉及到以下几个文件:

CCGrid.h /cpp :网格数据及渲染,包括基本网格数据和3D网格数据,这是数据的基础。

CCActionGrid.h /cpp :网格基本动画,这是动画的基础。

CCActionGrid3D.h/cpp: 3D网格基本动画,这是3D网格动画的基础。

CCActionTiledGrid.h / cpp :网格衍生动画,这是最终的特效实现。

咱们这里主要用到CCGrid.h进行渲染,其他三个是action的实现。

 

这里插一句,在此之前,我曾经还想用遮罩去实现类似的翻书效果,因为android上类似效果的实现就是实用遮罩的,可是在cocos中这种方法行不通,最终放弃了。

看CCActionPageTurn3d这个类,cocos的翻页效果的实现就是在这个类中实现的,在这个类中有个update()函数:

 

3d节点的渲染我用的是CCGridBase的子类CCGrid3D,只需要把CCGrid3DAction中渲染的部分摘出来即可,代码在cocos中都有,以下是最终效果:

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); } } }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值