PDA

View Full Version : Skinning a button and using bitmap fonts



xtal256
24th August 2011, 13:14
I have been making a game on and off for the past few years, and i had built my own GUI for it (using OpenGL for the graphics). I had put that project aside for a while, until recently when i decided to re-write the GUI, and a lot of other components, using Qt.

Two of the most important things i need for the GUI is to have bitmap* skinned buttons and bitmap fonts.
Right now, i have buttons that look like this (note that the grey is not part of the button):
http://www.qtcentre.org/attachment.php?attachmentid=6783&d=1314182586
I admit, the font doesn't look the best, but i would still like to be able to use a bitmap font. Or at least find a better way to use fonts. I don't know what other games do.
One other point to make is the size of the button, it will need to be bigger than the standard button size.

Firstly, for the skinning, i don't suppose there is an easy (or possible) way to do this using style sheets. So the other way would be to subclass each widget and do custom drawing. That should probably be faster than style sheets, too.
As for the button size, if i subclass i can override the size hint. But i am not sure what the size should be. I want it to resize well and look good at different screen sizes.

It would be cool if there was already a 3rd party GUI library for Qt, like wysota's widgets, but geared more towards games (that is, can use bitmap skins and fonts).
If not, where is the best place to start? Just start subclassing each widget and re-write their drawing code?


* I am using the Microsoft definition of bitmap, so i actually mean pixmap.

high_flyer
24th August 2011, 16:01
Firstly, for the skinning, i don't suppose there is an easy (or possible) way to do this using style sheets.
Why not? its just one simple Stylesheet syntax line... (setting the background image)

For buttons, why do you even bother with fonts?
You usually don't have that many buttons, so making an image (with the text) per button is probably far quicker than investing the trouble of doing it with fonts.
Unless you are doing it for the sport, that I can understand.


It would be cool if there was already a 3rd party GUI library for Qt, like wysota's widgets, but geared more towards games (that is, can use bitmap skins and fonts).
Have you seen Qt3D?
http://doc.qt.nokia.com/qt3d-snapshot/qt3d-painting.html

xtal256
25th August 2011, 02:12
Why not? its just one simple Stylesheet syntax line... (setting the background image)
Not really. I want have buttons of different sizes, which means the button itself needs to resize. And to do this with images means you need to break the image up into 9 segments - the corners, sides, and centre. I am not sure what this technique is called, but it is quite commonly used.
Now that i think about it, it may be possible to do with CSS. This sort of stuff is done in Firefox to customise it's UI.


For buttons, why do you even bother with fonts?
You usually don't have that many buttons, so making an image (with the text) per button is probably far quicker than investing the trouble of doing it with fonts.
Ya reccon? Consider that i may have between 20 and 50 buttons in total throughout my GUI, obviously each with different text. Then imagine i decide to change the wording of some text slightly, or translate the application.



Have you seen Qt3D?
http://doc.qt.nokia.com/qt3d-snapshot/qt3d-painting.html
No, and it looks interesting. It may not help me much for skinning, but i am still going to use OpenGL for rendering the actual game (in 2D), so it will be useful for that.

thanks

high_flyer
25th August 2011, 09:55
Ya reccon? Consider that i may have between 20 and 50 buttons in total throughout my GUI, obviously each with different text. Then imagine i decide to change the wording of some text slightly, or translate the application.
Since I know nothing about your game, it was merely a guess.
Usually there are not that many buttons.
However even 50 for 50 buttons I think its would be easier to specify images (you could sperate background from text images for example and combine them).
Its true that when you want to change the text you will have to edit an image, but how often and in what number this happens?
But, its your project I just offered ONE (simple) way of doing it.
Resizing the buttons is more of an argument for me.
But with Qt Stylesheets even that is not such a problem, you can define a 'Border image' which does the 9 part devision for you. (and if your provide a large enough text image it could just scale with the button.

xtal256
26th August 2011, 01:07
I suppose i should have mentioned the size/scope of the game. Some simple games might just have a few buttons ("Start", "Quit", etc). But no matter how many buttons i have, i just hate having to create an image for each one. It's not what good programmers do :).

Maybe i will not use bitmap fonts after all. I could still get the GUI looking quite good with regular fonts.

And I will try the border image you speak of. I knew there was something like that in CSS because i had seen it in some Firefox themes. If all goes well, i should be able to skin the whole GUI entirely using CSS. I know it should be possible using CSS, i just don't know how much of it Qt supports.