Results 1 to 5 of 5

Thread: Skinning a button and using bitmap fonts

  1. #1
    Join Date
    Aug 2010
    Posts
    99
    Thanks
    3
    Qt products
    Qt4
    Platforms
    Windows

    Default Skinning a button and using bitmap fonts

    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):

    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.
    Attached Images Attached Images
    Last edited by xtal256; 24th August 2011 at 13:19.
    [Window Detective] - Windows UI spy utility
    [War Thunder]

  2. #2
    Join Date
    Jan 2006
    Location
    Munich, Germany
    Posts
    4,714
    Thanks
    21
    Thanked 418 Times in 411 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default Re: Skinning a button and using bitmap fonts

    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-snapsho...-painting.html
    ==========================signature=============== ==================
    S.O.L.I.D principles (use them!):
    https://en.wikipedia.org/wiki/SOLID_...iented_design)

    Do you write clean code? - if you are TDD'ing then maybe, if not, your not writing clean code.

  3. #3
    Join Date
    Aug 2010
    Posts
    99
    Thanks
    3
    Qt products
    Qt4
    Platforms
    Windows

    Default Re: Skinning a button and using bitmap fonts

    Quote Originally Posted by high_flyer View Post
    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.


    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

  4. #4
    Join Date
    Jan 2006
    Location
    Munich, Germany
    Posts
    4,714
    Thanks
    21
    Thanked 418 Times in 411 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default Re: Skinning a button and using bitmap 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.
    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.
    ==========================signature=============== ==================
    S.O.L.I.D principles (use them!):
    https://en.wikipedia.org/wiki/SOLID_...iented_design)

    Do you write clean code? - if you are TDD'ing then maybe, if not, your not writing clean code.

  5. #5
    Join Date
    Aug 2010
    Posts
    99
    Thanks
    3
    Qt products
    Qt4
    Platforms
    Windows

    Default Re: Skinning a button and using bitmap fonts

    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.

Similar Threads

  1. Bitmap on Push Button in QT 3
    By Gokulnath in forum Newbie
    Replies: 2
    Last Post: 12th January 2011, 08:34
  2. Re-skinning
    By davidgould in forum Newbie
    Replies: 2
    Last Post: 9th July 2010, 06:40
  3. QToolButton customization / skinning
    By Treggie in forum Qt Programming
    Replies: 8
    Last Post: 20th February 2010, 21:20
  4. Bitmap border
    By SailinShoes in forum Qt Programming
    Replies: 5
    Last Post: 14th May 2008, 19:37
  5. Bitmap buttons
    By BloodHo in forum Newbie
    Replies: 1
    Last Post: 4th November 2006, 15:17

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.