Universal-2D-Spiel Assets und Absolute Knoten Positionierung

Question

Ich habe eine Frage bezüglich Universal-Spiel Vermögen und absolute Positionierung eines SKNodes in Sprite Kit (iOS 8+).

Ich werde versuchen, mein Problem durch ein Beispiel zu präsentieren, wie folgt:

Stellen Sie sich ein 2D-Top-down-Spiel mit einem SKSpriteNode, die ein Haus darstellt. Ein Haus hat mehrere Kinder SKSpriteNode s, die Stühle, Schreibtisch, Sofa stellen usw.

Ich habe 3 Versionen von Haus Asset:

• 1x - 200 x 200px (Non-Retina-iPads),
• 2x - 400 x 400px (Retina iPhones und iPads),
• 3x - 600 x 600px (iPhone 6 plus).

Wichtige: Kinderknoten (Stühle, Schreibtisch, etc.) Positionen in einer .plist-Datei definiert werden. Etwa wie folgt (JSON-Darstellung):

children: [ 
    { 
     position = {20,20}; 
    }, 
    ... 
] 

Da die Position in Punkten und nicht in Bildpunkten definiert ist, alles wie erwartet nach Gerätebildschirm Skala positioniert wird. Für 1x Geräte bleibt die Position {20,20}, für 2x Position {40,40} und für 3x ist die Position ist {60,60}.

Problem:

Das Problem ist, dass 200x200px und 400x400px Vermögenswerte Weg zu klein für iPad-Geräte sind, um ähnlichen Look zu erzielen und auf allen Geräten fühlen.

Frage:

Wie present/Import Vermögenswerte in einer Art und Weise, um erfolgreich die mir ähnlich zu erreichen (wenn nicht gleich) aussehen und sich anfühlen auf allen Geräte/Bildschirmgrößen ermöglichen würde, ohne zu brechen Kinderknotenpositionierung?

Mein nimmt:

Take 1:

ich einfach die vorhandenen 400x400px Vermögen auf Nicht-Retina iPad-Geräte und 600x600px Vermögen auf Retina iPad-Geräte für den Haus Knoten verwenden könnte aber Die Positionierung eines Kindes Knoten würde gebrochen werden. Dies liegt daran, dass der Wert Kind Position nicht und noch {20,20} und {40,40} für iPad-Geräte würde sich ändern, würde jeweils, während das Vermögen größer sein würde.Dies würde ungenaue Kindpositionen relativ zum Hausknoten ergeben.

Take 2:

ich auch den SKScene Größe (Zoom-Effekt) skalieren kann, während der normalen 200x200px und 400x400px großen Vermögen für iPad-Geräte jeweils mit. Dies funktioniert und hält die Positionierung der Kindknoten aufrecht, aber die wiedergegebene Qualität der Szene/des Assets ist nicht so gut, wie es sein sollte. Auch das fühlt sich an wie ein Hack und das wollen wir nicht.

Take 3:

Ich könnte auch doppelt so groß Vermögen für Geräte iPad verwenden und das Doppel Kind-Knoten an der Laufzeitposition. In diesem Fall würde ich ein 400x400px Asset für nicht-Retina iPad-Geräte und ein neues 800x800px Asset für Retina-iPad-Geräte verwenden. Während dies sieht gut aus und hält das Kind Knoten Positionierung arbeiten, scheint es wie eine wirklich große Hack Fixierung während der Laufzeit mit diesem Kind Knotenposition:

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) { 
    position.x *= 2.0f; 
    position.y *= 2.0f; 
} 

---

Danke, dass Sie sich die Zeit nehmen, die Frage zu lesen!

Answer 1

Ich konnte einfach die vorhandenen 400x400px Vermögenswerte auf Nicht-Retina für den Haus Knoten iPad Geräte und 600x600px Vermögenswerte auf Retina iPad-Geräte verwenden, aber die Positionierung eines Kindes Knoten würde gebrochen werden. Dies ist , weil der Wert der untergeordneten Position nicht geändert würde und immer noch {20,20} bzw. {40,40} für iPad-Geräte wäre, während die Assets größer wären. Dies würde ungenaue Kindpositionen relativ zu dem Hausknoten ergeben.

Sie können Ihren Hausknoten (nicht die Szene) einfach auf eine größere Größe skalieren. Alles, was Sie tun müssen, ist, die Waage auf Ihrem Haus auf einen Wert einzustellen, der auf größeren Geräten gut aussieht. Und anstatt auf das iPad zu prüfen, können wir eine Formel erstellen, die den Maßstab abhängig von der Größe des Bildschirms festlegt. Etwas wie der folgende Code sollte funktionieren. Beachten Sie, dass es davon ausgeht, dass Ihr Haus perfekt auf einem iPhone 4 positioniert ist und es konsequent auf alle größeren Bildschirme skaliert. Beachten Sie, dass Sie wirklich jede beliebige Größe als Basisfall auswählen können, aber die Auswahl des kleinsten Bildschirms und die Skalierung sind am einfachsten. Stellen Sie sicher, dass Sie größere Texturen bereitstellen, damit die Texturen beim Skalieren nicht verschwommen werden.

[house setScale:self.scene.size.width/320.0]; 

ODER

könnten Sie zwei Knoten verwenden. Ein Root-Knoten zum Halten der "tatsächlichen" Position und dann ein Bildknoten-Kind zum Anzeigen des Bildes. Auf diese Weise können Sie Ihre Positionsdaten von den angezeigten Daten trennen. Sie können die Größe Ihres Kindbildknotens beliebig ändern und positionieren, ohne die tatsächliche Position des Wurzelknotens zu verändern. Sie könnten diese zusätzlichen Bildknoten-Daten sogar in Ihren JSON aufnehmen.

