矩形区域 实现自定义数字图片组件"/>
cocoscreator 设置 SpriteFrame 的纹理矩形区域 实现自定义数字图片组件
先看效果
先需要一张美术做好的图片然后创建一个空节点然后挂载一个layout组件,编写核心脚本 SpriteTextTool,调用的时候只需修改要显示的文本 this.node.getComponent("SpriteTextTool").setContent("8934873");
上脚本 SpriteTextTool
cc.Class({extends: cc.Component,properties: {content : "1000",text_sprite:{default : null,type : cc.SpriteFrame,},},start(){this.setContent("8934873");},// 设置文本setContent(str){this.content = str;this.onSetContentChange();},onSetContentChange(){this.createSpriteText(); },createSpriteText(){this.clearItem();var childs = this.node.children;var count = childs.length;for (let i = 0; i < this.content.length; i++){var item = null;var sprite = null;if(i < count){item = childs[i];item.active = true;sprite = item.getComponent(cc.Sprite);}else{item = new cc.Node("item");sprite = item.addComponent(cc.Sprite);}this.setSprite(this.content[i],sprite);item.parent = this.node;}},// 获取贴图getSprite(index){var sprite = this.text_sprite.clone(); // 克隆一张图片var width = sprite.getRect().width/10;var height = sprite.getRect().height;var x = sprite.getRect().x + index * width;var y = sprite.getRect().y;var tmpRect = new cc.Rect(x,y,width,height);sprite.setRect(tmpRect); // 设置 SpriteFrame 的纹理矩形区域return sprite;},// 设置贴图setSprite(value,sprite){switch (value) {case "0":sprite.spriteFrame = this.getSprite(0);break;case "1":sprite.spriteFrame = this.getSprite(1); break;case "2":sprite.spriteFrame = this.getSprite(2); break;case "3":sprite.spriteFrame = this.getSprite(3);break;case "4":sprite.spriteFrame = this.getSprite(4);break;case "5":sprite.spriteFrame = this.getSprite(5);break;case "6":sprite.spriteFrame = this.getSprite(6);break;case "7":sprite.spriteFrame = this.getSprite(7);break;case "8":sprite.spriteFrame = this.getSprite(8);break;case "9":sprite.spriteFrame = this.getSprite(9);break;default:console.log("value not find :" + value);break;} },clearItem(){var childs = this.node.children;for (let i = 0; i < childs.length; i++) {childs[i].active = false;}},
});
更多推荐
cocoscreator 设置 SpriteFrame 的纹理矩形区域 实现自定义数字图片组件
发布评论