cocos运动轨迹

预览地址

游戏中的世界就像拍电影一样，有制片人(自己)，导演，场景，演员，制片人投资导演，导演切换场景，场景里有很多演员(精灵)，演员负责表演(动画)

需求

一个骑手听着音乐在一个飘着雪花的轨迹中运动

分解

• 地图很长，不像一般的游戏场景，屏幕没有滚动条
• 点击骑手开始运动
• 运动方式包含，水平运动，竖直运动，弧形运动、左右翻转
• 雪花飘落
• 背景音乐

实现

开始状态

移动地图精灵到底部，骑手精灵放在地图精灵内部(原因：骑手精灵与地图精灵是父子关系，方便后期计算骑手运动轨迹)

// 地图精灵位置设置屏幕中间
this.mapSprite.setPosition(size.width / 2, size.height / 2)
// 设置动画让精灵移动到底部
var action = cc.moveBy(1, cc.p(0, MAP_HEIGHT / 2 - size.height / 2))
// 开始动画
this.mapSprite.runAction(action);

点击事件

// 给骑手添加点击事件
cc.eventManager.addListener({
  event: cc.EventListener.TOUCH_ONE_BY_ONE,
  swallowTouches: true, // 不进行冒泡
  onTouchBegan: this.onTouchBegan.bind(this)
}, this.riderSprite)

onTouchBegan: function(touch, event) {
  // 获取点击元素
  var target = event.getCurrentTarget()
  // 获取点击位置
  var location = touch.getLocation()
  // 点击元素的大小
  var s = target.getContentSize();
  var rect = cc.rect(0, 0, s.width, s.height);
  // 获取当前触摸点相对于按钮所在的坐标
  var locationInNode = target.convertToNodeSpace(location);
  // this.timer < 2 第三段动画没加
  if (cc.rectContainsPoint(rect, locationInNode) && this.timer < 2) {       // 判断触摸点是否在按钮范围内
    this.riderMove()
    return true;
  }
  return false;
},

运动

// 创建动画
var action1 = cc.moveTo(2, cc.p(RIDER_WIDTH / 2 + 300, 125 + RIDER_HEIGHT / 2));
this.riderSprite.runAction(action1);

如何弧线运动，利用贝塞尔曲线

4个控制点的贝塞尔曲线

var action2 = cc.bezierTo(3, [cc.p(RIDER_WIDTH / 2 + 600, 125 + RIDER_HEIGHT / 2), cc.p(RIDER_WIDTH / 2 + 600, 125 + RIDER_HEIGHT / 2 + 440), cc.p(RIDER_WIDTH / 2 + 300, 125 + RIDER_HEIGHT / 2 + 440)])

cc.bezierTo第一个参数是运动时间，第二个参数传3个控制点，还有一个控制点是起始位置

雪花飘落

粒子效果可以从在线编辑粒子导出plist文件

showEffect: function() {
  // 创建粒子系统
  this.particleSystem = new cc.ParticleSystem(res.snow_plist)
  // 完成之后消失(好性能)
  this.particleSystem.setAutoRemoveOnFinish(true)
  // 添加粒子
  this.addChild(this.particleSystem, 3)
},

播放音乐

cc.audioEngine.playMusic(res.bg_mp3, true);