---

Ich konnte auch die SKScene Größe (Zoom-Effekt) skalieren, während die normalen 200x200px und 400x400px große Vermögen für iPad-Geräte jeweils verwendet wird. Dies funktioniert, und es hält die Positionierung Kindknoten arbeiten, aber die gerenderte Qualität der Szene/Vermögen ist nicht gut, wie es sein sollte. Auch das fühlt sich an wie ein Hack und das wollen wir nicht.

Diese Option kann definitiv funktionieren, wenn Ihre App mit den verschiedenen Seitenverhältnissen in irgendeiner Weise umgehen kann. Sie können beispielsweise das Scrollen der Szene zulassen, wenn die Szene größer als der Gerätebildschirm skaliert ist. Der Qualitätsverlust tritt auf, weil Sie die Texturen größer als ihre erwartete Größe skalieren. Sie müssen größere Texturen bereitstellen, um die Qualität beim Zoomen hoch zu halten. In diesem Fall könnten Sie wahrscheinlich Ihre 600x600 Bilder verwenden (oder vielleicht sogar größer) und sie mit Zoom skalieren lassen. Zum Beispiel skaliere ich in meinem RTS Sprite-Kit-Spiel für OS X die gesamte Szene, damit ich auf allen Geräten dasselbe Aussehen habe. Und ich verliere keine Qualität, weil ich sicher stelle, dass sehr große Texturen zur Verfügung stehen, so dass es beim Skalieren keinen Qualitätsverlust gibt.

---

Ich könnte auch doppelt so groß Vermögen für iPad-Geräte verwenden und die doppelten Kindknoten Position zur Laufzeit. In diesem Fall würde ich eine 400x400px Asset für Nicht-Retina iPad-Geräte und eine neuen 800x800px Asset für Retina iPad-Geräte verwenden. Während dies sieht gut aus und hält das Kind Knoten Positionierung arbeitet, scheint es wie ein wirklich großer Hack Kind Knotenposition während der Laufzeit mit dieser Fixierung:

Dies könnte auch funktionieren, vor allem, wenn Ihr iPad erfordert benutzerdefiniertes Layout. Wenn jedoch möglich vermeiden speziell für die iPad Überprüfung und stattdessen die Bildschirmgröße verwenden, um Layout-Regeln zu erstellen, so dass Ihre Knoten dynamisch auf allen Bildschirmgrößen anpassen konsistent (siehe die Codezeile oben). Manchmal ist das nicht möglich, wenn sich Ihr iPad-Layout stark vom iPhone unterscheidet. In diesem Fall haben Sie keine andere Wahl, als auf das iPad zu prüfen.

---

Alle drei dieser Lösungen sind gut. Ich würde keinen von ihnen als "Hacky" bezeichnen. Sie alle arbeiten für verschiedene Zwecke. Sie müssen die Lösung finden, die am besten für Ihre Spiel funktioniert.

Ich würde auch empfehlen Ihnen, meine zwei Antworten unten. Nicht sicher, aber sie können Ihnen beim Verständnis der universellen Positionierung und Skalierung im Sprite Kit helfen.

https://stackoverflow.com/a/25256339/2158465

https://stackoverflow.com/a/29171224/2158465

Viel Glück mit Ihrem Spiel, lassen Sie mich wissen, wenn Sie Fragen haben.

Answer 2

Mithilfe von Bildassets können Sie auch iPad-Versionen eines Bildes angeben.

Allerdings gibt es nicht wirklich eine Möglichkeit, Ihrer App zusätzliche Logik hinzuzufügen, abhängig davon, ob Sie auf dem iPad laufen oder nicht, und die Position manuell anpassen.

Wir könnten diskutieren, wie man das am besten einbaut: Ich bin kein Fan von diesem "wenn ich nicht dieses Gerät bin" überprüft alle durch den Code. Erstellen Sie eine abstrakte Oberklasse und zwei Unterklassen, wobei jedes Layout (oder wie immer Sie es nennen möchten) für ein Schnittstellen-Idiom verwendet wird. Sie müssen nur einmal überprüfen (wenn Sie diese instanziieren) und Polymorphismus wird sich um den Rest kümmern.

Answer 3

Sie können eine Software wie PaintCode verwenden, um dynamisch eine Textur zu generieren, die perfekt auf Ihre Bedürfnisse zugeschnitten ist.

Alles, was Sie tun müssen, ist die frame Dimensionen für jedes Ihrer Geräte zu definieren.

Answer 4

Es gibt keinen einfachen Weg zu tun, was Sie wollen. Ein Ansatz wäre, eine feste Bildschirmgröße auf Ihren Geräten zu verwenden. Das iPhone 5 den ganzen Weg bis zum iPhone 6+ alle verwenden ein 16: 9-Seitenverhältnis für ihre Bildschirme. Während das iPad und iPhone 4s und früher alle ein 4: 3-Bildseitenverhältnis verwenden.

Bevor Sie GameScene präsentieren, können Sie das Seitenverhältnis des Bildschirms bestimmen und dann eine feste Ansicht Größe, wie dies für 16: 9:

GameScene *startGame = [[GameScene alloc] initWithSize:CGSizeMake(736, 414)]; 
startGame.scaleMode = SKSceneScaleModeAspectFit; 

oder diesen für 4: 3

GameScene *startGame = [[GameScene alloc] initWithSize:CGSizeMake(1024, 768)]; 
startGame.scaleMode = SKSceneScaleModeAspectFit; 

Die genauen Werte spielen keine Rolle, nur die Verhältnisse.

Wenn Sie die genaue Bildschirmgröße kennen, können Sie Objekte genauer platzieren, unabhängig vom iPhone 5-Bildschirm oder 6+ Bildschirm.