Menü Tutorial

Übersicht BlitzBasic FAQ und Tutorials

Neue Antwort erstellen

Abenteurer036

Betreff: Menü Tutorial

BeitragMi, Jan 06, 2010 23:38
Antworten mit Zitat
Benutzer-Profile anzeigen
Hallo,
dies ist mein erstes Tutorial und ich bemühe mich alles so ausführlich wie möglich zu erklären.

Früher habe ich immer nach BlitzBasic-Tutorials gesucht in denen erklärt wird wie man ein Menü oder Hauptmenü erstellt. Ich bin eigentlich nie richtig fündig geworden und die meisten Tutorials waren endweder mit Types oder nur mit der Maus bedienbar. Hier ein Tutorial von mir das Anfängern helfen soll ein Menü, ohne Types und mit der Tastatur bedienbar, hinzukriegen.

Was brauche ich für dieses Tutorial?
- ein paar Grundkentnisse!
- diese Grafikdatei *Klick Klick* (Man kann natürlich auch seine eigene verwenden Wink)

Schritt 1:

Zu Beginn wählen wir einen passenden Titel, stellen den Grafikmodus ein, setzten die Buffer und laden das Bild mit den Menübutton.

Code: [AUSKLAPPEN]
AppTitle"Testmenü"
Graphics 800,600,16,2
SetBuffer BackBuffer()

;Menübild laden.
menuebutton = LoadAnimImage("Menuebutton.png",200,40,0,6)


Schritt 2:

So, nun haben wir ein Bild in den Speicher geladen und wollen dieses natürlich auch verwenden und dazu brauchen wir eine Schleife.

Code: [AUSKLAPPEN]
;Schleife...
While Not KeyHit(1)

Wend
End


Um nun das Menü anzuzeigen müssen wir in der Schleife mit dem Befehl DrawImage arbeiten.

Code: [AUSKLAPPEN]
;Schleife...
While Not KeyHit(1)
Cls

DrawImage menuebutton,300,100,0
DrawImage menuebutton,300,160,3
DrawImage menuebutton,300,220,5

Flip ;Buffer flippen <->
Wend
End


Jetzt setzen wir das ganze in Select und Case und schreiben VOR der Schleife eine Variable mit der Select arbeiten soll.

Code: [AUSKLAPPEN]
AppTitle"Testmenü"
Graphics 800,600,16,2
SetBuffer BackBuffer()

;Menübild laden.
menuebutton = LoadAnimImage("Menuebutton.png",200,40,0,6)

;Das ist unsere Menüvariable, die wir am Anfang auf 1 setzten.
menue=1

;Schleife...
While Not KeyHit(1)
Cls

;Hier beginnt Select.
Select menue

 Case 1
    DrawImage menuebutton,300,100,0
  DrawImage menuebutton,300,160,3
  DrawImage menuebutton,300,220,5

;Hier ended Select.
End Select

Flip ;Buffer flippen <->
Wend
End


Zuerst schreibt man Select und danach die Variable die man Selectieren will, in unserem Fall ist das ja das Menü also die "menue" Variable.

Wenn wir das Programm jetzt starten, sieht man 3 kleine Menübutton durch die man noch nicht navigieren kann. Ist ja eigentlich klar weil wir unserem Menü nur eine Option gegeben haben bzw. nur ein Case. Also müssen wir weitere Cases hinzufügen um andere auswahlmöglichkeinten zu erhalten.

Code: [AUSKLAPPEN]
AppTitle"Testmenü"
Graphics 800,600,16,2
SetBuffer BackBuffer()

;Menübild laden.
menuebutton = LoadAnimImage("Menuebutton.png",200,40,0,6)

;Das ist unsere Menüvariable, die wir am Anfang auf 1 setzten.
menue=1

;Schleife...
While Not KeyHit(1)
Cls

;Hier beginnt Select.
Select menue

 Case 1 ;erste Option
    DrawImage menuebutton,300,100,0
  DrawImage menuebutton,300,160,3
  DrawImage menuebutton,300,220,5

 Case 2 ;zweite Option
  DrawImage menuebutton,300,100,1
    DrawImage menuebutton,300,160,2
  DrawImage menuebutton,300,220,5

 Case 3 ;dritte Option
  DrawImage menuebutton,300,100,1
  DrawImage menuebutton,300,160,3
    DrawImage menuebutton,300,220,4

;Hier ended Select.
End Select

Flip ;Buffer flippen <->
Wend
End


Schritt 3:

