Share
In diesem Tutorial lernen Sie die Kombination UIKit Ansichten und die SKTransition Klasse, um schöne, benutzerdefinierte Übergänge zwischen verschiedenen zu erstellen SKSzenen. Weiter lesen!
Illustration des Endergebnisses. Szenen sind Schnittstellen, die mehrere Ansichtsobjekte enthalten. Normalerweise entwerfen Sie mehrere Szenen für jeden Teil Ihres Spiels und verwenden dann nach Bedarf Übergänge zwischen den Szenen. Sie können beispielsweise verschiedene Szenenklassen erstellen, um eines oder alle der folgenden Konzepte darzustellen:
Wie Sie sehen, kann eine Szene alles sein, was der Programmierer erstellen möchte. Normalerweise wechseln Sie zu einer neuen Szene, die auf Spielzielen oder direkten Benutzereingaben basiert. Wenn zum Beispiel der Timer abgelaufen ist, kann eine neue Szene präsentiert werden, die ein "Spiel vorbei" darstellt. Wenn ein Benutzer eine Optionstaste drückt, können Sie alternativ zu einer neuen Szene wechseln, um die Spieleinstellungen zu konfigurieren. Beachten Sie, dass beim Übergang die Szeneneigenschaft sofort aktualisiert wird, um auf die neue Szene zu zeigen. Danach erfolgt der Übergang.
Ein Übergang kann auch ein Übergangsobjekt (einen Effekt oder eine Animation) haben. Dieses Objekt erzeugt eine dynamische, schöne Präsentation, wenn der Übergang erfolgt. Es gibt mehrere Objekte, und für eine vollständige und offizielle Referenz sollten Sie die Klassenreferenz von SKTransition konsultieren.
Das SKTransition In der Klasse werden mehrere Methoden und zwei Eigenschaften vorgestellt (dazu später mehr). Ziel aller Methoden ist es, einen glänzenden und dynamischen Übergang zwischen den Szenen zu schaffen. Die Klassenmethoden können in vier Hauptabschnitte unterteilt werden:
Accentsconagua
UIColor Objekt, um den inhärenten Übergang zu färben.Dauer und Farbe sind einfache Objekte, aber beides Richtung und CIFilter sind nicht.
Wie der Name schon sagt, bedeutet die direction-Eigenschaft, dass der Übergang in eine bestimmte Richtung erfolgt. Die direction -Eigenschaft kann eine von vier Konstanten haben. Diese Konstanten werden als deklariert NS_ENUM, so was:
typedef NS_ENUM (NSInteger, SKTransitionDirection) SKTransitionDirectionUp, SKTransitionDirectionDown, SKTransitionDirectionRight, SKTransitionDirectionLeft,;
CIFilter ist noch robuster als Richtung da es sich auch um eine Referenzklasse mit Klassenmethoden, Instanzmethoden und Eigenschaften handelt. Dieses Tutorial behandelt nicht die CIFilter Klasse ausführlich, aber es zeigt ein Beispiel, wie man einen benutzerdefinierten Filter und den zugehörigen Filter erstellt SKTransition. Ein zusätzlicher Hinweis zum CIFilter Klasse: Es unterstützt Dutzende von Effekten, aber nicht alle werden von der neuesten Version von iOS unterstützt. Informationen zur Kompatibilitätsliste finden Sie in der Core Image Filter Reference.
Beachten Sie, dass Sie mehrere "gruppierte Methoden" verwenden können, um eine SKTransiton. Aber woher wissen Sie, welche miteinander kombiniert werden können? Dazu müssen Sie sich die Methodensignatur ansehen und die von jeder Methode akzeptierten Eigenschaften ermitteln.
Lassen Sie uns zum Beispiel drei Methoden analysieren, um zu sehen, was mit ihnen umgehen kann:
doorOpenVerticalWithDuration:fadeWithColor: Dauer:einblendenWithDirection: Dauer:Wie bereits erwähnt, können Sie anhand der Methodennamen schnell erkennen, was jede Methode bewirken kann. Um zu erarbeiten, die doorOpenVerticalWithDuration: Die Methode berücksichtigt nur eine Dauer fadeWithColor: Dauer: Die Methode verwendet sowohl eine Farbe als auch eine Dauer. Sie müssen zuerst ein definieren UIColor Objekt und dann eine Zeitdauer. Das einblendenWithDirection: Dauer: Die Methode verwendet nur eine Richtung, die wiederum eine von vier Eigenschaften sein kann. Beachten Sie, dass Sie das auch erweitern können SKTransition Klasse, um benutzerdefinierte Übergänge zu erstellen und zu verbinden Dauer, Farbe, Richtung, und CIFilter.
Das SKTransition Klasse hat nur zwei Eigenschaften: pausesIncomingScene und pausesOutgoingScene. Beide konfigurieren, ob Animationen während des Übergangs abgespielt werden und beide Eigenschaften Boolean Werte. Der Unterschied ist wie folgt:
pausesIncomingScene legt fest, ob die eingehende Szene während des Übergangs angehalten wird.pausesOutgoingScene legt fest, ob die ausgehende Szene während des Übergangs angehalten wird.Da sind beide Boolean Werte ist die Definition einfach und kann im nächsten Snippet verstanden werden:
// anderer Code… transitionCrossFade = [SKTransition crossFadeWithDuration: 1]; transitionCrossFade.pausesIncomingScene = TRUE; transitionDoorsCloseHorizontal = [SKTransition doorsCloseHorizontalWithDuration: 2]; transitionDoorsCloseHorizontal.pausesOutgoingScene = FALSE;
Das pausesIncomingScene und pausesOutgoingScene Die Eigenschaften des Übergangsobjekts legen fest, welche Animationen während des Übergangs abgespielt werden. Standardmäßig verarbeiten beide Szenen die Animation während des Übergangs weiter. Möglicherweise möchten Sie jedoch eine oder beide Szenen anhalten, bis der Übergang abgeschlossen ist.
Nun kennen Sie die Grundlagen der SKTransition Klasse können Sie nun die Programmierphase starten.
Der erste Schritt ist das Öffnen von Xcode und das Starten eines neuen SpriteKit Projekt. Als nächstes sollten Sie eine weitere hinzufügen Ziel c Klasse benannt TransitionResult und eine Superklasse von SKScene.
Das Ziel dieses Projekts ist es, zwei Klassen zu haben, die zwischen ihnen ausgetauscht werden. Der Erste (Meine Szene bereits im Xcode definiert) enthält a UITableView das wird den Verweis auf jeden halten SKTransition. Der Zweite (TransitionResult) wird die Zielszene nach einem Übergang sein.
Wenn der Benutzer nach einer Überblendung auf den Bildschirm tippt, wird er erneut zu übertragen Meine Szene.
Im MyScene.h, Sie werden 3 Objekte deklarieren: a UITableView, UISlider, und ein NSArray. Das UITableView zeigt die Namen der einzelnen Übergänge an UISlider wird das definieren Dauer dieses Übergangs und die NSArray enthält die Namen von jedem SKTransition. Die endgültige MyScene.h Code wird diesem Snippet ähnlich sein:
@ property (keep, nonatomic) IBOutlet UITableView * tableView; @ property (nichtatomisch, beibehalten) IBOutlet UISlider * sliderTimer; @ property (strong, nonatomic) NSArray * ÜbergängeArray;
Konzentrieren Sie sich jetzt auf die Meine Szene Implementierungsdatei.
Der erste Schritt ist die Verwendung der -(id) initWithSize: (CGSize) -Größe Methode zum Initialisieren der zuvor genannten Objekte. Eine mögliche Konfigurationseinstellung ist folgende:
_tableView = [[UITableView-Zuordnung] initWithFrame: CGRectMake (CGRectGetMinX (self.frame), CGRectGetMinY (self.frame) +20, CGRectGetMaxX (self.frame), CGRectGetMaxY (self.frame) -8080)); _tableView.dataSource = selbst; _tableView.delegate = self; _sliderTimer = [[UISlider-Zuordnung] initWithFrame: CGRectMake (CGRectGetMidX (self.frame) -70, CGRectGetMaxY (self.frame) -40, 140, 3)]; [_sliderTimer addTarget: Eigenaktion: @selector (sliderAction) forControlEvents: UIControlEventValueChanged]; [_sliderTimer setBackgroundColor: [UIColor clearColor]]; _sliderTimer.minimumValue = 1; _sliderTimer.maximumValue = 4; _sliderTimer.continuous = YES; _sliderTimer.value = 1; _transitionsArray = [[NSArray alloc] initWithObjects: @ "crossFadeWithDuration" @ "doorsCloseHorizontalWithDuration" @ "doorsCloseVerticalWithDuration" @ "doorsOpenHorizontalWithDuration" @ "doorsOpenVerticalWithDuration" @ "doorwayWithDuration" @ "fadeWithColor: Dauer", @ "fadeWithDuration" , @ "flipHorizontalWithDuration", @ "flipVerticalWithDuration", @ "moveInWithDirectionDown: duration", @ "moveInWithDirectionUp: duration", @ "moveInWithDirectionLeft: duration", @ "moveInWithDirectionRight: duration", @ "pushWhreunrundrow: duration" duration ", @" transitionWithCIFilter: duration ", nil];
Eine Warnung wird jedoch seit dem angezeigt sliderAction wird vermisst. Die Methode aktualisiert in Echtzeit die transitionTimerText unter Berücksichtigung der UISlider Wert.
-(void) sliderAction transitionTimerText.text = [[NSString-Zuordnung] initWithFormat: @ "Übergangsdauer:% f", _sliderTimer.value];
Beachten Sie, dass Ansichten, Ort, Konfiguration und Layout vollständig konfiguriert werden können. Wenn Sie möchten, können Sie dies auf Ihre Interessen abstimmen. Zusätzlich fügen Sie ein SKLabelNode speichern und anzeigen UISlider Wert. Dieser Wert ist repräsentativ für die SKTransition Duration Auswirkungen. Ergänzen Sie die SKLabelNode * transitionTimerText In Ihre Implementierungsdatei und die entsprechende Initialisierung lautet:
transitionTimerText = [SKLabelNode labelNodeWithFontNamed: @ "Chalkduster"]; transitionTimerText.text = [[NSString-Zuordnung] initWithFormat: @ "Übergangsdauer:% f", _sliderTimer.value]; transitionTimerText.fontSize = 10; transitionTimerText.color = [SKColor colorWithRed: 0 Grün: 0 Blau: 0 Alpha: 1]; transitionTimerText.position = CGPointMake (CGRectGetMidX (self.frame), CGRectGetMinY (self.frame) +45);
Nachdem Sie nun die Objekte konfiguriert haben, müssen Sie sie nur noch zur Szene hinzufügen. Dafür verwenden Sie die -(void) didMoveToView: (SKView *) - Ansicht Methode. Fügen Sie es Ihrer Datei hinzu und fügen Sie die zuvor genannten Ansichten der Hauptansicht hinzu:
-(void) didMoveToView: (SKView *) view [self addChild: transitionTimerText]; [self.scene.view addSubview: _sliderTimer]; [self.scene.view addSubview: _tableView];
Wenn Sie das Projekt jetzt ausführen, sehen Sie zwei Objekte auf dem Bildschirm: a UISlider und ein SKLabelNode.
Der nächste Schritt ist die Anzeige der SKTransition Methoden in der UITableView. Dazu müssen Sie Ihre MyScene.h Datei und erweitern Sie Ihre Klasse mit der MyScene.h sollte so aussehen:
@Interface MyScene: SKScene
Gehen Sie zurück zur Implementierungsdatei und Sie erhalten eine Warnung. Diese Warnung besagt, dass Sie zusätzliche Methoden implementieren müssen UITableView. Die erforderlichen Methoden sind: -(NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) Abschnitt und -(UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath. Die erste gibt die Anzahl der Zeilen in der Tabelle zurück, während die zweite die Logik für jede Zelle in der Tabelle behandelt. Für zusätzliche Hinweise zur UITableView Klasse, sollten Sie die offizielle Referenzklasse konsultieren.
Die erste Methode ist einfach und besteht nur aus einer einzigen Zeile:
-(NSInteger) tableView: (UITableView *) tableView numberOfRowsInSection: (NSInteger) Abschnitt return [_transitionsArray count];
Die zweite Methode ist komplexer, da die Eigenschaften und Konfigurationen der Tabellenzellen (Zellinhalte) definiert werden müssen. In diesem Beispiel verwenden Sie eine einfache UITableViewCellStyleSubtitle. Wenn Sie Probleme beim Schreiben der Methode haben, wird die Vollversion unten angezeigt:
-(UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath NSString * transitions = [_transitionsArray objectAtIndex: indexPath.row]; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: @ "Bezeichner"]; if (cell == nil) cell = [[UITableViewCell-Zuordnung] initWithStyle: UITableViewCellStyleSubtitle reuseIdentifier: @ "Identifier"]; [cell.textLabel setText: Übergänge]; zurück Zelle;
Führen Sie Ihren Code jetzt aus und Sie sollten jede Zellenzeile mit einem eindeutigen Namen sehen. Jeder Name steht für das Inhärente SKTransiton Wird verwendet, wenn der Benutzer diese Zelle antippt. Sie werden auch feststellen, dass die UITableView hat keinen Titel Lass uns das reparieren!
Fügen Sie die folgende Methode hinzu: - (NSString *) tableView: (UITableView *) tableView titleForHeaderInSection: (NSInteger) Abschnitt. Fügen Sie innerhalb dieser Methode den folgenden Code hinzu:
NSString * sectionName; switch (section) case 0: sectionName = NSLocalizedString (@ "SKTransition-Liste"), @ "SKTransition-Liste"); brechen; Voreinstellung: sectionName = @ ""; brechen; return sectionName;
Diese Methode darf mehrere Titel für mehrere Titel haben UITableView Abschnitte. Wir haben jedoch nur einen Abschnitt, daher lautet der Titel "SKTransition List" (oder eine andere Ihrer Wahl)..
An diesem Punkt müssen Sie den Zellen Benutzerinteraktion hinzufügen. Dazu ist eine weitere zusätzliche Methode erforderlich. Diesmal die -(void) tableView: (UITableView *) tableView didSelectRowAtIndexPath: (NSIndexPath *) indexPath Methode sollte aufgerufen werden. Diese Methode ist lang, aber einfach zu verstehen. Sie werden für jedes die erforderlichen Ressourcen zuweisen SKTransition und basierend auf der angezapften Zelle werden Sie eine andere präsentieren SKScene.
Der erste Schritt ist das Importieren der TransitionResult Header-Datei, dann definieren Sie eine TransitionResult Objekt für das Ergebnis SKScene. Sehen Sie sich Folgendes an, um dies in Aktion zu sehen:
TransitionResult * transitionResult; SKTransition * transitionCrossFade; SKTransition * transitionDoorsCloseHorizontal; SKTransition * transitionDoorsCloseVertical; SKTransition * transitiondoorsOpenHorizontal; SKTransition * transitionDoorsOpenVertical; SKTransition * transitionDoorway; SKTransition * transitionFadeWithColor; SKTransition * transitionFadeWithDuration; SKTransition * transitionFlipHorizontal; SKTransition * transitionFlipVertical; SKTransition * transitionMoveInWithDirectionDown; SKTransition * transitionMoveInWithDirectionUp; SKTransition * transitionMoveInWithDirectionLeft; SKTransition * transitionMoveInWithDirectionRight; SKTransition * transitionPushWithDirection; SKTransition * transitionRevealWithDirectionUp; SKTransition * transitionWithCIFilter;
Jetzt in der -(void) tableView: (UITableView *) tableView didSelectRowAtIndexPath: (NSIndexPath *) indexPath Methode ist es Zeit, die erforderlichen Ressourcen zuzuweisen. Der vollständige Code lautet:
transitionCrossFade = [SKTransition crossFadeWithDuration: _sliderTimer.value]; transitionCrossFade.pausesIncomingScene = TRUE; transitionDoorsCloseHorizontal = [SKTransition doorsCloseHorizontalWithDuration: _sliderTimer.value]; transitionDoorsCloseHorizontal.pausesOutgoingScene = FALSE; transitionDoorsCloseVertical = [SKTransition doorsCloseVerticalWithDuration: _sliderTimer.value]; transitiondoorsOpenHorizontal = [SKTransition doorsOpenHorizontalWithDuration: _sliderTimer.value]; transitionDoorsOpenVertical = [SKTransition doorsOpenVerticalWithDuration: _sliderTimer.value]; transitionDoorway = [SKTransition doorwayWithDuration: _sliderTimer.value]; transitionFadeWithColor = [SKTransition fadeWithColor: [UIColor yellowColor] Dauer: _sliderTimer.value]; transitionFadeWithDuration = [SKTransition fadeWithDuration: _sliderTimer.value]; transitionFlipHorizontal = [SKTransition flipHorizontalWithDuration: _sliderTimer.value]; transitionFlipVertical = [SKTransition flipVerticalWithDuration: _sliderTimer.value]; transitionMoveInWithDirectionDown = [SKTransition moveInWithDirection: SKTransitionDirectionDown duration: _sliderTimer.value]; transitionMoveInWithDirectionUp = [SKTransition moveInWithDirection: SKTransitionDirectionUp duration: _sliderTimer.value]; transitionMoveInWithDirectionLeft = [SKTransition moveInWithDirection: SKTransitionDirectionLeft duration: _sliderTimer.value]; transitionMoveInWithDirectionRight = [SKTransition moveInWithDirection: SKTransitionDirectionRight duration: _sliderTimer.value]; transitionPushWithDirection = [SKTransition pushWithDirection: SKTransitionDirectionDown duration: _sliderTimer.value]; transitionRevealWithDirectionUp = [SKTransition enthülltWithDirection: SKTransitionDirectionUp duration: _sliderTimer.value]; CGRect screenRect = [[UIScreen mainScreen] Grenzen]; CIVector * Ausdehnung = [CIVector vectorWithX: 0 Y: 0 Z: screenRect.size.width W: screenRect.size.height]; transitionWithCIFilter = [SKTransition transitionWithCIFilter: [CIFilter filterWithName: @ "CIFlashTransition" keysAndValues: @ "inputExtent", umfang, @ "inputCenter", [CIVector vectorWithX: 0,3 * screenRect.width.: Y. @ "inputColor", [CIColor colorWithRed: 1,0 grün: 0,8 blau: 0,6 alpha: 1], @ "inputMaxStriationRadius", @ 2,5, @ "inputStriationStrength", @ 0,5, @ "inputStriationContrast", @ 1.37, @ "inputFadeThreshold", @ 0,85, null] duration: _sliderTimer.value]; transitionResult = [[TransitionResult-Zuordnung] initWithSize: CGSizeMake (CGRectGetMaxX (self.frame), CGRectGetMaxY (self.frame))]; switch (indexPath.row) Fall 0: [self.scene.view presentScene: transitionResult Übergang: transitionCrossFade]; [self removeUIKitViews]; brechen; Fall 1: [self.scene.view presentScene: transitionResult Übergang: transitionDoorsCloseHorizontal]; [self removeUIKitViews]; brechen; Fall 2: [self.scene.view presentScene: transitionResult Übergang: transitionDoorsCloseVertical]; [self removeUIKitViews]; brechen; Fall 3: [self.scene.view presentScene: transitionResult Übergang: transitiondoorsOpenHorizontal]; [self removeUIKitViews]; brechen; Fall 4: [self.scene.view presentScene: transitionResult Übergang: transitionDoorsOpenVertical]; [self removeUIKitViews]; brechen; Fall 5: [self.scene.view presentScene: transitionResult Übergang: transitionDoorway]; [self removeUIKitViews]; brechen; Fall 6: [self.scene.view presentScene: ÜbergangResult Übergang: ÜbergangFadeWithColor]; [self removeUIKitViews]; brechen; Fall 7: [self.scene.view presentScene: ÜbergangResult Übergang: ÜbergangFadeWithDuration]; [self removeUIKitViews]; brechen; Fall 8: [self.scene.view presentScene: transitionResult Übergang: transitionFlipHorizontal]; [self removeUIKitViews]; brechen; Fall 9: [self.scene.view presentScene: transitionResult Übergang: transitionFlipVertical]; [self removeUIKitViews]; brechen; Fall 10: [self.scene.view presentScene: transitionResult Übergang: transitionMoveInWithDirectionDown]; [self removeUIKitViews]; brechen; Fall 11: [self.scene.view presentScene: transitionResult Übergang: transitionMoveInWithDirectionUp]; [self removeUIKitViews]; brechen; Fall 12: [self.scene.view presentScene: transitionResult Übergang: transitionMoveInWithDirectionLeft]; [self removeUIKitViews]; brechen; Fall 13: [self.scene.view presentScene: transitionResult Übergang: transitionMoveInWithDirectionRight]; [self removeUIKitViews]; brechen; Fall 14: [self.scene.view presentScene: transitionResult Übergang: transitionPushWithDirection]; [self removeUIKitViews]; brechen; Fall 15: [self.scene.view presentScene: transitionResult Übergang: transitionRevealWithDirectionUp]; [self removeUIKitViews]; brechen; Fall 16: [self.scene.view presentScene: transitionResult Übergang: transitionWithCIFilter]; [self removeUIKitViews]; brechen; Standard: Pause;
Sie erhalten eine Warnung, dass eine Methode (removeUIKitViews) wird vermisst. Diese Methode ist ein einfacher Aufruf, um einige Ansichten aus der übergeordneten und Super-Ansicht zu entfernen. Der vereinfachte Code lautet:
-(void) removeUIKitViews [transitionTimerText removeFromParent]; [_tableView removeFromSuperview]; [_sliderTimer removeFromSuperview];
Nun zu einigen Anmerkungen zum -(void) tableView: (UITableView *) tableView didSelectRowAtIndexPath: (NSIndexPath *) indexPath Methode.
SKTransition Die Übergangsinitialisierung ähnelt allen Übergängen.Dauer die zeit wird durch die definiert UISlider Wert.Um den Code auszuführen und die Übergänge zu testen, müssen Sie das mit füllen TransitionResult Klasse. Bewegen Sie diese Klasse und fügen Sie das hinzu -(id) initWithSize: (CGSize) -Größe Methode. Es ist dem ähnlich MyScene.m Methode. Sie können versuchen, es selbst zu schreiben. Kopieren und Einfügen aus der anderen Klasse, damit es wie die nächste Methode aussieht:
-(id) initWithSize: (CGSize) size if (self = [super initWithSize: size]) self.backgroundColor = [SKColor colorWithRed: 0,35 grün: 0,45 blau: 0,23 alpha: 1,0]; SKLabelNode * myLabel = [SKLabelNode labelNodeWithFontNamed: @ "Chalkduster"]; myLabel.text = @ "Tippen Sie auf" zurück "; myLabel.fontSize = 15; myLabel.position = CGPointMake (CGRectGetMidX (self.frame), CGRectGetMidY (self.frame)); [self addChild: myLabel]; return self;
Sie können jetzt den Code ausführen und die Übergänge testen. Probiere sie aus!
Wie Sie vielleicht bereits bemerkt haben, müssen Sie den Code jedes Mal, wenn Sie einen neuen Übergang testen möchten, erneut ausführen. Also, lass uns das ändern TransitionResult.m Datei, die eine unendliche Navigation ermöglicht. Jedes Mal, wenn der Benutzer auf den Bildschirm tippt, wird er in die Ausgangsszene verschoben.
Sie werden das brauchen -(void) touchesBegan: (NSSet *) berührt das Ereignis withEvent: (UIEvent *) Methode und Sie müssen die importieren MyScene.h Klasse. Der letzte Schritt besteht darin, ein Klassenobjekt zuzuweisen und zu initiieren und die Szenen auszutauschen. Das nächste Snippet hilft Ihnen dabei:
-(void) touchesBegan: (NSSet *) berührt withEvent: (UIEvent *) - Ereignis MyScene * home = [[MyScene-Zuordnung] initWithSize: CGSizeMake (CGRectGetMaxX (self.frame), CGRectGetMaxY (self.frame))) [self.scene.view presentScene: home];
Führen Sie schließlich Ihr Programm aus und testen Sie alles SKTransitions. Das nächste Bild zeigt einen der Übergänge:
Im Verlauf dieses SKTransition In diesem Tutorial haben wir Folgendes behandelt:
SKTransition Klasse.SKTransition Optionen.SKTransition Eigenschaften.UITableView und UISlider und verwenden Sie sie parallel zum Sprite Kit.Wenn Sie Fragen oder Anmerkungen haben, können Sie diese gerne unten angeben!
