Ein Spiel mit GameMaker erstellen - Tetris

    • Ein Spiel mit GameMaker erstellen - Tetris

      Vorwort

      Hi,
      ich habe einen neuen Post in meinem Blog dimensionrider.blogspot.de veröffentlicht:

      Ein Spiel mit GameMaker erstellen - Tetris
      (Creating a game with GameMaker - Tetris)

      und dachte das bietet sich an, um auch in diesem Forum einen Post zu erstellen, der vielleicht dem einen oder anderen helfen könnte.
      (Der größte Teil der folgenden Texte ist direkt aus dem Post übernommen.)


      Zielgruppe

      Die Personen-Gruppe, an die dieses "Tutorial" gerichtet ist, ist etwas speziell: Eigentlich ist der Post für Leute gedacht, die noch keine Erfahrungen mit dem GameMaker gemacht haben und trotzdem ist der Code nicht anfängerfreundlich formuliert.
      Viel mehr soll diese Implementierung aufzeigen, wie man mit dem GameMaker relativ "professionell" an ein Problem herangehen kann. Die Zielgruppe in diesem Forum sind also durchschnittlich erfahrene Leute, die bereits Sicherheit in der Verwendung von gml haben und ohne Drag'n'Drop auskommen und neue Ideen / Anregungen für Umsetzungsstrategien suchen.
      Ein Beispiel: Anstatt für jeden Tetris-Stein oder gar für jedes Stein-Teil eines Tetris-Steins ein Objekt zu verwenden, gibt es nur ein Objekt, welches über eine 4x4 Matrix eine spezielle Stein-Form repräsentiert. Mit dieser Datenstruktur soll eine effiziente Kollisionsberechnung ermöglicht werden die "besser" ist, als die GameMaker interne.


      Warum Tetris?

      Ich wollte einer Freundin den GameMaker zeigen und habe sie gefragt, welches simple Spiel ihr als erstes in den Kopf käme, das wir mal eben nachmachen könnten... Und so kamen wir zu Tetris.
      Dieses Spiel wird gerne geklont und nachgeahmt und das nicht zuletzt weil es so "simpel" ist. Die Programmierung hingegen, ist vielleicht nicht so trivial, wie man denken mag... je nachdem wie man es umsetzt.
      Ich möchte hier meine Version, welche ich mit dem GameMaker: Studio (in der Version 1.4.1657) erstellt habe teilen und ein wenig dazu erklären.

      Download Tetris (.zip Datei 867KB)

      Alternativ:
      Von meiner Dropbox
      Github

      In diesem Archiv findet ihr das komplette Projekt inklusive Bildern und allem Code.
      Insgesamt ist das Spiel, wie gesagt, nicht unbedingt anfängerfreundlich geschrieben - wir wollen es ja gleich "richtig" lernen, bzw. mal sehen, wie so etwas aussehen kann. Das heißt, der Code ist teilweise stark optimiert und es wurde kein unnötiges Drag'n'Drop verwendet. Trotzdem habe ich die Skripte übersichtlich strukturiert und umfangreich kommentiert (allerdings auf Englisch).

      Im Folgenden möchte ich genauer auf die Einzelteile des Spiels eingehen und minimal erläutern.


      Die Räume:

      Damit ein Spiel gestartet werden kann, muss mindestens ein Raum existieren. In Tetris haben wir drei Räume:
      room_intro
      room_title
      room_game

      Relevant ist nur der room_game, die anderen sind nur schon mal vorbereitet und reichen direkt durch zum jeweils nächsten Raum.


      Die Objekte:

      obj_all
      		Persistentes (allgegenwärtiges Objekt), welches sich um alles kümmern soll, das immer und in jedem Raum passieren kann.
      obj_intro
      		Ein Objekt das sich um ein Intro ganz zu Beginn des Spiels kümmern wird.
      obj_title
      		Dieses Objekt soll sich um den Titelbildschirm kümmern. Von dort aus sollen z.B. verschiedene Spiel-Modi gestartet werden können.
      obj_tetris_controller
      		Der Kontroller soll sich um das in-game Spielgeschehen kümmern. Er ist das Herzstück des Spiels.
      obj_tetris_stone
      		Dies verkörpert einen Tetris-Stein einer beliebigen Form.
      obj_tetris_back
      		Hilfsobjekt zum Zeichnen eines Hintergrundes.



      Die Skripte:

      Dies sind nur fünf von zehn Skripten, die in dem Spiel Verwendung finden. Für die Restlichen könnt ihr in das angehängte Archiv schauen.

      Wenn ein neuer Tetris-Stein erstellt wird, wird ihm eine zufällige Form übergeben. Folgendes Skript legt für eine beliebige der möglichen Formen ein 2D-Array (eine Matrix) an, welches bestimmt, welche Stein-Teile des maximal 4x4 großen Steines gesetzt sind und welche nicht.

      tetris_set_stone_parts(form)
      Spoiler anzeigen

      Quellcode

      1. /// tetris_set_stone_parts(form);
      2. // Initializes the parts array of a tetris stone to the given form enum
      3. // by BadToxic
      5. var form_enum = argument0;
      7. parts[3, 3] = 0;
      9. switch (form_enum) {
      10. case global.TETRIS_FORM_T: {
      11. parts[0, 0] = 0; parts[0, 1] = 0; parts[0, 2] = 0; parts[0, 3] = 0;
      12. parts[1, 0] = 0; parts[1, 1] = 1; parts[1, 2] = 0; parts[1, 3] = 0;
      13. parts[2, 0] = 1; parts[2, 1] = 1; parts[2, 2] = 1; parts[2, 3] = 0;
      14. parts[3, 0] = 0; parts[3, 1] = 0; parts[3, 2] = 0; parts[3, 3] = 0;
      15. break;
      16. }
      17. case global.TETRIS_FORM_I: {
      18. parts[0, 0] = 0; parts[0, 1] = 1; parts[0, 2] = 0; parts[0, 3] = 0;
      19. parts[1, 0] = 0; parts[1, 1] = 1; parts[1, 2] = 0; parts[1, 3] = 0;
      20. parts[2, 0] = 0; parts[2, 1] = 1; parts[2, 2] = 0; parts[2, 3] = 0;
      21. parts[3, 0] = 0; parts[3, 1] = 1; parts[3, 2] = 0; parts[3, 3] = 0;
      22. break;
      23. }
      24. case global.TETRIS_FORM_Z: {
      25. parts[0, 0] = 0; parts[0, 1] = 0; parts[0, 2] = 0; parts[0, 3] = 0;
      26. parts[1, 0] = 1; parts[1, 1] = 1; parts[1, 2] = 0; parts[1, 3] = 0;
      27. parts[2, 0] = 0; parts[2, 1] = 1; parts[2, 2] = 1; parts[2, 3] = 0;
      28. parts[3, 0] = 0; parts[3, 1] = 0; parts[3, 2] = 0; parts[3, 3] = 0;
      29. break;
      30. }
      31. case global.TETRIS_FORM_S: {
      32. parts[0, 0] = 0; parts[0, 1] = 0; parts[0, 2] = 0; parts[0, 3] = 0;
      33. parts[1, 0] = 0; parts[1, 1] = 1; parts[1, 2] = 1; parts[1, 3] = 0;
      34. parts[2, 0] = 1; parts[2, 1] = 1; parts[2, 2] = 0; parts[2, 3] = 0;
      35. parts[3, 0] = 0; parts[3, 1] = 0; parts[3, 2] = 0; parts[3, 3] = 0;
      36. break;
      37. }
      38. case global.TETRIS_FORM_Q: {
      39. parts[0, 0] = 0; parts[0, 1] = 0; parts[0, 2] = 0; parts[0, 3] = 0;
      40. parts[1, 0] = 0; parts[1, 1] = 1; parts[1, 2] = 1; parts[1, 3] = 0;
      41. parts[2, 0] = 0; parts[2, 1] = 1; parts[2, 2] = 1; parts[2, 3] = 0;
      42. parts[3, 0] = 0; parts[3, 1] = 0; parts[3, 2] = 0; parts[3, 3] = 0;
      43. break;
      44. }
      45. case global.TETRIS_FORM_L: {
      46. parts[0, 0] = 0; parts[0, 1] = 0; parts[0, 2] = 0; parts[0, 3] = 0;
      47. parts[1, 0] = 0; parts[1, 1] = 1; parts[1, 2] = 0; parts[1, 3] = 0;
      48. parts[2, 0] = 0; parts[2, 1] = 1; parts[2, 2] = 0; parts[2, 3] = 0;
      49. parts[3, 0] = 0; parts[3, 1] = 1; parts[3, 2] = 1; parts[3, 3] = 0;
      50. break;
      51. }
      52. case global.TETRIS_FORM_J: {
      53. parts[0, 0] = 0; parts[0, 1] = 0; parts[0, 2] = 0; parts[0, 3] = 0;
      54. parts[1, 0] = 0; parts[1, 1] = 0; parts[1, 2] = 1; parts[1, 3] = 0;
      55. parts[2, 0] = 0; parts[2, 1] = 0; parts[2, 2] = 1; parts[2, 3] = 0;
      56. parts[3, 0] = 0; parts[3, 1] = 1; parts[3, 2] = 1; parts[3, 3] = 0;
      57. break;
      58. }
      59. }
      61. // Count the parts
      62. parts_number = 0;
      63. for (var yy = 0; yy < array_height_2d(parts); yy++) {
      64. for (var xx = 0; xx < array_length_2d(parts, yy); xx++) {
      65. if (parts[yy, xx]) {
      66. parts_number++;
      67. }
      68. }
      69. }
      Alles anzeigen


      Die folgenden beiden Skripte werden für den aktuell fallenden Stein aufgerufen, wenn man die Taste für eine Rechts- bzw. Linksdrehung drückt. Sie ordnen die gesetzten Tetris-Teile der oben genannten Matrix so um, dass der gesamte Stein um 90° gedreht wird.

      tetris_stone_turn_right()
      Spoiler anzeigen

      Quellcode

      1. /// tetris_stone_turn_right();
      2. // Turn tetris stone clockwise
      3. // by BadToxic
      5. var turned;
      7. turned[0, 0] = parts[3, 0]; turned[0, 1] = parts[2, 0]; turned[0, 2] = parts[1, 0]; turned[0, 3] = parts[0, 0];
      8. turned[1, 0] = parts[3, 1]; turned[1, 1] = parts[2, 1]; turned[1, 2] = parts[1, 1]; turned[1, 3] = parts[0, 1];
      9. turned[2, 0] = parts[3, 2]; turned[2, 1] = parts[2, 2]; turned[2, 2] = parts[1, 2]; turned[2, 3] = parts[0, 2];
      10. turned[3, 0] = parts[3, 3]; turned[3, 1] = parts[2, 3]; turned[3, 2] = parts[1, 3]; turned[3, 3] = parts[0, 3];
      12. // Check if the turning is ok - the stone still is in the game area and has no collision with another stone
      13. tetris_stone_turn_check_collision(turned);
      Alles anzeigen


      tetris_stone_turn_left()
      Spoiler anzeigen

      Quellcode

      1. /// tetris_stone_turn_left();
      2. // Turn tetris stone counter clockwise
      3. // by BadToxic
      5. var turned;
      7. turned[0, 0] = parts[0, 3]; turned[0, 1] = parts[1, 3]; turned[0, 2] = parts[2, 3]; turned[0, 3] = parts[3, 3];
      8. turned[1, 0] = parts[0, 2]; turned[1, 1] = parts[1, 2]; turned[1, 2] = parts[2, 2]; turned[1, 3] = parts[3, 2];
      9. turned[2, 0] = parts[0, 1]; turned[2, 1] = parts[1, 1]; turned[2, 2] = parts[2, 1]; turned[2, 3] = parts[3, 1];
      10. turned[3, 0] = parts[0, 0]; turned[3, 1] = parts[1, 0]; turned[3, 2] = parts[2, 0]; turned[3, 3] = parts[3, 0];
      12. // Check if the turning is ok - the stone still is in the game area and has no collision with another stone
      13. tetris_stone_turn_check_collision(turned);
      Alles anzeigen


      Nachdem ein Stein bewegt wurde, kann mit dem nächsten Skript geprüft werden, ob er mit einem anderen Stein kollidiert. Dabei werden alle anderen Steine betrachtet und zunächst geprüft, ob sich die Bereiche der maximal möglichen Größe von 4x4 Stein-Teilen überlagern. Erst wenn das der Fall ist, werden auch die einzelnen Stein-Teile geprüft. Dieses Vorgehen ist sehr effizient und bei heutiger Rechenleistung nicht nötig... man könnte dies auch sehr viel einfacher umsetzen. Aber wie gesagt - dies soll zeigen wie man es "richtig" macht. ;)

      tetris_check_collision()
      Spoiler anzeigen

      Quellcode

      1. /// tetris_check_collision();
      2. // Checks for a collision at the current position
      3. // by BadToxic
      5. with (obj_tetris_stone) {
      7. if (id != other.id) {
      9. var in_grid = true;
      11. if (other.x + (controller.stone_grid_size - 1) * controller.stone_size < x) {
      12. in_grid = false;
      13. }
      14. else if (other.x > x + (controller.stone_grid_size - 1) * controller.stone_size) {
      15. in_grid = false;
      16. }
      17. else if (other.y + (controller.stone_grid_size - 1) * controller.stone_size < y) {
      18. in_grid = false;
      19. }
      20. else if (other.y > y + (controller.stone_grid_size - 1) * controller.stone_size) {
      21. in_grid = false;
      22. }
      24. // Other stone must be in my grid
      25. if (in_grid) {
      26. // Calculate shift of other stone grid to mine
      27. var x_shift = (x - other.x) div controller.stone_size;
      28. var y_shift = (y - other.y) div controller.stone_size;
      30. var xx_min = max(0, x_shift);
      31. var yy_min = max(0, y_shift);
      32. var xx_max = min(controller.stone_grid_size, x_shift + controller.stone_grid_size);
      33. var yy_max = min(controller.stone_grid_size, y_shift + controller.stone_grid_size);
      35. // Run through all grid fields of my stone
      36. for (var yy = yy_min; yy < yy_max; yy++) {
      37. for (var xx = xx_min; xx < xx_max; xx++) {
      38. if (other.parts[yy, xx]) {
      39. if (parts[yy - y_shift, xx - x_shift]) {
      40. return true;
      41. }
      42. }
      43. }
      44. }
      45. }
      46. }
      47. }
      49. return false;
      Alles anzeigen


      Wenn ein fallender Stein schließlich aufgeschlagen ist, also nach einer Bewegung kollidiert ist, kann mit diesem Skript geprüft werden, ob Zeilen vollständig ausgefüllt sind und somit also aufgelöst werden können.

      tetris_check_for_clearing(clear_y1, clear_y2)
      Spoiler anzeigen

      Quellcode

      1. /// tetris_check_for_clearing(clear_y1, clear_y2);
      2. // This script is called after a stone was placed and checks for lines that can be cleared
      3. // by BadToxic
      5. var clear_y1 = /*max( 0, */argument0;
      6. var clear_y2 = /*min(fields_y, */argument1;
      8. var lines_to_clear = ds_list_create();
      10. // Check for lines
      11. for (var yy = clear_y1; yy < clear_y2; yy++) {
      12. var clear_line = true;
      13. for (var xx = 0; xx < fields_x; xx++) {
      14. if (game_area[yy, xx] < 0) {
      15. // In this line is a gap - skip it
      16. xx = fields_x;
      17. clear_line = false;
      18. }
      19. }
      20. if (clear_line) { // Remember this line to clear
      21. ds_list_add(lines_to_clear, yy);
      22. }
      23. }
      25. // Clear found lines
      26. if (!ds_list_empty(lines_to_clear)) {
      27. fix_bottoms = ds_list_create();
      29. switch (ds_list_size(lines_to_clear)) {
      30. case 1: {
      31. score += global.SCORE_LINES_CLEARED_1;
      32. break;
      33. }
      34. case 2: {
      35. score += global.SCORE_LINES_CLEARED_2;
      36. break;
      37. }
      38. case 3: {
      39. score += global.SCORE_LINES_CLEARED_3;
      40. break;
      41. }
      42. case 4: {
      43. score += global.SCORE_LINES_CLEARED_4;
      44. }
      45. }
      47. while (!ds_list_empty(lines_to_clear)) {
      48. var yy = ds_list_find_value(lines_to_clear, 0);
      49. for (var xx = 0; xx < fields_x; xx++) {
      50. //if (game_area[yy, xx] >= 0) {
      51. var stone_instance = game_area[yy, xx];
      53. var parts_index_y = yy - (stone_instance.y - border_top) div stone_size;
      54. var parts_index_x = xx - (stone_instance.x - border_left) div stone_size;
      56. stone_instance.parts[parts_index_y, parts_index_x] = 0;
      57. stone_instance.parts_number--;
      58. if (stone_instance.parts_number <= 0) {
      59. with (stone_instance) {
      60. instance_destroy();
      61. }
      62. }
      63. else {
      64. if (stone_instance.border_top == parts_index_y) {
      65. stone_instance.border_top++;
      66. }
      67. else if (stone_instance.border_bottom > parts_index_y + 1) { // Stone has to be divided
      68. // Duplicate stone
      69. var new_stone_instance = tetris_duplicate_stone(stone_instance);
      71. // Delete all parts of new stone above the cleared line
      72. for (var yyy = 0; yyy <= parts_index_y; yyy++) {
      73. for (var xxx = 0; xxx < stone_grid_size; xxx++) {
      74. new_stone_instance.parts[yyy, xxx] = 0;
      75. }
      76. }
      77. new_stone_instance.border_top = parts_index_y + 1;
      79. // Refresh game area array references for the new stone
      80. tetris_link_stone_to_game_area(new_stone_instance);
      82. // Delete all parts of old stone underneath the cleared line
      83. for (var yyy = parts_index_y + 1; yyy < stone_grid_size; yyy++) {
      84. for (var xxx = 0; xxx < stone_grid_size; xxx++) {
      85. stone_instance.parts[yyy, xxx] = 0;
      86. }
      87. }
      89. // Refresh game area array references for the old stone
      90. tetris_link_stone_to_game_area(stone_instance);
      92. stone_instance.border_bottom = parts_index_y + 1; // Don't divide the same stone two times in a row
      93. }
      94. if (stone_instance.border_bottom > parts_index_y) { // Stone needs a bottom border correction
      95. // Only add it, if not already included
      96. if (ds_list_find_index(fix_bottoms, stone_instance) < 0) {
      97. ds_list_add(fix_bottoms, stone_instance);
      98. }
      99. }
      100. }
      101. game_area[yy, xx] = -1;
      102. //}
      103. }
      104. ds_list_delete(lines_to_clear, 0);
      106. // Fix bottom borders of divided stones
      107. for (var stone_index = 0; stone_index < ds_list_size(fix_bottoms); stone_index++) {
      108. var stone_instance = ds_list_find_value(fix_bottoms, stone_index);
      109. if (instance_exists(stone_instance)) { // Could already be deleted
      110. var parts_index_y = yy - (stone_instance.y - border_top) div stone_size;
      111. stone_instance.border_bottom = parts_index_y;
      112. }
      113. }
      114. ds_list_clear(fix_bottoms);
      115. }
      117. // Clean up the lists memory
      118. ds_list_destroy(lines_to_clear);
      119. ds_list_destroy(fix_bottoms);
      121. // Now remember all stones above the cleared line(s) to let them fall later // TODO: AND BELOW also stone parts may need to fall
      122. ds_list_clear(falling_stones);
      124. for (var yy = clear_y2 - 2; yy >= 0; yy--) {
      125. for (var xx = 0; xx < fields_x; xx++) {
      126. if (game_area[yy, xx] >= 0) {
      127. // Only add it, if not already included
      128. if (ds_list_find_index(falling_stones, game_area[yy, xx]) < 0) {
      129. ds_list_add(falling_stones, game_area[yy, xx]);
      130. }
      131. }
      132. }
      133. }
      134. }
      Alles anzeigen



      Das Zusammenspielen der Einzelteile:

      So, jetzt habt ihr die wichtigsten Bausteine des Spiels kennengelernt, doch wie hängen diese zusammen? Auch dies möchte ich nur minimalistisch ansprechen:
      Der Raum room_game bekommt das Objekt obj_tetris_controller im Raum-Editor zugewiesen.
      Wenn das Spiel nun gestartet wurde und man den Raum erreicht hat, wird sich dieser Kontroller um alles kümmern. Er erstellt z.B. auch eine Instanz des obj_tetris_back Objektes, welches sich um den Hintergrund kümmern soll.
      Der Kontroller erstellt nun eine obj_tetris_stone Instanz am oberen Bildschirmrand. Immer nach einer bestimmten Zeit, welche im Create-Event des Controllers auf eine halbe Sekunde, bzw. 500000 Mikrosekunden festgelegt wurde (fall_time = 500000), wird der aktuelle Stein ein Feld nach unten bewegt. Diese Bewegung findet im Step-Event des Kontrollers statt.
      Was in diesem Event ebenfalls noch passiert, ist die Überprüfung auf verschiedene Tastendrücke, wie etwa den Pfeiltasten oder WASD, zum Steuern des fallenden Steines. Je nachdem, was gedrückt wird, wird der Stein nach links, rechts oder unten verschoben, bzw. mit Hilfe der obigen Skripte gedreht. Nach einer jeden solchen Aktion wird erneut auf Kollision geprüft und die Aktion ggf. rückgängig gemacht, denn wir wollen ja nicht dass Steine sich überlagern.
      Wenn ein Stein unten aufschlägt, also eine gewisse Höhe auf dem Spielfeld erreicht hat, oder mit einem Stein unter sich kollidiert, dann wird seine Bewegung gestoppt. Nach diesem Stopp wird via tetris_check_for_clearing auf auflösbare Zeilen geprüft und danach ein neuer Stein am oberen Bildschirmrand generiert. Wurden allerdings voll ausgefüllte Zeilen gefunden, so werden diese entfernt. Dieser Vorgang ist vermutlich der komplizierteste in diesem Programm, da hierfür die Matrizen der Steine angepasst werden müssen und evtl. sogar ein Stein in mehrere Steine gespalten werden muss, weil vielleicht nur seine Mitte aufgelöst wurde...
      Wenn ein neuer Stein "eingeworfen" wird, muss geprüft werden, ob er dafür auch genügend Platz hat. Wenn bereits hier eine Kollision stattfindet, ist das Spielfeld voll und das Spiel somit vorbei.



      Und so sieht das Endergebnis aus. Dabei bleibt anzumerken, dass der Hintergrund bei einer Google-Suche gefunden wurde und auch die Schriftart nicht von mir ist. Alles andere darf gerne frei verwendet werden (gerne natürlich auch mit Credits an BadToxic ;) ). Aber auch Fehler sind in dieser Version noch enthalten - der Finder darf sie gerne behalten...

      Ich weiß, dieses Tutorial ist nicht unbedingt für Einsteiger geeignet, aber man kann damit doch ganz schön sehen, wie der GameMaker funktioniert oder davon lernen wenn man schon dafür bereit ist. ^^
      Auch hätte ich noch sehr viel zeigen und erklären können, doch leider fehlt mir dazu die Zeit. Doch wenn ihr Fragen habt, nutzt gerne die Kommentarfunktion meines Blogs oder antwortet hier im Forum - ich werde versuchen zu helfen. :)

      Und an dieser Stelle verrate ich noch, dass ich auch an dem Spiel weiter mache und versuche etwas schönes auf die Beine zu stellen. ;)
      Bilder

      • screen.png

        81,86 kB, 260×400, 1.487 mal angesehen
      Dateien

      • Tetris.gmx.zip

        (888,46 kB, 551 mal heruntergeladen, zuletzt: )