【Cocos Creator】游戏中如何动态创建精灵？

如果你刚接触cocos creator，可能有点摸不着头脑，尤其是对cocos 的api文档非常迷，个人觉得官方应该针对api在下方补充一些示例代码说明，不然新手容易懵逼。

本期要讲的话题是如何动态创建精灵。开发游戏可能一半的时间花在跟IDE打交道，如果对IDE有一定了解的话，cocos中节点是游戏中最基本的组成元素，那么基于这节点我们基本上可以实现所有的功能。但我建议能够用IDE拖拽出来的，就千万别用JavaScript徒手写出来，不然场面会很难看。

具体怎么动态创建精灵我就不废话，自己看官网的文档。创建和销毁节点 · Cocos Creator。

但是添加好节点才是最开始的一步，后面的操作可太多了。

cc.Class({
  extends: cc.Component,

  properties: {
    sprite: {
      default: null,
      type: cc.SpriteFrame,
    },
  },

  start: function () {
    var node = new cc.Node('Sprite');
    var sp = node.addComponent(cc.Sprite);

    sp.spriteFrame = this.sprite;
    node.parent = this.node;
  },
});

为什么要这么做呢？我们可以先看下IDE上的属性的面板 在Node节点下还有一个Sprite，Sprite其实Node的一个渲染组件，系统自带的组件是非常多的，所以cocos可以基于此可以扩展出很多的不同功能的组件。在node节点上有一个node.addComponent方法，可以动态可以node节点添加一个组件，当然也可以添加其他的组件，这个取决于你想做什么。 spriteFrame是sprite的一个属性，表示精灵的纹理。spriteFrame是Texture2D 对象，这个Texture2D呢主要还是图片，上面是直接设置为一个已经加载过的纹理。如果这个图片是远程呢又要怎么搞呢？

cc.loader.load('https://test.com/res/img/close.png', function(e, texture) {
   var closeSprite = closeNode.addComponent(cc.Sprite);
   closeSprite.spriteFrame = new cc.SpriteFrame(texture);
});

如果资源的后缀不是图片文件后缀结尾，那么需要指定一下加载的资源类型。

cc.loader.load({url: 'https://test.com/res/img/close', type: 'png', function(e, texture) {
});

添加完后呢，可能要设置资源的相关属性，那么需要了解cc内置对象的api接口。比如精灵的sizeMode，type有哪些类型。

有点精灵是需要用到对齐组件widget，那么这个原理其实是一样的，既然都是组件。方法还是一样，只要知道了Node渲染的基本原理，套路都是一个样。

var closeNodeWidget = closeNode.addComponent(cc.Widget);
closeNodeWidget.isAlignRight = true;
closeNodeWidget.isAbsoluteRight = true;
closeNodeWidget.right = -20;
closeNodeWidget.isAlignTop = true;
closeNodeWidget.isAbsoluteTop = true;
closeNodeWidget.top = -60;
closeNodeWidget.alignMode = cc.Widget.AlignMode.ONCE;

新建一个节点=》给节点添加一个组件 =》 设置组件的属性。

添加一个节点还好，如果涉及到节点很多的话，那代码量可就很长了，因为这操作就是替代IDE来徒手用JavaScript写UI界面。

好。说道最后，为什么要做这么吃力的事情，因为，我要做一个公共组件，微信小游戏的世界排行榜，组件的不需要任何Cocos配置文件，也不依赖cocos ide来搭建基本的UI框架。所以本质上是手写一个scrollList，我的所有微信小游戏引入这个组件就能直接渲染出一个世界排行榜。

代码量还不少，后台是小程序云开发，所以只要封装好这个后续基本上只需要花少量时间了。

个人知乎，欢迎关注：https://www.zhihu.com/people/iamaddy

欢迎关注公众号【入门游戏开发】