[SOLVED] PNG imageset made with GIMP, wrong units

[Eduard Munteanu]

Hello.

I created a PNG imageset with GIMP for a pushbutton. It contains 3 images (normal, hover, pushed) along the X-axis (width). The PNG size is 432x48 and the .imageset file is:

Code: Select all

<?xml version="1.0" ?>
<Imageset Name="MainMenuImageset" Imagefile="/data/gui/img/mainmenu.png">
   <Image
      Name="PushButton"
      XPos="0" YPos="0"
      Width="144" Height="48"
   />
   <Image
      Name="PushButton_hover"
      XPos="144" YPos="0"
      Width="144" Height="48"
   />
   <Image
      Name="PushButton_clicked"
      XPos="288" YPos="0"
      Width="144" Height="48"
   />
</Imageset>


But this results in the button image being shorter than what one would expect. In GIMP, the normal button has 144 pixels, while in CEGUI I have to set width to around 170 to get it displayed correctly.

Looks like the same thing goes for height.

Here's a snippet from the .looknfeel file:

Code: Select all

<?xml version="1.0" ?>
<Falagard>
   <WidgetLook name="PushButton">
      <ImagerySection name="normal_imagery">
         <ImageryComponent>
            <Area>
               <Dim type="LeftEdge">
                  <AbsoluteDim value="0" />
               </Dim>
               <Dim type="TopEdge">
                  <AbsoluteDim value="0" />
               </Dim>
               <Dim type="RightEdge">
                  <UnifiedDim
                     scale="1.0"
                     type="Width"
                  />
               </Dim>
               <Dim type="Width">
                  <ImageDim
                     imageset="MainMenuImageset"
                     image="PushButton"
                     dimension="Width"
                  />
               </Dim>
               <Dim type="Height">
                  <UnifiedDim
                     scale="1.0"
                     type="Height"
                  />
               </Dim>
            </Area>
            <Image imageset="MainMenuImageset" image="PushButton" />
            <VertFormat type="Stretched" />
         </ImageryComponent>


I'm using CEGUI through CrystalSpace, if this makes any difference. The actual button entity is created in C++ code (as opposed to a layout file) and it's wider than necessary. Same thing happens if I set it the correct size, this only affects mouse hover/click events, not the image of the button.

What's wrong?

Thanks.

[scriptkid]

Hi and welcome

This might depend on the renderer, but i would guess that you should try to save your image so that its dimensions are a power of 2. In your case, the smallest image would be "512x64". With The Gimp you can change the size of the canvas. That shouldn't change the scale.

I made a calculation: both 144/170 and 432/512 result in 0.844... so that's most likely the problem.

HTH.

[Eduard Munteanu]

Thanks, it works fine now.
I resized the canvas and then each button to 256x64, though I'm not sure if the canvas size or the individual image size is the problem.

I didn't see any reference to this in the docs (but maybe I wasn't paying attention), so I thought I could draw the buttons' imageset at the size they're meant to be displayed. I would appreciate more info on this matter (links, anything).

I hope this poses no problem with other images, because, IMO, Gimp would/should be better at image resizing algorithms than CEGUI.

[scriptkid]

Glad to hear that you got it to work The 'power of 2' expectation has little to do with Cegui, that's why it's not mentioned (enough). It's mainly a standard/shortcoming in videocard world, regarding Textures.

Unless you are making a pixel-perfect Gui, you'd better design your imagery so that it still looks okay when scaled. Both shipped imagesets (Windowslook and Taharezlook) allow for scaling and look okay. Unless of course, you are going to make fullscreen buttons

You could have a look at those image files, and you will see that they mainly exist of borders, edges, corners and such. Not of 'recognizable' widget images.

HTH