[Opcode.eXe]

Hi,
in this tutorial i will try to teach(ok show) you howto create a GUI in CLEO.
It is really easy if you understand how it works. I dont know if there is already a tutorial for this but yeha lets just start.
In this thread i will just create a simple CLEO mod where you press F10 to pop up a Win7-styled texture and a cursor. Then you only can close it again by pressing X with the cursor.



1.)Ok. First you need some textures for:
- the cursor -> http://puu.sh/3qCRw.png
- the win7 gui -> http://puu.sh/3qDbQ.jpg

2.)Create a .txd file with the txdworkshop and save the cursor and the win7gui inside with the name 'CURSOR' and 'GUI'.
- DOWNLOAD MY .TXD

3.)Move your .txd file into models\txd. My .txd's name is OpcodeEXE.txd.
- DOWNLOAD MY .TXD

Now we have the file with all the textures. Lets start coding...

1.) Enable text_draw, set up the start position of the cursor and load the textures.

CODE

{$CLEO .cs}
THREAD "THREAD_BY_OPCODEEXE"
03F0: enable_text_draw 1

:LOAD
wait 0
0390: load_txd_dictionary 'OPCODEEXE'
038F: load_texture "cursor" as 1 // Load dictionary with 0390 first
038F: load_texture "GUI" as 2 // Load dictionary with 0390 first
1@ = 320.0 // Middle screen
2@ = 224.0 //Middle screen
// Now the cursor is saved as 1 and the GUI as 2
// 1@ and 2@ are used for the cursor everywhere in the code.

2.) Add a key to open the GUI

CODE

:OPEN_GUI
wait 0 // antifreeze
if
0AB0: KEY 121 // F10
jf @OPEN_GUI
018C: play_sound 1052 at 0.0 0.0 0.0 // will beep

3.) Create a LOOP to draw the GUI.

CODE

:LOOP
wait 0
03E3: set_texture_to_be_drawn_antialiased 1
038D: draw_texture 2 position 420.0 210.0 size 140.0 265.0 RGBA 255 255 255 255 // DRAW_GUI  
jump @LOOP

4.) Add the cursor control and drawings.

CODE

:LOOP
wait 0
03E3: set_texture_to_be_drawn_antialiased 1
038D: draw_texture 2 position 420.0 210.0 size 140.0 265.0 RGBA 255 255 255 255 // DRAW_GUI
GOSUB @CURSOR
jump @LOOP


:CURSOR
0A4A: store_joystick_X_offset_to 3@ Y_offset_to 4@ // GOD THANKS. THIS DOESNT RESET THE OFFSETS <3
005B: 1@ += 3@ // (float) // LEFT/RIGHT POS
if
0A4C:   mouse_not_inverted_vertically //
then
0063: 2@ -= 4@ // (float) // FOR NON VERTICAL USERS
else
005B: 2@ += 4@ // (float) // VERTICAL USERS
end
if
  1@ > 640.0 // not outside screen  
then
1@ = 640.0 // move back to the last visible spot
end
if
  2@ > 448.0 // not outside screen
then
2@ = 448.0 // move back to the last visible spot
end
if
   not 1@ >= 0.0  // not outside screen  
then
1@ = 0.0 // move back to the last visible spot
end
if
   not 2@ >= 0.0 // not outside screen  
then
2@ = 0.0 // move back to the last visible spot
end
038D: draw_texture 1 position 1@ 2@ size 10.0 10.0 RGBA 255 255 255 255 // draws the cursor
return

5.) Now we check if you are pressing on the GUI's X button.

CODE

:LOOP
wait 0
03E3: set_texture_to_be_drawn_antialiased 1
038D: draw_texture 2 position 420.0 210.0 size 140.0 265.0 RGBA 255 255 255 255 // DRAW_GUI
GOSUB @CURSOR  
GOSUB @X_BUTTON
jump @LOOP