Nun haben wir 3 verschiedene Auswahlmöglichkeiten hinzugefügt. Wenn wir die Zahl der Variable "menue" jetzt in 1,2 oder 3 ändern, so sehen wir das sich jede Zahl anders auf unser Menü auswirkt. Das liegt daran das wir für jede Option bzw. für jedes Case etwas anderes eingetragen haben. Um jetzt einen flüssigen austausch der verschiedenen Optionen/Cases zu erhalten müssen wir die Variable ansprechen und je nach Tastendruck verändern lassen.

Code: [AUSKLAPPEN]
;Wenn Taste gedrückt wird und "menue" größer
;als 1 ist dann kann man nach unten navigieren.
If KeyHit(200) And menue>1
  menue=menue-1
EndIf

;Wenn Taste gedrückt wird und "menue" kleiner
;als 3 ist dann kann man nach oben navigieren.
If KeyHit(208) And menue<3
  menue=menue+1
EndIf


Das schnippseln wir jetzt noch in die Schleife.

Code: [AUSKLAPPEN]
AppTitle"Testmenü"
Graphics 800,600,16,2
SetBuffer BackBuffer()

;Menübild laden.
menuebutton = LoadAnimImage("Menuebutton.png",200,40,0,6)

;Das ist unsere Menüvariable, die wir am Anfang auf 1 setzten.
menue=1

;Schleife...
While Not KeyHit(1)
Cls

;Hier beginnt Select.
Select menue

 Case 1
    DrawImage menuebutton,300,100,0
  DrawImage menuebutton,300,160,3
  DrawImage menuebutton,300,220,5

 Case 2
  DrawImage menuebutton,300,100,1
    DrawImage menuebutton,300,160,2
  DrawImage menuebutton,300,220,5

 Case 3
  DrawImage menuebutton,300,100,1
  DrawImage menuebutton,300,160,3
    DrawImage menuebutton,300,220,4

;Hier ended Select.
End Select

;Wenn Taste gedrückt wird und "menue" größer
;als 1 ist dann kann man nach unten navigieren.
If KeyHit(200) And menue>1
  menue=menue-1
EndIf

;Wenn Taste gedrückt wird und "menue" kleiner
;als 3 ist dann kann man nach oben navigieren.
If KeyHit(208) And menue<3
  menue=menue+1
EndIf

;Hier kann man überprüfen auf welchem
;Case man sich gerade befindet.
Text 10,10,menue

Flip ;Buffer flippen <->
Wend
End


Yay! Wenn wir nun das Programm starten, können wir frei durch unser kleines Menü navigieren. Fehlt eigentlich nur noch das etwas passiert wenn man auf einem Button ist und man z.B. Eingabe drückt.

Auch das ist kein Problem:

Code: [AUSKLAPPEN]
;Wenn die Eingabetaste gedrückt wird und "menue" sich auf Case 3 befindet dann endet das Programm.
If KeyHit(28) And menue=3 Then End


Wenn man das auch bei den anderen Cases anwended, wird man feststellen das immer nur eins funktioniert und die anderen nicht reagieren. Das liegt daran das beim aufrufen von KeyHit(28), der Tastenscan "28" gelöscht wird.

Um dies zu verhindern muss man eine Variable erzeugen die folgendermaßen aussieht:

Code: [AUSKLAPPEN]
variabelname=Keyhit(28)

If variabelname And menue=3 Then End


Wichtig dabei ist das die Variable in der Schleife steht Exclamation

So das wars, ich hoffe ich konnte vielen mit diesem Tutorial weiterhelfen. Ich beantworte gerne Fragen zu diesem Tutorial und auch Kritik oder eventuelle Verbesserungsvorschläge sind gern gesehen. Die Grafikdatei wurde von mir erstellt und darf in Spielen oder Sonstigem gern verwendet werden ohne mich vorher um Erlaubniss fragen zu müssen.

MfG Abenteurer036
New Project [4%]
Schinken Maker [100%]

Jamagin

BeitragMi, Jan 06, 2010 23:44
Antworten mit Zitat
Benutzer-Profile anzeigen
Wer heute nicht mit der Maus arbeitet ist selber schuld! Nicht schon wieder ein Menütutorial!! Ich will dich nicht kritisieren, aber es gibt ja eine Forensuche und schon zig Menüanleitungen!

Verweis auf das BlitzBasic Buch von Rene Mayer...! Die Onlinehilfe trägt selbiges bei!!

Ist echt schon Wahnsinn was da abgeht!! Die einen wollen, daß man Ihnen ein fertiges Spiel schreibt, die anderen wollen ein Menü aus dem Jahre 1985!! Tut mir leid Abenteurer aber wenn schon ein Menütutorial dann eben so einfach als möglich! Da gibt es nur mehr die Maus. Wir sind alle schon bequem geworden...


