游戲中經常會遇到需要顯示數字（比如金錢數量，戰斗力等等），美術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 309506117@qq.com*/ @ccclass export class NumberSpriteComponent extends cc.Component {@property(cc.SpriteAtlas)sprAtlas:cc.SpriteAtlas = null;private _poolArr:Array<any> = [];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);

總結

以上是生活随笔為你收集整理的Cocos Creator TypeScript 实现自定义数字图片组件NumberSpriteComponent的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。