View previous topic :: View next topic |
Author |
Message |
clayasaurus
Joined: 21 May 2004 Posts: 857
|
Posted: Thu Jul 20, 2006 11:04 am Post subject: |
|
|
I can now load a labels and buttons and images with this code...
Code: |
<layout name="imagetest" skin="skin.xml">
<image x="0" y="0" width="100" height="125" name="myimg" color="255;255;255;255">
<frame animation="default" image="penguin.png" speed="1000" soundfx="null"/>
<frame animation="default" image="king.jpg" speed="1000" soundfx="null"/>
</image>
<label x="100" y="125" fontheight="32" name="lbl1" color="0;255;0;255" fontcolor="255;0;0;255" padding="30">
Hello Label World
</label>
<button x="100" y="250" fontheight="32" name="btn1" color="255;255;255;255" fontcolor="255;0;0;255" padding="30"/>
</layout>
|
Buttons can have text, too.
Although I'm starting to wonder about the skin idea, as the pictures will start to look 'stretched' at different sizes. :-/ Maybe this is just the artists + layout designers problem? Or is there something I can do, hrm... |
|
Back to top |
|
|
Lutger
Joined: 25 May 2006 Posts: 91
|
Posted: Sat Jul 22, 2006 9:45 am Post subject: |
|
|
clayasaurus wrote: | I can now load a labels and buttons and images with this code...
(code snippet)
Buttons can have text, too.
Although I'm starting to wonder about the skin idea, as the pictures will start to look 'stretched' at different sizes. :-/ Maybe this is just the artists + layout designers problem? Or is there something I can do, hrm... |
Looking good.
About the skin messing up with textures, perhaps it's not such a problem.
When you use something as static as raster graphics for a gui, you will need to hand-tweak it anyway.
I can think of two things you can do to make it easier:
- Let it be possible that in the skin xml you can specify a fixed ratio width / height, which must be true for the widget that uses a texture.
- Allow for widgets with a fixed size.
But besides textures, skinning is good for coloring and perhaps gradients too. A very simple gui maybe doesn't even need textures. |
|
Back to top |
|
|
JoeCoder
Joined: 29 Oct 2005 Posts: 294
|
Posted: Sat Jul 22, 2006 6:01 pm Post subject: |
|
|
Here's my two cents:
Quote: | one thing that helped me with positioning was the ability for each widget to contain children widgets, and letting children specify their position and size relative to their parents. I think my code was following the composition pattern. |
I think doing this will make things very much more flexible in the long run, since it makes putting basic widgets together into more complex ones much easier. If you aren't already, you should also consider having a base widget class with basic properties such as positioning, size, opacity, texture, etc. and then inheriting all other types of widgets from that.
Also, separating structure (layout.xml) from style (skin.xml) is a good approach and I hadn't even thought of doing such myself (even though I spend about 15 hours a week working with html and css).
With today's monitors of all types of aspect ratios (4:3, 5:4, 16:9, and 16:10), how do you plan on making interfaces that scale and strech to look properly on all of them? Perhaps add support for fluid and semi-fluid layouts as with html? Maybe also for widget's that are left, centered, or right aligned?
Finally, this is just a suggestion, but in my engine I'm hoping to support animation at the texture level (including maybe even loading up ogg theora, gif, avi?) and then those textures can be assigned to the background of any widget. And the widget could perhaps have options for tiling, stretching, repeating, etc. And if you ever make a move to support render-to-texture, this increases the possibilities even more. For this to work properly, I'll probably split things up into a Texture class that is an actual texture in memory and then some type of instance class that combines textures for animations and other effects. Dunno yet.
P.S. I'd love to be able to share some code back and forth, but I wonder if our ideas of what a gui system should be are similar enough to make it happen. |
|
Back to top |
|
|
clayasaurus
Joined: 21 May 2004 Posts: 857
|
Posted: Mon Jul 24, 2006 10:09 am Post subject: |
|
|
These are all good ideas, it will take me a while to digest them. I am fond of the tiling idea which would eliminate strech in certain areas.
All my widgets do share a common Widget class.
For rendering of my widgets I am using my own sprite class which supports multiple animations and sound effects, so I am not sure how sharable my code is but it is all in the SVN as I develop it, though I wouldn't recommend using it until I finish it
As for the 'widget within widget' idea, this is what my what layout scheme is for as I will allow for layouts inside of layouts, and each layout is made up of the four building block widgets (Image, Label, Button, Textfield).
I am working on the textfield widget now and it should be done soon, the hardest part is just getting and allowing access of the text inside of the textfield in a nice way. I already have a blinking cursor, arrow keys for moving back and forth inside of the text field, backspace for deleting from the back and delete for deleting from the front.
What I need for it now is...
* Up and Down arrow cursor movement
* Mouse select cursor position
* Keyboard highlight text
* Mouse highlight text |
|
Back to top |
|
|
JoeCoder
Joined: 29 Oct 2005 Posts: 294
|
Posted: Mon Jul 24, 2006 10:24 am Post subject: |
|
|
Cool.
I'm not to the point yet in my own engine where I'm ready to start developing the GUI, but when I do I'll certainly lookup your code. The textbox especially should be useful. |
|
Back to top |
|
|
clayasaurus
Joined: 21 May 2004 Posts: 857
|
Posted: Tue Jul 25, 2006 5:10 pm Post subject: |
|
|
This mouse index selection is really bugging me, I might opt out for just keyboard index selection.
[edit] got it to work, although it is a bit handicapped now but I might be able to work around that.
[edit2] it appears to work for multiple lines now, although I'm not terribly proud of the solution but functionality is there
[edit3]
my input box works good enough, although the only featuers I've added were
* Left-right arrow key index movement
* mouse selection
* multi line support text boxes
I don't feel like working forever on this one, or maybe I'll come back to it in the future and add highlighting and up/down selection for multiline, but I don't deem those 'critical' features I guess. |
|
Back to top |
|
|
clayasaurus
Joined: 21 May 2004 Posts: 857
|
Posted: Thu Jul 27, 2006 9:26 pm Post subject: |
|
|
Inputbox is now finished for now ... here is the XML code to load it...
Code: |
<textfield x="200" y="350" maxwidth="500" fontheight="32" name="txt1" color="255;255;255;255" fontcolor="0;255;0;255" padding="30" maxlines="1">
type text here...
</textfield>
|
beginning next monday I will start on the GUI class to hook up callbacks and hold multiple layouts, and probably the week after that I will create the layout editor. |
|
Back to top |
|
|
pragma
Joined: 28 May 2004 Posts: 607 Location: Washington, DC
|
Posted: Fri Jul 28, 2006 7:57 am Post subject: |
|
|
Hi.
I've been lurking on this thread for a while now, and just wanted to say that I'm quite impressed with all this and cannot wait to see what comes of all this.
There was much talk a while back about what the right tact for D is, with respect to GUI development and support. There were several folks, myself included, that felt that backing GL as the lowest-common-denominator for GUI rendering was the most portable approach available - even if it is quite labor intensive to build a lib from scratch. As Arc backs SDL (I think?), that's just about as good, seeing how portable SDL is.
Anyway, I just wanted to say thank you for your efforts on this front. Who knows, I may be using this portion of your lib in the future as a windowing lib on other projects. _________________ -- !Eric.t.Anderton at gmail |
|
Back to top |
|
|
clayasaurus
Joined: 21 May 2004 Posts: 857
|
Posted: Fri Jul 28, 2006 8:34 pm Post subject: |
|
|
Maybe after a few rewrites Yes my lib uses SDL + OpenGL, and SDL 1.3 is supposed to get multi window support and not destroy OpenGL's context on window resizes in Windows which will make SDL a very good choice to develop such a GUI on.
I wouldn't touch it until I work out all the bugs and get some feedback on features to add/subtract, also right now it is pretty well integrated into my library as I havn't designed it to be used seperately, but of course it could be possible.
The inputbox code is not optimized at all right now either, I'd see it as 'hackish' but I'm happy with its functionality in hindsight.
Thanks for the interest!
~ Clay |
|
Back to top |
|
|
clayasaurus
Joined: 21 May 2004 Posts: 857
|
Posted: Thu Aug 03, 2006 4:24 pm Post subject: |
|
|
Alright, I've been too busy this week with family things, but I did get a tiny bit done, if the widgets are not inside the defined layout bounds then it will trigger an assert error.
This fri-sun is my last work week, and then I'll be visiting my parents and preparing for school, however I hope to get the whole GUI system and Physics system done before school starts.
The next thing on the GUI todo list is to support layouts inside of layouts, which will work like...
<layout ...>
<childlayout or layout = "layout.xml" x="30" y="10" />
</layout>
~ Clay |
|
Back to top |
|
|
JoeCoder
Joined: 29 Oct 2005 Posts: 294
|
Posted: Fri Aug 04, 2006 8:40 am Post subject: |
|
|
Yeah, I know all about being busy too. Worked on my engine probably 3 hours in the last month and with my last semester at the university rapidly approaching I'm not sure where I'll find any time. And then there's all the clients who want their websites finished...
If only I didn't have to sleep. |
|
Back to top |
|
|
clayasaurus
Joined: 21 May 2004 Posts: 857
|
Posted: Wed Nov 01, 2006 10:42 pm Post subject: |
|
|
/me gets back to work to finish the GUI system
Here is a picture of a recap of how the system will work
http://www.dsource.org/projects/arcgames/browser/web/gui.png?format=raw
Features to back port from current arc version (in freeuniverse until next arc release)
1) Game Sprite load based on XML file
2) My current sprite in arc will become GUISprite because I want my GUI bounds to be able to be defined by polygons with holes in them
3) Finish GUI off, use the sig-slot now in DMD
4) create replacement layouts for freeuniverse GUI stuff
5) WSIG GUI Editor? |
|
Back to top |
|
|
clayasaurus
Joined: 21 May 2004 Posts: 857
|
Posted: Fri Nov 17, 2006 3:04 pm Post subject: |
|
|
Alright... a little change of plans.
I realized that an image skin based GUI system is clunky and probably not the best solution, and that 'hard-coded' GUI's tend to look better.
I am going to redesign the GUI to
1) Have box collision style for all widgets, not sprite based
2) Use hard-coded 'skins', easily be able to program new skin or change skins at run time
3) Use DMD's sig/slot
The only thing I am really changing is the skin system, layouts will be the same, and I will still have the main GUI class.
Hooking signals up to the GUI class will look like
gui.getLayout("lay1").getWidget("btn1").connect(myobserver);
I do not have time right now to really develop it now, I just thought of a slightly different design.
~ Clay |
|
Back to top |
|
|
clayasaurus
Joined: 21 May 2004 Posts: 857
|
Posted: Mon Nov 27, 2006 9:29 am Post subject: |
|
|
Alright, the new design changes really helped alot.
Instead of skins, hard coded 'themes' will be used (and they can be changed at run time). Right now I only have 1 'freeuniverse' style theme.
Hooking up signals to the gui looks like
gui.getLayout("layout1").getWidget("myimg").clicked.connect(&handle.image);
layout xml files look like
Code: |
<layout name="imagetest" x="30" y="30" width="600" height="500">
<image x="0" y="0" width="100" height="125" name="myimg" color="255;255;255;100" image="guibin/penguin.png"/>
<label x="100" y="25" fontheight="32" fontname="guibin/font.ttf" name="lbl1" color="0;255;0;255" fontcolor="255;0;0;255" padding="30">
Hello Label World
</label>
<button x="100" y="150" fontname="guibin/font.ttf" fontheight="32" name="btn1" color="255;255;255;255" fontcolor="255;0;0;255" padding="30">
Click on me!
</button>
<textfield x="100" y="220" maxwidth="400" fontname="guibin/font.ttf" fontheight="16" name="txt1" color="255;255;255;255" fontcolor="0;255;0;255" padding="30" maxlines="5">
one,
two,
three,
four,
five
</textfield>
<textfield x="100" y="350" maxwidth="400" fontname="guibin/font.ttf" fontheight="16" name="txt2" color="255;255;255;255" fontcolor="255;0;0;255" padding="30" maxlines="1">
text
</textfield>
</layout>
|
gui xml files look like
Code: |
<gui>
<layout name="layout1" file="layout.xml" hide="false"/>
</gui>
|
GUI's hold a list of layouts, and whether or not to display them and their name.
A sample application for the GUI looks like
Code: |
import arc.gui.layout;
import arc.input,
arc.window,
arc.log,
arc.texture,
arc.font,
arc.gui.gui,
arc.physics.time;
import std.stdio, std.string;
class HandleGUI
{
void label()
{
writefln("click on label");
}
void image()
{
writefln("click on image");
}
}
int main()
{
arc.window.open("GUI Development", 800, 600, false);
arc.input.open();
arc.log.open();
HandleGUI handle = new HandleGUI;
GUI gui = new GUI("gui.xml");
gui.getLayout("layout1").getWidget("myimg").clicked.connect(&handle.image);
gui.getLayout("layout1").getWidget("lbl1").clicked.connect(&handle.label);
while (!arc.input.keyDown(ARC_QUIT))
{
arc.input.process();
arc.window.clear();
gui.process();
gui.draw();
arc.window.swap();
}
scope(exit) { arc.window.close(); arc.log.close(); }
return 0;
}
|
It is basically done, just needs testing, tweaking, and support for more themes. |
|
Back to top |
|
|
clayasaurus
Joined: 21 May 2004 Posts: 857
|
Posted: Sat Mar 24, 2007 8:25 am Post subject: |
|
|
This saturday I updated the GUI code for the new font API and input API. However, lastChars is broken :-/
Ninput unittest is updated as well.
edit: never mind, lastchars is working well, err on my part. Textfield now works with the new font, looks nice.
edit: Got my GUI system in the state I last left it now, except it renders with the new font code. Cgui unit test works. unittestbin had to be updated as well as some gui code.
By the way, this GUI system is pretty much complete, except that I've never actually used it (the design is solid, however). I should probably break it in for the asteroids example.
~ Clay |
|
Back to top |
|
|
|
|
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
|
Powered by phpBB © 2001, 2005 phpBB Group
|