Menü's einfach erstellen mit PButtons.
Übersicht

![]() |
PddBetreff: Menü's einfach erstellen mit PButtons. |
![]() Antworten mit Zitat ![]() |
---|---|---|
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! ![]() 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? ![]() Also erstellen wir in einem Grafik-Programm unserer Wahl eine absolut non-topp-bare Grafik. Die "GrundGrafik". Hier ist meine: ![]() Damit das ganze auch etwas "Animiert" wird, noch eine 2. Grafik des Exit-Buttons: ![]() 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. ![]() 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 ![]() 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 ![]() Fragen/Kritik einfach hier reinschreiben. Also viel Spass beim Menü-basteln ![]() 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 |
![]() Antworten mit Zitat ![]() |
---|---|---|
Ich muss mal kurz meine kritische Stimme erheben: ![]() 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 |
![]() Antworten mit Zitat ![]() |
---|---|---|
Tatsächlich, ich werds reineditieren. ![]() Was meinst du mit grobe Laufzeitprobleme? |
||
Lieber Apfel als Birne. |
![]() |
Eingeproggt |
![]() Antworten mit Zitat ![]() |
---|---|---|
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 |
![]() Antworten mit Zitat ![]() |
---|---|---|
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 |
![]() Antworten mit Zitat ![]() |
---|---|---|
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 |
![]() Antworten mit Zitat ![]() |
|
---|---|---|
also bei mir hats auch keine probleme... naja^^- ich find das tutorial sehr gut | ||
![]() |
FobsiBetreff: sehr gutes Tutorial |
![]() Antworten mit Zitat ![]() |
---|---|---|
Muss echt sagen gutes Tutorial! Ohne das hätte ich heute kein menü ![]() lg Fobsi |
||
mpcool |
![]() Antworten mit Zitat ![]() |
|
---|---|---|
Ich auch nicht, also, fettes THX an dich ![]() |
||
![]() |
xaeroxBetreff: lol |
![]() Antworten mit Zitat ![]() |
---|---|---|
so was gibts nirgens wo anders...also das ist wertvoll!^^ | ||
Biker sind wahre Helden.
Auch Musiker. |
![]() |
BladeRunnerModerator |
![]() Antworten mit Zitat ![]() |
---|---|---|
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 |
![]() Antworten mit Zitat ![]() |
---|---|---|
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 |
||
Übersicht


Powered by phpBB © 2001 - 2006, phpBB Group