How to go about creating a ButtonControl with an image ?

Jan 6, 2010 at 11:21 PM

First of all great work on Nuclex Framework !

I want to create image-buttons in my game; how would I go about creating them ?
As far as I can tell I need to implement something like an ImageButtonControl and an ImageButtonControlRenderer,
can you point me in the right direction on what I actually need to do to get it working ? (in rough lines)

Coordinator
Jan 16, 2010 at 9:22 AM

First, you'd create a new Control class for your image button. You'll probably want to derived from PressableControl instead of Control directly to get the standard button behavior.

To get this button to render, you will have to create another class similar to the ones already in Visuals/Flat/Renderers/* which draws the button through the FlatGuiGraphics interface. You'll also have to make sure that the "visualizer" knows of your renderer by adding your renderer's assembly to the list of plugins it searches for renderers by adding it to the FlatGUiVisualizer.RendererRepository.

Now you've got some choice: If you have a static image, the easiest path would be to clone the standard GUI theme and add your images to the bitmap and XML description file. You renderer could then just call FlatGuiGraphics.DrawElement() with the right element name and the image would be drawn.

If you want to draw a dynamic image (eg. a 3D object rendered to a texture or a screenshot of the game in a load/save game menu), you'd have to extend the FlatGuiGraphics class with a method to draw this (yep, I haven't added a method to draw a user-provided image yet). The FlatGuiGraphics class uses a plain old SpriteBatch to draw the elements from the GUI's themes, so adding such a method shouldn't be terribly difficult ;-)

Jul 4, 2011 at 10:08 PM

If anyone accomplished this, would you mind sharing the code? I need to do the same thing.

Jul 5, 2011 at 12:00 AM

Ok, so I'm trying to do this myself and I have two questions: 

1) How would I add the renderer to the RendererRepository?
2) How would I use the extended FlatGuiGraphics with the GUI manager? 

Jul 5, 2011 at 6:12 AM

And wouldn't it be a better option to make an Image control, that way it can be embedded in other controls? (Just me thinking out loud since I probably don't really know what I'm talking about)

Coordinator
Jul 5, 2011 at 9:07 AM

You could create an image control, but it would not move when the button is pushed down. Maybe that's something I should consider for future releases. Right now, the GUI selfishly only has those controls and features I needed for the game I'm working on ;-)

For just a button with an image on it, this is how I would go about it:

  • Derive a class from Button (let's call it ImageButton), add Image property (some type the SpriteBatch can easily draw)
  • Add the assembly containing ImageButton to the RendererRepository (RendererRepository.AddAssembly(typeof(ImageButton).Assembly);)
  • Create a FlatImageButtonControlRenderer class, deriving from IFlatControlRenderer<ImageButton>

Now the FlatGuiGraphics does not have the ability to draw images that are not part of the skin yet:

  • Add a method for drawing arbitrary bitmaps to IFlatGuiGraphics and FlatGuiGraphics. The method can simply call this.spriteBatch.Draw().
  • Implement your FlatImageButtonContolRenderer

That should be about it!

Jul 5, 2011 at 3:12 PM
Edited Jul 5, 2011 at 3:29 PM

Maybe we are thinking of doing this 2 different ways. Are you thinking I should MODIFY the FlatGuiGraphics instead of EXTENDING it? Cause spriteBatch is private inside of FlatGuiGraphics. And by modify I mean edit the source code and re-compile Nuclex.UserInterface

Jul 6, 2011 at 6:33 PM

I ended up trying to modify the DLL which somewhat worked. Not only where you right about image control not moving when pushed down, it blocks the button's capture of the mouse press.

Oct 4, 2011 at 9:21 PM

Hello, first of all thanks for an awesome library. We are currently trying to use the UserInterface part in our game and a button with a run-time generated picture is exactly what we need as well. I was trying to follow your instructions, but I get somewat lost on point n.2. Where exactly should I put the "RendererRepository.AddAssembly(typeof(ImageButton).Assembly);" line? Moreover I'm getting compile errors (metadata files not found and cryptographic errors) when trying to build the dll's from the source-code (as provided). Thanks for any help.

Coordinator
Oct 15, 2011 at 7:11 PM

@lordzardeck: You don't need to modify Nuclex.UserInterface, the GUI will accept any control as long as it's derived from control and custom renderers can be added via the plug-in mechanism I described above.

@drakoii: The RendererRepository.AddAssembly(typeof(ImageButton).Assembly); goes anywhere after constructing the GuiManager but before the GUI is rendered for the first time.

For a dynamic image (runtime-generated), yes you'd have to add a method to the FlatGuiGraphics class and recompile the library. I'll put this on my list for the next release as it's pretty easy to do. Adding an Image or Icon property to the Button class is a good idea anyway, especially to display the game pad buttons one needs to press on the Xbox.

To build the DLLs from source, you need to create your own strong name key. It's all explained here: How to Compile

Feb 14, 2012 at 3:37 PM

Could someone do this? :O!

Mar 7, 2012 at 7:17 PM

I made some modifications to allow the existing Button control to optionally display an image.  I added a property called imageTexture to the button, which if set any time after Button instantiation,  will cause the image to be drawn on the Button...otherwise, the Button will behave as it did originally.

If you just need an image with no button functionality, use the Button control without defining a button event handler.  ; )

I put the modified source on dropbox here:

http://dl.dropbox.com/u/65956624/nuclex-framework-r1404-sources-MODIFIED.rar

If you are only interested in the compiled binaries for UserInterface, you can find them in the folder within the rar file:

\nuclex-framework-r1404-sources\framework\Nuclex.UserInterface\bin\xna-4.0-x86\Debug

And Cygon, thanks for all your effortson this great framework!

Mar 7, 2012 at 8:31 PM

Thanks a lot, I'll sure check it out once we get to get round to UI in our development.