Computer Science Canada

how to make 3D button without using GUI

Author:  gamer [ Sun Apr 11, 2004 7:41 pm ]
Post subject:  how to make 3D button without using GUI

i kno that using the GUI create button comand is reli easy n good to use, but wut if i dun wanna use GUI?? i kno i can just use drawfillbox with the mouseclick with it to make a button, but my problem is, how can i draw the button to make it look 3D?? if possible, how can i make the button "go down" when i click it??

Author:  Paul [ Sun Apr 11, 2004 7:45 pm ]
Post subject: 

you draw a button that looks 3D thats unpressed, then you draw a button that looks 3D that is pressed. When the mouse clicks the unpressed button, draw the pressed button over it, then when mouse is not clicking draw the unpressed button on it. You can even use the same button, but shade it differently so that they will look pressed/unpressed, like using different shades of grey.

Author:  Tony [ Sun Apr 11, 2004 7:59 pm ]
Post subject: 

you can just dig up the code for drawing buttons from Turing's GUI class and implement that

code:

   procedure DrawPressedBorder (default : boolean)
        var x1, y1, x2, y2 : int
        if default then
            x1 := x + 1
            y1 := y + 1
            x2 := x + width - 2
            y2 := y + height - 2
        else
            x1 := x
            y1 := y
            x2 := x + width - 1
            y2 := y + height - 1
        end if
        const rise : int := riserSize + 1

        if default then
            if backgroundColour = black then
                Draw.Box (x1 - 1, y1 - 1, x2 + 1, y2 + 1, foregroundColour)
            else
                Draw.Box (x1 - 1, y1 - 1, x2 + 1, y2 + 1, foregroundColour)
                Draw.Box (x1, y1, x2, y2, foregroundColour)
            end if
        else
            if backgroundColour not= black then
                Draw.Box (x1, y1, x2, y2, foregroundColour)
            end if
        end if

        Draw.FillBox (x1 + 1, y1 + 1, x2 - 1, y2 - 1, buttonColor)

        for offset : 1 .. rise - 1
            Draw.Line (x1 + offset, y1 + offset, x1 + offset, y2 - offset,
                shadowColor)
            Draw.Line (x1 + offset, y2 - offset, x2 - offset, y2 - offset,
                shadowColor)
        end for
    end DrawPressedBorder


    procedure DrawUnpressedBorder (default : boolean)
        var x1, y1, x2, y2 : int
        if default then
            x1 := x + 1
            y1 := y + 1
            x2 := x + width - 2
            y2 := y + height - 2
        else
            x1 := x
            y1 := y
            x2 := x + width - 1
            y2 := y + height - 1
        end if
        const rise : int := riserSize + 1

        if default then
            if backgroundColour = black then
                Draw.Box (x1 - 1, y1 - 1, x2 + 1, y2 + 1, foregroundColour)
            else
                Draw.Box (x1 - 1, y1 - 1, x2 + 1, y2 + 1, foregroundColour)
                Draw.Box (x1, y1, x2, y2, foregroundColour)
            end if
        else
            if backgroundColour not= black then
                Draw.Box (x1, y1, x2, y2, foregroundColour)
            end if
        end if

        for offset : 1 .. riserSize
            Draw.Line (x1 + offset, y1 + offset, x2 - offset, y1 + offset,
                shadowColor)
            Draw.Line (x2 - offset, y1 + offset, x2 - offset, y2 - offset,
                shadowColor)
            Draw.Line (x1 + offset, y1 + offset, x1 + offset, y2 - offset,
                illuminatedColor)
            Draw.Line (x1 + offset, y2 - offset, x2 - offset, y2 - offset,
                illuminatedColor)
        end for
        Draw.FillBox (x1 + rise, y1 + rise, x2 - rise, y2 - rise,
            buttonColor)
    end DrawUnpressedBorder

Author:  Paul [ Sun Apr 11, 2004 8:09 pm ]
Post subject: 

but that isn't colorful Sad
I made mine:
code:

