cocos creator基础-cocos动画、碰撞、绘图
cocos动画、碰撞、绘图 1、动画 层级关系: 属性: 序列帧动画: this.anima = this.node.getComponent(cc.Animation); 获取动画 修改轨迹曲线 1、时间曲线 2的操作 ? 动画的事件 (2)在弹出的编辑器界面,单击+号,添加事件和参数 ? 2.代码注册事件 1 let runState = this.anima.getAnimationState("run"); 2 // 这种方式只能支持动画系统内置的事件 3 runState.on("lastframe",this.onLastFrame,this); 4 // 传参数 5 runState.on("lastframe",this.onLastFrame.bind(this,‘hello‘,true),this); 6 7 // 这种方式可以自定义事件 8 // 动态创建 Animation Clip: 9 var animation = this.node.getComponent(cc.Animation); 10 // frames 这是一个 SpriteFrame 的数组. 11 var clip = cc.AnimationClip.createWithSpriteFrames(frames,17); 12 clip.name = "anim_run"; 13 clip.warpMode = cc.WarpMode.Loop; 14 15 // 添加帧事件 16 clip.events.push({ 17 frame: 1,// 准确的时间,以秒为单位。这里表示将在动画播放到 1s 时触发事件 18 func: "onLastFrame",// 回调函数名称 19 params: [1,"hello"] // 回调参数 20 }); 21 22 animation.addClip(clip); 23 animation.play(‘anim_run‘); 24 25 26 onLastFrame : function(str,num,bool){ 27 console.log("===========called on last frame",str,bool); 28 } ? 2、碰撞(1.5版本以后被Box2D物理游戏引擎取代) 属性 1 // 用脚本控制碰撞 2 let manager = cc.director.getCollisionManager(); // 获取碰撞管理器 3 manager.enabled = true; 4 manager.enabledDebugDraw = true; // 画出碰撞形状 5 6 this.node.on(‘touchmove‘,function(e){ 7 this.node.position = this.node.parent.convertToNodeSpaceAR(e.getLocation()); 8 },this); 9 this.getComponent(‘cc.BoxCollider‘); // 或者this.getComponent(cc.BoxCollider) 10 11 onCollisionEnter : function(other,self){ 12 console.log("=========enter"); 13 },14 onCollisionStay : function(other,self){ 15 console.log("=========Stay"); 16 },17 onCollisionExit : function(other,self){ 18 console.log("=========Exit"); 19 }, ? 3、绘图 1 propoties : { 2 graphics : cc.Graphics // 开放接口的方式 3 } 4 5 let ctx = this.getComponent(cc.Graphics); 6 7 this.graphics.circle(0,50); // 现在的00是组件的左下角,如果想放到锚点,需要以下转化 8 let offset = cc.v2(this.node.width * this.node.anchorX,this.node.height * this.node.anchorY); 9 this.graphics.circle(0 + offset.x,0 + offset.y,50); 10 11 this.graphics.ellipse(100,100,200); 12 this.graphics.moveTo(-200,-200); 13 this.graphics.lineTo(200,200); 14 this.graphics.fill(); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |