游戏引擎详解——图片

embedded/2024/11/9 16:44:47/

图片

图片的格式

图片文件格式
png
jpg
纹理压缩格式
ETC1/2
PVRTC
ASTC

图片的属性

图片属性解释
分辨率宽高像素值（pt），如：1024*1024
位深度用来存储像素颜色的值，如RGBA8888，红黄蓝透明度4个维度每个8bit，一共就是32位，一般使用的就是32位，也被称为真彩色
文件大小文件所占用的存储大小

图片的优化

图片的优化分为两种：

    1. 文件大小优化：这种优化会影响到包大小，较小的图片大小对于手机存储容量和网络传输速度和时间会更友好。

一般的优化方式是使用压缩工具如pngquant、tinypng等，直接压缩文件大小。

    1. 图片纹理优化：

图片文件大小压缩，不意味着读到内存中的大小会减少。

一般情况下，以ARPG8888来说，计算一个1024*1024分辨率的图片读到内存中的大小，计算公式为：

1024 * 1024 * 4 * 8 = 33,554,432 bit = 4,194,304 byte ≈ 4 mb

理解起来就是 1024 * 1024 个像素，每个像素有 argb 4个通道，每个通道含有 8 bit数据用来存储颜色值。

png格式不能直接被GPU识别，需要在cpu把图片读进内存中解码后，再传递给gpu使用，这样做会造成一定的cpu消耗和很大的瞬时运行内存（RAM）占用。

因为大部分gpu对于压缩后的纹理有比较好的支持，无需cpu解码，占用内存小。于是我们要寻找一种合适的纹理压缩方式。

  • etc1不支持透明通道。
  • etc2效果很差，容易出现色块。
  • PVRTC仅能在ios上使用.

这时候astc格式就展露在我们眼前，IOS和安卓端都对astc有较好的支持率。

  • iPhone6及iPad mini 4以上iOS设备支持。
  • 大多数支持OpenGL ES 3.1或Vulkan的现代Android GPU也支持ASTC格式，其中包括：自Adreno 4xx / Snapdragon 415（2015年）起的高通GPU，自Mali T624（2012年）起的ARM GPU，自Tegra K1（2014年）起的NVIDIA GPU，以及自GX6250（2014年）起的PowerVR GPU。

在运行内存中来说，astc的内存使用能节省75%左右，提升巨大。

cocoscreator中源码理解

creator引擎在编译时会把选中的纹理压缩类型记录到import文件夹下的json文件中，多种图片格式以下划线‘_’区分开，下图演示里选择了astc6x6格式和webp格式，所以生成的类型就是
在这里插入图片描述

代码中在读取文件格式时，会根据列举的文件类型判断当前机器是否支持。由下面代码图里能够看到，7@34这里的7代表的就是第7个.astc，4代表的就是第4个.webp。若当前设备不支持astc就会去寻找webp格式。

在这里插入图片描述

cocoscreator中源码整个下载流程的理解（建议配合cocos2.4.11源码享用）

  1. 一切的一切都要从bundle.js这个类说起，类中的load函数会调用cc.assetManager.loadAny函数来下载相关资源并获取资源数据返回。
    ，传递的参数是资源名paths，类型type，进度回调函数onProgress，完成回调函数onComplete。
    在这里插入图片描述

  2. cc.assetManager是CCAssetManager类,这个类里有一个loadAny函数，此函数简单封装了一个Task并把task传递到pipeline中。这里的pipeline是定义在shared.js中的new Pipeline(‘normal load’, [])一个名字叫做normal load的管线,异步执行任务，管线填充在CCAssetManager类中pipeline.append(preprocess).append(load);包含一个preprocess和load方法。

task的状态为：
{input: 资源名,onProgress: onProgress,onComplete: onComplete,options: {preset: 'default',__requestType__: 'path',type: type,bundle: bundle名,__outputAsArray__: false,}
}

