Menü's einfach erstellen mit PButtons.

Übersicht BlitzBasic FAQ und Tutorials

Neue Antwort erstellen

Pdd

Betreff: Menü's einfach erstellen mit PButtons.

BeitragMi, Dez 27, 2006 16:15
Antworten mit Zitat
Benutzer-Profile anzeigen
So, hier mal ein Tutorial von mir.

Wie kann ich leicht, schnell und einfach ein Menü erstellen

Worum geht's?
Jeder kennt das Problem: Das Spiel ist fertig, es fehlt nurnoch ein Menü. Aber das ist immer so Zeitaufwändig,
vorallem wenn man es mit der Maus bedienen will. Dafür gibt es aber eine Lösung! Razz

1. Die Grundstruktur eines Menüs

Klar, jeder macht seine Menüs, wie er will, aber ich persönlich bevorzuge diese Methode:

Code: [AUSKLAPPEN]

Graphics 800, 600, 32, 2
SetBuffer BackBuffer()

Global menu = 1
Global Timer = CreateTimer(30)

Repeat
   WaitTimer(Timer)
   Cls
   
   Flip
Until menu = 0
End


So, das dürfte erstmal für jeden klar sein. Eine Schleife, die mit 30FPS und BackBuffer läuft.
Soweit hiermit, jetzt gehts weiter...

2. Der Eindruck ist alles

Zu einem guten Menü gehört die Gute Grafik, denn das Auge hört mit, (oder wie war das? Razz).
Also erstellen wir in einem Grafik-Programm unserer Wahl eine absolut non-topp-bare Grafik. Die "GrundGrafik".
Hier ist meine:
user posted image

Damit das ganze auch etwas "Animiert" wird, noch eine 2. Grafik des Exit-Buttons:
user posted image

3. Die Struktur

Überlegen wir also, wie das Menü aufgebaut werden soll. Grundsätzlich ist das immer so in etwa:

Code: [AUSKLAPPEN]

Menü
|-Einzelspieler
  |-Deathmatch
  |-Etc.
|-Mehrspieler
  |-Internet
  |-LAN
  |-Bots
|-Einstellungen
  |-Grafik
    |-Benutzerdefiniert
  |-Sound
|-Beenden


Natürlich ist das hier nur Beispielhaft, dein Menü kann antürlich variieren.

4. Der MenuState

Ich löse das ganze so: Jedem "Teil" des Menüs wird eine Status zugeördnet. Das ist eine Zahl:

Code: [AUSKLAPPEN]

Menü           |Status
|-Einzelspieler 1
  |-Deathmatch  2
|-Mehrspieler   3
  |-Internet    4
  |-LAN         5
  |-Bots        6
|-Einstellungen 7
  |-Grafik      8
...
|-Beenden       


Zitat:
Beachte: Der Beenden-"Teil" hat absichtlich keinen Status!


Jetzt hat jeder "Teil" des Menüs einen Status. Diesen Fragen wir in der Schleife jetzt ab:
Code: [AUSKLAPPEN]

Select menustate
   Case 1
      ; Einselspieler
   Case 2
      ; Einzelspieler - DeathMatch
   ...
End Select


Nun können wir hinter jedes Case das entsprechende Menü setzen. So bleibt alles schön geordnet und sauber.

In unserem Fall haben wir eigentlich nur 2 Statuse.

Code: [AUSKLAPPEN]

Menü
|-Hauptmenü 1
  |-Daddln  2
|-Beenden


5. Die Grafik

Jetzt, da unser Gerüst schon steht, werden wir anfangen, in jedem Status die gewünschte Grafik(/Sound) einzusetzen:

Code: [AUSKLAPPEN]

Graphics 800, 600, 32, 2
SetBuffer BackBuffer()

Global MainImage = LoadImage("main.png")
Global menu = 1
Global Timer = CreateTimer(30)
Global menustate = 1

Repeat
   WaitTimer(Timer)
   Cls
   
   Select menustate
      Case 1
         ; Hauptmenü   
            ; Das Menü-Bild malen
            DrawImage MainImage, 0, 0
      Case 2
         ; daddln
            Cls
            Color 255, 255, 255
            Text 10, 10, "Zurück."
   End Select
   
   Flip
