Home >Web Front-end >JS Tutorial >cocos2dx skeleton animation Armature source code analysis (3)_javascript skills
The skeletal animation code in cocos2dx is in the cocos -> editor-support -> cocostudio folder. It passes the filter under win and the file structure is as follows. (There are no points on Mac, it’s just a whole lump)
armature(目录): animation(目录):动画控制相关。 CCProcessBase(文件): ProcessBase(类):CCTween和ArmatureAnimation的基类。 CCTWeen(文件): Tween(类):控制flash里一个layer的动画。 CCArmatureAnimation(文件): ArmatureAnimation(类):控制整个动画,内有多个Tween。 datas(目录):xml或json转成c++中直接用的数据结构。 CCDatas(文件): BaseData(类):BoneData、FrameData的基类,包含大小位置颜色等信息。 DisplayData(类): SpriteDisplayData、ArmatureDisplayData、ParticleDisplayData的基类。 SpriteDisplayData(类):骨骼中的显示数据。 ArmatureDisplayData(类): ParticleDisplayData(类): BoneData(类):单个骨骼数据,flash中一个layer是一个骨骼。 ArmatureData(类):骨骼数据,整个骨骼结构数据。 FrameData(类):关键帧数据。 MovementBoneData(类):带有关键帧的骨骼数据。 MovementData(类):一个完整动画数据。 AnimationData(类):组动画数据,包含多个MovementData。 ContourData(类): TextureData(类):显示图片数据。 utils(目录): CCArmatureDataManager(文件): RelativeData(类): ArmatureDataManager(类):管理ArmatureData、AnimationData、TextureData。 CCArmatureDefine(文件): CCDataReaderHelper(文件): _AsyncStruct(类): _DataInfo(类): DataReaderHelper(类):这正解析xml或json的类。 CCSpriteFrameCacheHelper(文件): SpriteFrameCacheHelper(类): CCTransformHelp(文件): TransformHelp(类):矩阵运算。 CCUtilMath(文件): CCArmature(文件): Armature(类):控制整个骨骼动画,内有ArmatureAnimation和ArmatureData。 CCBone(文件): Bone(类):骨骼控制类 display(目录):显示的图片管理。 CCBatchNode(文件): BatchNode(类): CCDecorativeDisplay(文件): DecorativeDisplay(类): CCDisplayFactory(文件): DisplayFactory(类): CCDisplayManager(文件): DisplayManager(类): CCSkin(文件): Skin(类): physics(目录):物理引擎相关,不分析。 ColliderFilter(文件): ColliderFilter(类): ColliderBody(类): ColliderDetecotor(类)
Data related source code
Analyze class by class from the bottom to the top
Let’s take a look at the data-related UML. Generally speaking, ArmatureDataManager relies on DataReaderHelper to parse the xml file exported by flash into XXData for direct use by the program. XXData corresponds to a certain node of xml. For example, FrameData corresponds to 68ad3acf4d421fc44c050fc02ce118d1cd194de5e5bfcb04f00343babb709034a4b561c25d9afb9ac8dc4d70affff419a8bcb09c1d46d7a577601887ce747dfc).
BaseData
BaseData: used to represent the position, rotation, color, and scaling of bones or frames.
BaseData.h class BaseData : public cocosd::Ref { public: //Calculate two BaseData's between value(to - from) and set to self virtual void subtract(BaseData *from, BaseData *to, bool limit); public: //位置,xml的x,y float x; float y; //xml中z int zOrder; //旋转,xml的kX,kY float skewX; float skewY; //缩放,xml的cX,cY float scaleX; float scaleY; //啥?? float tweenRotate; //颜色的变化属性 bool isUseColorInfo; int a, r, g, b; };
As the base class of FrameData and BoneData, it provides bone status information. As can be seen from the following, BoneData corresponds to the b node in
a20496ea8d7cba4b736b48422b0defb4 and other attributes, BaseDa represents these attributes.
BoneData
BoneData corresponds to the b node in
class BoneData : public BaseData { public: void addDisplayData(DisplayData *displayData); DisplayData *getDisplayData(int index); public: std::string name; //! the bone's name std::string parentName; //! the bone parent's name //! save DisplayData informations for the Bone cocosd::Vector<DisplayData*> displayDataList; //仿射变换,程序里好像没用这个属性 cocosd::AffineTransform boneDataTransform; };
There is a displayDataList in BoneData, which is used to store the skin on this bone (that is, DisplayData). DisplayData corresponds to the ee8f5b77c14888638472d354e4fd2028> node in the xml node. One BoneData can have multiple skins, dress-up and other functions. Multiple skins are required.
FrameData
FrameData corresponds to the a8bcb09c1d46d7a577601887ce747dfc node in xml, which is the key frame information in flash.
class FrameData : public BaseData { public: int frameID; //xml中dr,这一帧长度 int duration; //不知要他干啥 bool isTween; //xml中dI,显示哪个图 int displayIndex; };
DisplayData
DisplayData is the parent class of SpriteDisplayData, ArmatureDisplayData, and ParticleDisplayData, used to represent display node information.
ArmatureData
ArmatureData is the corresponding 42272462d2c96339e487aa53d54897b3 node, which contains all the bones of this skeleton, which can be regarded as the bones of skeletal animation.
class ArmatureData : public cocosd::Ref { public: //添加骨骼信息 void addBoneData(BoneData *boneData); BoneData *getBoneData(const std::string& boneName); public: std::string name; //多个骨头信息 cocosd::Map<std::string, BoneData*> boneDataDic; float dataVersion; };
AnimationData
AnimationData corresponds to the 7c29fd164dc9c189f07464aede213def node, which contains multiple MovementData. MovementData (described below) corresponds to mov in xml, which is an animation with frame tags in flash.
class AnimationData : public cocosd::Ref { public: void addMovement(MovementData *movData); MovementData *getMovement(const std::string& movementName); ssize_t getMovementCount(); public: //<animation name="Dragon">中的name std::string name; //所有带帧标签的动画map cocosd::Map<std::string, MovementData*> movementDataDic; //所有带帧标签的动画名 std::vector<std::string> movementNames; };
MovementData
MovementData corresponds to
class MovementData : public cocosd::Ref { public: void addMovementBoneData(MovementBoneData *movBoneData); MovementBoneData *getMovementBoneData(const std::string& boneName); public: std::string name; //xml 中 dr int duration; //这怎么有个scale?? float scale; //xml中to int durationTo; //xml中drTW int durationTween; //xml中lp bool loop; //带帧信息的骨骼 cocosd::Map<std::string, MovementBoneData*> movBoneDataDic; };
MovementBoneData
MovementBoneData corresponds to the b of
class MovementBoneData : public cocosd::Ref { void addFrameData(FrameData *frameData); FrameData *getFrameData(int index); public: //xml中的dl float delay; //xml中的sc float scale; //这个和MovementData中的duration是不是一个?? float duration; std::string name; //关键帧信息 cocosd::Vector<FrameData*> frameList; };
Small summary
The corresponding relationship between each node in xml and XXData is as follows. The meaning of each field in xml can be found in the previous article
Let’s look at the code related to generating animation
ArmatureDataManager
ArmatureDataManager uses DataReaderHelper to parse out armarureDatas, animationDatas and _textureDatas.
ArmatureDataManager is a single instance. When animation is used, ArmatureDataManager will be used to obtain the data to generate animation.
class ArmatureDataManager : public cocosd::Ref { public: //单例 static ArmatureDataManager *getInstance(); static void destroyInstance(); public: void addArmatureData(const std::string& id, ArmatureData *armatureData, const std::string& configFilePath = ""); ArmatureData *getArmatureData(const std::string& id); void removeArmatureData(const std::string& id); void addAnimationData(const std::string& id, AnimationData *animationData, const std::string& configFilePath = ""); AnimationData *getAnimationData(const std::string& id); void removeAnimationData(const std::string& id); void addTextureData(const std::string& id, TextureData *textureData, const std::string& configFilePath = ""); TextureData *getTextureData(const std::string& id); void removeTextureData(const std::string& id); void addArmatureFileInfo(const std::string& configFilePath); const cocosd::Map<std::string, ArmatureData*>& getArmatureDatas() const; const cocosd::Map<std::string, AnimationData*>& getAnimationDatas() const; const cocosd::Map<std::string, TextureData*>& getTextureDatas() const; protected: void addRelativeData(const std::string& configFilePath); RelativeData *getRelativeData(const std::string& configFilePath); private: cocosd::Map<std::string, ArmatureData*> _armarureDatas; cocosd::Map<std::string, AnimationData*> _animationDatas; cocosd::Map<std::string, TextureData*> _textureDatas; std::unordered_map<std::string, RelativeData> _relativeDatas; };
There are mainly three maps: armarureDatas, animationDatas, and _textureDatas. How are these three maps generated? When executing
ArmatureDataManager::getInstance()->addArmatureFileInfo(“dragon.xml”);
After that, the three maps are generated. The addArmatureFileInfo code is as follows
void ArmatureDataManager::addArmatureFileInfo(const std::string& configFilePath) { addRelativeData(configFilePath); _autoLoadSpriteFile = true; DataReaderHelper::getInstance()->addDataFromFile(configFilePath); }
DataReaderHelper::getInstance()->addDataFromFile() was called again. It can be seen that DataReaderHelper actually completed the data parsing.
There are a bunch of decodeXXX() (such as decodeArmature, decodeBone) in the DataReaderHelper class to parse a certain node of xml. Take a look
addDataFromFile code:
void DataReaderHelper::addDataFromFile(const std::string& filePath) { //省略一些代码 DataInfo dataInfo; dataInfo.filename = filePathStr; dataInfo.asyncStruct = nullptr; dataInfo.baseFilePath = basefilePath; if (str == ".xml") { DataReaderHelper::addDataFromCache(contentStr, &dataInfo); } else if(str == ".json" || str == ".ExportJson") { DataReaderHelper::addDataFromJsonCache(contentStr, &dataInfo); } else if(isbinaryfilesrc) { DataReaderHelper::addDataFromBinaryCache(contentStr.c_str(),&dataInfo); } CC_SAFE_DELETE_ARRAY(pBytes); }
corresponds to different file (xml, json, binary) parsing methods. xml uses addDataFromCache
void DataReaderHelper::addDataFromCache(const std::string& pFileContent, DataInfo *dataInfo) { tinyxml::XMLDocument document; document.Parse(pFileContent.c_str()); tinyxml::XMLElement *root = document.RootElement(); CCASSERT(root, "XML error or XML is empty."); root->QueryFloatAttribute(VERSION, &dataInfo->flashToolVersion); /* * Begin decode armature data from xml */ tinyxml::XMLElement *armaturesXML = root->FirstChildElement(ARMATURES); tinyxml::XMLElement *armatureXML = armaturesXML->FirstChildElement(ARMATURE); while(armatureXML) { ArmatureData *armatureData = DataReaderHelper::decodeArmature(armatureXML, dataInfo); if (dataInfo->asyncStruct) { _dataReaderHelper->_addDataMutex.lock(); } ArmatureDataManager::getInstance()->addArmatureData(armatureData->name.c_str(), armatureData, dataInfo->filename.c_str()); armatureData->release(); if (dataInfo->asyncStruct) { _dataReaderHelper->_addDataMutex.unlock(); } armatureXML = armatureXML->NextSiblingElement(ARMATURE); } /* * Begin decode animation data from xml */ tinyxml::XMLElement *animationsXML = root->FirstChildElement(ANIMATIONS); tinyxml::XMLElement *animationXML = animationsXML->FirstChildElement(ANIMATION); while(animationXML) { AnimationData *animationData = DataReaderHelper::decodeAnimation(animationXML, dataInfo); if (dataInfo->asyncStruct) { _dataReaderHelper->_addDataMutex.lock(); } ArmatureDataManager::getInstance()->addAnimationData(animationData->name.c_str(), animationData, dataInfo->filename.c_str()); animationData->release(); if (dataInfo->asyncStruct) { _dataReaderHelper->_addDataMutex.unlock(); } animationXML = animationXML->NextSiblingElement(ANIMATION); } /* * Begin decode texture data from xml */ tinyxml::XMLElement *texturesXML = root->FirstChildElement(TEXTURE_ATLAS); tinyxml::XMLElement *textureXML = texturesXML->FirstChildElement(SUB_TEXTURE); while(textureXML) { TextureData *textureData = DataReaderHelper::decodeTexture(textureXML, dataInfo); if (dataInfo->asyncStruct) { _dataReaderHelper->_addDataMutex.lock(); } ArmatureDataManager::getInstance()->addTextureData(textureData->name.c_str(), textureData, dataInfo->filename.c_str()); textureData->release(); if (dataInfo->asyncStruct) { _dataReaderHelper->_addDataMutex.unlock(); } textureXML = textureXML->NextSiblingElement(SUB_TEXTURE); } }
There are three whiles in it, namely decodeArmature, decodeAnimation, and decodeTexture. After generating ArmatureData, AnimationData, and TextureData, ArmatureDataManager::getInstance()->addArmatureData, addAnimationData, and addTextureData are added to the corresponding map of ArmatureDataManager. In decodeXXX, various decodeXX will be called to generate the corresponding XXXData.
Armature
After loading the xml data, call
armature = Armature::create("Dragon"); armature->getAnimation()->play("walk"); armature->getAnimation()->setSpeedScale(); armature->setPosition(VisibleRect::center().x, VisibleRect::center().y * .f); armature->setScale(.f); addChild(armature);
便展示了动画,那么这是如何做到的呢?
Armature部分代码如下,ArmatureAnimation控制xml的mov节点,Bone中有Tween,这个Tween对应xml中b(MovementBoneData)
class Armature: public cocosd::Node, public cocosd::BlendProtocol { protected: //要展示动画的ArmatureData ArmatureData *_armatureData; BatchNode *_batchNode; Bone *_parentBone; float _version; mutable bool _armatureTransformDirty; //所有Bone cocosd::Map<std::string, Bone*> _boneDic; cocosd::Vector<Bone*> _topBoneList; cocosd::BlendFunc _blendFunc; cocosd::Vec _offsetPoint; cocosd::Vec _realAnchorPointInPoints; //动画控制器 ArmatureAnimation *_animation; };
Bone
部分代码如下,tweenData为当前Bone的状态,每帧都会更新这个值,并用tweenData确定worldInfo,提供Skin显示信息。tween为骨头的整个动画过程。
class Bone: public cocosd::Node { protected: BoneData *_boneData; //! A weak reference to the Armature Armature *_armature; //! A weak reference to the child Armature Armature *_childArmature; DisplayManager *_displayManager; /* * When Armature play an animation, if there is not a MovementBoneData of this bone in this MovementData, this bone will be hidden. * Set IgnoreMovementBoneData to true, then this bone will also be shown. */ bool _ignoreMovementBoneData; cocosd::BlendFunc _blendFunc; bool _blendDirty; Tween *_tween; //! Calculate tween effect //! Used for making tween effect in every frame FrameData *_tweenData; Bone *_parentBone; //! A weak reference to its parent bool _boneTransformDirty; //! Whether or not transform dirty //! self Transform, use this to change display's state cocosd::Mat _worldTransform; BaseData *_worldInfo; //! Armature's parent bone Bone *_armatureParentBone; };
Tween
这个是每个骨头的动画过程,见下面的movementBoneData。tweenData是Bone中tweenData的引用,在这每帧会计算这个tweenData值。
class Tween : public ProcessBase{ protected: //! A weak reference to the current MovementBoneData. The data is in the data pool MovementBoneData *_movementBoneData; FrameData *_tweenData; //! The computational tween frame data, //! A weak reference to the Bone's tweenData FrameData *_from; //! From frame data, used for calculate between value FrameData *_to; //! To frame data, used for calculate between value // total diff guan FrameData *_between; //! Between frame data, used for calculate current FrameData(m_pNode) value Bone *_bone; //! A weak reference to the Bone TweenType _frameTweenEasing; //! Dedermine which tween effect current frame use int _betweenDuration; //! Current key frame will last _betweenDuration frames // 总共运行了多少帧 guan int _totalDuration; int _fromIndex; //! The current frame index in FrameList of MovementBoneData, it's different from m_iFrameIndex int _toIndex; //! The next frame index in FrameList of MovementBoneData, it's different from m_iFrameIndex ArmatureAnimation *_animation; bool _passLastFrame; //! If current frame index is more than the last frame's index };
ArmatureAnimation
控制动画的播放,看到_tweenList,所有骨头的集合就是动画了。
class ArmatureAnimation : public ProcessBase { protected: //! AnimationData save all MovementDatas this animation used. AnimationData *_animationData; MovementData *_movementData; //! MovementData save all MovementFrameDatas this animation used. Armature *_armature; //! A weak reference of armature std::string _movementID; //! Current movment's name int _toIndex; //! The frame index in MovementData->m_pMovFrameDataArr, it's different from m_iFrameIndex. cocos2d::Vector<Tween*> _tweenList; }
如何做到每帧更新骨头的信息?
addChild(armature)后,Armaure中的onEnter(node进入舞台就会调用,比如addchild),onEnter调scheduleUpdate调scheduleUpdateWithPriority调_scheduler->scheduleUpdate。这样就每帧调用armature的update。
void Armature::update(float dt) { _animation->update(dt); for(const auto &bone : _topBoneList) { bone->update(dt); } _armatureTransformDirty = false; }
又调用了animation->update(dt);及遍历调用bone->update(dt);animation->update(dt)如下:
void ArmatureAnimation::update(float dt) { ProcessBase::update(dt); for (const auto &tween : _tweenList) { tween->update(dt); } //省略一堆代码 }
又调用了tween->update(dt); 每一个update都会调用updateHandler(ProcessBase中update调用了update里调用updateHandler)
void Tween::updateHandler() { //省略一堆代码 if (_loopType > ANIMATION_TO_LOOP_BACK) { percent = updateFrameData(percent); } if(_frameTweenEasing != ::cocosd::tweenfunc::TWEEN_EASING_MAX) { tweenNodeTo(percent); } }
tweenNodeTo调用了tweenNodeTo,其中的tweenData其实就是Bone的tweenData。根据percent计算了_tweenData的变化量。
FrameData *Tween::tweenNodeTo(float percent, FrameData *node) { node = node == nullptr ? _tweenData : node; if (!_from->isTween) { percent = ; } node->x = _from->x + percent * _between->x; node->y = _from->y + percent * _between->y; node->scaleX = _from->scaleX + percent * _between->scaleX; node->scaleY = _from->scaleY + percent * _between->scaleY; node->skewX = _from->skewX + percent * _between->skewX; node->skewY = _from->skewY + percent * _between->skewY; _bone->setTransformDirty(true); if (node && _between->isUseColorInfo) { tweenColorTo(percent, node); } return node; }
转了一大圈终于在每帧更新了Bone中的tweenData,最后看Bone的update,其根据tweenData计算了worldInfo、worldTransform。而且updateDisplay更新skin的信息,staticcast8344749198df0447455077b113e935bf(display)->updateArmatureTransform();再transform = TransformConcat(_bone->getNodeToArmatureTransform(), _skinTransform);
void Bone::update(float delta) { if (_parentBone) _boneTransformDirty = _boneTransformDirty || _parentBone->isTransformDirty(); if (_armatureParentBone && !_boneTransformDirty) { _boneTransformDirty = _armatureParentBone->isTransformDirty(); } if (_boneTransformDirty) { if (_dataVersion >= VERSION_COMBINED) { TransformHelp::nodeConcat(*_tweenData, *_boneData); _tweenData->scaleX -= ; _tweenData->scaleY -= ; } _worldInfo->copy(_tweenData); _worldInfo->x = _tweenData->x + _position.x; _worldInfo->y = _tweenData->y + _position.y; _worldInfo->scaleX = _tweenData->scaleX * _scaleX; _worldInfo->scaleY = _tweenData->scaleY * _scaleY; _worldInfo->skewX = _tweenData->skewX + _skewX + _rotationZ_X; _worldInfo->skewY = _tweenData->skewY + _skewY - _rotationZ_Y; if(_parentBone) { applyParentTransform(_parentBone); } else { if (_armatureParentBone) { applyParentTransform(_armatureParentBone); } } TransformHelp::nodeToMatrix(*_worldInfo, _worldTransform); if (_armatureParentBone) { _worldTransform = TransformConcat(_worldTransform, _armature->getNodeToParentTransform()); } } DisplayFactory::updateDisplay(this, delta, _boneTransformDirty || _armature->getArmatureTransformDirty()); for(const auto &obj: _children) { Bone *childBone = static_cast<Bone*>(obj); childBone->update(delta); } _boneTransformDirty = false;
如何展示(draw)出图片(skin)
Armature诗歌node,加入父节点后会调用其draw函数,遍历draw了bone的显示元素。
void Armature::draw(cocosd::Renderer *renderer, const Mat &transform, uint_t flags) { if (_parentBone == nullptr && _batchNode == nullptr) { // CC_NODE_DRAW_SETUP(); } for (auto& object : _children) { if (Bone *bone = dynamic_cast<Bone *>(object)) { Node *node = bone->getDisplayRenderNode(); if (nullptr == node) continue; switch (bone->getDisplayRenderNodeType()) { case CS_DISPLAY_SPRITE: { Skin *skin = static_cast<Skin *>(node); skin->updateTransform(); BlendFunc func = bone->getBlendFunc(); if (func.src != _blendFunc.src || func.dst != _blendFunc.dst) { skin->setBlendFunc(bone->getBlendFunc()); } else { skin->setBlendFunc(_blendFunc); } skin->draw(renderer, transform, flags); } break; case CS_DISPLAY_ARMATURE: { node->draw(renderer, transform, flags); } break; default: { node->visit(renderer, transform, flags); // CC_NODE_DRAW_SETUP(); } break; } } else if(Node *node = dynamic_cast<Node *>(object)) { node->visit(renderer, transform, flags); // CC_NODE_DRAW_SETUP(); } } }
再skin->draw(renderer, transform, flags);会用到刚刚更新的_quad,显示出最新的图片信息。
{ Mat mv = Director::getInstance()->getMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW); //TODO implement z order _quadCommand.init(_globalZOrder, _texture->getName(), getGLProgramState(), _blendFunc, &_quad, , mv); renderer->addCommand(&_quadCommand); }
至此,大家对cocos2dx里的骨骼动画应该有了全面的认识,三篇文章介绍的比较粗糙,其实有些细节内容我也没看懂,不过不要在意这些细节,没有实际的改动需求的话,懂80%就可以了,细节可以需要的时候在仔细理解。