Quick Start Guide - Part 2: Theming
The first thing we need to do is create an empty theme file.
Open a new text file - call it what ever you like and save it with a .json extension. I use my IDE for this but a simple text editor like windows notepad will also work. JSON is the JavaScript Object Notation file format and commonly used for saving all types of data - in this case theming data - that we can then use across multiple UI Elements.
Start with a simple outline for theming all "button" type elements - see below - inside your new json file
1 {
2 "button":
3 {
4 }
5 }
Of course the file existing on it's own will not do anything - you will also need to load it into your UIManager. Paths to theme files can either be absolute (starting from the drive location) or relative to the current working directory of your script. Here's the modified quick_start.py file loading our 'quick_start.json' (or whatever you have called it) theme file into the UIManager:
1 import pygame
2 import pygame_gui
3
4
5 pygame.init()
6
7 pygame.display.set_caption('Quick Start')
8 window_surface = pygame.display.set_mode((800, 600))
9
10 background = pygame.Surface((800, 600))
11 background.fill(pygame.Color('#000000'))
12
13 manager = pygame_gui.UIManager((800, 600), theme_path="quick_start.json")
14
15 hello_button = pygame_gui.elements.UIButton(relative_rect=pygame.Rect((350, 275), (100, 50)),
16 text='Say Hello',
17 manager=manager)
18
19 clock = pygame.time.Clock()
20 is_running = True
21
22 while is_running:
23 time_delta = clock.tick(60)/1000.0
24 for event in pygame.event.get():
25 if event.type == pygame.QUIT:
26 is_running = False
27
28 if event.type == pygame_gui.UI_BUTTON_PRESSED:
29 if event.ui_element == hello_button:
30 print('Hello World!')
31
32 manager.process_events(event)
33
34 manager.update(time_delta)
35
36 window_surface.blit(background, (0, 0))
37 manager.draw_ui(window_surface)
38
39 pygame.display.update()
Now we have a custom theme file - but we haven't actually changed anything about our button's appearance with it yet. So let's do that. First up, let's change the colours, to do this you first need to add a colours block to your theme file and add some colours to it - like so:
1 {
2 "button":
3 {
4 "colours":
5 {
6 "normal_border": "White",
7 "normal_bg": "SlateGray",
8 "normal_text": "White"
9 }
10 }
11 }
You can specify colours in a variety of ways - as detailed in the Theme Guide - and you can find out which parts of an element can have their colour changed in the specific theming guide for each element. The guide for the UIButton we are theming here can be found at UIButton Theming Parameters.
If you run the quick_start.py script again with these new edits to the theme file, you should start to see some changes at last. Hopefully the button now looks like this:
It's not just colours you can mess around with though. The most versatile category of theming options is the 'misc' group. Next I'm going to add three of these parameters to make the button have a rounded rectangular shape, set the radius of the four corners and set the border round the edge of the button to be 2 pixels thick.
1 {
2 "button":
3 {
4 "colours":
5 {
6 "normal_border": "White",
7 "normal_bg": "SlateGray",
8 "normal_text": "White"
9 },
10 "misc":
11 {
12 "shape": "rounded_rectangle",
13 "shape_corner_radius": "10",
14 "border_width": "2"
15 }
16 }
17 }
With those your parameters saved into your theme file, run the quick_start.py file again and hopefully you will see something like this:
And that's about covered the basics of theming.
Congratulations, you've learned most of the basics of using Pygame GUI! If you want to explore more, check out the API Reference and try creating some of the other UI Elements, or have a look at how layout works with the Layout Guide - otherwise you could head over to the Theme Guide to learn more about how to style your elements.