Until menu = 0
End


Somit wird in jedem Status der entsprechende Teil angezeigt. Im "daddln"-Status haben wir nur einen billigen Zurück-Button, der aus einem Text (Kein Image) besteht.

6. Die Bedienung

Unser Menü sollte man natürlich mit der Maus bedienen können. Die meisten, die schoneinmal ein Menü gemacht haben, werden jetzt aufstöhnen. Ja, das ist aufwändig.
Aber, dafür habe ich für euch die PButtons-Lib erstellt. Mit dieser (einfachen) Lib könnt ihr das ganze etwas vereinfachen.
Die Lib findet ihr hier.

Bisher haben wir ja nur ein Bild in dem 2 Buttons sind (Daddln, Ende). Nun wollen wir diese Buttons auch "Klickbar" machen.

Code: [AUSKLAPPEN]

Global Btn_daddln = PB_CreateButton("Jetzt daddln: Hier klicken!!!", 40, 176, 1, 232, 54)
Global Btn_beenden = PB_CreateButton("Zum Beenden hier drücken.", 610, 536, 1, 164, 43, "exit_over.png")


Mit diesem Code erstellt man 2 Buttons. Zur leichteren Erkennung kennzeichne ich alle Buttons mit dem Kürzel "Btn_".
Die Parameter der Funktion sind folgende:
Hint, X, Y, Ob der Hint angezeigt werrden soll, Breite, Höhe, Over-Bild

Für alle, die es nicht wissen: Ein Hint ist dieser "Tooltipp", der immer angezeigt wird, wenn man länger über einem Objekt mit der Maus ist.
Das Over-Bild ist ein Bild, das angezeigt wird, wenn man mit der Maus über dem Button ist.

Wie ihr unschwer erkennen könnt, ist der "daddln"-Btton nicht animiert, dafür aber der Ende-Button.

7. Button-States

Ein Button kann verschiedene Stadien haben. Hier sind sie aufgezählt:
-Gedrückt
-Berührt
-Deaktiviert/Aktiviert

Diese Stadien muss man abfragen. Dazu muss man zuerst in jedem Schleifendurchlauf Code: [AUSKLAPPEN]
PB_Update()
aufrufen, damit die Buttons erstmal angezeigt werden.
Um jetzt abzufragen, ob der Button gedrückt/berührt wurde, kann man folgende Funktionen verwenden:
Code: [AUSKLAPPEN]

If PB_ButtonHit(Btn_daddln) Then ...
If PB_ButtonOver(Btn_beenden) Then ...


Soweit, so gut. Wink
Nun, wollen wir aber, das man im Singelplayer-Menü nicht die Buttons des Mutliplayer-Menüs drücken kann, denn das wäre ja mist, also müssen wir in jedem Menü-Status die entsprechenden Buttons Deaktivieren/Aktivieren:
Code: [AUSKLAPPEN]

PB_DisableAll()

Deaktiviert alle Buttons,
Code: [AUSKLAPPEN]

PB_EnableAll()

Aktiviert alle Buttons.

Einzelne Buttons kann man mit folgender Funktion Aktivieren/Deaktivieren
Code: [AUSKLAPPEN]

PB_EnableButton(Btn_daddln)
bzw.
PB_DisableButton(Btn_beenden)


8. Das Fertige Menü

Hier also alles fertig eingebaut:

Code: [AUSKLAPPEN]

; Beispiel für die Nutzung der PButtons-lib.

Include "PButtons.bb"

Graphics 800, 600, 32, 2
SetBuffer BackBuffer()

Global MainImage = LoadImage("main.png")
Global menu = 1
Global Timer = CreateTimer(30)
Global menustate = 1

Global Btn_daddln = PB_CreateButton("Jetzt daddln: Hier klicken!!!", 40, 176, 1, 232, 54)
Global Btn_beenden = PB_CreateButton("Zum Beenden hier drücken.", 610, 536, 1, 164, 43, "exit_over.png")
Global Btn_back = PB_CreateButton("Drücke hier, um zurück zu gelangen.", 10, 10, 1, StringWidth("Zurück."), FontHeight())

PB_SetHintFont("Verdana")
PB_SetHintColor(245, 248, 152, 0, 0, 0, 208, 55, 163)

