CocosCreator入门之《摘星星》-完全学习记录（三）

 完整版：https://quqi.gblhgk.com/s/184718/ykolFXd1LYL9mzQE

星星模块涉及内容：

• 使用对象池
• 使用进度条
• 文字的简单显/隐/变

完成态预览：

写在前面： 原来的坐标随机逻辑，测试100次还是10万次，前后两颗星星近乎重叠的概率都是10%，也就是每得十分、就有一次莫名其妙吃了一颗甚至几颗星星的负体验。

为突出目标，仅附上在完成主角模块（点击开始，主角能跳、动，屏幕有边界）基础上的新增内容，并不能直接运行。

// Game.js
　　　　const Player = require('Player');

cc.Class({
  extends: cc.Component,

  properties: {
    minStarDuration: 0,
    maxStarDuration: 0,
    starPrefab: {
      default: null,
      type: cc.Prefab
    },
    progressBarOfStar: {
      default: null,
      type: cc.ProgressBar
    },
    scoreAudio: {
      default: null,
      type: cc.AudioClip
    },
    nameAndScore: cc.Label,
    instructionGoal: cc.Label,
    controlHint: cc.Label,
    isMobile: {
      default: '',
      multiline: true
    },
    isPC: {
      default: '',
      multiline: true
    },
  },

  onLoad () {
    this.enabled = false;
    this.controlHint.string = cc.sys.isMobile ? this.isMobile : this.isPC;
    // 保存当前星星，失败时放不到对象池，手动销毁
    this.currentStar = null;
    // 保存当前星星X坐标与下个X坐标作比较，防止前后两颗星星距离过近造成负体验
    this.currentStarX = 0;
    this.starPool = new cc.NodePool('StarPrefab');
    this.starDuration = 0;
    /**
     * 初始化进度值，1.0为从满倒带，0.0为从空到满
     * progress(进度值)只能是0-1之间的浮点数
     * 组件默认progress就是1，不设置也可，但误触了属性检查器的progress会出错
     */
    this.progressBarOfStar.progress = 1.0;
  },

  start() {
    this.score = 0;
    this.starTimer = 0;
  },

  onStartBtnClicked() {
    this.nameAndScore.string = 'Score: 0';
    // 隐藏(active)是node下面的属性，这里声明Label就要调其下的node
    this.instructionGoal.node.active = false;
    this.controlHint.node.active = false;
    this.score = 0;
    this.spawnNewStar();
  },

  spawnNewStar() {
    let newStar = this.starPool.get();

    if (!newStar) {
      newStar = cc.instantiate(this.starPrefab);
    }

    this.node.addChild(newStar);
    newStar.setPosition(this.randStarPosition());
    // 初始化必须在加入主节点之后，先有节点再初始化它
    newStar.getComponent('StarPrefab').init(this);
    this.setStarLife();
    this.currentStar = newStar;
    this.progressBarOfStar.progress = 1.0;
  },

  /**
   * @param {cc.Prefab} star star节点
   */
  despawnStar(star) {
    this.starPool.put(star);
    this.spawnNewStar();
  },

  /**
   * @returns {cc.Vec2} 随机坐标
   */
  randStarPosition() {
    let randX = 0;
    // 子节点最大、最小坐标绝对值是父节点宽度的一半
    let absMaxX = this.node.width / 2;
    
    // 新X坐标与旧X坐标至少间隔2颗星星的宽度，否则继续随机
    do {
      randX = (Math.random() - 0.5) * 2 * absMaxX;
    } while (Math.abs(randX - this.currentStarX) < 120) 

    // 收集半径是60，不加配数可能星星一半穿帮地面，加太多可能碰不到星星，故加50
    let randY = this.groundY + Math.random() * this.player.getComponent('Player').jumpHeight + 50;
    this.currentStarX = randX;

    return cc.v2(randX, randY);
  },

  setStarLife() {
    this.starTimer = 0;
    this.starDuration = this.minStarDuration + Math.random() * (this.maxStarDuration - this.minStarDuration);
  },

  getStarRatio() {
    return 1 - this.starTimer / this.starDuration;
  },

  gainScore() {
    this.score += 1;
    this.nameAndScore.string = 'Score: ' + this.score;
    cc.audioEngine.playEffect(this.scoreAudio, false);
  },

  _updateProgressBar() {
    this.progressBarOfStar.progress =  this.getStarRatio();
  },

  update(dt) {
    this._updateProgressBar();

    if (this.starTimer > this.starDuration) {
      this.gameOver();
      return;
    }

    this.starTimer += dt;
  },

  gameOver() {
    this.enabled = false;
    this.btnNode.x = 0;
    this.controlHint.node.active = true;
    this.instructionGoal.node.active = true;
    this.currentStar.destroy();
    this.player.stopMove();
    this.saySomeThing();
  },

  saySomeThing() {
    let score = this.score;
    let string = this.instructionGoal.string;

    if (score <= 10) {
      string = 'Are you kidding me?';
    } else if (score > 10 && score <= 30) {
      string = 'Good job, One more try!';
    } else if (score > 30) {
      string = 'Great job!'
    }

    this.instructionGoal.string = string;
  }
});

// StarPrefab.js

cc.Class({
  extends: cc.Component,

  properties: {
    pickRadius: 0,
  },

  init(game) {
    this.enabled = true;
    this.game = game;
    this.node.opacity = 255;
  },

  onLoad() {
    // onLoad是节点初始化时调用，对象池是对象复用，故只在第一颗星星调用。
    // cc.log('Star_onLoad()');
    this.enabled = false;
  },

  getStarPosition() {
    return this.node.position;
  },

  getPlayerDistance() {
    let Player = this.game.player;
    let playerPosition = Player.getCenterPos();
    let starPosition = this.getStarPosition();

    return starPosition.sub(playerPosition).mag();
  },

  onPicked() {
    let Game = this.game;
    Game.gainScore();
    Game.despawnStar(this.node);
  },

  update(dt) {
    if (this.getPlayerDistance() < this.pickRadius) {
      this.onPicked();
      // 此情况就是单纯的将控制权转交给主调函数继续执行
      return;
    }

    let opacityRatio = this.game.getStarRatio();
    let minOpacity = 50;
    this.node.opacity = minOpacity + (255 - minOpacity) * opacityRatio;
  }
});

这次没什么插曲，除了拼写错误引发的Bug。但还是想说：

1. 对象池概念初探——https://forum.cocos.org/t/cocoscreator/67879

2. 进度条组件上手——新建一个示例项目，搜progressBar。

复刻这两个练习项目，直到不觉得盲人摸象。