[SOLVED] DirectButton images

I learned in the manual how to apply images for different button states. How to go with non power of 2 textures? I tried transparency but there is a lot of “invisible” space that can be clicked

This is what i mean:

^ This is the image I want to map to my button.
I need to make it power-of-2, right?
Which of these 2 ways should i use?:

  1. (black is actually transparency)
    Now how would i explain that to egg-texture-cards and make the button’s proportions according to the 1st image?

Why do you want to make a non-power-2 texture? If your graphics card supports loading non-power-2 textures, you can just put:

textures-power-2 none

in your Config.prc file to load the non-power-2 texture directly, and you don’t have to scale it. If your graphics card doesn’t support this (or you want it to work on any graphics card, you can put:

textures-power-2 up

and then it will automatically scale your texture to the next larger power of 2, instead of to the next smaller, so you do not lose any precision and the resulting texture isn’t blurred.


Uh, you misunderstood…

Something that I think will help you out is if you visualize the button frame. The frame represents the actual clickable area of the button. You can visualize it by setting the relief attribute to RAISED, then you can scale it by adjusting the frameSize attribute. To get more info about how to do that stuff, check out the directGUI section of the manual.

edit: Oh, also, set the borderWidth to 0,0.

What I ment is I wanted to set the button’s size to my texture card’s size (can’t I?), but since my button wasn’t power-of-2, I had to make transparent parts like here: .
But since I couldn’t find out how to set UV’s in egg-texture -cards (that’s a question) those parts would be clickable as well, and thats bad.
Usually I make texture cards with Blender and I can set the UVs there, but for buttons I need multiple textures (for each state) so I need to use egg-texture-cards.
I have also read about ‘direct-gui-edit’ option for PRC, but it doesn’t work for me (could be my mouse)

Hmm, I think something’s a little confused.

There are two different sizes involved here: (1) the size of the texture, which affects the clarity of the image onscreen. (2) the size of the card, which affects the size of the image onscreen. (1) must be a power of 2, and if it is not, Panda will automatically rescale it. (2) can be any size whatsoever.

When you use egg-texture-cards, it can create a card model whose size (2) is chosen to correspond to the original, unscaled size of the texture (1). When Panda then loads this model, it will rescale the texture size (1) to a power of 2, but will not affect the card size. You can then parent the card to aspect2d, and it will have the appropriate size onscreen to match the original, unscaled size of your texture, regardless of whether the original size was a power of 2 or not.

The fact that Panda will automatically rescale your texture to a power of 2 has nothing to do with the onscreen size of your image. If Panda scales the texture down to a smaller power of 2 (this is the default behavior), the image will lose a little clarity, and some people don’t like this. I thought this is what you were trying to solve. If it is, asking Panda to scale it up to the larger power of 2 will solve it.

There is no need to embed your image within a larger power-of-2 image. (This is sometimes necessary for video images and other images that have to be updated in real time; but for a texture that can be loaded once and scaled at load time, you can just let Panda scale it automatically and be done with it.)


Honestly, I didn’t know Panda could resize it automatically. :blush:
Thats why all the texture cards I made(not too much) were power-of-2, but the ‘card’ wasnt. The method I used was to load the power-of-2 image as flat plane from UV/Image Editor->2d cutout image importer and edit the UVs and card proportions manually.
My menu image was for example 2048x2048 for 1600x1200
I guess it won’t be very noticeable to ask Panda to do it manually, only what do I need to modify in the prc file for it to resize it to the next power-of-2 instead? And why isn’t it like that by default?

If you resize to the bigger power of 2 rather than the smaller power of 2, you consume four times as much texture memory. This might be OK if you’re willing to make that tradeoff for that small amount of extra quality in your texture image, but it could be an unfortunate waste if you don’t know it’s happening. That’s why we made the default go to the smaller size.


I think I see the communication issue. Apologies in advance for any intelligences insulted or if I am totally getting tis wrong.

Anon, if I understand you correctly you want a pixel perfect UI?

The trick isn’t to make the texture to be “pixel perfect” but to scale the geometry it is on. Everything in panda is a 3d element so texturing a button is just like texturing anything else. Rdb added a new aspect3d layer to 1.7 which makes it easy to scale your button to the pixel size you desire. My searching is failing to find the post however.

It’s called pixel2d. :slight_smile:

Yeah, pixel2d, not aspect3d. I never expected rdb to add it so fast :slight_smile:
But anyway, you misunderstood as well,croxis. I don’t want a pixel perfect image loading (now).
My current question was how to apply that ‘next-bigger-power-of-2’ option in the Config file. But drwr mentioned that in his previous posts (textures-power-2 up). I’m probably blind or something.

  1. Well also I want to know if I can scale the button to my cards size/proportions. Right now if I won’t set proportions( geom_scale, right?), its boxy shaped and the card is rescaled to it instead.
  2. And also when I add ‘direct-gui-edit’ to Config.prc, it doesnt work. Is it my mouse?

If you create your DirectButton with geom=myCard, where myCard is the card model you created with egg-texture-cards (not texture=myTexture), it should set its proportions from the card model, which, if you used the -p parameter to egg-texture-cards, should match the proportions of your texture.

I don’t know. Do you have a middle mouse button on your mouse? You need to be able to generate a mouse2 event to use direct-gui-edit.


Whats -p for?
Don’t see any difference anyway:

egg-texture-cards -o button.egg -p 400,100 b1.png b2.png b3.png b4.png

In Panda3d:

bcard = loader.loadModel('button.egg')
button = DirectButton(relief = None,
					 text = ("ready", "clicked", "roll", "disabled"),
					 text_scale = 0.2,

					 geom = (bcard.find('**/button-ready'),

Of course I do. When I have a


line in the PRC, when i click on my button with the middle mouse button, a single black frame flashes and nothing happens…

Well I showed an example, what else can I add?

I made an exit button to quit the game.
If I press and hold the button the command wont run untill I release the mouse button again. If I release the mouse button outside of the button geometry, the command won’t run at all. Any way to fix that?
oh and the above question is still present in case you can help

I’d recommend you leave that button functioning as is. It’s pretty standard for buttons not to fire until the mouse button is released on them. Even on these forums, if you click on submit and move the mouse away before releasing it, nothing happens. That’s what people are used to, in my experience.

Also, adjusting the frameSize of a button will change the size of the clickable area without adjusting the size of the graphic. You can use that to make the “invisible” parts of the graphic not clickable by reducing the framSize.

I just checked few games and looks like it’s more used than what I want to make. Found only 1 game so far that does it my way…
But just imagine, I have a menu:
.Start Game
When I click on “Start Game”, a loud creepy sound comes up, not just a simple clicksound like for the rest. So it would be weird if the game wouldn’t start right after it.

Thanks for the info, I think its faster to just

textures-power-2 up


I don’t understand why this doesnt work.
The code:

bcard = loader.loadModel('button.egg')
button = DirectButton(relief = None,
                text = ("ready", "clicked", "roll", "disabled"),
                text_scale = 0.2,

                geom = (bcard.find('**/button-ready'),

In egg-texture-cards:

egg-texture-cards -o button.egg -p 400,100 button-ready.png button-click.png button-rollover.png button-disabled.png 

UPDATE: OK, ignore the code, it is from egg-texture cards that the frame is disorted. Now I am sure.
I tried to make a 320x240 and 256x64(power-of-2) cards, even single frame cards, but they are all “scaled”. So I’m doing something wrong in egg-texture-cards. Like I said I have been using a Blender script to make cards till now and they all showed up correct in Panda. but for buttons I have to use egg-texture-cards.exe
What I input in that program is:

egg-texture-cards -o card.egg -p 320,240 card.png 

The image is 320x240 res.

The “-p” parameter defines the intended size of your window, not the texture pixels. The explanation it gives for -p when you use egg-texture-cards -h is more than a little confusing, so I apologize for that.

Basically, use half the “y” size of your window, twice, for the -p parameter. So if your game window is 1024x768, use “-p 384,384”.

The reason for this strange convention has to do with the default -g value, which defines a box 1 unit square, and the default range of render2d in -1 … 1, which defines a range 2 units on a side, and the default setting for aspect2d which retains the same y size as render2d but not the same x size.