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
android
animation
opengl-es
spritesheet
Lijo John
quelle
quelle
Antworten:
AndEngine bietet eine gute Möglichkeit, animierte Sprites zu zeichnen. Es gibt eine Klasse,
AnimatedSprite
die viel Arbeit für Sie erledigt. Hier sind die Schritte:BitMapTextureAtlas
bitmapTextureAtlas = new BuildableBitmapTextureAtlas(getTextureManager(), 480, 200, TextureOptions.NEAREST);
2. Holen Sie sich das
TiledTextureRegion
für Ihr SpirtesheetyourTextureRegion = BitmapTextureAtlasTextureRegionFactory.createTiledFromAsset(bitmapTextureAtlas, context, "yourspritesheet.png", /*sprite rows*/, /*sprite columns*/);
3.Erstellen Sie das
AnimatedSprite
und fügen Sie es der Szene hinzuAnimatedSprite 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
quelle
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.
quelle
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:
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.
quelle
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
Dabei sind u und v die Koordinaten des aktuellen Rahmens im UV-Raum.
Weitere Informationen finden Sie hier: Sprite-Animation in openGL
quelle