Animationen / Bewegliche Figuren bzw. Sprites nur mit: Spine 2D animation for games

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Animationen / Bewegliche Figuren bzw. Sprites nur mit: Spine 2D animation for games

    Hallo geehrte Community,

    ich befasse mich heute den dritten Tag mit dem GM.

    Wie ich einen Sprite erstelle und diesen hoch und runter bewege habe ich sofort verstanden.
    Ein bewegliches Sprite mithilfe eines Spritesheets erstellen war auch nicht schwierig.

    Eine Frage lässt mir jedoch keine Ruhe.

    Ich möchte ein Sprite erstellen (Es soll ein Trampolin werden wenn´s fertig ist) welches in sich beweglich ist. Ich möchte die Bewegung hoch und runter animieren.
    Die Bewegung/ Geschwindigkeit der Animation möchte ich mittels Pfeiltasten steuern. Später gerne auf´m Handy per Wischbewegung.
    Das sollte ungefähr so aussehen.

    Nach unzähligen "tut´s" bin ich auf folgendes gestoßen.

    Ist das die Lösung für das was ich brauche oder bin ich völlig auf dem Holzweg und es gibt eine andere Herangehensweise?

    Über Eure Unterstützung würde ich mich sehr freuen.

    Vielen Dank.

  • :event_draw: Einfach mal in den Draw Event packen und anschauen ;)

    GML-Quellcode

    1. draw_circle(x-100,y,5,0)
    2. draw_circle(x+100,y,5,0)
    4. strain[0] = mouse_y-y //Mittelpunkt des Trampolins wird erstellt
    6. if strain[0] > 50 { strain[0] = 50 } // Maximale Dehnweite
    7. if strain[0] < -50 { strain[0] = -50 }
    9. strain[1] = strain[0]/1.2 // Zwischenpunkte damit es ein 'weiches' Tuch/Seil gibt
    10. strain[2] = strain[0]/2
    11. strain[3] = 0
    13. draw_circle(x,y+strain[0],2,0) // Punkte anzeigen lassen (ist eig. nicht notwendig)
    14. draw_circle(x-33,y+strain[1],2,0) ; draw_circle(x+33,y+strain[1],2,0)
    15. draw_circle(x-66,y+strain[2],2,0) ; draw_circle(x+66,y+strain[2],2,0)
    17. draw_set_colour(c_dkgray)
    18. for(i = 0 ; i < 3 ; i++)
    19. {
    20. draw_line(x+33*i,y+strain[i],x+33*(i+1),y+strain[i+1]) // Punkt mit vorherigem Punkt verbinden
    21. draw_line(x-33*i,y+strain[i],x-33*(i+1),y+strain[i+1]) // Gleiches wie oben, nur links vom Mittelpunkt
    22. }
    Alles anzeigen


    Du brauchst eigentlich nur einen Wert und das ist der Y-Punkt in der Mitte des Tuches und der Y-Wert wird ja mit der Maus/Finger bestimmt. Der X-Wert bleibt immer gleich. Dazwischen berechnest du einfach noch ein paar Punkte, und lässt anschließend von jedem Punkt zum nächsten eine Linie zeichnen. Je mehr Punkte desto 'weicher' ist das Sprungtuch am Ende.
    Mit dieser Methode kannst du dann auch z.B. noch ein Script schreiben, das eine Animation simuliert, wenn das Tuch verlassen wird und ausschwingt. Dazu musst du dann einfach nur wieder den Punkt in der Mitte berechen (alle annderen sind ja automatisch berechnet).
    Husi012 hat mich nicht mehr in seiner Signatur, ich bin trotzdem noch fame.

  • Ich hab mir auch noch schnell ein Skript geschrieben, womit das ganze sehr weich ist. (Sorry Duftner :P)

    Erstelle ein Skript mit dem namen draw_trampolin
    und füge diesen Code ein:
    Spoiler anzeigen
    ​

    GML-Quellcode

    1. ​///draw_trampolin(tr_x1,tr_x2, tr_y, tr_length,tr_grenze)
    5. var r = abs((argument0-argument1)/2);
    7. argument3 = max(-abs(argument4), min(abs(argument4), argument3));
    9. var xx = argument0+r;
    10. var yy = argument2-10;
    12. var dir1 = point_direction(xx,yy, argument0, argument2);
    13. var dir2 = point_direction(xx,yy, argument1, argument2);
    14. for(var dir = dir1; dir < dir2-1; dir ++){
    15. draw_line(xx+lengthdir_x(r, dir),yy+lengthdir_y(argument3, dir), xx+lengthdir_x(r, dir+1),yy+lengthdir_y(argument3, dir+1));
    16. }
    17. draw_text(x+200,y, argument3);
    Alles anzeigen

    Jetzt ist es ganz bequem das Trampolin zu zeichnen. Ohne eine Animation zu haben.
    Benutzen kannst du es so:
    draw_trampolin(tr_x1,tr_x2, tr_y, tr_length, tr_grenze)
    tr_x1 = X Koordinate des ersten Punktes vom Trampolin
    tr_x2 = X Koordinate des zweiten Punktes vom Trampolin (Hier zwischen ist das Trampolin)
    tr_y = Y Koordinate des Trampolins
    tr_length = die Weite, die es gespannt wird
    tr_grenze = die Grenze, wie weit das Trampolin maximal gespannt wird


    Beispiel:
    Draw Event:

    GML-Quellcode

    1. ​draw_trampolin(x,x+100,y, mouse_y-y,50);

    Hier wird ein Trampolin der Breite 100 auf der X Koordinate gedrawt. Je nach dem, wie weit man mit der Maus nach oben bzw. nach unten geht, spannt es sich.



    Mit 3 Tagen ist es natürlich nicht so leicht sich in den Code zu arbeiten. Wenn du willst, kann ich dir den Ausführlich erklären.
    Ein Bug ist mehr als nur ein Bug, es ist ein... Käfer!
    Egal, wie gut du eine Mauer baust, sie fällt um.... der klügere gibt nach :D

    Willst du mit mir auf Discord Chatten/Quatschen?
    Meine Husi's Tutorial Reihe

  • Ich gehe mal davon aus,das du schon anderweitig Programmiererfahrung hast, daher hier noch ein etwas weitergeführter Ansatz:
    Eine Sehr schnelle Methode wäre, wenn du ein primitiv, in diesem Fall pr_trianglestrip verwendest. Damit kannst du dann eine weiche Kurve zeichnen, jenachdem wie Das Trampolin Schwingen soll. Wenn du das ganze mit c_white auf ein Surface malst, welches du vorher mit draw_clear_alpha(c_white,0); gecleart hast, kannst du eine Grafik über das Primitiv zeichnen wenn du dabei draw_set_blend_mode_ext(bm_one,bm_dest_alpha) verwendest. Dann kannst du das Surface malen, es enthält nun das primitive eingefärbt mit der Textur.
    bm_one sorgt dafür, das die zu malenden Pixel nicht verändert werden, bm_dest_alpha multipliziert mit dem Alpha des Ziels, in dem Fall überall 0 ausser wo dein trianglestrip ist.
    132 little bugs in the code. 132 little bugs. Fix a few, set the compiler to stew, 172 little bugs in the code... :vogel: