plist文件生成及使用(帧动画实现)

本文介绍如何通过cocosstudio和TexturePacker生成plist文件,包括详细的步骤说明,并提供了使用plist文件进行图片缓存、创建精灵及播放动画的示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

生成plist文件(  cocos studio  和  TexturePacker  两种方式):

1、打开cocos studio,并新建项目。

2、点击菜单的文件----新建文件----合图----取名称。

3、把需要的png图片拖进项目下,再拖入中间的大页面。

4、点击右边的导出合图,并选择文件夹,导出。


1、打开TexturePacker,将图片拖入。

2、设置OutPut Files的路径和名称

3、点击Publish按钮


使用:

1、先将plist的图片加入缓存,再使用相应方法读取图片,例子:

SpriteFrameCache::getInstance()->addSpriteFramesWithFile("menu.plist","menu.png");//(只需要做一次)

Sprite* bg =Sprite::createWithSpriteFrameName("MainMenu.png");//(MainMenu.png在menu.plist里面)


2、播放动画,例子:

    SpriteFrameCache* pCache =SpriteFrameCache::getInstance();

    pCache->addSpriteFramesWithFile("runs.plist");//(s_1.png在runs.plist里面)

    mainsprite =Sprite::create();

    Vector<SpriteFrame*> runs;

    runs.pushBack(pCache->spriteFrameByName("s_1.png"));

    runs.pushBack(pCache->spriteFrameByName("s_2.png"));

    runs.pushBack(pCache->spriteFrameByName("s_3.png"));

    runs.pushBack(pCache->spriteFrameByName("s_4.png"));

    Animation* pAnimation =Animation::createWithSpriteFrames(runs,0.2f);

    pAnimation->setRestoreOriginalFrame(true);

    pAnimation->setDelayPerUnit(0.1f);

    Sequence* taskList=Sequence::create(Animate::create(pAnimation),NULL);

    mainsprite->runAction(RepeatForever::create(taskList));


3、生成xml文件播放动画

在plist和png目录下,制作xml动画文件,比如

<?xml version="1.0" encoding="UTF-8"?>

<root>

    <plists>

        <plist>run.plist</plist>

    </plists>

    <animations>

        <animation>

            <name>goldEffect</name>

            <delay>0.16</delay>

            <flipX>false</flipX>

            <flipY>false</flipY>

            <spriteFrame>com_fly_chip_00.png</spriteFrame>

            <spriteFrame>com_fly_chip_01.png</spriteFrame>

            <spriteFrame>com_fly_chip_02.png</spriteFrame>

            <spriteFrame>com_fly_chip_03.png</spriteFrame>

            <spriteFrame>com_fly_chip_04.png</spriteFrame>

            <spriteFrame>com_fly_chip_05.png</spriteFrame>

        </animation>

    </animations>

</root>


复制AnimatePacker.h、AnimatePacker.cpp、Singleton.h文件在项目下。

点此可下载以上三个类

先加载动画-->AnimatePacker::getInstance()->loadAnimations("run.xml");

再使用动画-->people->runAction(Sequence::create(AnimatePacker::getInstance()->getAnimate("goldEffect"),NULL));


4、使用单张图片,例子:

mainsprite->setSpriteFrame(Sprite::createWithSpriteFrameName("s_2.png")->getSpriteFrame());





### 在 Cocos Creator 3.8.6 中将 PNG、PLIST 和 XML 文件转换为骨骼动画实现方法 #### 骨骼动画概述 骨骼动画是一种高级动画技术,允许开发者通过操纵虚拟骨架来驱动模型的动作。相比于传统的动画,骨骼动画具有更高的灵活性和更低的内存占用率[^1]。 #### 准备工作 在 Cocos Creator 中实现骨骼动画,通常需要借助第三方插件或工具链。常见的解决方案包括使用 Spine 或 DragonBones 这样的专用软件生成骨骼动画数据,并将其导出为适合引擎使用的格式(如 JSON 或二进制)。PNG 提供纹理贴图,PLIST 定义精灵切片位置,而 XML 则可存储额外元信息或配置参数。 #### 步骤说明 ##### 1. 使用 Spine/DragonBones 设计骨骼动画 下载安装 [Spine](https://esotericsoftware.com/) 或 [DragonBones](http://dragonbones.github.io/) 工具,按照官方文档指导创建目标角色及其动作序列。完成后导出资源包至项目目录下。 对于 Spine 用户来说,默认支持 FBX、OBJ 等多种三维建模文件导入;而对于 DragonBones,则主要依赖矢量图形绘制方式构建二维人物形象。 ##### 2. 导入资源到 Cocos Creator 将由上述工具生产的资产文件夹复制粘贴进入工程 assets 文件夹内部相应分类子路径里头去。此时应该能看到类似下面这样的结构树形视图展示出来: ``` assets/ ├── animations/ │ ├── skeleton.json // 主体骨骼定义及相关动画序列描述符 │ └── texture.png // 关联图片素材 └── ... ``` 注意这里提到的是 json 类型而非原始 xml 形态——因为现代版本倾向于采用轻量化易于解析的形式表达相同含义的内容[^1]。 ##### 3. 添加 Skeleton 组件 选中场景内的某个空白节点对象右键菜单选择 Add Component -> Armature Display 来附加对应类型的显示控制器实例上去。随后调整其属性面板里的 Source File 字段指向刚才加载进来那个包含完整设定信息的 .json 文档即可自动匹配关联其余附属物象比如材质映射关系等等。 ```javascript // 示例代码片段演示如何程序化操控已存在的 armature display 实例改变当前播放状态 const dragonBonesNode = this.node.getComponent(dragonBones.ArmatureDisplay); if (dragonBonesNode) { dragonBonesNode.animation.play("attack"); // 播放名为 'attack' 的预设动画剪辑 } ``` --- #### 注意事项 - **兼容性验证**: 确认所选用的具体版本号之间相互适配无误后再正式投入实际运用当中以免发生不可预见的问题。 - **性能考量**: 复杂度较高的大型场景可能会导致设备负载加重从而影响流畅体验程度因此务必做好测试评估环节的工作流程安排规划合理分配各项资源配置比例达到最佳平衡点为止[^1]. ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值