【Creator 3.x 2D平面游戏】画布与摄像机基础知识,Canvas、Camera、Clear Flags、UITransform Content Size、RenderTexture

  1. 我是游戏新手,不懂画布和摄像机的概念,看了官方文档后更不懂了,感觉官方手册是给官方自己看的。
  2. 在Cocos中文社区中搜了很多,没有人讨论这个知识,想必大家都是高手,不屑于讨论这个基础概念。
  3. 我把今天猜到的知识写出来,给以后的新手看,希望能节约他们入门的时间。
  4. 以下所有的知识全是我测试出来的,还有一些靠猜的,对新人入门来说够用了。

基础概念如下:

  • Canvas:画布,画布的内容会全部显示到屏幕上,也就是说画布就是玩家的屏幕。画布的内容是什么呢?画布的内容是摄像机的输出。画布尺寸与项目设计尺寸是同一个东西。
  • 画布与玩家屏幕:画布尺寸200x400,玩家屏幕尺寸1000x2000,画布会放大来适配玩家设备的屏幕。画布尺寸200x400,玩家屏幕尺寸100x200,画布会缩小来适配玩家设备的屏幕。如果画布的w/h与屏幕的w/h不相等,则按照Fit Width或者Fit Height来适配屏幕。
  • 长度32对应物理引擎的1米(cocos全局const常量PHYSICS_2D_PTM_RATIO),这里的长度32指的是画布的长度而不是玩家屏幕的32个像素。假如我们的画布尺寸(设计尺寸)为320x640,那么对应物理引擎的物理世界为10米x20米。不管最终这个画布适配的屏幕尺寸为多少,我们在物理引擎中的尺寸都是10米x20米。
  • 美术图片像素与UITransform Content Size:美术图片3200x3200像素,UITransform Content Size被设置为320x320,那么此精灵图对应物理世界的10米x10米(320/32=10),物理世界的尺寸只与UITransform Content Size的尺寸有联系,与美术图无关。美术图只与清晰度有关。
  • Camera:摄像机,摄像机的输出内容是一张图片(不管摄像机看到的景色多么复杂,最终都会被摄像机作为一张图片进行输出),摄像机会把这张图片会输出到摄像机的targetTexture参数上,如果此参数为null,则摄像机会把这张图片输出到Canvas上。
  • 多摄像机:如果有n个相机,且这n个相机的targetTexture都是null,那么这n个相机的内容都会被输出到Canvas上,Canvas上最终的内容就是这n张图片的堆叠。堆叠的方式与摄像机的clear flags、priority、材质的shader等有关。所以玩家最终看到的就是这n张图片的堆叠。
  • targetTexture:摄像机的targetTexture参数用来指定摄像机输出的地址,此参数类型为RenderTexture,可以自己创建一个RenderTexture,然后将RenderTexture赋值给摄像机的targetTexture,那么此摄像机的输出就不会输出到Canvas上了,而是输出到我们指定的RenderTexture上。我们可以将这个RenderTexture赋值给某个精灵图的SpriteFrame.texture参数上,这样一顿操作后,摄像机的输出就会显示到此精灵图上了。
  • RenderTexture:就是一张空图片,我们将此RenderTexture的大小设置为100x200,那么就相当于我们有了一个100x200像素大小的空图片(这个图片中没有任何内容,可以理解为一张纯白的图片)。摄像机会将摄像机的内容输出到这张图片上,如果摄像机的输出尺寸为1000x2000,显然摄像机输出的图片超过了我们的RenderTexture的大小,所以最终的结果就是将摄像机的输出(1000x2000)等比例缩小为RenderTexture的大小(100x200),图片的内容是一样的只是清晰度变低了。如果RenderTexture的宽高比与摄像机的宽高比不一致,那么将有一部分摄像机的内容被裁剪丢弃。
  • 如果你的游戏依靠物理引擎,请将游戏内各物体的尺寸保持在0.1米-10米之间,超出这个范围会导致物理模拟不真实。比如你创建了一个物体,并将它的UITransform Content Size为500x500,那么相当于你创建了一个10几米的怪物,它的物理行动会看起来非常缓慢。美术图可以是500x500(为了清晰度),但是你不要忘了,500x500的美术图可以塞到50x50的UITransform Content Size物体上。

“设计尺寸(画布尺寸)”与“物体的UITransform Content Size”与“玩家屏幕”的关系如下:
image-20240608125828972

摄像机看到的内容:

  • 摄像机镜头范围内的物体会被摄像机看到。
  • 物体可以设置Layer属性(Node.Layer),来区分不同种类的物体。比如给n只狗设置Layer为dog,给n只猫设置Layer为cat,给n个人设置Layer为sb。
  • 摄像机可以被设置为只拍摄指定Layer的物体,比如A摄像机只拍摄Layer为dog和cat的物体,其它物体即使在A摄像机的镜头内也会被忽略。

