以白鹭引擎为例探讨游戏内图片九宫拉伸的问题

871 阅读2分钟

我正在参加掘金社区游戏创意投稿大赛个人赛,详情请看:游戏创意投稿大赛

以白鹭引擎为例探讨游戏内九宫拉伸的问题

前文

本文的内容主要是游戏开发方面的一个常见问题,当适配不同分辨率的设备时,游戏内图片的处理问题。例如对于同样的游戏背景,当它分别被展示在手机以及ipad上时,由于屏幕比例的差别,可能出现部分游戏内容被遮挡或图片拉伸失真的问题。本文主要基于白鹭引擎讨论图片九宫格方式拉伸的问题。

什么是九宫格拉伸

首先了解一下什么是九宫格拉伸。由于存在设备的不同,因此当图片展示在不同设备上时出现的计划外拉伸会造成图片的现实效果与实际的不符。在这种情况下,则衍生出了这种九宫拉伸方案。所谓图片的九宫格拉伸,主要是指将游戏内要显示的图片划分为九宫格。九宫格的四个角不进行拉伸,这样也就保证了不会出现角的形变。图片中间的部分进行双向拉伸,保证图片的主题部分变化后比例一致,这是实际需要展示在游戏中的内容。而图片中的四条边则进行单向拉伸,这是主要发生形变的部分。

利用白鹭引擎进行图片九宫拉伸的演示

下面举个极端的例子,当我们的背景图片采用的大小刚好满足标准大小时,如果不做九宫格,当需要适配很长的手机,例如我将标准长度扩大为10倍,但宽度不发生变化时,会出现如下的对比图:

image.png

image.png 可以看到,图中整个人物被完全拉伸产生形变,与我们的预期画面不符。 那么下面进行一下九宫格拉伸处理:

image.png 由于仅针对该问题中的情况,因此只涉及到长度拉伸,所以按如上方式设置即可。我们将上面的天空部分,所谓我们的目标拉伸部分。下面再看一下九宫拉伸处理后的游戏图片,同样的宽度不变,长度变为10倍。

image.png 如上图所示,我们的主体部分并为出现形变,只是预计拉伸的部分出现了形变,而这也是我们的目标需求。

其实不仅在白鹭引擎中,在游戏开发常用的unity引擎中也经常会用到,这是一种十分常见的游戏开发图片处理手段。

后记

  • 千古兴亡多少事?悠悠。不尽长江滚滚流。