《Cocos Creator游戏实战》像素换装实现原理

la_vie_est_belle

于 2024-09-11 11:14:39 发布

阅读量550

点赞数 10

CC 4.0 BY-SA版权

分类专栏：《Cocos Creator游戏实战》文章标签：游戏像素换装换装像素 Cocos Creator

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/La_vie_est_belle/article/details/142105265

《Cocos Creator游戏实战》专栏收录该内容

43 篇文章

订阅专栏

在线体验地址

https://la-vie-est-belle.github.io/DressUp/

Cocos Store 购买地址：
https://store.cocos.com/app/detail/6752

运行效果

在这里插入图片描述

开发环境

编辑器版本：3.8.3
开发语言：TypeScript

实现思路

重点来看下层级管理器中的Player节点。
Player节点

Player及其各个子节点都是Sprite类型的节点，每个节点的Size Mode都是Custom，且大小和图片大小一样。不能设置为TRIMMED，否则各个图片被剪切了的话那换装就会错位了。
在这里插入图片描述

Player节点上的图片是这样的，保持不变。

如果要变换武器的话就先将各个武器图片放在resources文件夹中。
在这里插入图片描述
然后添加按钮，并给每个按钮添加上事件。
武器切换按钮
按钮事件

事件函数编写如下，主要就是根据自定义传入的数据，加载对应的图片。如果是默认按钮，把图片清空就行了。

dress(e: EventTouch, data:string) {
    let part = data.split('-')[0]       // 部位
    let style = data.split('-')[1]      // 样式
    
    // 眼睛默认的话应该是用默认的图片，而不是空
    if (part != 'eye' && style == 'mo_ren') {
        this.player.getChildByName(part).getComponent(Sprite).spriteFrame = null
    }
    
    // 加载对应的图片即可
    else {
        var self = this
        resources.load(`${part}/${style}/spriteFrame`, SpriteFrame, (err, spriteFrame) => { 
            self.player.getChildByName(part).getComponent(Sprite).spriteFrame = spriteFrame
        })
    }

    this.audioSource.playOneShot(this.clickAudio)
}