Cocos Creator TypeScript 实现自定义数字图片组件NumberSpriteComponent

游戏中经常会遇到需要显示数字（比如金钱数量，战斗力等等），美术UI同学会给图片资源，然后我们程序同学得写逻辑实现需求。

以前做页游用as3.0也写过数字图片，现在入坑cococs后，好多东西得重新写一遍，不过没关系。逻辑都是差不多的

下面直接给刚入坑的小伙伴们分享刚完成的源码，我自己测试很多遍了，性能也做了优化，可以直接拿到项目使用。

const {ccclass, property} = cc._decorator;
 
/**
 * @author Maniac.guo
 * Everyone should have a dream ， what if it came true ？
 * @className 图片数字组件
 * @data 2018年5月18日
 * @mailbox [email protected]
 */
@ccclass
export class NumberSpriteComponent extends cc.Component {
 
    @property(cc.SpriteAtlas)
    sprAtlas:cc.SpriteAtlas = null;
 
    private _poolArr:Array = [];
 
    onLoad() {
 
    }
 
    // public loadTexture( texturePath:string = "res/game/laba_haiyang.png",callBack:Function = null ) :void {
        // this._callBack = callBack;
        // let self = this;
 
        // if(self._sprAtlas){
        //     self._callBack();
        // }else{
        //     cc.loader.loadRes(texturePath, cc.SpriteAtlas, function (err, atlas:cc.SpriteAtlas) {
        //         self._sprAtlas = atlas;
        //         self._callBack();
        //     })
        // }
    // }
 
    public getNodeFromPool( index:number ) : cc.Node {
        let numNode:cc.Node = null;
        let numSpr:cc.Sprite = null;
        if(this._poolArr.length == 0 || (index+1) > this._poolArr.length){
            numNode = new cc.Node();
            numSpr = numNode.addComponent(cc.Sprite);
            this._poolArr.push(numNode);
        }
 
        numNode = this._poolArr[index];
        if(numNode.parent){
            numNode.parent.removeChild(numNode);
        }
        return numNode;
    }
 
    public showNumber( num:number, frameName:string = "num2-" ) : void {
        if(this.sprAtlas == null)return;
 
        this.removeReset();
 
        let numArr:string[] = num.toString().split("");
        let numNode:cc.Node = null;
        let numSpr:cc.Sprite = null;
 
            for(let i:number = 0 ; i < numArr.length ; i++){
                numNode = this.getNodeFromPool(i);
                this.node.addChild(numNode);
                numSpr = numNode.getComponent(cc.Sprite);
                let s:string = numArr[i];
                numSpr.spriteFrame = this.sprAtlas.getSpriteFrame(frameName+s);
                numNode.x = (numSpr.spriteFrame.getRect().width+2)*i;
            } 
    }
 
    private removeReset() : void {
        this.node.removeAllChildren();
    }
 
    start () {
 
    }
 
}

如果有不懂的小伙伴可以直接留言！

附上使用截图：

直接绑定脚本

显示效果：

使用逻辑：

let numSprNode:cc.Node = this.node.getChildByName("numSpr");
        let sprNode1:cc.Node = numSprNode.getChildByName("num1");
        let sprNode2:cc.Node = numSprNode.getChildByName("num2");
        let sprNode3:cc.Node = numSprNode.getChildByName("num3");
 
        this.numComponent1 = sprNode1.getComponent(NumberSpriteComponent);
        this.numComponent1.showNumber(4569821364);
 
        let numComponent2:NumberSpriteComponent = sprNode2.getComponent(NumberSpriteComponent);
        numComponent2.showNumber(253615879);
 
        let numComponent3:NumberSpriteComponent = sprNode3.getComponent(NumberSpriteComponent);
        numComponent3.showNumber(78654123);