Eine Objekt-Scrollbox erstellen

    • Eine Objekt-Scrollbox erstellen

      Ich möchte nun auch einmal ein kleines Tutorial posten.
      Ich denke, viele von euch haben auch schon mal das Problem gehabt, dass man in Strategiespielen oder ähnlichem
      im Bau-Menü die Objekte gerne in einer Scrollbox angeordnet haben möchte. Wie das geht, möchte ich in diesem
      Tutorial zeigen.
      Vorweg eine kurze Klarstellung (nicht das sich jemand was falsches vorstellt): Die Bedingungen dafür sind, das die
      Objekte die gleiche Höhe und Breite besitzen. Außerdem werden die Objekte nicht so dargestellt, wie in einer
      Windows-Scrollbox, also es wird entweder das ganze Objekt gezeigt oder es wird nicht gezeigt.

      ------------------------------------------------------------------------------------------------------------------------------------------
      -------------------------------------------1.Material-----------------------------------------------------------------------------------
      ------------------------------------------------------------------------------------------------------------------------------------------

      Wir brauchen:
      -drei Sprites gleicher Höhe und Breite, die möglichst etwas unterschiedlich aussehen
      -3 Objekte mit diesen Sprites, die ansonsten nichts weiter erledigen (obj_scroll1, obj_scroll2, obj_scroll3)(origin=0,0)
      -ein Sprite mit einem nach oben Pfeil (Origin=Center)
      -ein Sprite mit einem nach unten Pfeil(Origin=Center)
      -ein Objekt "obj_up" mit dem nach oben Pfeil Sprite (Code->Teil 3.1)
      -ein Objekt "obj_down" mit dem nach unten Pfeil Sprite(Code->Teil 3.2)
      -ein Objekt "obj_scrollbox" ohne Sprite (Code->Teil 2)

      ------------------------------------------------------------------------------------------------------------------------------------------
      -------------------------------------------2. Die eigentliche Scrollbox: obj_scrollbox----------------------------------------------
      ------------------------------------------------------------------------------------------------------------------------------------------

      Die eigentliche Scrollbox erledigt die Hauptarbeit und ist auch am schwierigsten zu programmieren. Um eine Scrollbox
      zu benutzen, muss dieses Objekt auf die Karte gesetzt werden.

      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>2.1. Create-Event<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
      Im Create-Event werden die Startwerte für die Box gesetzt. Hier kann man bei Bedarf die Werte abändern, um eine
      individuelle Box zu gestalten.

      Zuerst legen wir die Eigenschaften der Objekte fest, die wir nachher der Box zuordnen:

      GML-Quellcode

      1. //eigenschaften der zugeordneten objekte
      2. hh=50; //höhe
      3. bb=100; //breite

      Als nächstes geben wir an, wieviele Objekte wir zuordnen möchten

      GML-Quellcode

      1. cnt=3; //anzahl der gespeicherten objekte

      Dann wieviele Objekte gleichzeitig sichtbar seien sollen:

      GML-Quellcode

      1. visobj=2; //anzahl der gleichzeitig sichtbaren objekte

      Dann ordnen wir einem Array die darzustellenden Objekte zu:

      GML-Quellcode

      1. //array mit den objekten
      2. obj[0]=obj_scroll1;
      3. obj[1]=obj_scroll2;
      4. obj[2]=obj_scroll3;

      Dann legen wir fest, welches Objekt das oberste sichtbare sein soll

      GML-Quellcode

      1. obobj=1; //erstes sichtbares objekt

      Als nächstes müssen wir die Scrollpfeile erzeugen, ihre
      ID's abspeichern und ihnen mitteilen, zu welcher Box sie gehören:

      GML-Quellcode

      1. //up und down pfeile erzeugen
      2. uparr=instance_create(x+bb+8+10,y+8,obj_up);//erzeugen und ID speichern
      3. uparr.own=id;//mitteilen, zu welcher Box er gehört
      4. downarr=instance_create(x+bb+8+10,y+hh*visobj+12,obj_down);//erzeugen und ID speichern
      5. downarr.own=id;//mitteilen, zu welcher Box er gehört

      Die Werte ergeben sich aus:
      Up-Pfeil:
      x:x+bb+0.5*Sprite-Breite des Pfeils+Breite des Randes in der Box
      y:y+0.5*Sprite-Höhe des Pfeils
      Down-Pfeil:
      x:x+bb+0.5*Sprite-Breite des Pfeils+Breite des Randes in der Box
      y:y+hh*Zahl der sichtbaren Objekte+Dicke des Randes in der Box-0.5*Sprite-Höhe

      Damit die Box weiß, wann sie sich wieder neu "zeichnen" muss, legen wir eine Nachrichtenvariabele fest:

      GML-Quellcode

      1. //message variabele
      2. redrw=false;


      Nun müssen wir das Erste mal die Boxobjekte erzeugen und an ihren Platz setzen:

      GML-Quellcode

      1. //konstruktionscode für die sichtbaren elemente
      2. if (cnt<=visobj) //es sind sowieso alle objekte sichtbar
      3. {
      4. for (i=0;i<cnt;i+=1)//for-Schleife durchlaufen, bis alle cnt Objekte gemacht wurden
      5. {//objekte an den passenden stellen erzeugen
      6. //während in "obj[]" die Objekttypen gespeichert werden, werden in "realobj[]" die Ids der real erzeugten Objekte gespeichert
      7. realobj[i]=instance_create(x+10,y+10+i*hh,obj[i]);
      8. }
      9. }
      10. else //manche objekte sind unsichtbar
      11. {
      12. for (i=0;(i<visobj)&&(obobj-1+i<cnt);i+=1)
      13. //es dürfen nicht mehr als die sichtbaren objekte erzeugt werden && das letzte Objekt muss gerade noch sichtbar sein
      14. {//objekte an den passenden stellen erzeugen
      15. realobj[i]=instance_create(x+10,y+10+i*hh,obj[i+obobj-1]);
      16. }
      17. }
      Alles anzeigen



      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>2.2. Step-Event<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
      Im Step-Event wird-Bei mir mit Drag&Drop Prüfung- geprüft, ob "redrw=true" ist, wenn ja müssen die Boxobjekte
      neu erzeugt werden und die Variabele "redrw" wird wieder auf false gesetzt.

      Bevor jedoch die Elemente neu erzeugt werden, werden mithilfe des folgenden Codes alle Elemente, die in "realobj[]"
      gespeichert sind, gelöscht:

      GML-Quellcode

      1. //zuerst alle realobjekte löschen
      2. for (i=0;i<visobj;i+=1)
      3. {
      4. with (realobj[i]) instance_destroy();
      5. }


      Anschließend folgt wieder der bereits im Create-Event beschriebene Code zur Erzeugung der Instanzen.

      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>2.3. Draw-Event<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
      Im Draw-Event wird die Box um die Objekte herum gezeichnet. Dazu setzt man zunächst die Farbe auf einen beliebigen
      Wert und zeichnet dann ein Rechteck mit folgenden Werten:
      x1:x
      y1:y
      x2:x+bb+innerer Boxrand+Sprite-Breite des Pfeils
      y2:y+hh*visobj+2*Innerer Boxrand
      Wir nehmen einen Boxrand von 10 Pixeln.

      Weiter zeichnen wir nun mit einer anderen Farbe den inneren Teil der Box:
      x1:x+innerer Boxrand
      y1:y+innerer Boxrand
      x2:x+bb+innerer Boxrand
      y2:y+hh*visobj+innerer Boxrand

      Damit haben wir die Box gezeichnet.

      ------------------------------------------------------------------------------------------------------------------------------------------
      -------------------------------------------3. Die Scrollpfeile--------------------------------------------------------------------------
      ------------------------------------------------------------------------------------------------------------------------------------------
      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>3.1. Der Up-Pfeil<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
      a) Create-Event:
      Setze die Variabele "clickable" auf true, sie dient dazu, das die Scoll-Box nicht beim ersten Click nach oben rast.

      b)Left Mouse Button-Event:

      GML-Quellcode

      1. if (clickable) //wenn der Pfeil gedrückt werden kann
      2. {
      3. clickable=false;
      4. alarm[0]=10;
      5. if (own.obobj>1) //wenn das oberste angezeigte objekt nicht das erste ist, kannst du weiter nach oben gehen
      6. {
      7. own.obobj-=1;
      8. own.redrw=true;//Nachricht senden, dass die Box neugezeichnet werden muss
      9. }
      10. }


      c)Alarm 0-Event:

      GML-Quellcode

      1. clickable=true; //den Knopf wieder drückbar machen.


      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>3.2. Der Down-Pfeil<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

      Beim nach unten Pfeil entspricht der Code ziemlich genau dem des nach oben Pfeils.
      Nur der Code für die Scrollbedingung im Click-Event ändert sich:

      GML-Quellcode

      1. if (clickable) //wenn der Pfeil gedrückt werden kann
      2. {
      3. clickable=false;
      4. alarm[0]=10;
      5. if (own.obobj<own.cnt) //wenn das oberste angezeigte objekt nicht das letzte ist, kannst du weiter nach unten gehen.
      6. {
      7. own.obobj-=1;
      8. own.redrw=true;//Nachricht senden, dass die Box neugezeichnet werden muss
      9. }
      10. }





      _________________________________________________________________________________________________________________
      Um das Ergebnis zu betrachten, musst du eine Instanz von "obj_scrollbox" auf die Karte setzen und das Spiel starten.


      Ich hoffe, das euch mein Tutorial etwas nutzt und das ich alles gut erklärt habe.
      Viel Spaß mit eurer Scrollbox.

      >>.gmk File

      Dateien

      • scrollbox.zip

        (16,69 kB, 339 mal heruntergeladen, zuletzt: )
      ___________________________________________________________
      Beware of wild pointers      ______Hinweis für Allergiker: Kann Spuren von Ironie enthalten_____

    • Sieht schön aus, sehr gut erklärt :thumbsup:
      Aber wieso deletest und erstellst du die Objekte in jedem Step neu? Das schränkt die Flexibilität enorm ein finde ich und dürfte wahrscheinlich auch aufwändiger zu berechnen sein(Beim Ausführen). Ok, es zeigt einen Lösungsweg, der Lesende soll ja schliesslich auch noch was machen. :P
      "das war meine letzte flamewar PM an dich ."

    • Benutzer online 1

      1 Besucher