simples RPG Menü Tutorial

    • GM 8

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

    • simples RPG Menü Tutorial

      Einfaches RPG – Menü Tutorial

      In diesem Tutorial werde ich euch den Grundgedanken hinter einem klassischem RPG Pausen Menü ála Pokemon zeigen:



      ___________________________
      1.
      /!ganz unten ist eine .rar mit der .gmk/!\
      als erstes brauchen wir ein kleines Bild von unserem Menü:

      Eins, Zwei, Drei […] sind natürlich nur Beispiele, ihr könnt alles beliebige reinschreiben.
      Ich nehme setze jetzt mal Den Raum auf 240*160, da das in etwa die Auflösung eines GBA Spieles ist. Nennen wir unser kleines Bildchen vom Menü einfach mal „sMenu“

      Ein hübsches Menü haben wir schonmal, jetzt brauchen wir eine Art Pfeil, der uns Anzeigt, wo wir uns im Menü befinden.

      (etwas klein, aber er passt)
      dieser kleine Kerl bekommt den Namen „sArrow“

      einen Spieler brauchen wir auch noch:

      ich belasse es so^^

      nun sollten wir uns den Objekten witmen.




      Als nächstes erstellen wir ein Objekt mit dem Namen „oMenu“.
      Dieses wird das Menü darstellen und drawen. Wir setzen zunächst alle
      Variablen, die wir brauchen:

      GML-Quellcode

      1. pos = 1 //damit legen wir fest, dass der erste Menüpunkt angeklickt ist
      2. maxpos = 5 //die Anzahl der Menüpunkte
      3. minpos = 1 //die kleinste Anzahl der Menüpunkte (immer 1)


      „pos“ beschreibt, dass wir von Anfang an das erste ausgewählt haben,
      maxpos bedeutet, dass es nichts höheres gibt, als 5
      und minpos soll bewirken, dass es nichts niedrigeres als 1 gibt.

      Nun kommen wir zum eigentlichen Code, im Draw-Event:

      GML-Quellcode

      1. draw_sprite(sMenu,0,x,y) //wir drawen das Bild vom Menü
      3. if pos = 1 // wenn die Auswahl 1 ist...
      4. {
      5. draw_sprite(sArrow,0,190,25) //drawen wir einen Pfeil an den ersten Menüpunkt
      6. }
      8. if pos = 2 // wenn die Auswahl 2 ist...
      9. {
      10. draw_sprite(sArrow,0,190,50) //drawen wir einen Pfeil an den zweiten Menüpunkt
      11. }
      13. if pos = 3 // wenn die Auswahl 3 ist...
      14. {
      15. draw_sprite(sArrow,0,190,75) //drawen wir einen Pfeil an den zweiten Menüpunkt
      16. }
      18. if pos = 4 // wenn die Auswahl 4 ist...
      19. {
      20. draw_sprite(sArrow,0,190,100) //drawen wir einen Pfeil an den zweiten Menüpunkt
      21. }
      23. if pos = 5 // wenn die Auswahl 5 ist...
      24. {
      25. draw_sprite(sArrow,0,190,125) //drawen wir einen Pfeil an den zweiten Menüpunkt
      26. }
      Alles anzeigen

      Die Erklärung sollte eigentlich reichen, aber da dieses Tutorial auch Anfänger betrifft, erkläre ich es nocheinmal: in der ersten Zeile wird das Bild von unserem Menü gedrawt. Was eigentlich recht logisch ist. Dannach folgen die „if“ abfragungen, welche fragen, ob „pos“ 1 ist, oder 2, oder 3...
      je nach dem welche Zahl „pos“ hat (1-5) wird unser kleiner Pfeil an der entsprechenden Position gedrawt.

      Nun zum Step-Event.

      GML-Quellcode

      1. if keyboard_check(vk_space)
      2. {
      4. if pos = 5
      5. {instance_destroy()
      6. global.canmove = true}
      9. if pos = 4
      10. {show_message(4)
      11. global.canmove = false}
      14. if pos = 3
      15. {show_message(3)
      16. global.canmove = false}
      19. if pos = 2
      20. {show_message(2)
      21. global.canmove = false}
      24. if pos = 1
      25. {show_message(1)
      26. global.canmove = false}
      28. }
      31. //je nachdem welcher Button ausgewählt wurde, passiert etwas anderes beim Drücken von der Leertaste
      Alles anzeigen


      das sollte eigentlich auch noch recht einfach sein: wir fragen ab, ob die Leertaste gedrückt wurde. Wenn sie das ist, wird abgefragt, an welcher Position „pos“ ist. Wenn z.b. „pos“ auf 5 ist, zerstört sich unser Menü von selbst, und die Bewegung des Spielers wird mit global.canmove (dazu komme ich später) freigegeben.

      … aber wie kommen wir zu den ganzen zahlen, die pos sein soll?
      Nun, das geht relativ einfach: wir machen zuerst ein „Press Up“ event
      (sieht so aus)

      dort schreiben wir folgendes:

      GML-Quellcode

      1. if minpos < pos
      2. {
      3. pos -= 1
      4. }


      das ganze ist jetzt nicht sonderlich schweres, es bedeutet nur:
      dass beim nach oben klicken unser Pfeil nach oben wandert. Allerdings
      bleibt er bei 1 stehen.

      Das ganze machen wir noch im gegenteil, ins „press down“ event:

      GML-Quellcode

      1. if maxpos > pos
      2. {
      3. pos += 1
      4. }


      das Bedeutet wieder nur, wenn wir nach unten klicken, geht unser Pfeil auch nach unten.
      Allerdings kann unser pfeil „maxpos“ nicht übersteigen, bleibt also bei 5 stehen.

      Jetzt wäre das Menü eigentlich auch schon fertig, aber ich will mal nicht so sein, und zeige euch noch, wie ihr das in ein kleines Spiel einbaut:

      als nächstes macht ihr also ein objekt mit dem Namen „oPlayer“ das wird euer Spieler.
      Wir schreiben ins Create event noch schnell

      GML-Quellcode

      1. global.canmove = true


      dadurch darf sich unser Spieler bewegen.


      Nun kommen wir einen Schritt weiter ins „Step-event“
      dort wird folgendes geschrieben:

      GML-Quellcode

      1. if global.canmove = true
      3. {
      4. if keyboard_check(vk_left)
      5. {
      6. x -= 3
      7. }
      9. if keyboard_check(vk_right)
      10. {
      11. x += 3
      12. }
      14. if keyboard_check(vk_up)
      15. {
      16. y -= 3
      17. }
      19. if keyboard_check(vk_down)
      20. {
      21. y +=3
      22. }
      23. }
      Alles anzeigen



      das ist auch ganz einfach: es wird abgefragt, ob wir uns bewegen dürfen (via global.canmove)
      sollte es so sein, können wir uns mit den Richtungstasten frei bewegen.

      Jetzt kommen wir noch ins „Press-Enter“ event:

      GML-Quellcode

      1. global.canmove = false
      3. instance_create(0,0,oMenu)



      damit legen wir fest, wenn wir „Enter“ drücken, dass unser Spieler sich NICHT mehr bewegen darf und wir das Menü erstellen.

      Jetzt legt ihr noch schnell den Player in den Raum, der die Maße 240/160 hat und schwupp
      auf testen klicken^^

      Steuerung:
      Pfeiltasten - Player Steuern
      Enter – Das Menü öffnen
      Oben/unten Pfeiltaste, bei offenem Menü lässt euch eure Sachen auswählen.

      Und mit Leertaste wählt ihr etwas aus.



      Ich hoffe ich habe das Verständlich erklärt, falls nicht bin ich für Fragen offen.^^


      lg, domis4
      Dateien

      • Menü_example.rar

        (11,31 kB, 402 mal heruntergeladen, zuletzt: )

      Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von domis4 ()

    • Nabend domis4,
      Habe gerade einen Blick in dein Tutorial geworfen. Schon einmal schön, dass du dir die Zeit nimmst soetwas auf die Beine zu stellen. Allerdings finde ich persönlich für soetwas kein Tutorial nötig, da es nur auf einfache Variablenabfragen basiert. Gut, für Anfänger kann das schon noch hilfreich sein. Allerdings kann man sich deine Methode duch Variablenverständnis auch einfach selbst herleiten - Ich denke auch als Anfänger. Das ist jetzt aber nur subjektiv betrachtet. Was mich etwas stört ist deine Programmierweise, da man einiges hätte verkürzen können. Folgende Verbesserungsvorschläge finde ich persönlich einfach besser organisiert, da man viele Codezeilen sparen würde. Natürlich soll das keine Kritik sein, sondern wie gesagt nur Vorschläge:

      Spoiler anzeigen

      Statt deinem Code:

      GML-Quellcode

      1. draw_sprite(sMenu,0,x,y) //wir drawen das Bild vom Menü
      3. if pos = 1 // wenn die Auswahl 1 ist...
      4. {
      5. draw_sprite(sArrow,0,190,25) //drawen wir einen Pfeil an den ersten Menüpunkt
      6. }
      8. if pos = 2 // wenn die Auswahl 2 ist...
      9. {
      10. draw_sprite(sArrow,0,190,50) //drawen wir einen Pfeil an den zweiten Menüpunkt
      11. }
      13. if pos = 3 // wenn die Auswahl 3 ist...
      14. {
      15. draw_sprite(sArrow,0,190,75) //drawen wir einen Pfeil an den zweiten Menüpunkt
      16. }
      18. if pos = 4 // wenn die Auswahl 4 ist...
      19. {
      20. draw_sprite(sArrow,0,190,100) //drawen wir einen Pfeil an den zweiten Menüpunkt
      21. }
      23. if pos = 5 // wenn die Auswahl 5 ist...
      24. {
      25. draw_sprite(sArrow,0,190,125) //drawen wir einen Pfeil an den zweiten Menüpunkt
      26. }
      Alles anzeigen


      Das hier: (Sieht meines Erachtens schon mal ordentlicher aus)

      GML-Quellcode

      1. draw_sprite(sMenu,0,x,y);
      2. switch(pos) {
      3. case 1: draw_sprite(sArrow,0,190,25); break;
      4. case 2: draw_sprite(sArrow,0,190,50); break;
      5. case 3: draw_sprite(sArrow,0,190,75); break;
      6. (...)
      7. }


      Das könnte man immer so weiter führen. Wie wärs aber mit einer von der Raumhöhe/-breite unabhängigen Variante? Das könnte man sogar in einer Zeile zusammenfassen:

      GML-Quellcode

      1. draw_sprite(sArrow,0,room_width-oMenu.sprite_width+BreitevonsArrow,pos*(room_height/oMenu.maxpos)-Anpassungswert);
      2. //Anpassungswert ist der Wert, der gesetzt wird, um den Pfeil noch beliebig verschieben zu können, um ihn z.B. genau mittig zu platzieren
      Diese Zeile habe ich nur mal auf die Schnelle geschrieben. Vielleicht ist sie fehlerhaft - aber darauf kommt es auch gar nicht an. Viel mehr sagt diese Zeile aus, dass man deinen Code sehr vereinfachen kann. (Wie gesagt, ich will dich hier nicht kritisieren, sondern nur verbessern)


      Wie du siehst spart man hier echt einige Zeilen, was die Übersicht auch besser behalten würde. Vielleicht übernimmst du ja etwas hiervon, mir solls recht sein^^. Aber ich hoffe du konntest hieraus noch alternative Lösungswege zur optimierung von Programmiercodes lesen. Damit will ich nicht sagen, dass meine Lösungswege perfekt sind, aber sie bieten meines Erachtens auf jedenfall schon mal mehr Übersicht. Zum Tutorial an sich kann ich aber sagen, dass du deinen Lösungsweg schön ausführlich und verständlich geschildert hast, sowohl im Code als auch nachträglich.

      Gruß,
      Boskura

      @Lucke: Hehe, RPG ist eine englische Abkürzung und bedeutet Role-Play-Game, also ein Rollenspiel. ein MMORPG wäre in dem Fall ein Massive-Multiplayer-Online-Role-Play-Game, got it? :P

      ____
      Adventskalender 2010: Blue Smiley

      Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von Boskura ()

    • @Boskura:
      ersmal danke für dein Feedbaq :thumbsup:

      ich habe das ganze absichtlich nicht gekürzt, da ich dieses Tutorial speziell an Anfänger gerichtet habe ^^
      ich denke es ist einfacher für sie, wenn sie den Code verstehen, da ich meine Codes früher auch recht einfach gehalten habe, wollte ich das speziell hier übernehmen ;)


      Edit: wow, vor einem halben Jahr hätte ich nie gedacht ein eigenes Tutorial zu schreiben :D
      lg, domis4

      PS: bei uns fällt Schule aus :P
      Unwetterwarnung ^^ gestern Schneesturm .... dabei "wollten" wir doch heute eine Probe schreiben :D... :P

      Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von domis4 ()