多个摄像机内容在Canvas(玩家屏幕)上的堆叠:

  • 每个摄像机的输出都是一张图片,也就是说这n张图片会直接堆叠到玩家的屏幕上。
  • 那么哪张图在最底部,哪张图在最顶部呢?根据摄像机的Priority来的。Priority越高,摄像机的输出越在顶部(离玩家越近)。也就是说Priority高的会覆盖Priority低的摄像机的内容。
  • Clear Flags为SOLID_COLOR的意思是,摄像机先将镜头范围内的物体画出来,然后画面中没有物体的部分画上SOLID_COLOR颜色。
  • Clear Flags为SKYBOX的意思是,摄像机先将镜头范围内的物体画出来,然后画面中没有物体的部分画上SKYBOX的颜色。
  • Clear Flags为DEPTH_ONLY的意思是,摄像机先将镜头范围内的物体画出来,然后画面中没有物体的部分设置为透明背景。(真实意思是清除旧的像素点的深度缓存,大部分时候的具体表现就是透明背景)
  • 所以Priority高的摄像机的Clear Flags不要设置为SOLID_COLOR或SKYBOX,因为这样的话,相机的输出不是一个透明背景的图,那么它会覆盖更底部的摄像机的内容了。更底部的摄像机多惨啊,好不容易画的画,被别人给完全覆盖了,还不如什么也不画。

官方手册总是为了精确而不说人话,比如 2D 渲染元素,什么TMD叫 2D 渲染元素?直接说图片不就得了么?还有精灵图,能理解精灵图是什么的至少得2年精神病史。我刚开始开以为精灵图是一张画着精灵的图片。新手不需要区分那么细,管你精灵图还是贴图还是法向贴图还是什么其它的,都叫图片就得了。非得不说人话,假装科学家。
高手不用看手册,直接看源码就行了,只有新手需要看手册,结果你在这装高手。啥都不讲,上来直接讲参数。赶紧把参数的意思堆上就下班了,太好了。

6赞

我一开始也不清楚,慢慢的就习惯了(这样高级的叫法),确实很多词汇太高级了,我个人觉得是用于区分,虽然不知道为什么这样叫:joy:

轻易就被你们看懂,怎么体现技术牛逼,习惯就好 :crazy_face:

理解你的感受,大家都有同样的经历,但是现在我也理解他们为什么这么叫,拿精灵图来说,详细解释应该是在节点上挂一个sprite(直译过来就是精灵)组件,然后在这个sprite组件上再挂载一张图片,让这个sprite组件可以控制这个图片以什么样的方式来展示,这个sprite组件+图片一起就叫“精灵图”,如果只说图片来表达,意思就不太精准。而每次如果都要用这么一大堆话来说明也显得麻烦,所以专业术语就出来了。

1赞

随手复制粘贴 其实还是挺习惯精灵图雪碧图的叫法的 很多时候都是中英对照更好理解

精灵图独立于精灵层,游戏画面每一帧都重绘一次会浪费性能,精灵层的作用就是让静止的画面不需要重绘,只需要重绘精灵层的图像。而“精灵”称呼的来源就是因为其特性像精灵,即处于这个世界上的某个坐标,但又不会跟物体发生实际碰撞(穿墙),这种似乎存在这个世界又不完全存在于这个世界的奇妙物体,跟传说中的精灵很像,所以叫精灵。想要实现精灵与背景分开重绘的效果,就需要分层,这个层就叫精灵层。所以特点是:具有独立图层、具有实际坐标、独享重绘通道。​

同意,文档建设确实不太行,非常不友好,官方也不重视内容建设

1赞

感谢分享,很实用

你对clearFlags的解释有点问题。相机是先将画面清空,清空时如果clearFlags是solid_color,那么会将画面全部覆盖成这个颜色。然后再去绘制相机拍摄的物体。

然后是关于图片的一些名称的问题:
首先是硬盘中的图片,后缀名为.png或者.jpg之类的东西。它们本质上就是一些数据,可能使用了一定的压缩。
加载到游戏的内存中之后,我们首先获得了一个texture,纹理。
纹理一般用于渲染3d物体,如果要渲染2d图片,需要在资源设定上改成spriteFrame
spriteFrame,字面意思是精灵帧。本质上就是一个纹理+uv参数。或者用人话来说,就是一个纹理,然后加上了一个框框参数,框出来实际使用时在纹理上的某个矩形区域。因为这个纹理有可能是个图集。
最后是精灵,Sprite,这个是游戏开发中的一个概念,说人话就是用来显示一个图片的或者帧动画的对象。
还有一个经典的梗:雪碧流血,是sprite bleeding的直译,意思大概是精灵图集渲染采样时,边缘处越界产生的异常。这我也不知道正规翻译应该叫什么。

正规翻译…应该叫破图?