Slick Forums

Hello,

I just started looking at TWL in more detail. It seems pretty cool and powerful. I don't know OpenGL at all and just started. I have played around with TWL and Slick over the past few days. I've learned a lot but have a very long ways to go. I ran into some issues and thought of some potential features I would like to use in the future and want to see if it is possible to do them.

Here are my questions:
1. Is it possible to have a button do the following: let's say it has no text and an image that slowly animations a certain way (maybe a small "explosion" for example's sake) and when the mouse hover's over it, the animation changes to something completely different (maybe a rotating skull).

2. I noticed on the TWL demo, when a window(resizableframes/fadeframe) was closed, it animated in an interesting way down to the bottom of the screen. Is it possible to do something like this for opening a window? Let's say I have a graph with a bunch of nodes on the screen and you can click on these nodes. Maybe I want some cool animation to happen before the window is fully present. For example, maybe on clicking the node could rotate quickly and then expand to form a circular window with some information about the node. How complex can this get?

3. Can you have polygonal shaped windows/resizableframes?

4. I made a custom widget that can use Slick2D to draw in it by overriding paintWidget and then getting the graphic object. I've read a few threads on this forum and there seems to be the thinking that this is a bad idea? I should use lwjgl to do drawing in widgets and not Slick?

5. This is related to #4. I noticed when I was drawing in my widget, with Slick2D, that it behaved interesting. The first issue was that the coordinates was based on the "entire screen" and there were not "widget" coordinates. I had to do something like this:

instead of

If I used the above, it would draw a rectangle in the upper right hand corner of my screen - not the upper right hand corner of the widget.

I find this a bit cumbersome and is there anything I can do to ensure that the coordinates are from the "widget" and not the "entire screen". I understand why this is happening - because the graphics is for the entire screen and just not the widget but would like to figure out how to make it from the widget. Sort of like how Swing/Java2D passes in a Graphics object to their paint component method.

The second issue was that I drew a rectangle that was larger than the window. This rectangle was drawing outside of the bounds of the window. Is there anyway to clip this so it doesn't happen? The reason for this is the same as my first issue, I'm sure. I'm using a graphics context for the entire screen and not just the widget.



Thanks a lot for answering some of my questions.

Hi,

1) yes, look at the GameUIDemo - you can use the TWL Theme Editor's Image Converter tool to create an animation from a GIF (someday it will support more image conversions).

2) you would need to make the corresponding effect - look at the TWLEffects library.

3) arbitrary window shapes are in general supported - you need to override isInside(x,y). Also the resizing code needs to be adjusted as it currently just takes the border area of the window

4) there is no problem with using Slick for rendering inside a widget except the GL state caching done by Slick - but that is easily solved by invoking LWJGLRenderer.pauseRendering() before and LWJGLRenderer.resumeRendering() after rendering.

5) TWL always works with global coordinates - this makes a lot of the code easier as you don't need to translate coordinates between widgets. TWL can do clipping with but this won't help you when you use pause/resume rendering. For that you need to use Slick's clipping support.

You can solve issue 4 and 5 by writing a Widget subclass which pauses the TWL rendering, setup Slick's clipping and location (eg by using g.translate) call your rendering code and finally resume TWL's rendering.

_________________
TWL - The Themable Widget Library

Thanks a lot for your replies. It was most enlightening.

On item 1, it seems I could also do this with the animation theme concept? Just using different animation frames defined? Also, would it be possible to do OpenGL rendering on a button?

Yes, the GameUIDemo uses the <select> element and <animation> for the button.

You can also do OpenGL rendering - works the same for Button as for other widgets.
Button uses the animation state concept and the background & overlay images - it's paintWidget method (inherited from TextWidget) is only used to render text onto buttons.

_________________
TWL - The Themable Widget Library

Thanks a lot for your help.

Hello,

I have another silly question...

I subclassed Widget to make my own custom Widget. I want to add this to a FadeFrame and give it a specific size (ie: 100x100). The problem is that regardless of the size I put on this new custom widget, it expands to cover the entire FadeFrame. The documentation on the Widget.setMaxSize, says to use 0's if you don't want it to expand fully but this does not seem to work for me. I also over rode the getPreferredWidth and getPreferredHeight to return 100x100 each and it still does not work.

The only way I can get this to work is to over ride the layout method of the FadeFrame and have it not do anything, but this screws up the other components of the window.

Thanks.

FadeFrame is a subclass of ResizableFrame - which always sets the size of it's content to it's full inner area. But it should respect the max size - I'll take a look at that.

EDIT: the ResizableFrame does now respect the max width/height of it's children.

_________________
TWL - The Themable Widget Library

Hi,

Thanks a lot. I'll download the update and give it a go.

Hello,

This does not seem to be working for me. I downloaded a new zip file from the site and verified the line numbers are different on the ResizableFrame class and they are(748 vs 712 on the old one).

I made a bit of code for that may be useful in figuring out what I'm doing wrong:


And here is TestWidget:


And the output is:


I am using the guiTheme.xml file from the examples. The Eforen one is currently in use.

As written in the javadoc of setMaxSize - the max width/height is taken from the theme - so setting them in code will not have any effect (unless you call it from within applyTheme after calling super.applyTheme)

_________________
TWL - The Themable Widget Library

That's good to know.

I put the following definitions in guiTheme.xml in the "resizableframe-title" theme:



I am getting slightly different output, but the width and height are the same...



As a test, I put 100 and 100 for the max's and it simply changed the output to display 100x100 for the max Width/Height portion - the normal size stayed the same.

Maybe this is working correctly and I am just failing to understand how the different sizes work/used for?

Thanks for your help.

A ResizableFrame does not set it's own size (except when the user is resizing it via drag&drop).
So you should call frame.adjustSize() after it has been added to the GUI tree (calling it while it is not yet part of the GUI tree will result in a wrong size as no theme is available before it is added to the GUI tree - see Widget.getGUI() for details).
Also you don't need to call setVisible(true) as that is the default value.

_________________
TWL - The Themable Widget Library

Thanks!

I now have the following code:



The window is now smaller, but the output is correct:


However, when I resize the window, it changes the size of the TestWidget. For example, I resized the window a bit and the output is now:




So I thought, "Oh, I should set the max height and width in the xml file.", so I did that (100 and 100), and started it again. This had no impact on the behavior of the widget during resizing.

Maybe it would be easier to ask: is there a "layout" that handles absolute layouts? I just see Border, Box Column and Dialog layouts. Maybe Container?

EDIT: Ok, so I made a DialogLayout and then added my TestWidget to that - the size was correct and didn't get resized while the frame was changed. So I think I got it working - thanks a lot.