setscreen ("offscreenonly")
var font := Font.New ("serif:18")
proc unpressed
drawbox (maxx div 2 -1, maxy div 2 -1, maxx div 2+101, maxy div 2+51, black)
drawfillbox (maxx div 2, maxy div 2, maxx div 2+ 100, maxy div 2+ 50, 26)
drawfillbox (maxx div 2+10, maxy div 2+10, maxx div 2+90, maxy div 2 +40, 42)
drawline (maxx div 2, maxy div 2, maxx div 2 +10, maxy div 2 +10, black)
drawline (maxx div 2, maxy div 2+50, maxx div 2+10, maxy div 2 +40, black)
drawline (maxx div 2+100, maxy div 2, maxx div 2 +90, maxy div 2+10, black)
drawline (maxx div 2+100, maxy div 2+50, maxx div 2+90, maxy div 2+40, black)
drawbox (maxx div 2 +9, maxy div 2 +9, maxx div 2+91, maxy div 2+41, black)
Font.Draw ("Button", maxx div 2 +15, maxy div 2 +20, font,black)
end unpressed

proc pressed
drawbox (maxx div 2 -1, maxy div 2 -1, maxx div 2+101, maxy div 2+51, black)
drawfillbox (maxx div 2, maxy div 2, maxx div 2+ 100, maxy div 2+ 50, 25)
drawfillbox (maxx div 2+10, maxy div 2+10, maxx div 2+90, maxy div 2 +40, 42)
drawline (maxx div 2, maxy div 2, maxx div 2 +10, maxy div 2 +10, black)
drawline (maxx div 2, maxy div 2+50, maxx div 2+10, maxy div 2 +40, black)
drawline (maxx div 2+100, maxy div 2, maxx div 2 +90, maxy div 2+10, black)
drawline (maxx div 2+100, maxy div 2+50, maxx div 2+90, maxy div 2+40, black)
drawbox (maxx div 2 +9, maxy div 2 +9, maxx div 2+91, maxy div 2+41, black)
Font.Draw ("Button", maxx div 2 +18, maxy div 2 +18, font,black)
end pressed
var x, y, btn: int
loop
Mouse.Where (x, y, btn)
if x> maxx div 2 and y > maxy div 2 and x < maxx div 2+100 and y< maxy div 2 +50
and btn=1 then
pressed
else
unpressed
end if
View.Update
delay(5)
end loop

It doesn't look quite 3D cause I didn't shade it right, but use your imagination.

Author:  gamer [ Sun Apr 11, 2004 8:33 pm ]
Post subject: 

thnx alot guys

Author:  gamer [ Sun Apr 11, 2004 11:11 pm ]
Post subject: 

ok this might be VERY stupid question but, if i was to use Paul Bian's code to make 5 buttons, is there a quick way i can do this without makin 10 procs?? cuz u see, its just the positions that are different and the text on the buttons......im sure theres a quick way but i just cant figure it out at the moment

plz help

Author:  Tony [ Sun Apr 11, 2004 11:17 pm ]
Post subject: 

take arguments to draw buttons
code:

proc unpressed(x,y,width,height:int)
...

and draw the button relatvie to the parameters passed intead of hardcoding it

Author:  Paul [ Mon Apr 12, 2004 8:02 am ]
Post subject: 

yea I made that back then when I didn't know how to do that variable thing with procedures :p oh wait, I still don't...

Author:  gamer [ Mon Apr 12, 2004 11:29 am ]
Post subject: 

how do i make "something happen" ONLY after i release the button? this would look more realistic , cuz right now when i click, "something happen" takes place instantly

Author:  Tony [ Mon Apr 12, 2004 3:13 pm ]
Post subject: 

when you click the button, you set 'clicked' flag to true. Then when you let go of the mouse, you check for the 'clicked' button and execute its procedure

Author:  gamer [ Mon Apr 12, 2004 3:33 pm ]
Post subject: 

well i tried using the buttonwait command n it seem to work

code:

loop
    mousewhere (mx, my, mb)
    if mx > 100 and my > 100 and mx < 200 and my < 200 and mb = 1 then
        pressed %%this draws the button as if it is pressed
        buttonwait ("up", mx, my, buttonnumber, buttonupdown)
        if mx > 100 and my > 100 and mx < 200 and my < 200 then
            %%%my procedure takes place HERE%%%
        end if
end loop


it does work, but it just seems to me quite repective (checks for mouse position AGAIN when button is released, if the position of mouse when released is within the button, then procedure), especially when i hav quite a few buttons.......do u guys think i even did it correctly??

Author:  gamer [ Tue Apr 13, 2004 3:12 pm ]
Post subject: 

can someone look at those code n see if i did it correctly please?


: