Dzięki hyperPad możesz stworzyć swój projekt na wiele urządzeń i rozmiarów ekranów. Jeśli chodzi o wsparcie dla różnych urządzeń, istnieją dwa typy projektów: projekty specyficzne dla urządzeń oraz projekty uniwersalne.

Projekty Specyficzne dla Urządzeń: Stwórz osobną wersję swojego projektu dla każdej platformy, którą chcesz wspierać. Przy tworzeniu projektu wybierasz jedno urządzenie dla swojego projektu. Na przykład, jeśli chcesz zrobić grę tylko na iPada, wybierz TYLKO iPad (4:3) podczas tworzenia projektu.

Projekty Uniwersalne: Wspierają wiele urządzeń w jednym projekcie. Podczas tworzenia projektu wybierz więcej niż jedno docelowe urządzenie. Oznacza to, że ten sam projekt może działać zarówno na iPhonie, jak i na iPadzie, bez konieczności posiadania dwóch oddzielnych wersji.

Oba podejścia mają swoje plusy i minusy. Dla projektów, które wymagają pełnej kontroli nad ekranem i tym, co ma być widoczne w każdej chwili, podejście specyficzne dla urządzenia może być korzystne. Jednak wiąże się to z koniecznością odtworzenia gry/projektu dla każdej nowej platformy.

Korzyścią z projektów uniwersalnych jest to, że musisz stworzyć swoją grę lub aplikację tylko raz. Jednak masz mniej kontroli nad tym, co pojawia się na ekranie. Na przykład na szerszym urządzeniu możesz zobaczyć więcej treści, które w innym przypadku mogłyby być niewidoczne. hyperPad zapewnia pewne narzędzia i zachowania do kontrolowania niektórych elementów, ale czasami po prostu potrzebujesz pełnej kontroli, a projekt specyficzny dla urządzenia ma więcej sensu.

Ten artykuł głównie dotyczy projektów uniwersalnych, ponieważ masz do czynienia z wieloma proporcjami ekranu i urządzeniami. Dla projektów specyficznych dla urządzeń, wystarczy upewnić się, że twoje treści mieszczą się w zielonym obszarze na kanwie.

Tworzenie Projektu Uniwersalnego

Tworząc nowy projekt, zostaniesz poproszony o wybranie urządzeń, które chcesz obsługiwać. Domyślnie wybrany jest tylko iPad (4:3). Możesz stuknąć w inne urządzenia, aby również je włączyć. Jeśli masz wybrane więcej niż jedno urządzenie, twój projekt jest uważany za "Projekt Uniwersalny".

Zmiana Urządzeń

Gdy wybierasz wiele urządzeń do obsługi, oznacza to, że musisz upewnić się, że treść twojego projektu mieści się na ekranie dla każdego urządzenia/proporcji ekranu.

Zielony prostokąt na kanwie to widoczna przestrzeń ekranu. Cokolwiek umieszczone w widocznej przestrzeni ekranu będzie widoczne podczas uruchamiania projektu. Pamiętaj, że każde urządzenie, które włączyłeś przy tworzeniu projektu, ma swoją własną widoczną przestrzeń ekranu.

Aby upewnić się, że twoja treść mieści się w widocznej przestrzeni ekranu dla każdego obszaru, stuknij w ikonę Cycle Device na palecie narzędzi.

Pamiętaj, że niektóre urządzenia, takie jak iPhone, mają wiele rozmiarów ekranów i proporcji. Jeśli rozwijasz projekt na te urządzenia i chcesz wspierać starszą wersję iOS, musisz upewnić się, że twoja treść działa na każdej wersji tego urządzenia. Więc jeśli wybierzesz iPhone, musisz upewnić się, że twoja treść mieści się w przestrzeni ekranowej iPhone 4 (3:2) oraz przestrzeni ekranowej iPhone 5, 6, 6+ (16:9).

Projektowanie swojego projektu dla wielu urządzeń

Typowo, podczas tworzenia gry lub aplikacji, chcesz uniknąć robienia wszystkiego od nowa dla każdego projektu. Dzięki projektom uniwersalnym możesz zastosować sprytne projektowanie, aby zminimalizować ilość pracy, którą musisz wykonać ponownie.

hyperPad zaczyna od najmniejszego rozmiaru ekranu i powiększa w prawo i w górę dla większych urządzeń. Jeśli to zapamiętasz, wiele gier można stworzyć raz.

Projektując swoją scenę, zaprojektuj tak, aby twoje główne treści mieściły się w najmniejszym urządzeniu, a twoje tło, aby pasowało do największego. Podczas tworzenia projektu największy rozmiar jest oznaczony jako "Rozdzielczość Projektowania". Dzięki temu wiele projektów automatycznie wygląda świetnie na wszystkich urządzeniach.

Na przykład, jeśli chcesz stworzyć grę platformową, która działa zarówno na iPhonie, jak i na iPadzie. Możesz zaprojektować główny poziom (przeszkody, ziemia itd.), aby pasował do najmniejszego ekranu iPhone (proporcje 16:9), a następnie mieć swoje tło pasujące do największego urządzenia (iPad). Na najmniejszym iPhonie gra będzie wyglądać dokładnie tak, jak zaprojektowałeś. Na większych urządzeniach (iPad 4:3 lub komputer stacjonarny 16:10), gra pokaże więcej pionowych treści na górze. Ponieważ dostosowałeś swoje tło do największego rozmiaru, zawsze jest coś widocznego i nie zostajesz z pustą czarną przestrzenią.