在这里插入图片描述
4. normal load–pipeline先调用preprocess，这个函数里对Task的options属性做遍历，这里也就是preset、requestType、type、bundle和__outputAsArray__五个key。
requestType、type、bundle和preset键值对保存到subOptions对象中，__outputAsArray__和preset保存到leftOptions对象中，并覆盖掉task的options属性。
新建一个subTask，input为task.input，options为subOptions对象，走transformPipeline管线流程同步执行任务，获取的值设置为task.source和task.output。最后调用done()。

task的状态为：
{input: 资源名,onProgress: onProgress,onComplete: onComplete,options: {preset: 'default',__outputAsArray__: false,},output: ,source: ,
}
subTask的状态为：
{input: 资源名,options: {preset: 'default',__requestType__: 'path',type: type,bundle: bundle名,}
}

在这里插入图片描述
5. transformPipeline里包含两个函数parse和combine。

  • parse管线任务，先判断input，若input为字符串，新建一个无原型链对象item，把item对象的【options.__requestType__值】，也就是【RequestType.PATH】，也就是【‘path’】设置为input值，把options中的其他键值对都复制到item中，这里包含四个键值对，requestType、type、bundle和path。
    再遍历item，这里只有path这个key有处理，其他key都过滤了，通过bundle的_config找item.path值的info。这里的item.path也就是我们一开始传进来的资源名。info里包含了资源的uuid。
    把config、info和uuid值填入到out对象中，并把out对象push到task.output中。
    管线会把task.output值赋值给task.input。
subTask的状态为：
{options: {preset: 'default',__requestType__: 'path',type: type,bundle: bundle名,},input: [{config: bundle所有配置,uuid: 资源的uuid,info: {path: path, uuid: uuid}，ext： '.json'，}]
}

