Mit hyperPad können Sie Ihr Projekt für mehrere Geräte und Bildschirmgrößen erstellen. Wenn es darum geht, verschiedene Geräte zu unterstützen, gibt es zwei Arten von Projekten: Geräte-spezifische Projekte und universelle Projekte.

Geräte-spezifische Projekte: Erstellen Sie eine separate Version Ihres Projekts für jede Plattform, die Sie unterstützen möchten. Beim Erstellen Ihres Projekts geben Sie ein einzelnes Gerät für Ihr Projekt an. Wenn Sie beispielsweise nur ein iPad-Spiel erstellen möchten, wählen Sie NUR iPad (4:3), wenn Sie Ihr Projekt erstellen.

Universelle Projekte: Unterstützen Sie mehrere Geräte mit einem einzigen Projekt. Beim Erstellen Ihres Projekts wählen Sie mehr als ein Zielgerät aus. Das bedeutet, dass dasselbe Projekt sowohl auf iPhone als auch auf iPad ohne zusätzliches Erstellen zweier separater Versionen funktioniert.

Es gibt Vor- und Nachteile für beide Ansätze. Für Projekte, die vollständige Kontrolle über den Bildschirm erfordern und was zu jeder Zeit sichtbar sein soll, kann ein gerätespezifischer Ansatz vorteilhaft sein. Dies geschieht jedoch auf Kosten, dass Sie Ihr Spiel/Ihr Projekt für jede neue Plattform neu erstellen müssen.

Der Vorteil von universellen Projekten besteht darin, dass Sie Ihr Spiel oder Ihre App nur einmal erstellen müssen. Sie haben jedoch weniger Kontrolle darüber, was auf dem Bildschirm erscheint. Wenn Sie beispielsweise ein breiteres Gerät haben, sehen Sie möglicherweise mehr Inhalte, die sonst nicht sichtbar wären. hyperPad bietet einige Tools und Verhaltensweisen, um bestimmte Elemente zu steuern, aber manchmal benötigen Sie einfach totale Kontrolle, und ein gerätespezifisches Projekt macht mehr Sinn.

In diesem Artikel werden hauptsächlich universelle Projekte behandelt, da Sie es mit mehreren Seitenverhältnissen und Geräten zu tun haben. Bei gerätespezifischen Projekten ist es so einfach, dass Sie sicherstellen, dass Ihr Inhalt im grünen Bereich auf der Leinwand passt.

Erstellen eines universellen Projekts

Beim Erstellen eines neuen Projekts werden Sie aufgefordert, die Geräte auszuwählen, die Sie unterstützen möchten. Standardmäßig ist nur das iPad (4:3) ausgewählt. Sie können auf die anderen Geräte tippen, um auch die Unterstützung für sie zu aktivieren. Wenn Sie mehr als ein Gerät ausgewählt haben, wird Ihr Projekt als "universelles Projekt" betrachtet.

Geräte durchschalten

Wenn Sie mehrere Geräte auswählen, um sie zu unterstützen, bedeutet dies, dass Sie sicherstellen müssen, dass der Inhalt Ihres Projekts auf jedem Gerät/jedem Seitenverhältnis auf dem Bildschirm passt.

Der grüne rechteckige Bereich auf der Leinwand ist der sichtbare Bildschirmbereich. Alles, was innerhalb des sichtbaren Bildschirmbereichs platziert ist, wird gesehen, wenn Ihr Projekt läuft. Bitte beachten Sie, dass jedes Gerät, das Sie beim Erstellen des Projekts aktiviert haben, seinen eigenen sichtbaren Bildschirmbereich hat.

Um sicherzustellen, dass Ihr Inhalt im sichtbaren Bildschirmbereich für jeden Bereich passt, tippen Sie auf das Gerät durchschalten -Symbol in der Werkzeugpalette.