Nicht grantig sein, jop?

lg. Jamagin Cool
Bevor du etwas neues beginnst, erledige das alte

Abenteurer036

BeitragMi, Jan 06, 2010 23:49
Antworten mit Zitat
Benutzer-Profile anzeigen
Nun es gibt aber noch die Leute die nicht gerade einen Ego-Shooter oder ein Strategiespiel Programmieren wollen sondern z.B. ein Jump n' Run. Diese spielt man mit der Tastatur und da wären Menüs die man selbig steuert ganz praktisch Wink
New Project [4%]
Schinken Maker [100%]

Jamagin

BeitragMi, Jan 06, 2010 23:51
Antworten mit Zitat
Benutzer-Profile anzeigen
Es gibt auch Joysticks!

lg. Jamagin
Bevor du etwas neues beginnst, erledige das alte

Abenteurer036

BeitragMi, Jan 06, 2010 23:53
Antworten mit Zitat
Benutzer-Profile anzeigen
Jop die gibt es^^

Aber ich kann mir nicht vorstellen das jeder der das fertige Spiel dann spielt einen Joystick besitzt, eine Tastatur sicherlich. Außerdem bevorzugen nicht alle das steuern mit dem Joystick.
New Project [4%]
Schinken Maker [100%]

Jamagin

BeitragMi, Jan 06, 2010 23:57
Antworten mit Zitat
Benutzer-Profile anzeigen
Ja natürlich da hast du Recht. Aber wenn du flexibel wärst, könntest ja beides in dein Menü einbauen? Nur so ein Vorschlag meinerseits!!

lg. Jamagin

NB: Und das mit der Maus meinte ich, die Menüführung kann ruhig mit der Maus erledigt werden, zB. ein Einstellungsmenü wo du verschiedene Einstellungen vornehmen kannst, würdest dies alles auf Tastaturcodes legen? Da wäre es ja sinnvoller diese mit der Maus ein- oder auszuschalten!
Auf jedenfall einfacher wäre es!
Bevor du etwas neues beginnst, erledige das alte

Abenteurer036

BeitragDo, Jan 07, 2010 0:01
Antworten mit Zitat
Benutzer-Profile anzeigen
Die Menüführung mir der Maus und das Spiel mit der Tastatur ist natürlich auch keine schlechte Idee aber es gibt eben auch Leute die es gärne per Pfeiltasten hätten Smile
New Project [4%]
Schinken Maker [100%]

Valnar

BeitragDo, Jan 07, 2010 0:02
Antworten mit Zitat
Benutzer-Profile anzeigen
Ich muss Jamagin zustimmen aber auch wiedersprechen:

Es gibt 'einige' Tutorials für Hauptmenüs. Zwar oftmals nicht in der Tutorial-Sektion, es gibt aber sehr viele Beiträge zu fragen in anderen Bereichen, die schon fast einen Tutorial gleichkommen, wenn man dabei mitdenkt.

Das Tutorial ist ansich gut, sollte aber auch Maussteuerung beinhalten. Auch solltest du es mmn. so umschreiben, dass (externe) Bilder nicht gerade gebraucht werden. Versuch es mal mit Rect.

Ich persöhnlich bin manchmal zu faul die Maus zu benutzen, beherrsche mein PC fast nur mit der Tastatur.

Den Einwand aber mit dem Joystick find ich aber übertrieben und Kindisch.

Auch sollte der Abfrageblock mit der Tastatur mmn. in einer If/Elseif-Block untergebracht werden.
[url][/url]

Abenteurer036

BeitragDo, Jan 07, 2010 0:09
Antworten mit Zitat
Benutzer-Profile anzeigen
Hmm... mit Rect arbeite ich leider nur sehr ungern aber für dieses Tutorial hätte es nicht schaden können. Menü mit Maussteuerungs Tutorials gibts wie Sand am Meer deswegen beschränke ich mich in diesem Tutorial nur auf die Tastatur. Das mit ElseIf werde ich überarbeiten Wink
New Project [4%]
Schinken Maker [100%]

Jamagin

BeitragDo, Jan 07, 2010 0:13
Antworten mit Zitat
Benutzer-Profile anzeigen
Okay, ich beuge mich!!

Habs ja nur gut gemeint, ist leider falsch angekommen!!

Aber eine Frage erlaube mir bitte. Wieso machst nicht alles ins Menü, Maus wie auch Tastatursteuerung, somit wäre dein FanClub sicherlich größer, weil es gibt Leute die lieber mit der Maus arbeiten und es gibt Leute die auf der Tastatur daheim sind.

