by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:http://www.iamaddy.net/2021/07/cocos-creator-new-sprite/

如果你刚接触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上的属性的面板 【Cocos Creator】游戏中如何动态创建精灵? 在Node节点下还有一个Sprite,Sprite其实Node的一个渲染组件,系统自带的组件是非常多的,所以cocos可以基于此可以扩展出很多的不同功能的组件。在node节点上有一个node.addComponent方法,可以动态可以node节点添加一个组件,当然也可以添加其他的组件,这个取决于你想做什么。 【Cocos Creator】游戏中如何动态创建精灵? 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,我的所有微信小游戏引入这个组件就能直接渲染出一个世界排行榜。

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

代码量还不少,后台是小程序云开发,所以只要封装好这个后续基本上只需要花少量时间了。 【Cocos Creator】游戏中如何动态创建精灵?

本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作

本文地址:http://www.iamaddy.net/2021/07/cocos-creator-new-sprite/

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

个人微信,如果有想交流的: 个人微信号

欢迎关注个人公众号,墨娱互动 墨娱互动