Przy przełączaniu między różnymi urządzeniami zauważ, że widoczna przestrzeń ekranu nie zmienia się w szerokości. hyperPad korzysta z niestandardowej rozdzielczości, aby utrzymać szerokości na stałym poziomie we wszystkich urządzeniach. Tylko wysokość się zmienia, pokazując więcej lub mniej treści w pionie.

Poniżej znajduje się tabela przedstawiająca różne proporcje i rozdzielczości urządzeń.

Proporcje	Ikona	Urządzenia	Rozdzielczość Projektowania
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. generacji, iPod 6. generacji	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod 4. generacji	2046 px x 1364 px
16:10		Komputery stacjonarne	2048 px x 1280 px

Uwaga dotycząca starszych iPhone'ów (3GS, iPhone 4, 4S i iPod 4. generacji): Te urządzenia wykorzystują proporcję 3:2. Aby zachować spójność szerokości dla wszystkich urządzeń, widoczna przestrzeń ekranu dla urządzeń 3:2 jest w rzeczywistości wyższa niż dla fizycznie większych urządzeń iPhone 5, 6+ (16:9). Jeśli chcesz rozwijać dla iPhone'a i wspierać iOS 9 i niższe, MUSISZ również upewnić się, że twój projekt mieści się w przestrzeni ekranowej 3:2.

Jeśli chcesz wspierać tylko iOS 10 i nowsze, wtedy nie musisz martwić się o to, aby twoja treść mieściła się w przestrzeni ekranowej 3:2.

Importowanie zasobów

hyperPad automatycznie skaluje twój projekt, aby wyglądał świetnie na wszystkich urządzeniach. Aby twój projekt wyglądał dobrze na wszystkich urządzeniach, zawsze powinieneś importować swoje obrazy tak, aby pasowały do Rozdzielczości Projektowania. Rozdzielczość Projektowania wyrażona jest w retina, więc gdy importujesz obrazy, nie-retina obraz zostanie automatycznie wygenerowany dla ciebie.

Na przykład, jeśli importujesz obraz o rozmiarze 512x512 pikseli, obraz o rozmiarze 256x256 pikseli zostanie dla ciebie utworzony.

Pamiętaj również, że rozdzielczość projektowania mierzona jest w pikselach. Na rzeczywistym urządzeniu wszystko mierzy się w punktach. Oznacza to, że 2048x1536 pikseli to w rzeczywistości 1024x768 punktów (na urządzeniu z retiną).

Pozycjonowanie Absolutne i Względne

Istnieją dwa sposoby pozycjonowania obiektów w hyperPad. Pozycjonowanie Absolutne i Względne. Pozycjonowanie Absolutne ustawia obiekt w określonym miejscu pikselowym na kanwie i jest mierzone w metrach. Pozycjonowanie Względne ustawia obiekt na podstawie procentu widocznej przestrzeni ekranu.

Przy pozycjonowaniu absolutnym twoje obiekty mogą pojawić się poza ekranem dla mniejszych urządzeń. Dzieje się tak, ponieważ system współrzędnych nie zmienia się w zależności od każdego urządzenia (1 metr jest taki sam na iPhonie, iPadzie i na każdym innym).

Przy pozycjonowaniu względnym twój obiekt pojawi się w tej samej względnej pozycji niezależnie od urządzenia. Gdy umieścisz obiekt na środku ekranu, będzie on na środku zarówno dla iPhone'a, iPada, jak i każdego większego urządzenia, takiego jak telewizor czy komputer.

Domyślnie, każdy obiekt, który umieszczasz na standardowych warstwach, będzie korzystał z pozycji absolutnych, a wszystko umieszczone na warstwach UI ma ustawione pozycje oparte na procentach. W ten sposób nie musisz się martwić, że twoje przyciski, paski zdrowia czy joysticki będą poza ekranem dla każdego urządzenia.

Na gifach poniżej można zobaczyć efekt pozycjonowania względnego. Znaki "Tap" oraz ręka używają pozycjonowania względnego i zawsze pozostają w centrum każdego urządzenia.

Aby zmienić typ pozycjonowania swojego obiektu, wybierz obiekt i w Właściwościach Obiektu, przełącz na Zakładkę Przekształcanie i stuknij ikonę "%" w polu pozycji. To zamieni aktualną pozycję na procent ekranu.

Jeśli przełączysz się między obsługiwanymi urządzeniami z palety narzędzi, możesz zobaczyć, jak obiekty względne pozostają w widocznej przestrzeni ekranu.

Aby utrzymać obiekt w całkowitym centrum, pozycje X i Y powinny wynosić 50%.

Niestandardowe Akcje w Zależności od Rozmiaru Ekranu

Czasami chcesz, aby twój projekt wyglądał i sprawiał wrażenie nieco innego dla każdego urządzenia. Na przykład, chcesz, aby przycisk był dostępny tylko na iPadzie, a nie na iPhonie.

Dla tego celu możesz użyć zachowania "Get Screen" (Pobierz Ekran), aby określić rozmiar bieżącego ekranu, a z zachowaniem IF sprawdzić, czy ukryć przycisk na iPhonie.

W powyższym przykładzie użyjesz Get Screen, a następnie wyjście proporcji ekranu do zachowania IF, które sprawdza, czy to iPhone (16:9).

Następnie użyj zachowania hide graphic, aby ukryć przycisk, jeśli rozmiar ekranu wynosi 16:9.

Wiele rozmiarów ekranów i urządzeń