Ok, ich bin auch auf der Tastatur daheim aber dennoch stelle ich Menüs lieber mit der Maus zusammen!!

Man kann es eh nicht jeden Recht machen aber man kann es jedem einfacher machen. Nur so ein Vorschlag von mir, der beide Seiten bereichern würde...!


lg. Jamagin Cool

NB: Ich arbeite an meiner Höflichkeit, okay!
Bevor du etwas neues beginnst, erledige das alte
  • Zuletzt bearbeitet von Jamagin am Do, Jan 07, 2010 0:17, insgesamt einmal bearbeitet

BladeRunner

Moderator

BeitragDo, Jan 07, 2010 0:15
Antworten mit Zitat
Benutzer-Profile anzeigen
Ich fände sauber eingerückten Code schonmal einen Anfang. Eigentlich sogar ein Minimum für ein Tutorial.
Zu Diensten, Bürger.
Intel T2300, 2.5GB DDR 533, Mobility Radeon X1600 Win XP Home SP3
Intel T8400, 4GB DDR3, Nvidia GF9700M GTS Win 7/64
B3D BMax MaxGUI

Stolzer Gewinner des BAC#48, #52 & #92

Abenteurer036

BeitragDo, Jan 07, 2010 0:18
Antworten mit Zitat
Benutzer-Profile anzeigen
Jamagin hat Folgendes geschrieben:
Okay, ich beuge mich!!

Habs ja nur gut gemeint, ist leider falsch angekommen!!

NB: Ich arbeite an meiner Höflichkeitm, okay!


Ich hab an deiner Höflichkeit nichts auszuschließen Smile
@Warum nicht beides? - siehe einen Beitrag höher.

@BladeRunner: Sauber eingerückter Code? Wei meist du das?
New Project [4%]
Schinken Maker [100%]

BladeRunner

Moderator

BeitragDo, Jan 07, 2010 0:23
Antworten mit Zitat
Benutzer-Profile anzeigen
Das alle Befehle eines Blockes die selbe Einrückung haben. Das ist bei dir nicht gegeben. Du rückst zwar ein, springst aber wild hin und her.
Deine Drawimages zB. sind an verschiedener Stelle obwohl sie zum selben Block gehören.
Zu Diensten, Bürger.
Intel T2300, 2.5GB DDR 533, Mobility Radeon X1600 Win XP Home SP3
Intel T8400, 4GB DDR3, Nvidia GF9700M GTS Win 7/64
B3D BMax MaxGUI

Stolzer Gewinner des BAC#48, #52 & #92

Abenteurer036

BeitragDo, Jan 07, 2010 0:25
Antworten mit Zitat
Benutzer-Profile anzeigen
Ok ich werde mich morgen darum kümmern.
New Project [4%]
Schinken Maker [100%]

Jamagin

BeitragDo, Jan 07, 2010 0:26
Antworten mit Zitat
Benutzer-Profile anzeigen
@Abenteurer
Dein Code...
Code: [AUSKLAPPEN]

;Wenn Taste gedrückt wird und "menue" größer als 1 ist dann kann man nach unten navigieren.
If KeyHit(200) And menue>1
   menue=menue-1
EndIf

;Wenn Taste gedrückt wird und "menue" kleiner als 3 ist dann kann man nach oben navigieren.
If KeyHit(208) And menue<3
   menue=menue+1
EndIf


Das sind Menüstile aus dem Jahre 1990, angenommen du hast 10 Menüteile und bist beim letzten, warum nicht gleich vom letzten auf den ersten springen? Das gleiche umgekehrt!

Wäre flexibler...!

Code: [AUSKLAPPEN]

If Keyhit(200)                    ; Pfeiltaste nach oben (siehe Onlinehilfe)
   menue = menue -1
elseif keyhit(208)               ; Pfeiltaste nach unten
   menue = menue + 1
endif
if menue > 10 then menue = 1 elseif menue < 1 then menue = 10



lg. Jamagin
Bevor du etwas neues beginnst, erledige das alte

Abenteurer036

BeitragDo, Jan 07, 2010 0:33
Antworten mit Zitat
Benutzer-Profile anzeigen
Ich werde am Tutorial verbessern was es noch zu verbessern gibt aber eine Mausnavigation werde ich dennoch nicht einbauen. Wer ein Maustut sucht wird es sicherlich finden Smile
New Project [4%]
Schinken Maker [100%]

Neue Antwort erstellen


Übersicht BlitzBasic FAQ und Tutorials

Gehe zu:

Powered by phpBB © 2001 - 2006, phpBB Group