Placing an Image on a Transparent Button (for Beginners)


#1

Ok I am brand new to Panda and programming and was searching around on how to get an image on to a button so you just saw the image.

There were a few issues here but I guess the big one was making it that you see the image not the button. Ok here’s how I did it. I know this is not useful to 99.9% of users here but for that 0.1% like me yesterday it might help.

I am presuming you are adding the button to something you already have, i.e a little program:

# To get the button

from direct.gui.DirectGui import *

# I wanted to add a background image
        
from direct.gui.OnscreenImage import OnscreenImage

# This next one enable the transparency and is easily overlooked
# I did for an hour anyways

from pandac.PandaModules import TransparencyAttrib 

#Display background image

mainmenuTitle = OnscreenImage(image = './Graphics/mainmenuTitle.png', pos = (0, 0, 0))
             
# As I am truly stupid I have to label my button as exactly as possible
# This part image = etc is the path to the image

mainmenuLoadGame = DirectButton(image = './Graphics/mainmenuLoadGame.png',
   
# This part ensure that the button is not raised up and therefore invisible

                              relief = None,

# This is the part that gets the transparency

mainmenuLoadGame.setTransparency(TransparencyAttrib.MAlpha)

One thing that I did do was for a while was change the button to

buttonname.reparentTo (render3d)

This just prevented me from actually clicking the button effectively.

The buttons image was just a simple photoshop job 2 layers the bottom one transparent and the top one the text.

Here’s what it looks like on a kind of brushed metal effect background:


#2

I found this to be very useful! Saved an hour of debugging at least! Thanks.


#3

Thx! This is useful