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 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相关推荐

鸿蒙os事例代码,鸿蒙HarmonyOS App开发造轮子之自定义圆形图片组件的实例代码
一.背景在采用Java配合xml布局编写鸿蒙app页面的时候,发现sdk自带的Image组件并不能将图片设置成圆形,反复了翻阅了官方API手册(主要查阅了Compont和Image相关的API),起 ...
vue封装自定义数字键盘组件
最近在公司做一个项目,简单来说就是web端微信公众号上的一个申请表单页面,随便如个图环境: vue框架 + vant组件库 + 其它(这里用不上的,不说) 具体如图: 都知道,input输入框如果不 ...
vue 自定义键盘组件_使用Vue自定义数字键盘组件的方法
这篇文章主要介绍了关于使用Vue自定义数字键盘组件的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下最近做 Vue 开发,因为有不少页面涉及到金额输入,产品老是觉得用原生的 inp ...
Cocos Creator TypeScript 套牛游戏（可微信小游戏）
视频操作地址:https://www.bilibili.com/video/BV1NN4y1V7Jy/?vd_source=0a0b591838e1a4cda6ec55da0e1c9019 源码地址: ...
cocos creator 学习随笔 day03 节点和组件属性
目录节点本身属性控件属性场景空节点 3D对象 2D对象 UI组件光线特效摄像机地形节点本身属性第一栏为节点名,可修改,前面得勾,是表示是否使用该节点,去掉代表隐藏该节点,但是该节点 ...
【cocos creator 3.x】精灵图片不显示
精灵图片不显示现象原因解决方案现象在cocos creator 3.2版本的使用中遇到了精灵图片无法展示的几个场景: 在prefab某个node下Sprite的图片无法显示动态加载pref ...
cocos creator做一个儿童数字答题的微信小游戏（1）
接了个外包要做个数字答题的微信小游戏给小学生玩的准备大概15天完成吧,每天抽点一两个小时做一下今天第一天先做主界面,先用cocos creator拼一个主界面出来下面的每个按钮都是一个butt ...
【Cocos creator】绘图系统：Graphics组件之动态改变生成图像的透明度
在Cocos creator 中,要想在使用Graphics组件绘制图像的过程中改变图像的透明度有两种方法: 1.在编辑器中Graphics组件的fillColor属性中设置: 2.通过代码动态设置. ...
HarmonyOS图片,HarmonyOS App开发造轮子--自定义圆形图片组件
一.背景在采用Java配合xml布局编写鸿蒙app页面的时候,发现sdk自带的Image组件并不能将图片设置成圆形,反复了翻阅了官方API手册(主要查阅了Compont和Image相关的API),起 ...

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

Cocos Creator TypeScript 实现自定义数字图片组件NumberSpriteComponent相关推荐

最新文章

热门文章