骨骼动画定义
传统的动画，一般是对一个物体对象进行位移、旋转、缩放、变形，然后把关键帧的信息记录下来，在播放的时候按照关键帧时间对物体对象进行位移、旋转、缩放、变形，并在关键帧与关键帧之间做插值运算。
骨骼动画的特点是，需要做动画的物体对象本身不记录位移、旋转、缩放、变形信息，而是通过了第三方的“骨骼”物体记录动画信息，然后物体对象本身只记录受到骨骼物体影响的权重。在播放的时候，通过骨骼物体的关键帧和物体对象记录的权重，让动画重现
骨骼动画的好处
1、骨骼动画是影响到顶点级别的动画，而且可以多根骨骼根据权重影响同一个顶点，不论是2D或者3D使用，都可以让动画做得更丰富。
2、做到了对象和动画分离，我们只需要记录了物体对于骨骼的蒙皮权重，就可以单独的去制作骨骼的动画，在保证蒙皮信息和骨骼信息一致的情况下，还可以多个物体之间共享动画。
3、相对于2D的逐帧动画大大的节省资源容量。
4、3D角色动画离不开骨骼动画。
骨骼动画文件
spine骨骼动画导出时一般会包含三个文件，png,atlas,json
png是材质，atlas是创建整个初始骨骼物体对png的解析，即每一个蒙皮碎片在整个纹理图集上的位置，下边重点介绍一下 json文件内容：
keys:skeleton,描述骨骼的尺寸，fps,
keys:bones,描述所有骨骼的初始信息(位置，旋转，父节点，)
keys:slots,插槽，描述的是bone对应的的蒙皮名字
keys:skins,蒙皮，描述骨骼对应的蒙皮的一些状态（旋转，大小，位置，名字）
keys:animations,动画，描述的是动画的信息，每一段动画，都有若干帧，都对应这所有骨骼的变化，而这些变化就是（translate,rotate,shear),外界可通过这些骨骼的变化再依据权值来算出蒙皮的状态，最后呈现出来一帧帧动画
creator中使用骨骼
**Skeleton：**骨骼的渲染脚本
animation：外界可以通过它来修改要播放的动画名字
update函数：
_updateCache函数：
updateToFrame(idx);_frameCache成员变量:(AnimationCache)：
spine.AnimationState.apply(),
时间轴.prototype.apply()
修改骨骼的状态
修改蒙皮的状态
**AnimationCache:**缓存一个动画里的所有帧
缓存模式有三种：SHARED_CACHE(共享缓存)，PRIVATE_CACHE(私有缓存)，REALTIME(实时计算)
**SkeletonCache：**骨骼的缓存
通过spine.SkeletonData,可以创建spine.Skeleton,spine.SkeletonClipping(), spine.AnimationState,其实缓存的就是这三个数据
**spine.SkeletonJson和spine.SkeletonBinary:**主要是来解析骨骼动画数据的，骨骼动画文件在导出时一般有两种格式，二进制（skel）或者json，最后会生成第二级骨骼动画数（spine.SkeletonData），注意，此处是生成spine.SkeletonData所有成员的数据，具体可以查看这两个类的readSkeletonData的函数实现
**第一级骨骼动画数据SkeletonData:**这个是继承自cc.Asset,他是我们加载骨骼动画源文件所产生的一个解析文件，主要是解析atlas和skel(二进制，也可以导出为json)这两个源文件
**第二级骨骼动画数据是spine.SkeletonData:**解析第一级骨骼动画数据，生成新的data,主要包含骨骼（bones），插槽(slots)，蒙皮(skins)，事件(events)，约束，animations(动画数据),fps这些数据
**spine.Skeleton:**自身也是一个骨骼,基础数据(位置，缩放，时间),管理所有的骨骼（Bone），约束条件(ikConstraints,transformConstraints,pathConstraints)，插槽(slots),蒙皮(skin)等以及他们之间的关系
**spine.PathConstraint:**路径约束
**spine.PathConstraintData:**路径约束的data
**spine.IkConstraint:**反向动力学约束
**spine.IkConstraintData:**反向动力学约束的data
**spine.ConstraintData:**约束的基类data
**spine.Bone:**单个骨骼
**spine.BoneData:**单个骨骼的数据
**spine.Animation:**游戏中的动画，持有动画名，动画的时间轴，动画的时间
**spine.AnimationState:**动画的状态，每一个骨骼动画都有一个动画状态
它的apply函数直接
**spine.AnimationStateData:**动画的状态数据
**spine.TrackEntry：**持有当前要播放的动画数据animation，当前动画是否loop，当前动画的总时间
时间轴的类型有15种，修改骨骼bone的状态
**spine.CurveTimeline:**时间轴基类
**spine.RotateTimeline：**旋转
**spine.TranslateTimeline：**平移
**spine.ScaleTimeline：**缩放
**spine.ShearTimeline：**曲线
**spine.ColorTimeline：**颜色
spine.TwoColorTimeline：
spine.AttachmentTimeline：
spine.DeformTimeline：
**spine.EventTimeline：**事件
spine.DrawOrderTimeline：
spine.IkConstraintTimeline：
spine.TransformConstraintTimeline：
spine.PathConstraintMixTimeline：
spine.PathConstraintSpacingTimeline：
spine.PathConstraintPositionTimeline：
一个骨骼动画通常会包含两个文件（纹理信息png和动画数据skel）
当把一个骨骼动画导入内存的时候，
一个动画文件包含若干组动画，每一组动画都有一个名字来标记，这一组动画则由一个帧数组frames[N]组成，默认动画播放的第一帧为frames[0],当游戏设置完动画名字以后，就开始更新动画，按照一帧一帧的去frames中取动画数据来播放
creator中sprite
一个sprite渲染组件，会包含两个特殊的成员变量，一个spriteFrame,一个是material
spriteFrame：指的是精灵帧，它主要管理的是uv坐标，顶点位置，矩形区域
//ccspriteFrame.js
//通过纹理的名字来加载纹理信息
_loadTexture: function () {
if (this._textureFilename) {
let texture = textureUtil.loadImage(this._textureFilename);
this._refreshTexture(texture);
}
}
//texture-util.js
//加载纹理信息
loadImage (url, cb, target) {
cc.assertID(url, 3103);
var tex = cc.loader.getRes(url);
if (tex) {
if (tex.loaded) {
cb && cb.call(target, null, tex);
return tex;
}
else
{
tex.once("load", function(){
cb && cb.call(target, null, tex);
}, target);
return tex;
}
}
else {
//../assets/CCTexture2D
tex = new Texture2D();
tex.url = url;
cc.loader.load({url: url, texture: tex}, function (err, texture) {
if (err) {
return cb && cb.call(target, err || new Error('Unknown error'));
}
texture.handleLoadedTexture();
cb && cb.call(target, null, texture);
});
return tex;
}
}
//loader.js
//cc.loader.load调用的时候会进到下面这个函数中
function loadImage (item) {
var loadByDeserializedAsset = (item._owner instanceof cc.Asset);
if (loadByDeserializedAsset) {
// already has cc.Asset
return null;
}
var image = item.content;
if (cc.sys.platform !== cc.sys.FB_PLAYABLE_ADS && !(image instanceof Image)) {
return new Error('Image Loader: Input item doesn\'t contain Image content');
}
// load cc.Texture2D
var tex = item.texture || new Texture2D();
tex._uuid = item.uuid;
tex.url = item.url;
tex._setRawAsset(item.rawUrl, false);
tex._nativeAsset = image;
return tex;
}
//
material：指的是材质，它会和shader关联，将shader中的一些属性暴露出来，比如我们可以通过材质给shader中的属性赋值，比如texture
spriteFrame内部持有有一个CC.Texture2D，这个成员变量主要是解析纹理信息的
CC.Texture2D内部持有一个renderer.Texture2D，这个成员变量主要是和GPU打交道的
//renderer.Texture2D.js
constructor(device, options) {
super(device);
let gl = this._device._gl;
//目标缓冲
this._target = gl.TEXTURE_2D;
//首先会在内部创建glID这个是纹理在GPU中的标识
this._glID = gl.createTexture();
// always alloc texture in GPU when we create it.
//创建时总是在gpu中分配纹理
options.images = options.images || [null];
//此处主要是更新数据到GPU纹理缓存
this.update(options);
}
在shader中经常会使用texImage2D(texture,v.uv0),这里的纹理texture从哪里加载来的呢
//当外界加载一张纹理成功以后，返回的数据，我们可以把它赋给sprite.spriteframe,这个时候就会调用下面的函数
//ccsprite.js
_applySpriteFrame (oldFrame) {
let oldTexture = oldFrame && oldFrame.getTexture();
if (oldTexture && !oldTexture.loaded) {
oldFrame.off('load', this._applySpriteSize, this);
}
if (this._spriteFrame && !this._spriteFrame.isValid) {
cc.log('sprite frame is not valid', this.node._name)
this._spriteFrame = null;
}
let spriteFrame = this._spriteFrame;
if (spriteFrame) {
this._updateMaterial();
let newTexture = spriteFrame.getTexture();
if (newTexture && newTexture.loaded) {
this._applySpriteSize();
}
else {
this.disableRender();
spriteFrame.once('load', this._applySpriteSize, this);
}
}
else {
this.disableRender();
}
if (CC_EDITOR) {
// Set atlas
this._applyAtlas(spriteFrame);
}
}
//ccsprite.js
_updateMaterial () {
let texture = this._spriteFrame && this._spriteFrame.getTexture();
// make sure material is belong to self.
let material = this.getMaterial(0);
if (material) {
if (material.getDefine('USE_TEXTURE') !== undefined) {
material.define('USE_TEXTURE', true);
}
//设置纹理信息，将来可以在shader中使用
material.setProperty('texture', texture);
}
BlendFunc.prototype._updateMaterial.call(this);
},
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
