cocoscreator 设置 SpriteFrame 的纹理矩形区域实现自定义数字图片组件

桃扇骨 2022-03-30 06:55 638阅读 0赞

先看效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTMxNjgyNA_size_16_color_FFFFFF_t_70][]

先需要一张美术做好的图片![20190105101544277.png][]然后创建一个空节点然后挂载一个layout组件，编写核心脚本 SpriteTextTool，调用的时候只需修改要显示的文本 this.node.getComponent("SpriteTextTool").setContent("8934873");

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTMxNjgyNA_size_16_color_FFFFFF_t_70 1][]

上脚本 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;
            }
        },
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTMxNjgyNA_size_16_color_FFFFFF_t_70]: /images/20220330/bfa33cb69e7a49cc835fa6cdd5def7b4.png
[20190105101544277.png]: /images/20220330/eb351759098048e5ac16145df7f8fa42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTMxNjgyNA_size_16_color_FFFFFF_t_70 1]: /images/20220330/17591e9af6e9413f9ee6a69da75d4be6.png