PygameUILib - Getting Started [WIP]

Welcome to the documentation of my amazing library, PygameUILib! To follow this tutorial, you will need some (not a lot) experience with Pygame if you don’t have that, check out my tutorial series on pygame. In this tutorial we will be going over the basics of PygameUILib and eventually branch out into more advanced topics. We are going to make an application where you can write notes and order them in a list on a board. Basically a Trello clone. Let’s start with a basic Pygame program:

#Libraries
import sys
import pygame
from PygameUILib import *

screensize = (1920, 1080)

print("Pygame Init()")
pygame.init()
fps = 60
fpsClock = pygame.time.Clock()

print("Creating Screen")
screen = pygame.display.set_mode(screensize, pygame.FULLSCREEN)

screen.fill(pygame.Color("#1C1C2B"))
pygame.display.update()

# Main Loop
while True:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()
        if event.type == pygame.KEYDOWN:
            if event.key == pygame.K_ESCAPE:
                pygame.quit()
                sys.exit()

    tfps = fpsClock.get_fps()

    fpsClock.tick(fps)

Let’s also install PygameUILib (Press Windows key + R, paste this and hit enter):

python -m pip install --upgrade PygameUILib || pip install --upgrade PygameUILib || py -m pip install --upgrade PygameUILib

Now when we launch our script you should see a (nearly black) screen, press ESC to exit out of the application. A black screen can be a little boring after a while, let’s actually put a button on the screen. A button that when you press it, the application closes. Add this just before the main loop:

exitButton = Button()
exitButton.SetAttr("top", 25)       # Set CSS attributes "top" and "left"
exitButton.SetAttr("left", 25)      # AKA x and y respectivly to 25px (pixels)
exitButton.SetFunction(pygame.quit) # Set onclick to pygame.quit()
exitButton.text = "Quit"

And add this line just before fpsClock.tick(fps):

exitButton.Draw(screen)

Congratulations! You’ve just created your first button!