CocosCreator角色动态更换武器实现

骑猪看日落 2024-04-20 08:09 59阅读 0赞

1.  准备分割好的一组图片，图集工具推荐[TexturePacker][]，`放到如图所示的目录下：assets/resources`  
    ![在这里插入图片描述][20190920104846159.png]
2.  图片拼接为角色  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70]
3.  脚本实现切换武器逻辑

cc.Class({ 
        extends: cc.Component,
        properties: { 
            wuqi: { 
                default: null,
                type: cc.Sprite
            }
        },
        onLoad() { 
            this.node.on(
                cc.Node.EventType.TOUCH_START,
                function (a) { 
                    var url = "test-0"; //图集路径
                    if (this.isShow) { 
                        // 加载 SpriteFrame
                        var self = this;
                        var abc = function (err, spriteFrame) { 
                            var frame = null;
                            frame = spriteFrame.getSpriteFrame("test2");
                            cc.log(this);
                            self.wuqi.spriteFrame = frame;
                        };
                        cc.loader.loadRes(url, cc.SpriteAtlas, abc);
                        this.isShow = false;
                        cc.log("111");
                    } else { 
                        var self = this;
                        var abc = function (err, spriteFrame) { 
                            var frame = null;
                            frame = spriteFrame.getSpriteFrame("test3");
                            cc.log(this);
                            self.wuqi.spriteFrame = frame;
                        };
                        cc.loader.loadRes(url, cc.SpriteAtlas, abc);
                        this.isShow = true;
                        cc.log("222");
                    }
                },
                this
            );
        },
    });

1.  角色整体节点添加脚本运行效果  
    ![在这里插入图片描述][20190920110717317.gif]

[TexturePacker]: https://www.codeandweb.com/texturepacker
[20190920104846159.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/652c362655574ea59e340ad6dd6cb026.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8a93deacb44944ba8681449374737b5a.png
[20190920110717317.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e1861e7064fa4ee189fb6bcfb11e7200.gif