image_index Tutorial

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

    • image_index Tutorial

      Thema mit dem Beitrag welches mit zu diesem Tutorial veranlasste: >klickst du hier<


      Wann genau erscheint das nächste Bild meines Sprites?
      Wie sind die Zusammenhänge zwischen image_index, image_speed und room_speed?
      Wie formuliere ich eine abfrage wenn mein image_speed ein Bruch ist?

      Falls jemand zu diesen Fragen eine Antwort braucht ist er hier richtig.
      (Die nötigen Bilder für dieses Tutorial findet ihr im Anhang, oder ladet euch gleich das Projekt runter)


      Grundlagen:
      Normalerweise ist die Raumgeschwindigkeit (room_speed, zu finden in den globalen Variablen) auf 30 eingestellt... 30 was? 30 FPS. Also 30 Durchläufe pro Sekunde.
      Ein Frame, Durchlauf, Wiederholung, Steps wie auch immer fängt mit dem Event Begin Step an, dann kommen fast alle anderen Events, und endet mit dem Event End Step.
      Und das ganze wenn möglich 30 mal in der Sekunde.
      Dies hat Auswirkungen auf fast euer Ganzes Programm. (Asynchrone Events ect. sind natürlich eine Klasse für sich) ;)

      Und hier kommt der springende Punkt natürlich hat dies auch Auswirkungen auf die Wechselrate eurer Bilder.

      Um es kurz zu machen room_speed * image_speed = Bilder pro Sekunde des Objekts.

      Mein Bild kommt mir unregelmäßig vor? Vielleicht hat sich das schon mal der ein oder andere gedacht und damit gar nicht unrecht gehabt.
      Es gibt tatsächlich ungünstige Geschwindigkeiten.

      Beispiel: Unser Sprite hat 2 Bilder, image 0 und image 1
      jetzt geben wir ihm image_speed 0.4 und wie wir an der unteren Tabelle sehen wird das erste Bild immer 3mal angezeigt und das zweite nur 2mal.
      Zudem weist es auch noch das Problem auf das if(image_index == 1) nie wahr sein wird. (ausser wir legen ihn per image_index = 0.2 fest)
      Natürlich wäre if(image_index >= 1 && image_index < 2) möglich allerdings muss man dann auch schon wieder drauf achten das dies nicht zu oft zum den nachfolgenden Code ausführt.

      GML-Quellcode

      1. /// Dies ist zwar kein gml Code aber so bleiben die Leerzeichen erhalten, da ich keine Tabelle erstellen konnte
      2. Step Bild-Index dargestelltes Bild
      3. 1 0 image 0
      4. 2 0.4 image 0
      5. 3 0.8 image 0
      6. 4 1.2 image 1
      7. 5 1.6 image 1
      8. 6 0 image 0
      9. 7 0.4 image 0
      10. 8 0.8 image 0
      11. 9 1.2 image 1
      12. 10 1.6 image 1
      13. 11 0 image 0
      Alles anzeigen


      Fazit: Immer möglichst darauf achten mit gut teilbaren Geschwindigkeiten zu arbeiten wie 0.05 oder 0.1 oder 0.2 oder auch 0.25 und 0.5 ect.
      So stellt dann auch ein oben erwähntes if(image_index == 1) kein Problem dar und es wird jedes Bild gleich oft dargestellt.


      So jetzt langsam mal zu eigentlichen Programm.

      Was kann es?
      Es verdeutlicht uns anhand einer Uhr wann ein Bild gewechselt wird.
      Wir haben eine Uhr mit Stundenzeiger (12 Stunden 12 Bilder) welche mit jeder vollen Zahl von image_index das Bild wechselt, parallel läuft außerhalb der Uhr ein kleiner Pfeil mit welcher den eigentlichen Wert (also auch Nachkommastellen) von image_index Darstellt.
      Damit das Auge auch mitkommt kann man room_speed und image_speed während des laufenden Programms verändern.
      Zudem rechnet es einem die Bildwechselrate aus.


      1. Sprites
      Wir erstellen 3 Sprites.
      Zuerst spr_Uhr bestehend aus den 12 Bildern der Uhr beginnend mit image 0 ist Uhr_12. (Origin auf Center)
      Als nächstes spr_Index mit dem Bild Index. (Origin auf Center)
      Und zu guter letzt spr_Taste mit dem Bild Taste. (Origin auf Center)


      2. Scripts
      Wir werden ein Script benötigen, damit wir nicht jede Taste als einzelnes Objekt anlegen müssen.
      In diesem Script gibt es für das mitgelieferte Argument eine Switch Tabelle mit 4 Möglichkeiten für die 4 Tasten.
      1 = room_speed erhöhen bis maximal 60
      2 = room_speed verringern bis mindestens 1
      3 = image_speed erhöhen bis maximal 1
      4 = image_speed verringern bis mindestens 0,05
      ganz einfach also.

      GML-Quellcode

      1. /// Script für die Aufgaben der Knöpfe
      2. { switch (argument0)
      3. { case 1:
      4. { if(room_speed < 60)
      5. { room_speed++;
      6. }
      7. }
      8. break;
      9. case 2:
      10. { if(room_speed > 1)
      11. { room_speed--;
      12. }
      13. }
      14. break;
      15. case 3:
      16. { if(obj_Uhr.image_speed < 1)
      17. { obj_Uhr.image_speed = obj_Uhr.image_speed + 0.05;
      18. }
      19. }
      20. break;
      21. case 4:
      22. { if(obj_Uhr.image_speed > 0.05)
      23. { obj_Uhr.image_speed = obj_Uhr.image_speed - 0.05;
      24. }
      25. }
      26. break;
      27. }
      28. }
      Alles anzeigen



      3. Fonts
      Bitte legt einfach eine Schriftart mit der höhe von ca 10 bis 12 Pixeln an und nennt sie font_1


      4. Objects
      Nun erstellen wir mal das Objekt obj_Uhr.
      Sprite: spr_Uhr
      Depth: 10
      Events: Create

      Im Create Event verringern wir nur den image_speed damit das ganze nicht gleich so abgeht :D

      GML-Quellcode

      1. /// Image-Speed drosseln für bessere Darstellung
      2. image_speed = 0.05;




      Als nächstes erstellen wir das Objekt obj_Index
      Sprite: spr_Index
      Events: Step

      Im Step event führen wir folgenden Code aus welcher den Pfeil ausserhalb der Uhr, durch drehen des Bildes, anhand der image_index laufen lässt.

      GML-Quellcode

      1. /// Anzeige des Image-Index
      2. image_angle = obj_Uhr.image_index * 30 * -1;




      Nun erstellen wir noch das Objekt obj_Taste
      Sprite: spr_Taste
      Events: Mouse Event for Left Released

      Im Maus Event lassen wir nun unser zuvor erstelltes Script ausführen.

      GML-Quellcode

      1. /// Knopf betätigen
      2. scr_Aufgabe(aufgabe);




      Nun zum letzen Objekt obj_Menue
      Events: Create, Draw

      Im Create Event erstellen wir die Tasten welche wir gerade als Objekt angelegt haben.
      Hier unterscheiden wir die Aufgeben der tasten durch die Variablen aufgabe welche jede Taste mitbekommt.

      GML-Quellcode

      1. /// Erstelle Reglertasten
      2. inst = instance_create(150, 200, obj_Taste)
      3. inst.aufgabe = 1;
      4. inst = instance_create(150, 250, obj_Taste)
      5. inst.aufgabe = 2;
      6. inst.image_angle = 180;
      7. inst = instance_create(150, 350, obj_Taste)
      8. inst.aufgabe = 3;
      9. inst = instance_create(150, 400, obj_Taste)
      10. inst.aufgabe = 4;
      11. inst.image_angle = 180;
      Alles anzeigen


      Im Draw Event wird noch schnell das ganze schriftliche Dargestellt.

      GML-Quellcode

      1. /// Draw INFORMATION
      2. draw_set_font(font_1);
      3. draw_set_color(c_black);
      4. draw_text(10, 10, INFO_CREDIT);
      5. draw_text(10, 25, "Version: 1.0");
      6. draw_text(10, 100, "image_index:");
      7. draw_text(10, 115, "BILD:");
      8. draw_text(140, 100, obj_Uhr.image_index);
      9. draw_text(140, 115, "image");
      10. draw_text(190, 115, floor(obj_Uhr.image_index));
      11. draw_text(10, 213, "room_speed:");
      12. draw_text(140, 213, room_speed);
      13. draw_text(170, 213, "FPS");
      14. draw_text(10, 363, "image_speed:");
      15. draw_text(140, 363, obj_Uhr.image_speed);
      16. draw_text(10, 430, "Bilder pro Sekunde:");
      17. draw_text(180, 430, room_speed * obj_Uhr.image_speed);
      18. draw_text(10, 445, "Errechnet aus room_speed * image_speed");
      Alles anzeigen




      5. Rooms
      Ja was fehlt uns noch, genau ein Raum.
      Dem Raum geben wir eigentlich nur schnell die Hintergrundfarbe weiss und legen das Objekt obj_Menü irgendwo in den Raum.
      In den rechten teil des Raumes platzieren wir die Objekte obj_Uhr und obj_Index direkt übereinander.


      Und schon ist das Programm fertig. 8)

      Viel Spaß beim herumtesten mit room_speed und image_speed. :D


      Hinweis: wie auch im letzten Tutorial hab ich im angehängten Projekt den Configs Ordner gelöscht, kopiert den einfach aus einem neuen Projekt hinein.

      P.S. Die unten gezipten Bilder zum Tutorial sind aus Platzgründen sehr Komprimiert. In der Projektdatei sind sie in Original Qualität.
      Bilder
      • image_index-Tut-1.jpg

        36,69 kB, 680×544, 311 mal angesehen
      • image_index-Tut-2.jpg

        36,83 kB, 680×544, 315 mal angesehen
      • Image-Index-Tutorial-Configs.jpg

        52,36 kB, 896×455, 309 mal angesehen
      Dateien

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Balls of Steel () aus folgendem Grund: Link bearbeiten