多種螢幕尺寸與裝置
使用 hyperPad,您可以建立適用於多種裝置與螢幕尺寸的專案。要支援不同裝置,專案分為兩種類型:特定裝置專案與通用專案。
**特定裝置專案:**為您想支援的每個平台建立一個獨立版本。在建立專案時,指定專案適用的單一裝置。例如,如果您只想製作 iPad 遊戲,建立專案時請選擇 ONLY iPad (4:3)。
**通用專案:**使用單一專案支援多種裝置。建立專案時,選取多個目標裝置。這表示同一個專案可以同時在 iPhone 和 iPad 上執行,不必製作兩個獨立版本。
這兩種方式各有優缺點。若專案需要完全掌控螢幕內容,確保特定內容始終可見,採用特定裝置的方式可能較合適。不過,代價是每推出一個新平台,您都必須重新製作遊戲/專案。
通用專案的好處是只需建立一次遊戲或 App。不過,您對螢幕上顯示的內容掌控較少。例如,在較寬的裝置上,可能會看到原本不會注意到的更多內容。hyperPad 提供了一些工具和行為,可控制特定元素,但有時您仍需要完全掌控畫面,此時特定裝置專案會更合適。
本文主要介紹通用專案,因為這類專案需要處理多種長寬比和裝置。若是特定裝置專案,只要確保內容符合畫布上的綠色區域即可。
建立通用專案
建立新專案時,系統會提示您選擇要支援的裝置。預設只會選取 iPad (4:3)。您可以點選其他裝置,啟用對它們的支援。如果選取了多個裝置,您的專案就會被視為「通用專案」。
切換裝置
選取多種支援裝置後,您必須確保專案內容在每種裝置/長寬比下都能完整顯示於螢幕上。
畫布上的綠色矩形區域是可見螢幕範圍。放在可見螢幕範圍內的所有內容,都會在執行專案時顯示。請記得,建立專案時啟用的每種裝置都有各自的可見螢幕範圍。
若要確認內容在每種裝置的可見螢幕範圍內都能完整顯示,請點選工具面板中的切換裝置圖示。
請記得,某些裝置(例如 iPhone)有多種螢幕尺寸和長寬比。如果您要為這些裝置開發專案,並希望支援較舊版本的 iOS,就必須確認內容在該裝置的每個版本上都能正常顯示。因此,如果您選擇 iPhone,就必須確保內容符合 iPhone 4 的螢幕範圍 (3:2),以及 iPhone 5、6、6+ 的螢幕範圍 (16:9)。
為多種裝置設計專案
開發遊戲或 App 時,通常會希望避免為每個專案重新製作所有內容。透過通用專案,您可以運用巧妙的設計方式,減少重複工作的量。
hyperPad 會以所有螢幕尺寸的左下角為起點,並隨著裝置尺寸變大向右上方延伸。只要掌握這點,許多遊戲就能只製作一次。
設計場景時,請讓主要內容符合最小裝置的螢幕範圍,並讓背景符合最大裝置的尺寸。建立專案時,最大尺寸會標示為「設計解析度」。採用這種做法,許多專案就能自動在所有裝置上呈現出色效果。
例如,假設您想製作一款同時適用於 iPhone 和 iPad 的平台遊戲。您可以將主要關卡內容(地面、障礙物等)設計在最小 iPhone 螢幕範圍內(長寬比 16:9),並讓背景符合最大裝置(iPad)的尺寸。在最小的 iPhone 上,遊戲會如您設計的那樣呈現。在較大的裝置上(iPad 4:3 或桌面裝置 16:10),遊戲會在畫面上方顯示更多垂直內容。由於背景符合最大尺寸,因此畫面上總會有內容可見,不會留下空白的黑色區域。
切換不同裝置時,您會注意到可見螢幕範圍的寬度不會改變。hyperPad 使用自訂解析度,讓所有裝置的寬度保持一致。只有高度會改變,因此垂直方向上顯示的內容會增加或減少。
下表列出不同裝置的長寬比與解析度。
| 長寬比 | 圖示 | 裝置 | 設計解析度 |
| 4:3 |
| iPad、iPad Pro | 2048 px x 1536 px |
| 16:9 |
| iPhone 5、iPhone 5S、iPhone 6、iPhone 6 plus、iPhone 6S、iPhone 6S Plus、iPod 第 5 代、iPod 第 6 代 | 2048 px x 1158 px |
| 3:2 |
| iPhone 3GS、iPhone 4、iPhone 4S、iPod 第 4 代 | 2046 px x 1364 px |
| 16:10 |
| 桌上型電腦 | 2048 px x 1280 px |
關於較舊 iPhone 的注意事項(3GS、iPhone 4、4S 和第 4 代 iPod):這些裝置使用 3:2 長寬比。為了讓所有裝置的寬度一致,3:2 裝置的可見螢幕範圍,實際上比機身較大的 iPhone 5、6+(16:9)裝置還要高。如果您想為 iPhone 開發,並支援 iOS 9 或更舊版本,就必須確保專案也符合 3:2 螢幕範圍。
如果您只想支援 iOS 10 或更新版本,就不必擔心內容是否符合 3:2 螢幕範圍。
匯入素材
hyperPad 會自動縮放您的專案,讓它在所有裝置上都呈現出色效果。為了讓專案在各種裝置上維持良好效果,匯入的圖片應一律符合設計解析度。設計解析度以 Retina 尺寸為準,因此匯入圖片時,系統會自動為您產生非 Retina 版本。
例如,若您匯入一張 512x512 像素的圖片,系統會為您建立一張 256x256 像素的圖片。
另外請注意,設計解析度以像素為單位;實際裝置上的尺寸則以點為單位。這表示在 Retina 裝置上,2048x1536 像素實際上等於 1024x768 點。
絕對位置與相對位置
在 hyperPad 中,有兩種物件定位方式:絕對位置和相對位置。絕對位置會將物件放在畫布上的特定像素位置,並以公尺為單位。相對位置則會依據可見螢幕範圍的百分比來放置物件。
使用絕對位置時,物件可能會在較小的裝置上出現在螢幕外。這是因為座標系統不會依裝置而改變(1 公尺在 iPhone、iPad 或其他裝置上都相同)。
使用相對位置時,物件在任何裝置上都會出現在相同的相對位置。因此,如果將物件放在螢幕中央,它在 iPhone、iPad,以及電視或電腦等更大型裝置上都會位於中央。
預設情況下,放在一般圖層上的物件會使用絕對位置,而放在 UI 圖層上的物件則會使用百分比位置。這樣一來,您就不必擔心按鈕、生命值列或搖桿在不同裝置上跑到螢幕外。
下方的 GIF 展示了相對位置的效果。「Tap」標誌和手部使用相對位置,因此在每種裝置上都會維持在中央。
若要變更物件的位置類型,請選取物件,然後在物件屬性中切換至變形頁籤,並點選位置欄位中的「%」圖示。這會將目前的位置轉換為螢幕百分比。
在工具面板中切換支援的裝置時,您可以看到相對定位的物件始終留在可見螢幕範圍內。
若要讓物件完全置中,X 和 Y 位置都應設為 50%。
根據螢幕尺寸執行自訂動作
有時您會希望專案在不同裝置上的外觀或操作略有不同。例如,您可能只想讓 iPad 上有按鈕,而 iPhone 上沒有。
您可以使用「取得螢幕」行為來取得目前螢幕的尺寸,並搭配 IF 行為,在 iPhone 上隱藏按鈕。
在上述範例中,您會使用「取得螢幕」,再將長寬比輸出至 IF 行為,檢查它是否為 iPhone (16:9)。
接著使用「隱藏圖形」行為,在螢幕尺寸為 16:9 時隱藏按鈕。