Denken Sie daran, dass einige Geräte wie das iPhone mehrere Bildschirmgrößen und Seitenverhältnisse haben. Wenn Sie ein Projekt für diese Geräte entwickeln und eine ältere Version von iOS unterstützen möchten, müssen Sie sicherstellen, dass Ihr Inhalt auf jeder Version dieses Geräts funktioniert. Wenn Sie das iPhone auswählen, müssen Sie sicherstellen, dass Ihr Inhalt im Bildschirmbereich des iPhone 4 (3:2) und des iPhone 5, 6, 6+ (16:9) passt.

Gestalten Sie Ihr Projekt für mehrere Geräte

Typischerweise möchten Sie beim Entwickeln eines Spiels oder einer App vermeiden, alles für jedes Projekt neu zu machen. Mit universellen Projekten können Sie durch cleveres Design die Menge an Arbeit minimieren, die Sie erneut erledigen müssen.

hyperPad hat alle Bildschirmgrößen, die von der unteren linken Ecke beginnen, dann nach oben und nach rechts für größere Geräte skalieren. Wenn Sie dies im Hinterkopf behalten, können viele Spiele einmal erstellt werden.

Beim Entwerfen Ihrer Szene sollten Sie darauf achten, dass Ihr Hauptinhalt im kleinsten Gerät passt und Ihr Hintergrund so gestaltet ist, dass er das größte Gerät passt. Bei der Erstellung Ihres Projekts ist die größte Größe als "Designauflösung" gekennzeichnet. Auf diese Weise sehen viele Projekte automatisch auf allen Geräten großartig aus.

Wenn Sie beispielsweise ein Plattformspiel erstellen möchten, das sowohl auf dem iPhone als auch auf dem iPad funktioniert. Sie können die Hauptstufe (Bodenhindernisse usw.) so gestalten, dass sie auf dem kleinsten iPhone-Bildschirm (16:9-Seitenverhältnis) passt, und Ihren Hintergrund so gestalten, dass er das größte Gerät (iPad) erfüllt. Auf dem kleinsten iPhone wird das Spiel genau so angezeigt, wie Sie es entworfen haben. Bei den größeren Geräten (iPad 4:3 oder Desktop 16:10) wird mehr vertikaler Inhalt oben im Spiel angezeigt. Da Sie Ihren Hintergrund an die größte Größe angepasst haben, ist immer etwas sichtbar, und es bleibt kein leerer schwarzer Raum zurück.

Beim Durchschalten durch die verschiedenen Geräte fällt auf, dass sich der sichtbare Bildschirmbereich in der Breite nicht ändert. hyperPad verwendet eine benutzerdefinierte Auflösung, um die Breite aller Geräte konstant zu halten. Nur die Höhe ändert sich und zeigt mehr oder weniger Inhalt vertikal an.

Unten finden Sie eine Tabelle, die die verschiedenen Geräte-Seitenverhältnisse und Auflösungen darstellt.

Seitenverhältnisse	Symbol	Geräte	Designauflösung
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. Generation, iPod 6. Generation	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod 4. Generation	2046 px x 1364 px
16:10		Desktop-Computer	2048 px x 1280 px

Eine Anmerkung zu den älteren iPhones (3GS, iPhone 4, 4S und iPod 4. Generation): Diese Geräte verwenden ein 3:2-Seitenverhältnis. Um die Breite aller Geräte konsistent zu halten, ist der sichtbare Bildschirmbereich für 3:2-Geräte tatsächlich höher als der physisch größere iPhone 5, 6+ (16:9)-Geräte. Wenn Sie für iPhone entwickeln möchten und iOS 9 und niedriger unterstützen möchten, müssen Sie außerdem sicherstellen, dass Ihr Projekt in den 3:2-Bildschirmbereich passt.

Wenn Sie nur iOS10 und neuer unterstützen möchten, müssen Sie sich keine Gedanken darüber machen, ob Ihr Inhalt in den 3:2-Bildschirmbereich passt.

Assets importieren

hyperPad passt Ihr Projekt automatisch an, damit es auf allen Geräten großartig aussieht. Um sicherzustellen, dass Ihr Projekt auf allen Geräten gut aussieht, sollten Sie Ihre Bilder immer so importieren, dass sie innerhalb der Designauflösung passen. Die Designauflösung wird in Retina angegeben, sodass beim Import von Bildern automatisch ein Nicht-Retina-Bild für Sie erstellt wird.