Repeat
   WaitTimer(Timer)
   Cls
   
   Select menustate
      Case 1
         ; Hauptmenü   
            ; Erst alle anderen Buttons Deaktivieren
            PB_DisableAll()
            PB_EnableButton(Btn_daddln)
            PB_EnableButton(Btn_beenden)
            ; Das Menü-Bild malen
            DrawImage MainImage, 0, 0
            If PB_ButtonHit(Btn_daddln) Then menustate = 2
            If PB_ButtonHit(Btn_beenden) Then menu = 0
      Case 2
         ; daddln
            ; Jetzt zuerst alle Buttons deaktivieren, sonst könnte man die Anderen Buttons noch drücken!
            PB_DisableAll()
            PB_EnableButton(Btn_Back)
            Cls
            Color 255, 255, 255
            Text 10, 10, "Zurück."
            If PB_ButtonHit(Btn_back) Then menustate = 1
   End Select

   ; Nicht vergessen: Updaten
   PB_Update()   
   
   Flip
Until menu = 0
End


Was die Befehle PB_SetHintFont und PB_SetHintColor bedeuten, kann man der PButtons.bb entehmen.

Hier sieht man, das bei einem Klick auf "Zurück" einfach der menustate wieder auf 1 gesetzt wird, alles easy halt Wink
Wollen wir das Menü beenden, müsssen wir einfach menu = 0 setzen, da die Haupt-Schleife ja jedesmal abfrag, ob menu = 1 ist.

Die Lib hat noch mehr Funktionen, ihr könnt sie euch einfach anschauen. Ist eigentlich alles schön kommentiert.

Wenn ihr sie verwendet, würd ich mich um einen Credits-Eintrag freuen Wink

Fragen/Kritik einfach hier reinschreiben.

Also viel Spass beim Menü-basteln Very Happy

mfg Pdd

Und hier nochmal alles zum Runterladen (RAR-Archiv, KB):
Download
In diesem Archiv ist die Beispiel-Datei, die Bilder und die Lib enthalten.

//ANMERKUNG:
Wer noch die SChriftgröße angeben will, einfach die Funktion hier ersetzen:
Code: [AUSKLAPPEN]

Function PB_SetHintFont(font$, height)
   PB_ButtonHintFont = LoadFont(font$, height)
End Function
Lieber Apfel als Birne.
  • Zuletzt bearbeitet von Pdd am Mi, Dez 27, 2006 17:30, insgesamt einmal bearbeitet

Eingeproggt

BeitragMi, Dez 27, 2006 17:16
Antworten mit Zitat
Benutzer-Profile anzeigen
Ich muss mal kurz meine kritische Stimme erheben: Very Happy

Hab folgende Meldung bekommen:
"Not enough parameters"
Du hast vergessen, in der PB-Lib die Schriftgröße einzubinden!

Ausserdem hab ich grobe Laufzeit-Probleme mit deinem Sample

Und eine Kleinigkeit noch:
Die Button-States sind "Normal", "Maus drüber", "Gedrückt" und für die Perfektionisten noch ein Bild, welches den Bereich definiert, in dem der Button gedrückt werden kann. (Meistens eh unnötig)

Das wars. Mehr kann ich nicht meckern.
Gewinner des BCC 18, 33 und 65 sowie MiniBCC 9

Pdd

BeitragMi, Dez 27, 2006 17:29
Antworten mit Zitat
Benutzer-Profile anzeigen
Tatsächlich, ich werds reineditieren. Razz

Was meinst du mit grobe Laufzeitprobleme?
Lieber Apfel als Birne.

Eingeproggt

BeitragMi, Dez 27, 2006 17:32
Antworten mit Zitat
Benutzer-Profile anzeigen
Das äussert sich so, dass die ganze zeit eine Sanduhr (statt dem Windows-Zeiger) angezeigt wird und der Computer nur sehr träge reagiert.
Gewinner des BCC 18, 33 und 65 sowie MiniBCC 9

Pdd

BeitragMi, Dez 27, 2006 17:34
Antworten mit Zitat
Benutzer-Profile anzeigen
Hm, bei mir ist das nicht so. Eigentlich ist dafür ja auch der Timer da :/ Hättest du denn eine Idee, woran das liegen könnte?
Lieber Apfel als Birne.

