|
1 | 1 | ---
|
2 |
| -title: 适配游戏图像到不同的屏幕尺寸 |
3 |
| -brief: 本教程解释了如何适配游戏和图像到不同的屏幕尺寸. |
| 2 | +title: 适配图形以适应不同屏幕尺寸 |
| 3 | +brief: 本手册解释了如何将游戏和图形适配到不同的屏幕尺寸。 |
4 | 4 | ---
|
5 | 5 |
|
6 |
| -# 介绍 |
| 6 | +# 引言 |
7 | 7 |
|
8 |
| -当适配游戏和图像到不同的屏幕尺寸时, 要考虑一些事情: |
| 8 | +在将游戏和图形适配到不同屏幕尺寸时,需要考虑几个方面: |
9 | 9 |
|
10 |
| -* 这是个低分辨率的像素对齐的复古游戏还是高分辨率的现代游戏? |
11 |
| -* 不同屏幕全屏模式下玩的时候游戏应该如何应对? |
12 |
| - * 玩家应该在高分辨率屏幕中看到更多的游戏内容还是图像自适应缩放来显示同样多的内容? |
13 |
| -* 要是屏幕的长宽比跟在game.project中设置的不一样游戏该怎么办? |
14 |
| - * 玩家看到更多的游戏内容? 还是显示黑边? 还是重新调整GUI大小? |
15 |
| -* 你需要什么样的菜单和屏幕gui组件, 他们怎么适应各种屏幕大小与方向? |
16 |
| - * 当屏幕方向改变, 菜单和屏幕gui组件应该改变布局还是不管什么方向都不动? |
| 10 | +* 这是一款具有低分辨率像素完美图形的复古游戏,还是具有高清质量图形的现代游戏? |
| 11 | +* 在不同屏幕尺寸上以全屏模式玩游戏时,游戏应如何表现? |
| 12 | + * 玩家应该在高分辨率屏幕上看到更多游戏内容,还是图形应该自适应缩放以始终显示相同内容? |
| 13 | +* 游戏应如何处理与您在 *game.project* 中设置的宽高比不同的宽高比? |
| 14 | + * 玩家应该看到更多游戏内容?或者应该有黑边?或者调整大小的GUI元素? |
| 15 | +* 您需要什么类型的菜单和屏幕GUI组件,它们应如何适应不同的屏幕尺寸和屏幕方向? |
| 16 | + * 当方向改变时,菜单和其他GUI组件是否应该改变布局,还是无论方向如何都保持相同布局? |
17 | 17 |
|
18 |
| -本教程将探讨这些事情然后提供建议. |
| 18 | +本手册将解决其中一些问题并提出最佳实践。 |
19 | 19 |
|
20 | 20 |
|
21 |
| -## 内容渲染的方法如何改变 |
| 21 | +## 如何更改内容渲染方式 |
22 | 22 |
|
23 |
| -Defold 渲染脚本提供整个渲染流程的控制. 渲染脚本控制着显示什么, 怎么显示以及显示的顺序. 默认渲染脚本总是显示 *game.project* 文件里定义的长, 宽的一块区域, 不管窗口缩放和屏幕大小匹配. 如果窗口大小, 比例改变, 将会造成内容的拉伸. 有些游戏可能能接受, 但通常当屏幕分辨率或比例改变, 应该适当让游戏内容显示的多些或少些, 或者至少在不改变窗口比例的条件下缩放游戏内容. 要改变内容拉伸的现象详情请见 [渲染教程](https://www.defold.com/manuals/render/#默认视口映射). |
| 23 | +Defold渲染脚本为您提供了对整个渲染管道的完全控制。渲染脚本决定了绘制顺序以及绘制内容和方式。渲染脚本的默认行为是始终绘制由*game.project*文件中的宽度和高度定义的相同像素区域,无论窗口是否调整大小或实际屏幕分辨率是否匹配。如果宽高比改变,这将导致内容被拉伸,如果窗口大小改变,内容将被放大或缩小。在某些游戏中,这可能是可以接受的,但更有可能的是,如果屏幕分辨率或宽高比不同,您希望显示更多或更少的游戏内容,或者至少确保在不改变宽高比的情况下缩放内容。默认的拉伸行为可以轻松更改,您可以阅读[渲染手册](https://www.defold.com/manuals/render/#default-view-projection)了解更多关于如何执行此操作的信息。 |
24 | 24 |
|
25 | 25 |
|
26 |
| -## 复古/8比特图像 |
| 26 | +## 复古/8位图形 |
27 | 27 |
|
28 |
| -复古/8比特图像游戏模拟了老式游戏机或者低分辨率低调色盘的电脑游戏. 比如任天堂红白机 (NES) 就是分辨率 256x240 的, Commodore 64 是 320x200 的, Gameboy 是 160x144 的, 这些屏幕分辨率赶不上当前屏幕的零头. 为了在当今高分辨率屏幕上模拟这种风格的游戏需要把屏幕缩放好几倍. 一个简单的方法是先显示低分辨率图像然后再在渲染时放大. 这在Defold中使用渲染脚本就能做到, [固定映射](/manuals/render/#Fixed) 可以设置一个合适的放大值. |
| 28 | +复古/8位图形通常指模拟老式游戏机或计算机图形风格的游戏,具有低分辨率和有限的调色板。例如,任天堂娱乐系统(NES)的屏幕分辨率为256x240,Commodore 64为320x200,Gameboy为160x144,这些都只是现代屏幕尺寸的一小部分。为了使模拟这种图形风格和屏幕分辨率的游戏在现代高分辨率屏幕上可玩,图形必须被放大或缩放数次。实现这一点的一个简单方法是,以您希望模拟的低分辨率和风格绘制所有图形,并在渲染时缩放图形。这可以在Defold中使用渲染脚本和[固定投影](/manuals/render/#fixed-projection)设置为合适的缩放值轻松实现。 |
29 | 29 |
|
30 |
| -比如使用这个瓷砖图源和角色 ([source](https://ansimuz.itch.io/grotto-escape-game-art-pack)) 来模拟一个8位 320x200 分辨率游戏: |
| 30 | +让我们使用这个图块集和玩家角色([来源](https://ansimuz.itch.io/grotto-escape-game-art-pack))来制作一个分辨率为320x200的8位复古游戏: |
31 | 31 |
|
32 | 32 | 
|
33 | 33 |
|
34 | 34 | 
|
35 | 35 |
|
36 |
| -在 *game.project* 文件中设置分辨率 320x200 然后编译, 游戏看起来是这样: |
| 36 | +在*game.project*文件中设置320x200并启动游戏,看起来会是这样: |
37 | 37 |
|
38 | 38 | 
|
39 | 39 |
|
40 |
| -对于现代分辨率屏幕来说窗口也太小了! 把窗口拖动放大到 1280x800 还舒服些: |
| 40 | +在现代高分辨率屏幕上,这个窗口绝对太小了!将窗口大小增加到四倍到1280x800,使其更适合现代屏幕: |
41 | 41 |
|
42 | 42 | 
|
43 | 43 |
|
44 |
| -现在窗口感觉好多了, 我们还需调整图像, 因为太小了难以看清游戏内容. 我们用渲染脚本来设置一个固定放大的映射: |
| 44 | +现在窗口大小更合理了,我们还需要对图形做一些处理。它太小了,很难看清游戏中发生的事情。我们可以使用渲染脚本来设置固定和缩放的投影: |
45 | 45 |
|
46 | 46 | ```Lua
|
47 | 47 | msg.post("@render:", "use_fixed_projection", { zoom = 4 })
|
48 | 48 | ```
|
49 | 49 |
|
50 |
| -结果会变成这样: |
| 50 | +::: sidenote |
| 51 | +相同的结果也可以通过将[相机组件](/manuals/camera/)附加到游戏对象并勾选*正交投影*,将*正交缩放*设置为4.0来实现: |
| 52 | + |
| 53 | + |
| 54 | +::: |
| 55 | + |
| 56 | +这将产生以下结果: |
51 | 57 |
|
52 | 58 | 
|
53 | 59 |
|
54 |
| -好多了. 窗口和图像都可以, 但是仔细看会发现一个明显的问题: |
| 60 | +这样更好。窗口和图形都有合适的大小,但如果我们仔细观察,会发现一个明显的问题: |
55 | 61 |
|
56 | 62 | 
|
57 | 63 |
|
58 |
| -图像模糊了! 因为GPU渲染纹理时放大了图形采样. 默认 *game.project* 文件里 Graphics 部分设置是 *linear*: |
| 64 | +图形看起来模糊了!这是由GPU渲染时从纹理中采样放大的图形的方式引起的。*game.project*文件中Graphics部分下的默认设置是*linear*: |
59 | 65 |
|
60 | 66 | 
|
61 | 67 |
|
62 |
| -现在改成 *nearest* 试试: |
| 68 | +将其更改为*nearest*将得到我们想要的结果: |
63 | 69 |
|
64 | 70 | 
|
65 | 71 |
|
66 | 72 | 
|
67 | 73 |
|
68 |
| -现在我们的游戏图像是像素对齐的了. 还可以想想其他办法, 比如在*game.project*的sprite里关闭 sub-pixels: |
| 74 | +现在我们的复古游戏有了清晰的像素完美图形。还有更多事情需要考虑,例如在*game.project*中禁用精灵的子像素: |
69 | 75 |
|
70 | 76 | 
|
71 | 77 |
|
72 |
| -当Subpixels选项关闭后所有 sprites 就不会渲染在半个像素上而是永远像素对齐. |
| 78 | +当子像素选项被禁用时,精灵将永远不会在半个像素上渲染,而是始终对齐到最近的完整像素。 |
73 | 79 |
|
74 |
| -## 高分辨率图像 |
| 80 | +## 高分辨率图形 |
75 | 81 |
|
76 |
| -处理高分辨率图像我们需要使用复古游戏不同的方法. 做位图时就要做成高分辨率屏幕下 1:1 大小的图. |
| 82 | +处理高分辨率图形时,我们需要采用与复古/8位图形不同的项目设置和内容设置方法。对于位图图形,您需要以这样的方式创建内容,使其在高分辨率屏幕上以1:1比例显示时看起来良好。 |
77 | 83 |
|
78 |
| -同样也需要更改渲染脚本. 这次我们需要按原始比例显示图像: |
| 84 | +就像复古/8位图形一样,您需要更改渲染脚本。在这种情况下,您希望图形随屏幕尺寸缩放,同时保持原始宽高比: |
79 | 85 |
|
80 | 86 | ```Lua
|
81 | 87 | msg.post("@render:", "use_fixed_fit_projection")
|
82 | 88 | ```
|
83 | 89 |
|
84 |
| -这样就确保了游戏像 *game.project* 设置的那样始终显示等比的内容, 如果宽高比与设置不符, 游戏边缘可能会显示出额外的内容. |
| 90 | +这将确保屏幕将调整大小以始终显示与*game.project*文件中指定的相同数量的内容,可能会根据宽高比是否不同而在上方和下方或两侧显示额外内容。 |
85 | 91 |
|
86 |
| -在 *game.project* 文件中可以设置设计时屏幕宽和高. |
| 92 | +您应该在*game.project*文件中将宽度和高度配置为允许您在不缩放的情况下显示游戏内容的尺寸。 |
87 | 93 |
|
88 |
| -### 高分辨率视网膜屏幕 |
| 94 | +### 高DPI设置和视网膜屏幕 |
89 | 95 |
|
90 |
| -想要支持高分辨率视网膜屏幕可以在 *game.project* 文件里打开这个选项: |
| 96 | +如果您还希望支持高分辨率的视网膜屏幕,可以在*game.project*文件的Display部分启用此功能: |
91 | 97 |
|
92 | 98 | 
|
93 | 99 |
|
94 |
| -选中这个选项就打开了高分辨率后台缓冲. 游戏会以设置好的宽高双倍比例渲染, 但是游戏分辨率不变. 也就是说游戏内容是1倍大小的就照常显示. 但是如果内容是双倍大小再在游戏里缩小为1倍的话就是高清渲染了. |
| 100 | +这将在支持高DPI的显示器上创建高DPI的后台缓冲区。游戏将以宽度和高度设置中设置的双倍分辨率渲染,这些设置仍将是脚本和属性中使用的逻辑分辨率。这意味着所有测量值保持不变,任何以1x比例渲染的内容看起来都一样。但是,如果您导入高分辨率图像并将它们缩放到0.5x,它们在屏幕上将是高DPI的。 |
95 | 101 |
|
96 | 102 |
|
97 |
| -## 创建可适配性 GUI |
| 103 | +## 创建自适应GUI |
98 | 104 |
|
99 |
| -系统的 GUI 组件由各种元素组成, 或称作 [节点](/manuals/gui/#节点类型), 虽然看起来很简单却能创造出从按钮到复杂的菜单和弹框等各种界面. GUI 可以设计成自动适配屏幕尺寸和方向的. 比如让节点保持在屏幕顶部, 底部或边上而不改变自身的大小. 也可以设置成对于不同屏幕尺寸和方向自动调整节点关系大小与形态. |
| 105 | +创建GUI组件的系统围绕许多基本构建块或[节点](/manuals/gui/#node-types)构建,虽然看起来可能过于简单,但它可以用来创建从按钮到复杂菜单和弹出窗口的任何内容。您创建的GUI可以配置为自动适应屏幕尺寸和方向的变化。例如,您可以将节点锚定在屏幕的顶部、底部或侧面,节点可以保持其大小或拉伸。节点之间的关系以及它们的大小和外观也可以配置为在屏幕尺寸或方向变化时发生变化。 |
100 | 106 |
|
101 | 107 | ### 节点属性
|
102 | 108 |
|
103 |
| -gui中的节点包含锚点, 横轴纵轴以及一个调整模式. |
| 109 | +GUI中的每个节点都有一个枢轴点、水平和垂直锚点以及调整模式。 |
104 | 110 |
|
105 |
| -* 锚点定义了节点的中心. |
106 |
| -* 锚点模式控制着当屏幕边界或者其父节点边界在适配物理屏幕时拉伸的话, 节点自身在水平和垂直方向位置如何修改. |
107 |
| -* 调整模式控制着当屏幕边界或者其父节点边界在适配物理屏幕时, 节点自身该怎样做. |
| 111 | +* 枢轴点定义节点的中心点。 |
| 112 | +* 锚点模式控制当场景边界或父节点边界被拉伸以适应物理屏幕大小时,节点的垂直和水平位置如何改变。 |
| 113 | +* 调整模式设置控制当场景边界或父节点边界被调整以适应物理屏幕大小时,节点会发生什么变化。 |
108 | 114 |
|
109 |
| -详情请见 [GUI教程](/manuals/gui/#节点属性). |
| 115 | +您可以在[GUI手册](/manuals/gui/#node-properties)中了解更多关于这些属性的信息。 |
110 | 116 |
|
111 | 117 | ### 布局
|
112 | 118 |
|
113 |
| -Defold支持GUI在手机上自动适配屏幕方向. 此功能让你能把GUI设计成适配各种各样屏幕比例和方向的. 也可以用来创建特定设备上的界面布局. 详情请见 [GUI 布局教程](/manuals/gui-layouts/) |
| 119 | +Defold支持GUI在移动设备上自动适应屏幕方向变化。通过使用此功能,您可以设计一个能够适应一系列屏幕尺寸的方向和宽高比的GUI。也可以创建匹配特定设备型号的布局。您可以在[GUI布局手册](/manuals/gui-layouts/)中了解更多关于此系统的信息。 |
114 | 120 |
|
115 | 121 |
|
116 | 122 | ## 测试不同的屏幕尺寸
|
117 | 123 |
|
118 |
| -Debug 菜单有用来模拟特定设备分辨率或者自定义分辨率的选项. 当应用运行时你可以通过选择 <kbd>Debug->Simulate Resolution</kbd> 然后从列表中选择一个模拟设备. 运行中的应用会自动缩放来测试游戏运行在不同分辨率和屏幕比例的设备上的样子. |
| 124 | +调试菜单包含一个选项,用于模拟特定设备型号分辨率或自定义分辨率。当应用程序运行时,您可以选择<kbd>Debug->Simulate Resolution</kbd>并从列表中选择一个设备型号。运行的应用程序窗口将调整大小,您将能够看到您的游戏在不同分辨率或不同宽高比下的外观。 |
119 | 125 |
|
120 |
| - |
| 126 | + |
0 commit comments