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

导读：   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等类中获取和封装（比较复杂），最后配合纹理数据 渲染出来。我们加载的一张图片就这样渲染到了屏幕上。

流程图：