Sprite-Animation in Android mit OpenGL ES

Wie mache ich eine Sprite-Animation in Android mit OpenGL ES?

Was habe ich getan :

Jetzt kann ich ein Rechteck zeichnen und meine Textur (Spritesheet) darauf anwenden

Was ich wissen muss:

Jetzt zeigt das Rechteck das gesamte Sprite-Blatt als Ganzes. So zeigen Sie jeweils eine einzelne Aktion aus dem Sprite-Blatt an und erstellen die Animation

Es ist sehr hilfreich, wenn jemand Ideen, Links zu Tutorials und Vorschlägen teilen kann.

Fortgeschrittener Dank an alle

AndEngine bietet eine gute Möglichkeit, animierte Sprites zu zeichnen. Es gibt eine Klasse, AnimatedSpritedie viel Arbeit für Sie erledigt. Hier sind die Schritte:

1. Bekommen das BitMapTextureAtlas

bitmapTextureAtlas = new BuildableBitmapTextureAtlas(getTextureManager(), 480, 200, TextureOptions.NEAREST);

2. Holen Sie sich das TiledTextureRegionfür Ihr Spirtesheet

yourTextureRegion = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(bitmapTextureAtlas, context, "yourspritesheet.png", /*sprite rows*/, /*sprite columns*/);

3.Erstellen Sie das AnimatedSpriteund fügen Sie es der Szene hinzu

AnimatedSprite yourSprite = new AnimatedSprite(40, 40, yourTextureRegion, this.getVertexBufferObjectManager());
yourSprite.animate(100);
yourScene.attachChild(yourSprite); /**attach this spirte to the scene**/

Weitere Informationen finden Sie unter: https://github.com/nicolasgramlich/AndEngineExamples

Der optimierte Weg wäre, eine Textur mit allen Schritten in Ihrer Animation zu haben, wie z. B. Filmrahmen. Da es sich um eine Textur handelt, hat jeder Frame Anfangskoordinaten und eine gemeinsame Framebreite und -höhe. Zeichnen Sie ein Quad und ändern Sie die UV-Koordinaten des Quad so, dass sie dem Rahmen entsprechen, den Sie in der Textur zeichnen möchten. Marco Martilleni wies auf ein gutes Tutorial hin.

Sie müssen Ihre UV-Koordinaten anpassen. Sie möchten, dass das UV-Bild oben links der Position auf dem Sprite-Blatt entspricht. Angenommen, Ihr Sprite-Blatt ist 256 x 256 Pixel groß und der gewünschte Frame beginnt bei (32, 32).

Sie können sich die UVs als Prozentsatz des Bildes vorstellen. Der horizontale Prozentsatz beträgt 32/256. (12,5% des Blattes), daher sollte das u für die linken Eckpunkte 0,125 betragen.

Das u für die rechten Eckpunkte hängt davon ab, wie groß jeder Frame ist. Sagen wir 16x16. Dann wären die beiden rechten Eckpunkte (32 + 16) / 256 oder 0,1875 des Blattes.

jetzt zu den v's. 0 ist unten und die Rahmenposition wird von oben definiert. 32/256 würde uns einen Prozentsatz vom unteren Rand des Bildes geben. Was wir brauchen, ist (256-32) / 256, um den Prozentsatz von der Unterseite des Blattes bis zur Oberseite des Bildes zu erhalten - 0,875 (yay!)

Die unteren Scheitelpunkte sind ein zusätzlicher Abstand von der Oberseite der Rahmengröße. Also (256-32-16) / 256 oder 0,8125.

Um es noch einmal zusammenzufassen: Die UV-Koordinaten für jeden Scheitelpunkt sind:

top left : (frame.x / sheet.w , (sheet.h - frame.y) / sheet.h)
bottom left:(frame.x / sheet.w , (sheet.h - frame.y - frame.h) / sheet.h)
top right: ((frame.x + frame.w) / sheet.w , (sheet.h - frame.y) / sheet.h)
bottom right: ((frame.x + frame.w) / sheet.w , (sheet.h - frame.y - frame.h) / sheet.h)

Dabei ist x = x-Position, y = y-Position, w = Breite, h = Höhe, alle in Pixel

Wenn Sie irgendwo einen Fehler sehen, weisen Sie bitte darauf hin. Ich bin gerade dabei, dies für meinen Motor zu implementieren, und die Erklärung hat mir geholfen, es herauszufinden.

Mit diesen Informationen sollten Sie in der Lage sein, eine Renderfunktion zu erstellen, die einige dieser Parameter verwendet und einen Unterabschnitt des Bildes zeichnet. Anschließend können Sie die Bildpositionen bei jedem Animationsschritt ändern, um das Bild zu animieren.

Sie müssen das richtige UV-Mapping durchführen, um nur einen Frame Ihres Sprite-Blattes sehen zu können.

Für die Animation ist der Trick zu verwenden

glMatrixMode(GL_TEXTURE);
glTranslatef(u, v, 0);

Dabei sind u und v die Koordinaten des aktuellen Rahmens im UV-Raum.

Weitere Informationen finden Sie hier: Sprite-Animation in openGL