:X_BUTTON
if
0AB0: key 1 // CLICKING
jf @RETURN
if and
1@ > 474.0 // CURSOR IS OVER THE LEFT SIDE OF THE X BUTTON'S TEXTURE
1@ < 492.0 // CURSOR IS NOT OVER THE RIGHT SIDE OF THE X BUTTON'S TEXTURE
2@ > 82.0 // CURSOR IS NOT OVER THE UPPER SIDE OF THE X BUTTON'S TEXTURE
2@ < 90.0 // CURSOR IS NOT OVER THE LOWER SIDE OF THE X BUTTON'S TEXTURE
then
018C: play_sound 1052 at 0.0 0.0 0.0 // will beep when pressing on X
jump @OPEN_GUI // no return ? Yes it works without problems o.O
end  
:RETURN
return

6.) Compile it. Go ingame and press F10. Move your cursor to the red button and press the left mouse button.

CODE

{$CLEO .cs}
THREAD "THREAD_BY_OPCODEEXE"
03F0: enable_text_draw 1

:LOAD
wait 0
0390: load_txd_dictionary 'OPCODEEXE'
038F: load_texture "cursor" as 1 // Load dictionary with 0390 first
038F: load_texture "GUI" as 2 // Load dictionary with 0390 first
1@ = 320.0 // Middle screen
2@ = 224.0 //Middle screen
// Now the cursor is saved as 1 and the GUI as 2
// 1@ and 2@ are used for the cursor everywhere in the code.

:OPEN_GUI
wait 0 // antifreeze
if
0AB0: KEY 121 // F10
jf @OPEN_GUI
018C: play_sound 1052 at 0.0 0.0 0.0 // will beep


:LOOP
wait 0
03E3: set_texture_to_be_drawn_antialiased 1
038D: draw_texture 2 position 420.0 210.0 size 140.0 265.0 RGBA 255 255 255 255 // DRAW_GUI
GOSUB @CURSOR  
GOSUB @X_BUTTON
jump @LOOP

:X_BUTTON
if
0AB0: key 1 // CLICKING
jf @RETURN
if and
1@ > 474.0 // CURSOR IS OVER THE LEFT SIDE OF THE X
1@ < 492.0 // CURSOR IS NOT OVER THE RIGHT SIDE OF THE X
2@ > 82.0 // CURSOR IS NOT OVER THE UPPER SIDE OF THE X
2@ < 90.0 // CURSOR IS NOT OVER THE LOWER SIDE OF THE X
then
018C: play_sound 1052 at 0.0 0.0 0.0 // will beep when pressing on X
jump @OPEN_GUI // no return ? Yes it works without problems o.O
end  
:RETURN
return

:CURSOR
0A4A: store_joystick_X_offset_to 3@ Y_offset_to 4@ // GOD THANKS. THIS DOESNT RESET THE OFFSETS <3
005B: 1@ += 3@ // (float) // LEFT/RIGHT POS
if
0A4C:   mouse_not_inverted_vertically //
then
0063: 2@ -= 4@ // (float) // FOR NON VERTICAL USERS
else
005B: 2@ += 4@ // (float) // VERTICAL USERS
end
if
  1@ > 640.0 // not outside screen  
then
1@ = 640.0 // move back to the last visible spot
end
if
  2@ > 448.0 // not outside screen
then
2@ = 448.0 // move back to the last visible spot
end
if
   not 1@ >= 0.0  // not outside screen  
then
1@ = 0.0 // move back to the last visible spot
end
if
   not 2@ >= 0.0 // not outside screen  
then
2@ = 0.0 // move back to the last visible spot
end
038D: draw_texture 1 position 1@ 2@ size 10.0 10.0 RGBA 255 255 255 255 // draws the cursor
return

IT WORKS!!
DOWNLOAD ALL THE FILES:
http://www.mediafire.com/?x2xulnxo4dijv8o

Hmm... yes my english is bad and i bet this tutorial also. Hmm i hope you understand it atleast if you look at the code. I already made a whole GUI with radionbuttons and other stuff.

Remove this post if it doesnt help D:

KK THX BYE.

[Opcode.eXe]

Okay its crashing my game all the time now. I'm confused why it isnt working. I didnt have time to fix it right now.

[uokka]

nice idea!

[Deji]

Nice tutorial, but when drawing in a loop you should always use 03F0. It resets drawing counters and prevents overloading, if I recall correctly...