cocos creator 如何加载一张图片并渲染出来的

Posted 2023-05-11

参考技术A 导读：   ccc 我们在使用一张图片的时候，使用cc.laod api ，回调传回来cc.spriteFrame 或者cc.texture来供我们使用。下面的内容会解密中间到底经历了哪些过程（native）。

加载：首先会在js引擎中，通过一些方式得到资源的完整信息，包括资源的完整路径资源类型等（可以了解下load的加载过程）。

然后调用jsb_global_load_image方法，利用native来加载这张图片到内存中，拿到内存首地址和内存大小。

把刚才拿到的信息转为jsObject，内存地址和大小会被描述成arrayBuff，包装好的对象回调回给js。

js引擎拿到回调后会创建一个texture来，然后调用 texture.initWithElement()方法，把之前包装好的数据再传回给native的texture对象（js的texture利用jsb来管理native的texture对象，并且是1对1的）。

渲染：native的texture接收到数据后会用OpenGL的api来开辟显存，绑定纹理数据（分配一个纹理id给native的texture）。然后通过device（DeviceGraphics是单例，大多数的OpenGL api接口都是通过他调用）渲染到屏幕上。（OpenGL api可自行查找资料）

我们在js端让一个精灵显示图片的时候，是在load的回调里 把cc.spriteFrame给精灵使用，spriteFrame里持有cc.texture对象，cc.texture又持有由native返回的数据。通过这种方式让纹理数据和将要渲染的对象绑定起来。

还有许多包括顶点数据  node的位置 大小 shader 等等 都在RenderFlow等类中获取和封装（比较复杂），最后配合纹理数据 渲染出来。我们加载的一张图片就这样渲染到了屏幕上。

流程图：

cocos creator js加载龙骨

cc.Class({

extends: cc.Component,

properties: {

dragonBone: {

default: null,

type: dragonBones.ArmatureDisplay

}

},

dynamicCreate () {

if (this.dragonBone.dragonAtlasAsset) {

return;

}

cc.resources.load('dragonBones/NewDragonTest', dragonBones.DragonBonesAsset, (err, res) => {

if (err) cc.error(err);

this.dragonBone.dragonAsset = res;

cc.resources.load('dragonBones/texture', dragonBones.DragonBonesAtlasAsset, this.onComplete.bind(this));

});

},

onComplete (err, res) {

if (err) cc.error(err);

this.dragonBone.dragonAtlasAsset = res;

this.dragonBone.armatureName = 'armatureName';

this.dragonBone.playAnimation('stand', 0);

}

});