Wenn Sie beispielsweise ein 512x512-Pixel-Bild importieren, wird automatisch ein 256x256-Pixel-Bild für Sie erstellt.

Bitte beachten Sie auch, dass die Designauflösung in Pixeln gemessen wird. Auf dem tatsächlichen Gerät wird alles in Punkten gemessen. Das bedeutet, dass 2048x1536 Pixel tatsächlich 1024x768 Punkte (auf einem Retina-Gerät) sind.

Absolute und relative Position

Es gibt zwei Möglichkeiten, Objekte in hyperPad zu positionieren: absolut und relativ. Absolute Positionen platzieren ein Objekt an einem bestimmten Pixelstandort auf der Leinwand und werden in Metern gemessen. Relative Positionen platzieren Ihr Objekt basierend auf dem Prozentsatz des sichtbaren Bildschirmbereichs.

Mit absoluten Positionen können Ihre Objekte auf kleineren Geräten außerhalb des Bildschirms erscheinen. Dies geschieht, weil das Koordinatensystem nicht basierend auf jedem Gerät ändert (1 Meter ist auf einem iPhone, iPad und was auch immer gleich).

Mit relativen Positionen wird Ihr Objekt immer in derselben relativen Position angezeigt, egal welches Gerät verwendet wird. Wenn Sie Ihr Objekt also in die Mitte Ihres Bildschirms platzieren, wird es sowohl auf dem iPhone, iPad als auch auf größeren Geräten wie einem Fernseher oder Computer in die Mitte gerückt.

Standardmäßig verwendet jedes Objekt, das Sie auf regulären Ebenen platzieren, absolute Positionen, während alles, was auf den UI-Ebenen platziert wird, auf Prozent-basierte Positionen eingestellt ist. Auf diese Weise müssen Sie sich keine Sorgen machen, dass Ihre Schaltflächen, Gesundheitsleisten oder Joysticks auf jedem Gerät außerhalb des Bildschirms erscheinen.

Im GIF unten können Sie den Effekt der relativen Positionen sehen. Die "Tip"-Schilder und die Hand verwenden relative Positionen und bleiben immer in der Mitte für jedes Gerät.

Um den Positionierungstyp Ihres Objekts zu ändern, wählen Sie Ihr Objekt aus und wechseln Sie in den Objekteigenschaften zur Transformieren-Registerkarte und tippen Sie auf das "%"-Symbol im Positionsfeld. Dies verwandelt Ihre aktuelle Position in einen Prozentsatz des Bildschirms.

Wenn Sie durch die unterstützten Geräte von der Werkzeugpalette wechseln, können Sie sehen, dass Ihre relativen Objekte im sichtbaren Bildschirmbereich bleiben.

Um ein Objekt vollkommen zentriert zu halten, sollten die X- und Y-Positionen bei 50 % liegen.

Benutzerdefinierte Aktionen basierend auf der Bildschirmgröße

Manchmal möchten Sie, dass Ihr Projekt für jedes Gerät etwas anders aussieht und sich anders anfühlt. Zum Beispiel möchten Sie, dass eine Schaltfläche nur auf dem iPad verfügbar ist und nicht auf dem iPhone.

Dafür können Sie das Verhalten "Get Screen" verwenden, um die Größe des aktuellen Bildschirms zu ermitteln, und mit einem IF-Verhalten die Schaltfläche auf dem iPhone ausblenden.

Im obigen Beispiel würden Sie Get Screen verwenden, dann das Seitenverhältnis an ein IF-Verhalten ausgeben, das prüft, ob es sich um ein iPhone (16:9) handelt.

Dann verwenden Sie das Verhalten "Graphic ausblenden", um die Schaltfläche auszublenden, wenn die Bildschirmgröße 16:9 beträgt.

Mehrere Bildschirmgrößen und Geräte