Turning ifsoGUI into a killer GAME UI

Pick 'Em
Monday Night
Survivor

[TaskMaster]

(Post 2 of 3, don't miss part 1 because of the page break).
I think this will work:

Code:

SuperStrict

Import ifsogui.GUI
Import ifsogui.button

' Simple tri-state bitmap button..
Type myBitmapButton Extends ifsoGUI_Button
Field images:TImage[3]

Function Create:myBitMapButton ( iX:Int, iY:Int, iW:Int, iH:Int, strName:String, strLabel:String )
Local but:myBitmapButton = New myBitmapButton
but.SetXY( iX, iY )
but.SetWH( iW, iH )
'Point our image variables at the global skin graphics
but.lImage = gImage
but.lImageDown = gImageDown
but.lImageOver = gImageOver
but.lTileSides = gTileSides
but.lTileCenter = gTileCenter
but.name = strName
Return but
End Function

Method SetImages ( normal:TImage, over:TImage, down:TImage )
images[0] = normal
images[1] = over
images[2] = down
SetImageHandle(images[0], 0, 0)
SetImageHandle(images[1], 0, 0)
SetImageHandle(images[2], 0, 0)
End Method

Method Draw(parX:Int, parY:Int, parW:Int, parH:Int)
If Not Visible Return 'don't draw if not visible
If x > parW Or y > parH Return 'Button is off the viewbale area of the parent
SetColor(Color[0], Color[1], Color[2])
SetAlpha(fAlpha)

'set up rendering locations
'Use the parX and parY it is the parents' x,y coordinate, don't need GetAbsoluteXY()
Local rX:Int = parX + x 'location to draw parX + this gadgets x
Local rY:Int = parY + y 'same for Y

'Which image to show
Local showimage:Int
If bPressed
showimage = 2
ElseIf GUI.gMouseOverGadget = Self
showimage = 1
End If

ifsoGUI_VP.DrawImageAreaRect(images[showimage], rX, rY, w, h)
End Method

End Type

' Animated button that moves left/right on mouse over
Type mySquiggleButton Extends myBitmapButton

Method Draw(parX:Int, parY:Int, parW:Int, parH:Int)
If Not Visible Return 'don't draw if not visible
If x > parW Or y > parH Return 'Button is off the viewbale area of the parent
SetColor(Color[0], Color[1], Color[2])
SetAlpha(fAlpha)

'set up rendering locations
Local rX:Int = parX + x 'location to draw parX + this gadgets x
Local rY:Int = parY + y 'same for Y

'Which image to show
Local showimage:Int
If bPressed
showimage = 2
ElseIf GUI.gMouseOverGadget = Self
showimage = 1
End If

If (showimage = 1) rX:+Sin(MilliSecs()) * 4

' ifsoGUI_VP.DrawImageArea is an overriding function to DrawImage
' that makes sure you do not draw out of the bounds of the parent gadget
ifsoGUI_VP.DrawImageAreaRect(images[showimage], rX, rY, w, h)
End Method

Function Create:mySquiggleButton (iX:Int, iY:Int, iW:Int, iH:Int, strName:String, strLabel:String)
Local but:mySquiggleButton = New mySquiggleButton
but.SetXY( iX, iY )
but.SetWH( iW, iH )
'Point our image variables at the global skin graphics
but.lImage = gImage
but.lImageDown = gImageDown
but.lImageOver = gImageOver
but.lTileSides = gTileSides
but.lTileCenter = gTileCenter
but.name = strName
Return but
End Function
End Type

[TaskMaster]

(Part 3 of 3).

Code:

' Animated button that scales up/down on mouse over
Type myBouncyButton Extends myBitmapButton

Method Draw(parX:Int, parY:Int, parW:Int, parH:Int)
If Not Visible Return 'don't draw if not visible
If x > parW Or y > parH Return 'Button is off the viewbale area of the parent
SetColor(Color[0], Color[1], Color[2])
SetAlpha(fAlpha)


'set up rendering locations
Local rX:Int = parX + x 'location to draw parX + this gadgets x
Local rY:Int = parY + y 'same for Y

'Which image to show
Local showimage:Int
If bPressed
showimage = 2
ElseIf GUI.gMouseOverGadget = Self
showimage = 1
End If

If (showimage = 1)
'We don't need to change the scale, we have a function that will draw the image scaled for us.
'We are going to need to finagle the x,y coordinates a bit, since the ImageHandle is 0,0, not in the middle.
Local scale:Float = 1 + Sin(MilliSecs()) / 50
DebugLog scale
Local offsetx:Float = (w - (scale * w)) / 2.0 'This should keep the button drawn where it needs to be
Local offsety:Float = (h - (scale * h)) / 2.0 'ditto
'This function will draw the image stretched and make sure it stays in bounds.
ifsoGUI_VP.DrawImageAreaRect(images[showimage], rX + offsetx, rY + offsety, w * scale, h * scale)
'ifsoGUI_VP.DrawImageAreaRect(images[showimage], rX, rY, w, h)
Else
ifsoGUI_VP.DrawImageAreaRect(images[showimage], rX, rY, w, h)
End If
End Method

Function Create:myBouncyButton (iX:Int, iY:Int, iW:Int, iH:Int, strName:String, strLabel:String)
Local but:myBouncyButton = New myBouncyButton
but.SetXY(iX, iY)
but.SetWH( iW, iH )
'Point our image variables at the global skin graphics
but.lImage = gImage
but.lImageDown = gImageDown
but.lImageOver = gImageOver
but.lTileSides = gTileSides
but.lTileCenter = gTileCenter
but.name = strName
Return but
End Function
End Type


SetGraphicsDriver GLMax2DDriver()
Graphics(640, 480)
GUI.SetResolution(640, 480)
GUI.LoadTheme("Skin2")
GUI.SetDefaultFont(LoadImageFont("Skin2/fonts/arial.ttf", 12))
GUI.SetDrawMouse(True)

AutoMidHandle(True)
Local myButton0:myBouncyButton = myBouncyButton.Create( 120, 120, 300, 100, "btn0", "" )
myButton0.SetImages( LoadImage( "b0.tga" ), LoadImage( "b1.tga" ), LoadImage( "b2.tga" ) )
GUI.AddGadget( myButton0 )

Local myButton1:mySquiggleButton = mySquiggleButton.Create( 120, 220, 300, 100, "btn1", "" )
myButton1.SetImages( LoadImage( "b0.tga" ), LoadImage( "b1.tga" ), LoadImage( "b2.tga" ) )
GUI.AddGadget( myButton1 )

SetClsColor 255,255,255

While Not AppTerminate()
Cls

CheckEvents()
GUI.Refresh()

Flip 0
Wend


Function CheckEvents()
Local e:ifsoGUI_Event
Repeat
e = GUI.GetEvent()
If Not e Exit

If e.gadget.Name = "btn0" And e.id = ifsoGUI_EVENT_CLICK

End If
Forever
End Function

Looks pretty good, hopefully it will help you get a better idea of subclassing the gadgets.  Let me know if some part of it doesn't work, but it should be fine.  Even safe against drawing out of the edge of a panel or window.

[matibee]

Yep that works quite well.  

I've just tried adding the gadgets to a moveable and resizeable window but the gadget color isn't set so it drew the images black.  I tried adding but.SetGadgetColor(255,255,255) to each create method but that didn't make any difference.  I had to add SetColor(255,255,255) to each draw function.

-- EDIT --  
I realised I should be using SetGadgetColor in the create function AND SetColor r,g,b in the draw call.  But without intellisense I have to keep guessing at the button (or base gadget) member variable names; SetColor color[0],color[1],color[2]
-- EDIT --

Everything else (clipping to the parent etc) worked as expected.  I knew I hadn't taken clipping into account but I couldn't readily guess at the code without seeing the source to any other controls to see how they handled it.

I know there's some dead space around the button images but this is just something I knocked up for this test.  I might do a mini-game using ifsoGUI based on this starting point tho (to give it away with source). It should be a handy demo for you.

So it looks as though there's not really any need to add animation or a bitmap button to ifsoGUI after all

[TaskMaster]

Yep that works quite well.  

I've just tried adding the gadgets to a moveable and resizeable window but the gadget color isn't set so it drew the images black.  I tried adding but.SetGadgetColor(255,255,255) to each create method but that didn't make any difference.  I had to add SetColor(255,255,255) to each draw function.

-- EDIT --  
I realised I should be using SetGadgetColor in the create function AND SetColor r,g,b in the draw call.  But without intellisense I have to keep guessing at the button (or base gadget) member variable names; SetColor color[0],color[1],color[2]
-- EDIT --

Everything else (clipping to the parent etc) worked as expected.  I knew I hadn't taken clipping into account but I couldn't readily guess at the code without seeing the source to any other controls to see how they handled it.

I know there's some dead space around the button images but this is just something I knocked up for this test.  I might do a mini-game using ifsoGUI based on this starting point tho (to give it away with source). It should be a handy demo for you.

So it looks as though there's not really any need to add animation or a bitmap button to ifsoGUI after all

Yes, I forgot.  You have to SetColor and SetAlpha before drawing.  After each gadget runs through a draw, they do not have to reset the SetColor and SetAlpha to the way they were found.  They are free to change it and not change it back, because it is required that the next gadget set it before drawing.

The default Color is 255,255,255, so you do not need to set it at Create.  But, you do need to set it before drawing, and you need ot set the Alpha to 1.0 before drawing.  I will fix the code I posted.

Completely forgot about this.

[TaskMaster]

I have made a slight update to the code here.  The new instance skinning adds fields that need to be pointed at the global button images at create time.

[TaskMaster]

I have again amended this code to reflect changes in ifsoGUI.  I removed the SetTabOrder() call in the Create() functions which are no longer needed.

[Mr. Write Errors Man]

When I write up a tutorial on making a gadget, you will see what I am referring to.

Did you ever write that tutorial?

Any other news on the GUI front? IIRC you were creating a property editor gadget?

[TaskMaster]

When I write up a tutorial on making a gadget, you will see what I am referring to.

Did you ever write that tutorial?

Any other news on the GUI front? IIRC you were creating a property editor gadget?

In the last 5 months, I have gotten two promotions at work, the new position requires quite a bit of travel.  I have been very busy and have not had much time to work on anything else.  ifsoGUI has taken a back seat to all of that.

A tutorial for making a gadget would not be difficult though.  Maybe if I get a bit of free time I can write one in the next couple of weeks.

[Mr. Write Errors Man]

No hurry. Just wanted to make sure I wasn't missing something.