源码展示：
function parse (task) {var input = task.input, options = task.options;input = Array.isArray(input) ? input : [ input ];task.output = [];for (var i = 0; i < input.length; i ++ ) {var item = input[i];var out = RequestItem.create();if (typeof item === 'string') {item = Object.create(null);item[options.__requestType__ || RequestType.UUID] = input[i];}if (typeof item === 'object') {// local options will overlap glabal optionscc.js.addon(item, options);if (item.preset) {cc.js.addon(item, cc.assetManager.presets[item.preset]);}for (var key in item) {switch (key) {case RequestType.UUID: var uuid = out.uuid = decodeUuid(item.uuid);if (bundles.has(item.bundle)) {var config = bundles.get(item.bundle)._config;var info = config.getAssetInfo(uuid);if (info && info.redirect) {if (!bundles.has(info.redirect)) throw new Error(`Please load bundle ${info.redirect} first`);config = bundles.get(info.redirect)._config;info = config.getAssetInfo(uuid);}out.config = config;out.info = info;}out.ext = item.ext || '.json';break;case '__requestType__':case 'ext': case 'bundle':case 'preset':case 'type': break;case RequestType.DIR: if (bundles.has(item.bundle)) {var infos = [];bundles.get(item.bundle)._config.getDirWithPath(item.dir, item.type, infos);for (let i = 0, l = infos.length; i < l; i++) {var info = infos[i];input.push({uuid: info.uuid, __isNative__: false, ext: '.json', bundle: item.bundle});}}out.recycle();out = null;break;case RequestType.PATH: if (bundles.has(item.bundle)) {var config = bundles.get(item.bundle)._config;var info = config.getInfoWithPath(item.path, item.type);if (info && info.redirect) {if (!bundles.has(info.redirect)) throw new Error(`you need to load bundle ${info.redirect} first`);config = bundles.get(info.redirect)._config;info = config.getAssetInfo(info.uuid);}if (!info) {out.recycle();throw new Error(`Bundle ${item.bundle} doesn't contain ${item.path}`);}out.config = config; out.uuid = info.uuid;out.info = info;}out.ext = item.ext || '.json';break;case RequestType.SCENE:if (bundles.has(item.bundle)) {var config = bundles.get(item.bundle)._config;var info = config.getSceneInfo(item.scene);if (info && info.redirect) {if (!bundles.has(info.redirect)) throw new Error(`you need to load bundle ${info.redirect} first`);config = bundles.get(info.redirect)._config;info = config.getAssetInfo(info.uuid);}if (!info) {out.recycle();throw new Error(`Bundle ${config.name} doesn't contain scene ${item.scene}`);}out.config = config; out.uuid = info.uuid;out.info = info;}break;case '__isNative__': out.isNative = item.__isNative__;break;case RequestType.URL: out.url = item.url;out.uuid = item.uuid || item.url;out.ext = item.ext || cc.path.extname(item.url);out.isNative = item.__isNative__ !== undefined ? item.__isNative__ : true;break;default: out.options[key] = item[key];}if (!out) break;}}if (!out) continue;task.output.push(out);if (!out.uuid && !out.url) throw new Error('Can not parse this input:' + JSON.stringify(item));}return null;
}
  • combine管线任务，主要是拼出来完整的资源地址。
subTask的状态为：
{options: {preset: 'default',__requestType__: 'path',type: type,bundle: bundle名,},output: [{config: bundle所有配置,uuid: 资源的uuid,info:  {path: path, uuid: uuid}，ext： '.json'，url： 具体地址，}]
}
task的状态为：
{input: 资源名,onProgress: onProgress,onComplete: onComplete,options: {preset: 'default',__outputAsArray__: false,},output:  [{config: bundle所有配置,uuid: 资源的uuid,info: 具体信息，ext： '.json'，url： 具体地址，}],source:  [{config: bundle所有配置,uuid: 资源的uuid,info: 具体信息，ext： '.json'，url： 具体地址，}],
}

源码展示：
function combine (task) {var input = task.output = task.input;for (var i = 0; i < input.length; i++) {var item = input[i];if (item.url) continue;var url = '', base = '';var config = item.config;if (item.isNative) {base = (config && config.nativeBase) ? (config.base + config.nativeBase) : cc.assetManager.generalNativeBase;} else {base = (config && config.importBase) ? (config.base + config.importBase) : cc.assetManager.generalImportBase;}let uuid = item.uuid;var ver = '';if (item.info) {if (item.isNative) {ver = item.info.nativeVer ? ('.' + item.info.nativeVer) : '';}else {ver = item.info.ver ? ('.' + item.info.ver) : '';}}// ugly hack, WeChat does not support loading font likes 'myfont.dw213.ttf'. So append hash to directoryif (item.ext === '.ttf') {url = `${base}/${uuid.slice(0, 2)}/${uuid}${ver}/${item.options.__nativeName__}`;}else {url = `${base}/${uuid.slice(0, 2)}/${uuid}${ver}${item.ext}`;}item.url = url;}return null;
}
  • 管线运行完毕，返回subTask.output
  1. 回到normal load管线任务中的preprocess任务，transformPipeline返回了对象设置成task的output和source值。把output的值赋值给input，再把output设为null，继续下一个normal load管线任务load。
task的状态为：
{onProgress: onProgress,onComplete: onComplete,options: {preset: 'default',__outputAsArray__: false,},input:  [{config: bundle所有配置,uuid: 资源的uuid,info:  {path: path, uuid: uuid}，ext： '.json'，url： 具体地址，}],source:  [{config: bundle所有配置,uuid: 资源的uuid,info: 具体信息，ext： '.json'，url： 具体地址，}],
}
  1. load函数里给task.options新增了progress和__exclude__字段，progress用来记录资源下载进度。然后遍历每一个task.input，对每一个需要load的资源新建了一个subTask，input值为每一个task的input值，onProgress为task.onProgress，options为task.options，progress为task.progress，onComplete为新的函数，完成时调用，更新progress中的值。再把这个subTask传递到loadOneAssetPipeline下载管道中。
subTask的状态为：
{input: {config: bundle所有配置,uuid: 资源的uuid,info:  {path: path, uuid: uuid}，ext： '.json'，url： 具体地址，},onProgress: onProgress,onComplete: newComplete,options: {preset: 'default',__outputAsArray__: false,__exclude__： {}，},
}
task的状态为：
{onProgress: onProgress,onComplete: onComplete,progress : { finish: 0, total: task.input.length, canInvoke: true },options: {preset: 'default',__outputAsArray__: false,__exclude__： {}，},input:  [{config: bundle所有配置,uuid: 资源的uuid,info: 具体信息，ext： '.json'，url： 具体地址，}],source:  [{config: bundle所有配置,uuid: 资源的uuid,info: 具体信息，ext： '.json'，url： 具体地址，}],
}

源码展示：
function load (task, done) {let firstTask = false;if (!task.progress) {task.progress = { finish: 0, total: task.input.length, canInvoke: true };firstTask = true;}var options = task.options, progress = task.progress;options.__exclude__ = options.__exclude__ || Object.create(null);task.output = [];forEach(task.input, function (item, cb) {let subTask = Task.create({ input: item, onProgress: task.onProgress, options, progress, onComplete: function (err, item) {if (err && !task.isFinish) {if (!cc.assetManager.force || firstTask) {if (!CC_EDITOR) {cc.error(err.message, err.stack);}progress.canInvoke = false;done(err);}else {progress.canInvoke && task.dispatch('progress', ++progress.finish, progress.total, item);}}task.output.push(item);subTask.recycle();cb();}});loadOneAssetPipeline.async(subTask);}, function () {options.__exclude__ = null;if (task.isFinish) {clear(task, true);return task.dispatch('error');}gatherAsset(task);clear(task, true);done();});
}
  1. loadOneAssetPipeline下载单资源管线包含两个管线任务，fetch和parse。
  2. fetch函数调用packManager.load获取资源数据。packManager.load先判断是否在files缓存中有无此id。由于我们在加载资源前必定已经加载了fgui的bin文件，而我们都是选择合并json类型，而bin文件下载时已经把依赖的json文件下载过了，文件值都缓存到files中，这里就直接拿到json信息了，返回值赋值给task的file变量，也就是包含资源类型的json串。进入下一个管线任务parse。parse函数中对未缓存的uuid资源调用parser.parse函数，传递file值。其中又调用parser.parseImport函数，传递file和options；继续调用deserialize函数，传递file和options；继续调用cc.deserialize也就是deserialize-compiled文件中的deserialize函数，传递file和options；继续调用parseInstances；继续调用deserializeCustomCCObject；继续调用对象的_deserialize函数；这里图片对象调用的就是CCTexture2D的_deserialize函数；继续调用Texture2D._parseExt函数；这个_parseExt函数里就做了判断，对资源类型进行解析，并判断设备是否支持纹理类型，支持就返回该后缀。假设这里返回.png后缀，设置Texture2D的_native属性为.png，再设置其他属性，如过滤方案，并返回一个CCTexture2D对象。
  • 这里会衍生到图片的其他属性值，原串是这样的，eg： “0,9729,9729,33071,33071,0,0,1”
  • 第一个0：表示图片的纹理类型，0就是第0个.png。其他类型如下[‘.png’, ‘.jpg’, ‘.jpeg’, ‘.bmp’, ‘.webp’, ‘.pvr’, ‘.pkm’, ‘.astc’],
  • 第二个9729：表示纹理缩小时设定的纹理过滤方案。const GL_NEAREST = 9728;const GL_LINEAR = 9729; 9728是最近点过滤，采样时选择最近的点，成本小，但易产生锯齿。9729是线性过滤，由4个颜色进行加权，这种方法可以让纹理边缘看起来更平滑，但需要进行更多的计算。
  • 第三个9729：表示纹理放大时设定的纹理过滤方案。同上。
  • 第四个33071：表示横轴纹理环绕方式。指定了当纹理坐标超出0到1的标准范围时该如何处理纹理的采样。10497是重复、33071是边缘拉伸、33648是镜像重复。
  • 第五个33071：表示纵轴纹理环绕方式。同上。
  • 第六个0：表示颜色是否预乘，1表示预乘，0表示非预乘。
  • 第七个0：表示是否是否mipmaps。1表示使用，0表示不使用。
  • 第八个1：表示纹理是否参与合图。1表示参与，0表示不参与。
  1. parser.parse完成后调用loadDepends函数，先为Texture2D添加addRef，然后调用getDepends函数，获取依赖，再新建一个任务，走下载管线完成实际图片加载。

http://www.ppmy.cn/embedded/104347.html

相关文章

2024HarmonyOS应用开发者高级认证最新整理题库和答案(已收录182道 )

2024HarmonyOS应用开发者高级认证最新整理题库和答案(已收录182道 )

更新截止2024-08-27,完整题库一共182道题,足够覆盖90%考题,如有新题和遗漏我会持续补充 所有题目的选项都是打乱顺序的,记答案不要记序号 完整题库请在我的网盘下载或查看在线文档 完整题库在线文档预览 单选(已收录102道) 1 . 以下哪个装饰器用来表示并发共享对象。(B) A. @…
阅读更多...
2024年6月 青少年等级考试机器人实操真题二级

2024年6月 青少年等级考试机器人实操真题二级

202406 青少年等级考试机器人实操真题二级 第 1 题 请查看第二大题“实际操作”再进行本题作答 下列能增加模型稳定性的是&#xff1f;&#xff08; &#xff09; A&#xff1a;增大与地面的接触面积 B&#xff1a;减小与地面的接触面积 C&#xff1a;增高模型重心 D&a…
阅读更多...
瑞芯微RK3588 camera驱动总结三调试

瑞芯微RK3588 camera驱动总结三调试

一、指令 先介绍一些很有用的指令 1.media-ctl -p -d /dev/media0 用于打印 /dev/media0 设备的媒体管道拓扑结构。媒体管道拓扑结构描述了多媒体设备内部各组件之间的连接关系&#xff0c;包括视频输入、视频输出、编码器、解码器、ISP&#xff08;图像信号处理器&#xff…
阅读更多...
检查内参 外参

检查内参 外参

目录 检查内参 外参 像素点投影到世界坐标系&#xff0c;再投回到2d坐标系&#xff1a; 检查内参 外参 import cv2 import numpy as np# 假设我们有以下相机内参 K np.array([[418.96369417, 0.0, 489.16315478],[0.0, 419.04813353, 267.88796254],[0.0, 0.0, 1.0]], dtyp…
阅读更多...
Selenium自动化测试（IDE环境搭建）

Selenium自动化测试（IDE环境搭建）

一、Selenium概念 1.1 Selenium介绍 Selenium是一款开源免费的Web应用程序功能自动化测试工具Selenium还支持基于Web的管理任务自动化 1.2 Selenium的主要用途 1、Web应用程序的功能自动化测试 对Web系统进行功能测试&#xff0c;版本迭代时避免重复劳动 2、兼容性测试 测试…
阅读更多...
docker实战基础二(Docker基础命令)

docker实战基础二(Docker基础命令)

一、Docker 镜像的标签 更改 Docker 镜像的标签（tag）可以通过 docker tag 命令来实现。这个命令允许你为现有的镜像创建一个新的标签。这对于组织和管理镜像非常有用，特别是在开发和部署工作流中。 命令语法 docker tag SOURCE_IMAGE[:TAG] TARGET_IMAGE[:TAG]SOURCE_IMA…
阅读更多...
ParallelsDesktop19可在任何Mac上运行Windows软件

ParallelsDesktop19可在任何Mac上运行Windows软件

ParallelsDesktop19是一款Mac虚拟机软件&#xff0c;可在任何Mac上运行Windows&#xff0c;体验不同操作系统之间的无缝集成&#xff0c;并具有创新设计和增强功能&#xff0c;如无密码登录与TouchID、支持macOSSonoma14和增强打印选项。此外&#xff0c;它还支持运行更多Windo…
阅读更多...
C++20 是 C++ 语言的一次重大更新

C++20 是 C++ 语言的一次重大更新

C20 是 C 语言的一次重大更新&#xff0c;它引入了许多新特性&#xff0c;旨在提高开发者的生产力和代码的现代化。以下是 C20 的一些关键特性的总结&#xff1a; 模块&#xff08;Modules&#xff09;&#xff1a;C20 引入了模块&#xff0c;这是一种新的编译单元&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023