Eingeproggt

BeitragMi, Dez 27, 2006 17:37
Antworten mit Zitat
Benutzer-Profile anzeigen
ehrlich gesagt: nein. Ich habs mit der Methode Sleepingtime-berechnen-und-ein-delay-machen probiert, was auch nicht geholfen hat. Vlt bin ich ja ein Einzelfall.
Gewinner des BCC 18, 33 und 65 sowie MiniBCC 9
 

snörkl

BeitragMi, Dez 27, 2006 17:46
Antworten mit Zitat
Benutzer-Profile anzeigen
also bei mir hats auch keine probleme... naja^^- ich find das tutorial sehr gut

Fobsi

Betreff: sehr gutes Tutorial

BeitragDi, Feb 20, 2007 12:39
Antworten mit Zitat
Benutzer-Profile anzeigen
Muss echt sagen gutes Tutorial! Ohne das hätte ich heute kein menü Wink

lg Fobsi
 

mpcool

BeitragMo, Mai 07, 2007 1:13
Antworten mit Zitat
Benutzer-Profile anzeigen
Ich auch nicht, also, fettes THX an dich Very Happy

xaerox

Betreff: lol

BeitragDo, Mai 29, 2008 21:31
Antworten mit Zitat
Benutzer-Profile anzeigen
so was gibts nirgens wo anders...also das ist wertvoll!^^
Biker sind wahre Helden.
Auch Musiker.

BladeRunner

Moderator

BeitragDo, Mai 29, 2008 21:32
Antworten mit Zitat
Benutzer-Profile anzeigen
Könntest Du das gespamme in alten Threads bitte unterlassen? Danke.
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

Fobsi

BeitragSa, Okt 25, 2008 18:34
Antworten mit Zitat
Benutzer-Profile anzeigen
sorry das ich hier noch was poste... aber ich benütze dieses menü und habe den Fehler in der Include Datei gelöst mit hilfe

Sucht nach: PB_Update()

und ändert die Ganze Function in:

Code: [AUSKLAPPEN]
Function PB_Update()
  If MouseHit(1) Then Mausdruck=1 Else Mausdruck=0
 For Button = Each TButton
  If (PB_ButtonOver(Button\ID) = True) And (Button\Enabled = True) Then
   
   If Button\OverImage <> 0 Then
    DrawImage Button\OverImage, Button\X, Button\Y
   EndIf
   
   If Button\Hint = 1 Then
    SetFont PB_ButtonHintFont
    Color PB_HintColor(1), PB_HintColor(2), PB_HintColor(3) ;Hintergrund
    If (MouseX() + 20 + StringWidth(Button\name) + 10) < 800 Then
     Rect MouseX() + 20, MouseY() + 1, StringWidth(Button\name) + 10, 15, 1
     Color PB_HintColor(4), PB_HintColor(5), PB_HintColor(6) ;Rahmen
     Rect MouseX() + 20, MouseY() + 1, StringWidth(Button\name) + 10, 15, 0
     Color PB_HintColor(7), PB_HintColor(8), PB_HintColor(9) ;Text
     Text MouseX() + 25, MouseY() + 2, Button\Name
    Else
     Rect MouseX() - 5 - (StringWidth(Button\name) + 10) , MouseY() + 1, StringWidth(Button\name) + 10, 15, 1
     Color PB_HintColor(4), PB_HintColor(5), PB_HintColor(6) ;Rahmen
     Rect MouseX() - 5 - (StringWidth(Button\name) + 10), MouseY() + 1, StringWidth(Button\name) + 10, 15, 0
     Color PB_HintColor(7), PB_HintColor(8), PB_HintColor(9) ;Text
     Text MouseX() - (StringWidth(Button\name) + 10), MouseY() + 2, Button\Name
    EndIf   
   EndIf
   
   If Mausdruck=1 Then
    FlushMouse
    Button\Hit = 1
   Else
    Button\Hit = 0
   EndIf
   FlushMouse
   
 
  EndIf
 Next
End Function


um

lg Fobsi sorry nochmal

Neue Antwort erstellen


Übersicht BlitzBasic FAQ und Tutorials

Gehe zu:

Powered by phpBB © 2001 - 2006, phpBB Group