Cocos2d-x: Layer und Positionierung

Lesezeit: 5 Minuten

Innerhalb einer Szene organisiere ich den Bildschirmaufbau mittels Layer.

Und für jeden Layer kann dann eine eigene Perspektive definiert werden – damit ist der erste Schritt in Richtung 3D gemacht.

Für meinen Kompass aus dem Blog Mission on Mars: der Kompass lege ich einen eigenen Layer an, der noch andere Navigationselemente bekommen soll.

layerNavControls

Daher erstelle ich folgende Klasse:

Ich leite von LayerColor ab, um die einzelnen Layer im Bildschirm zu kontrollieren:

Color4B(0,255,0,128) ergibt ein volles Grün bei einer Deckkraft von 50%. Die Kompass-Erstellung verschiebe ich aus dem Beispiel des letzten Beitrags in eine eigene Funktion:

Und damit ergibt sich in der HelloWorldScene (init):

Damit erhalte ich eine grüne Hoffnung:

Man beachte links unten den Kompass (nicht ganz vollständig)!

Damit erklären sich die Standardwerte so:

  1. Layer in Cocos2d-x sind (wenn nicht anders angegeben) immer so groß, wie der sichtbare Bereich (_visibleSize)
  2. Innerhalb eines Layers gilt die relative Positionierung: (0/0) ist die linke untere Ecke des Layers
  3. Auch wenn der Layer halbtransparent ist, sind es die Elemente in diesem Layer nicht

Ich muss mich also um ein bisschen was kümmern, um den Kompass an der gewünschten Stelle zu haben. Zum einen möchte ich, dass der Layer so groß wie der Kompass ist und zentriert im Layer platziert ist:

Die Positionierung mag merkwürdig daher kommen, aber da ich vorhabe, weitere Elemente unterhalb des Kompasses anzubringen, berechne ich die Position von der oberen Kante des Layers.

Das Ergebnis wandelt sich:

Nun kann ich in der Scene den Layer entsprechend positionieren, so dass er an der rechten oberen Ecke des Bildschirms seine Zielposition erreicht (in HelloWorld):

Auch hier positioniere ich von oben rechts:

layerMap

Anschließend erstelle ich einen zweiten Layer – nämlich das Element, was meine Karte anzeigen soll:

Analog zu dem Layer mit den Navigationselementen implementiere ich das so:

Dieser Layer ist rötlich eingefärbt, noch mehr transparent als der grüne Navigations-Layer und hat in der Mitte ein simples Sprite positioniert.

Das Sprite bekommt allerdings eine 3D-Position (welche der 2D Position entspricht, da es auf der Tiefe z=0 liegt). Das erkläre ich in späteren Blogs.

Ich packe das der Szene hinzu:

Damit erklären sich auch die Parameter 50 und 30, die ich für die beiden Schichten gewählt habe. Der rote liegt unterhalb des grünen:

Weiterhin bleibe ich flexibel, falls ich weitere Layer einfügen muss – <30 heißt unter den beiden Schichten, 31 – 49 dazwischen, und über 50 bedeutet über beide Schichten.

Mit dem Sprite habe ich noch einiges vor.

gfxTile3D

Zunächst langweilig, später aber von großem Vorteil:

Als simples Sprite implementiert:

Dann brauch ich im layerMap nur zu initialisieren:

Weiterführende Links

Im nächsten Blog positioniere ich eine Kamera und schaue mit das Sprite von einem anderen Blickwinkel an: Cocos2d-x: Kamera – Koordinaten und Blickwinkel

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.