Radiobuttons

    • Radiobuttons

      Also ich bin mal auf die Idee gekommen, zu probieren Radiobuttons (eigendlich auch Checkboxen, aber nicht jetzt. in nem anderen Tutorial vielleicht) zuerstellen.
      Dies habe ich nun auch geschafft (nach ner halben Stunde^^) und möchte euch nun zeigen wie das geht.

      Wichtig: Dieses Tutorial erfordert gml Kenntnisse.

      Erstmal vorab:
      Spoiler anzeigen
      Was ist ein Radio-Button?
      Was ist eine Checkbox?
      Das wichtige dabei, Radio-Buttons kann man in eine Klasse zusammenfügen und pro Klasse kann nur einer angeklickt werden.

      Also... Dann legen wir mal los:

      Wir wollen einen Radio-Button:
      Dazu tun wir folgendes:

      Wir erstellen ein neues Object, benennen dieses nach unserem Wunsch (ich nenne es "ObjRadio")
      und schreiben jetzt folgendes hinein:

      Create Event :
      Spoiler anzeigen

      GML-Quellcode

      1. RadioCounter=0;
      2. /*
      3. Wir erstellen zunächst eine Variable,
      4. die wir später brauchen, um jedem
      5. Radio-Button eine eigene Identifikationsnummer zuzuweisen.
      6. */


      So nun müssen wir erstmal die Grundlagen festlegen, die ein Radio-Button braucht:
      Spoiler anzeigen

      • er braucht x/y-Koordinaten, um ihn genau zu platzieren
      • er braucht eine Klasse, der er angehört
      • er braucht einen Text
      • er muss entweder angeklickt oder nicht sein
      • und zu guter letzt müssen wir noch wissen, ob er angezeigt wird (sonst gibt es nachher ein paar Fehler)

      So...
      Damit unser GameMaker Projekt nicht unüberschtlich wird, überlassen wir einem Script das Erstellen dieses Buttons, damit wir jederzeit nur mit einer Zeile einen neuen Radio-Button erstellen können.

      Also wir klicken oben auf "Resources" --> "Create Script".
      Nun öffnet das Scriptfenster.
      Bei "Name" geben wir den Name des Scriptes ein (beliebiger Name).
      Ich nenne dieses "CreateRadio".
      Hierein schreiben wir jetzt folgendes:
      Spoiler anzeigen

      GML-Quellcode

      1. /*
      2. Erklärung:
      3. CreateRadio(text,clicked,class);
      4. 1.Argument: der Text der zum Radio-Button gehört (string/text)
      5. 2.Argument: ob der Button von Anfang an angeklickt sein soll (boolean: true/false)
      6. 3.Argument: die Klasse, der er angehört (integer/Zahl)
      7. */
      8. RadioDrawed[RadioCounter]=false;
      9. //deklariert einen Array mit dem Index der Variable RadioCounter, wodurch der Index nie gleich ist --> das ist die ID
      10. //noch ist der Button nicht gedrawt
      11. RadioText[RadioCounter]=string(argument0);
      12. //deklariert einen Array mit dem Index der Variable RadioCounter; setzt diese auf den Text, der in argument0 (das erste) übergeben wurde
      13. RadioClicked[RadioCounter]=argument1;
      14. //deklariert einen Array mit dem Index der Variable RadioCounter; setzt diese auf true (wenn angeklickt sein soll)/false (wenn nicht angklickt sein soll)
      15. RadioClass[RadioCounter]=argument2;
      16. //deklariert einen Array mit dem Index der Variable RadioCounter; setzt diese auf die Klasse, die in argument2 (das dritte) übergeben wurde
      17. RadioCounter+=1;
      18. //erhöht den RadioCounter um 1, damit ist jede ID anders
      19. return RadioCounter-1;
      20. //gibt die ID des soeben erstellten Buttons ein
      Alles anzeigen


      So das fügen wir jetzt im Create Event hinzu.
      Sooft, wie viele Radio-Buttons ihr haben wollt:
      Spoiler anzeigen
      Create Event wysiwyg image:

      GML-Quellcode

      1. RadioCounter=0;
      2. /*
      3. Wir erstellen zunächst eine Variable,
      4. die wir später brauchen, um jedem
      5. Radio-Button eine eigene Identifikationsnummer zuzuweisen.
      6. */
      7. Radio1=CreateRadio("Radio-Button:1 - Klasse: 0",true,0); //Dieser Radio-Button gehört zur Klasse "0" -- angeklickt
      8. Radio2=CreateRadio("Radio-Button:2 - Klasse: 0",false,0); //Dieser gehört ebenfalls zu Klasse "0" -- nicht angeklickt
      9. Radio3=CreateRadio("Radio-Button:1 - Klasse: 1",false,1); //Dieser Radio-Button gehört jedoch zur Klasse "1"-- nicht angeklickt
      10. Radio4=CreateRadio("Radio-Button:2 - Klasse: 1",true,1); //Dieser gehört auch zu Klasse "1" -- angeklickt
      11. Radio5=CreateRadio("Radio-Button:3 - Klasse: 1",false,1); //Dieser gehört auch zu Klasse "1" -- nicht angeklickt
      12. //das erstellt 5 Radio Buttons
      13. //WICHTIG: die id muss in eine variable aufgenommen werden: Radio2=CreateRadio(...);
      14. //Dies wird für spätere Scripte benötigt
      Alles anzeigen

      So das Problem ist, dass der Radio-Button noch nicht angezeigt wird...
      Das kommt jetzt:
      Damit das Draw-Event nicht zu unübersichtlich wird, erstellen wir auch hierfür ein neues Script (ich nenne es "DrawRadio"):
      Spoiler anzeigen

      GML-Quellcode

      1. /*
      2. Erklärung:
      3. DrawRadio(ID,x,y);
      4. 1.Argument: Die id des Radio-Buttons (oben habe ich z.B. Radio1 genommen... diese muss hier beim aufrufen des Scriptes eingesetzt werden)
      5. 2./3. Argument: Die Position des Radio-Buttons
      6. */
      7. var __col;
      8. __col=draw_get_color();
      9. //erstellt kurzfristig eine variable, die die aktuell gesetzte Farbe speichert, damit am restlichen "Spiel" nichts geändert wird
      10. RadioDrawed[argument0]=true;
      11. //da der entsprechende Button jetzt gedrawt wird, wird der array auf true gesetzt
      12. draw_set_color(c_white);
      13. draw_circle(argument1,argument2,4,false);
      14. //zeichnet einen ausgefüllten Kreis mit dem Radius 4 an der Stelle, wo der Radio-Button sein soll (das ist der Hintergrund des Radio-Buttons)
      15. draw_set_color(c_black);
      16. draw_circle(argument1,argument2,4,true);
      17. //zeichnet einen schwarzen nicht ausgefüllten Kreis auf den weißen (der Rand)
      18. //so nun müssen wir überprüfen, ob der Button angeklickt ist:
      19. if (RadioClicked[argument0]=true)
      20. {
      21. draw_set_color(c_green);
      22. draw_circle(argument1,argument2,2,false);
      23. //falls das der Fall ist, wird ein grüner Punkt in die Mitte gezeichnet
      24. }
      25. draw_set_color(c_black);
      26. draw_text(argument1+8,argument2-6,RadioText[argument0]);
      27. //so nur noch der Text des Buttons an der richtigen Stelle
      28. RadioXpos[argument0]=argument1;
      29. RadioYpos[argument0]=argument2;
      30. //damit wird die Position des Buttons gespeichert
      31. draw_set_color(__col);
      32. //setzt die Farbe wieder auf die Standartfarbe
      Alles anzeigen

      So dieses Script wird nun im Draw-Event so aufgerufen:
      Spoiler anzeigen
      Draw-Event :

      GML-Quellcode

      1. DrawRadio(Radio1,x,y);
      2. DrawRadio(Radio2,x,y+32);
      3. DrawRadio(Radio3,x,y+64);
      4. DrawRadio(Radio4,x,y+96);
      5. //das zeichnet alle 4 Radio-Buttons untereinander

      So jetzt haben wir 4 Radio-Buttons, die aber noch nichts können.
      Jetzt kommt das wichtigste:
      Das Überprüfen, ob auf einen Button angeklickt wurde.
      Wie machen wir das?
      So:
      Hachja... Immer diese Übersicht...
      Wir erstellen wieder ein neues Script.
      Ich nenne dieses jetzt mal "CheckRadio".
      Dieses Sript hat die Aufgabe alle Radio-Buttons zu überprüfen:
      Spoiler anzeigen

      GML-Quellcode

      1. /*
      2. Erklärung:
      3. Hier brauchen wir nicht viel:
      4. CheckRadio();
      5. Da es alles kontrolliert braucht es auch keine argumente.
      6. */
      7. for(i=0; i<RadioCounter; i+=1)
      8. {
      9. //damit jeder Button überprüft wird, gehen wir auch jeden durch.
      10. if (RadioDrawed[i]=true)
      11. {
      12. //das hier macht nur Sinn, wenn der entsprechende Button überhaupt da ist.
      13. if (mouse_check_button_pressed(mb_left))
      14. {
      15. //da ja nichts passiert, wenn die Maus auch nicht gedückt wird, überprüfen wir das hier auch nochmal
      16. if (mouse_x>RadioXpos[i]-4) and (mouse_y>RadioYpos[i]-4) and (mouse_x<RadioXpos[i]+4+string_width(RadioText[i])) and (mouse_y<RadioYpos[i]-6+string_height(RadioText[i]))
      17. {
      18. //wenn die Maus über Button und dem dazugehörigem Text ist
      19. //dann...
      20. for(d=0;d<RadioCounter;d+=1)
      21. {
      22. //... durchsuchen wir die Buttons nach Klassen und...
      23. if (RadioClass[i]=RadioClass[d])
      24. {
      25. //... wenn einer aus der Klasse gefunden wurde...
      26. RadioClicked[d]=false;
      27. //... darf dieser ja nicht mehr angeklickt sein
      28. }
      29. }
      30. RadioClicked[i]=true;
      31. //da dabei der eigendlich angeklickte Button auch ausgeschaltet würde, stellen wir diesen nachher auf true
      32. }
      33. }
      34. }
      35. }
      Alles anzeigen

      So... jetzt haben wir die Kontrolle fertig.
      Diese muss vor jeder anderen Radio-Button "Funktion" stehen (außer dem CreateRadio; am besten im begin step ganz oben)
      und wird mit
      Spoiler anzeigen

      GML-Quellcode

      1. CheckRadio();

      aufgerufen.
      Jetzt haben wir schonmal die Radio-Buttons größten Teils fertig.
      Jetzt will aber niemand Radio-Buttons, die nichts bringen, sondern es soll was passieren.
      Dazu kommt folgendes (ganz einfach):
      In dem Event, wo was passieren soll, könnte man das machen:
      Spoiler anzeigen

      GML-Quellcode

      1. if (RadioClicked[entsprechend]=true)
      2. {
      3. //das was passieren soll
      4. }

      das wäre jetzt aber unpraktisch, weil man ja mehrere Buttons in einer Klasse hat und es ja interessanter ist, welcher innerhalb der Klasse angeklickt wurde.
      Also erstellen wir wieder ein Script (ich nenne es "CheckRadioClass"):
      Spoiler anzeigen

      GML-Quellcode

      1. /*
      2. Erklärung:
      3. CheckRadioClass(class);
      4. 1.Argument: die Klasse, die untersucht werden soll
      5. */
      6. for (i=0; i<RadioCounter; i+=1)
      7. {
      8. //geht alle RadioButtons durch...
      9. if (RadioClass[i]=argument0)
      10. {
      11. //--- wenn einer aus der Klasse gefunden wird...
      12. if (RadioClicked[i]=true)
      13. {
      14. //wird überprüft, ob dieser angeklickt ist...
      15. return i;
      16. exit;
      17. //und dann wird seine id ausgegeben und die schleife beendet
      18. }
      19. }
      20. }
      Alles anzeigen

      Nun können wir ganz einfach überprüfen, welcher angeklickt ist:
      (Das entsprechende Event)... Beispiel:
      Spoiler anzeigen

      GML-Quellcode

      1. switch(CheckRadioClass(1))
      2. {
      3. case Radio3:
      4. //mach das und das
      5. break;
      6. case Radio4:
      7. //mach so und so
      8. break;
      9. case Radio5:
      10. //mach das so
      11. break;
      12. default:
      13. //das kann eigendlich nicht passieren, da einer angeklickt ist und immer nur einer angeklickt ist
      14. //aber sicher ist sicher
      15. break;
      16. }
      18. /*
      19. Es ginge auch:
      20. if (CheckRadioClass(1)=Radio2) //oder jeder andere Radio-Button
      21. {
      22. //mach dies und das
      23. }
      25. Das ist aber umständlicher
      26. */
      Alles anzeigen

      So... jetzt kann man Radio-Buttons erstellen, zeichnen, anklicken, überprüfen... öhm war da noch was? Ich glaube nicht.

      Achja: nicht vergessen das Object in den Room zu setzten :P



      -Tobi


      PS: Warum muss das denn so lang sein :D
      Dateien

      • example.zip

        (19,93 kB, 283 mal heruntergeladen, zuletzt: )

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Tobi ()

    • Find es eigentlich ganz nützlich, für Leute die nich ganz so erfahren sind. Wundert mich nur, warum noch keiner danke gesagt hat.

      Finds übrigens ganz gut gemacht. Obs mir hilft sag ich dir, wenn ichs mal brauch ;)
      So far, Schattenphoenix~
      _____________________________________________________________________________
      "Who needs a stairway to heaven...
      If there is an elevator to hell... ?      "
      - Vergessen
      "Auch ein perfektes Chaos ist etwas vollkommenes."
      - Jean Genet