Tunneleffekt cocos2d

Ich möchte einen ähnlichen Tunneleffekt in COCOS2D (iOS) erzeugen. Könnte jemand irgendwelche Hinweise vorschlagen?

Siehe Video 1

Siehe Video 2

Bis jetzt habe ich versucht, mehrere ringförmige Sprites mit abnehmender Skalierung in der Mitte auf denselben Punkt zu positionieren und Z für jedes kleinere Sprite ebenfalls abnehmend zu halten.

Wenn Sie es mit CCScaleTo animieren und die Größe mit der Animationsdauer auf 2.0 ändern, kommt es dem in der Referenz gezeigten Tunneleffekt trotzdem nicht nahe.

Danke, Sam

Ich habe die Implementierungsbeschreibung des Autors dieses Effekts gefunden:

Es war sicherlich eine Menge Arbeit, die Tiefenillusion in einer 2D-Ebene zu erzeugen.

Das Prinzip ist jedoch sehr einfach: Kreise beginnen in der Mitte des Bildschirms mit Skala 0. Dann beginnt der erste Kreis des Tunnels proportional zur verstrichenen Zeit zu skalieren (lineare Skalierung funktioniert nicht) und nach einiger Zeit beginnt der zweite Kreis mit der Skalierung , dann die 3. und 4. und so weiter.

Wenn Sie dann den Alpha-Wert für die Kreise proportional verringern (die Kreise ganz hinten haben einen niedrigeren Alpha-Wert als die Kreise vorne, um die Illusion von Unschärfe zu erzeugen), definieren Sie einen Pfad, dem jeder Kreis folgen muss, indem Sie X und Y bewegen Koordinaten davon, dann platzieren Sie ein Raumschiff in der Mitte des Bildschirms. Wenn Sie das Gerät kippen, bewegt sich der Tunnel nach links und rechts, nach oben und unten (aber das erweckt den Eindruck, dass sich das Raumschiff stattdessen bewegt!).

Sobald die Kreise den Bildschirm verlassen, werden sie schnell ausgeblendet und wieder in die Ausgangsposition gebracht (um Speicherplatz zu sparen, muss ich keine neuen Kreise erstellen, sondern verwende dieselben).

Entschuldigung für mein Englisch, aber ich hoffe, das hat die allgemeine Idee erklärt :)

Mit mehreren Ring-Sprites mit abnehmendem Z-Wert und abnehmender Skalierung sind Sie fast fertig. Zentrieren Sie sie einfach nicht alle.

Sie müssen den Punkt verfolgen, an dem der Tunnel den weit entfernten Ereignishorizont erreichen soll. Sie können diesen Punkt im Laufe der Zeit beliebig verschieben.

Wenn Sie dann jedes neue Sprite platzieren, platzieren Sie es an dieser Stelle, skalieren Sie es klein, stellen Sie die Deckkraft ein, wie Sie möchten, und beginnen Sie dann CCSpawnmit CCScaleTound CCFadeTo, zum Beispiel:

sprite->runAction(CCSpawn::create(
    CCScaleTo::create(2.0f, 1.5f),
    CCFadeTo::create(5.0f, 255),
    nullptr));

Erstellen Sie alle Sprites im Voraus und drehen Sie die Sprites im Hintergrund, um sie effizient zu halten.

Ich würde wahrscheinlich versuchen, es mit einer Hintergrundebene und Partikeleffekten zu sortieren. Sie können die Effekte im Particle Designer testen und anschließend in der Backgroung-Ebene abspielen.

Um ehrlich zu sein, glaube ich nicht, dass das Bild mit einer 2D-Kamera gerendert wird. Es sieht so aus, als würde das Spiel mit einem 3D-Rendering-System gerendert. Da Sie jedoch cocos2d verwenden möchten, müssen Sie diese 3D-Transformationsmatrix selbst simulieren. Zunächst eine Idee: Sie wissen, dass in einer 3D-Szene jedes Objekt durch die drei Skalarwerte x, y und z definiert ist. Die einfachste Methode, die Sie verwenden können, ist die von Ihnen vorgeschlagene Skalierung, jedoch nicht die von Ihnen implementierte! ccScaleToführt zu einer linearen Skalierung über die Zeit, die kein 3D-Gefühl erzeugt. Sie können mit der Skalierung des Objekts nach dem Wert von beginnen 1/z. Dies ist irgendwie identisch mit der einfachsten Projektionsmatrix, die Sie sich vorstellen können! Wenn Sie das Gefühl haben, dass Sie das nicht befriedigt, schauen Sie sich modernere und komplexere Projektionsmatrizen an .

Randnotiz: Die Implementierung einer benutzerdefinierten Projektionsmatrix in cocos2D ist etwas schmutzig. Wenn Ihnen der Effekt wirklich nicht gefällt, empfehle ich dringend, Ihre Engine auf eine Engine mit 3D-Unterstützung umzustellen.

Hier ist, wie ich es gemacht habe, in Pseudocode

Tunneleffekt aktivieren:

1. Erstelle ein CCRepeatForever (CCFunc (createCircle))
2. Fügen Sie Ihrer Szene einen Knoten mit dem Namen "ViewNode" hinzu.

createCircle ()

1. Ebene erstellen, Position in der Mitte der Szene. Füge es als Kind zu "ViewNode" hinzu.
2. Aktion ausführen: CCSequence (CCEaseExponentialIn (CCScaleTo), CCRemoveSelf)
3. Legen Sie Sachen in Ihre Ebene, dh Zirkel, Feinde, Raumschiffe, was auch immer.

Kontrolle (mit Parallaxe)

1. Für alle Ebenen mit Tunneleffekt (dh Kinder von ViewNode)
2. Aktualisieren Sie die Ankerposition basierend auf der Berührungsposition.

Die Position ist der Fluchtpunkt. Sie können also keine Ebenen verschieben, ohne den Fluchtpunkt zu verschieben. Wenn Sie jedoch den Ankerpunkt verschieben, scheint sich die Ebene zu verschieben, der Fluchtpunkt bleibt jedoch gleich - dies erzeugt einen Parallaxeeffekt, da das Verschieben von ccp (0.2.0.2) auf einer nahen Ebene (großer Maßstab) mehr Wirkung hat als Bewegen Sie das gleiche auf einer weit entfernten Ebene.

Sie wickeln alles in Ebenen der gleichen Größe ein, um sicherzustellen, dass die Neupositionierung des Ankers in allen Ebenen die gleiche Bewegung erzeugt.