Background image

I’m wondering how I would go about to set a certain image (a jpg-file in my case) as a background. The reason I want to do this is to use it as a background for my game’s main menu to then put the menu itself on top of the background.

I’ve been looking around both in the manual and on the forums and haven’t found anything.

If you’re creating a background for your 2-d GUI, then it’s easiest just to use a DirectFrame that covers the whole screen. If you pass sortOrder = -1 to the DirectFrame constructor, it will draw behind other GUI items.


Alright, thanks.
I’m having some trouble when I’m loading my image though.
I’m given a NameError, the name “Title” is not defined.

Here’s my code so far.

import direct.directbase.DirectStart
from direct.gui.DirectGui import *
from pandac.PandaModules import *
from direct.showbase.DirectObject import DirectObject

title_screen = DirectFrame(image = (Title.jpg), sortOrder = (-1))


Now I’m not sure that I have to import as many modules as I have (I only checked the manual thinking that I’ll look deeper into what does and is what when I’ve cleared the first step) but never mind that.
Am I right when thinking that I’m not using the correct module for the frame? should I be using another one instead of “DirectFrame”?

instead of (Title.jpg), use “Title.jpg”

Damn, I missed that. I feel rather embarressed that I forgot it. :blush:
Thanks pro-rsoft.

My image appears to be ‘squished’ together into a completely square format instead of the rectangular format the original image is in. How would I do to change the resolution?

Also, is it possible to use custom fonts for the text and buttons in my GUI?

The shape of the image will match the shape of the card it is applied to. There are lots of approaches to make the card the appropriate shape, but one easy thing if your image is scaled to fill the screen is to set parent = render2d on your DirectFrame constructor. This sets the parent to render2d instead of the default aspect2d; aspect2d has a scale set on it it make it square.

If your image is not intended to exactly fill the screen, you could also set image_scale = (xs, 1, ys) where xs and ys are the adjustments to apply to the image.

Finally, you could also just scale the whole frame with something like frame.setScale(xs, 1, ys).

You can certainly use custom fonts for your text and buttons. Specify text_font = font to your DirectGui object constructors. The font should have been previously loaded with something like font = loader.loadFont(‘myFont.ttf’); I believe this is all described in the manual.


Thanks David, reparenting the DirectFrame constructor to render2d did the trick. I’m gonna try text next and after that I’m of to start with buttons.