CocoStudio基础教程(4)骨骼动画的动态换肤

1、概述

    游戏中人物的状态会发生改变,而这种改变通常要通过局部的变化来表现出来。比如获得一件装备后人物形象的改变,或者战斗中武器、防具的损坏等。这些变化的实现就要通过动态换肤来实现。

2、运行到程序

    运行脚本,创建一个新项目。将导出文件复制到Resource中。

    修改init的代码:

bool HelloWorld::init()  
{  
    //  
    // 1. super init first  
    if ( !Layer::init() )  
    {  
        return false;  
    }  
      
    Size visibleSize = Director::getInstance()->getVisibleSize();  
    Point origin = Director::getInstance()->getVisibleOrigin();  
  
    ArmatureDataManager::getInstance()->addArmatureFileInfo("changeShape.ExportJson");  
  
    Armature* arm = Armature::create("changeShape");  
    arm->setPosition(Point(visibleSize.width/2,visibleSize.height/2));  
    arm->setTag(1);  
    addChild(arm);  
    arm->getAnimation()->play("go");  
    
    setTouchEnabled(true);  
    return true;  
}  

3、添加与更换皮肤

     添加皮肤方式分动态添加与静态添加两种。动态添加是指在编辑器中更改,这样可以不需要重新编译程序。静态添加则是将其写死在程序中,通常这种做法不推荐,但我们也应该会使用。更换的做法是我们首先要取到具体的骨骼,然后更改它显示的“皮肤”。

    3.1动态添加

    在“动画编辑”的模式下选中我们的武器。然后将我们需要更换的武器资源依次拖动到“渲染资源”中。点开下拉列表,我们能看到添加过的资源,右击也可以删除。

添加好后,保存并导出,在工程中,我创建了一个int的成员变量displayIndex。并在init中初始化为0。接下来我们加入点击响应来更换皮肤。

void HelloWorld::onTouchesEnded(const std::vector<Touch*>&  touches, Event* event)  
{  
    ++displayIndex;  
    displayIndex = (displayIndex) % 4;  
    ((Armature*)getChildByTag(1))->getBone("weapon")->changeDisplayByIndex(displayIndex, true);  
} 

    3.2静态添加

    使用静态添加有一点要注意:要保证创建的资源已经导出了。我们在init中添加:

//……  
    Skin* skin = Skin::createWithSpriteFrameName("sliderProgress.png");  
    arm->getBone("weapon")->addDisplay(skin, 4);  
//……  

并将点击响应中循环量从4更改为5,编译运行即可看到效果。

4、总结

    创建皮肤分为动态和静态两种形式。动态是将相应的资源直接导出。静态则是要写到代码中进行创建。虽然这种也是动态创建,但相较于json配置,我还是倾向于称它为“静态”。叫什么不重要,哪种方便用哪种。换肤则都是要取到对于的骨骼,然后更改显示。

转载于:https://www.cnblogs.com/damowang/p/4835937.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Element的动态换肤可以通过以下步骤实现: 1. 在项目中引入Element UI框架,并按照官方文档进行配置。 2. 在项目中创建一个样式文件,用于存放换肤相关的样式。 3. 在样式文件中定义不同主题下的颜色变量,例如: ``` /* 默认主题 */ --primary-color: #409EFF; --success-color: #67C23A; --warning-color: #E6A23C; --error-color: #F56C6C; /* 粉色主题 */ --primary-color: #FF85C0; --success-color: #FFB7D5; --warning-color: #FFC1A6; --error-color: #FFA6C9; ``` 4. 在项目中使用CSS变量来引用这些颜色变量,例如: ``` .el-button { background-color: var(--primary-color); color: #fff; } .el-alert--success { background-color: var(--success-color); color: #fff; } ``` 5. 在Vue组件中使用`computed`属性来动态设置样式,例如: ``` <template> <div :style="styles"> <el-button>按钮</el-button> <el-alert :type="type">消息提示</el-alert> </div> </template> <script> export default { data() { return { theme: 'default' } }, computed: { styles() { return { '--primary-color': this.getPrimaryColor(), '--success-color': this.getSuccessColor(), '--warning-color': this.getWarningColor(), '--error-color': this.getErrorColor() } } }, methods: { getPrimaryColor() { return this.theme === 'default' ? '#409EFF' : '#FF85C0'; }, getSuccessColor() { return this.theme === 'default' ? '#67C23A' : '#FFB7D5'; }, getWarningColor() { return this.theme === 'default' ? '#E6A23C' : '#FFC1A6'; }, getErrorColor() { return this.theme === 'default' ? '#F56C6C' : '#FFA6C9'; } } } </script> ``` 这样就可以根据用户选择的主题动态切换整个应用的颜色了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值