Creating A DIY Interface
PyGame can draw shapes quite easily, and combined with a bit of logic can be used to create an interface. You will need to have a variable to set which screen should be drawn, this can then be used determine what happens when the mouse button is clicked and the click coordinates can then be used to determine which button is clicked.
One Panel Example
#Import statements are to enable the code to use the functions from the library
import pygame
import sys
import os
#initialize pygame & window
os.environ["SDL_VIDEO_CENTERED"] = "1"
pygame.init()
#Setup screen
SCREENWIDTH = 800
SCREENHEIGHT = 500
SCREENSIZE = [SCREENWIDTH, SCREENHEIGHT]
SCREEN = pygame.display.set_mode(SCREENSIZE)
#Declare variables for colours used for interface
BGCOLOUR = (255, 230, 255) #background colour
GUICOLOUR = (105,142,184) #panel colour
GUIOUTLINECOLOUR = (15,48,125) #panel outline colour
BTNCOLOUR = (58,105,150) #button colour
BTNOUTLINECOLOUR = (30,139,195) #button outline colour
SHADOWCOLOUR = (0,0,0) #shadow colour
CURRENT = "MAIN"
#caption for the game
pygame.display.set_caption("GUI Example")
#Method for drawing the panel
def createpanel():
if CURRENT == "MAIN":
#Rectangles for the panel & drawing them
OUTER = pygame.Rect([150,50,450,400])
INNER = pygame.Rect([155,55,440,390])
SHADOW = pygame.Rect([152,52,450,400])
pygame.draw.rect(SCREEN, SHADOWCOLOUR, SHADOW, 0)
pygame.draw.rect(SCREEN, GUIOUTLINECOLOUR, OUTER, 0)
pygame.draw.rect(SCREEN, GUICOLOUR, INNER, 0)
#Add button
#Rectangles for button
BTNOUTER = pygame.Rect([275,250,200,75])
BTN = pygame.Rect([280,255,190,65])
SHADOW = pygame.Rect([277,252,200,75])
#drawing rectangles for button
pygame.draw.rect(SCREEN, SHADOWCOLOUR, SHADOW, 0)
pygame.draw.rect(SCREEN, BTNOUTLINECOLOUR, BTNOUTER, 0)
pygame.draw.rect(SCREEN, BTNCOLOUR, BTN, 0)
#Text for the button
myfont = pygame.font.SysFont("monospace", 30)
label = myfont.render("Play", True, (255,255,0))
shadow = myfont.render("Play", True, (0,0,0))
SCREEN.blit(shadow, (352,272))
SCREEN.blit(label,(350,270))
#Add title for the panel
myfont = pygame.font.SysFont("monospace", 30)
myfont.set_bold(True)
label = myfont.render("My Game Title", True, (255,255,0))
shadow = myfont.render("My Game Title", True, (0,0,0))
SCREEN.blit(shadow, (252,102))
SCREEN.blit(label,(250,100))
#game loop
while True:
for events in pygame.event.get(): #get all pygame events
if events.type == pygame.QUIT: #if event is quit then shutdown window and program
pygame.quit()
sys.exit()
#Event for mouse movement
#This will be a rollover effect
if events.type == pygame.MOUSEMOTION:
#Get mouse pos
pos = pygame.mouse.get_pos()
x,y = pos
#if mouse is over the button change the button colour
if (x>280) and (x<470) and (y>255) and (y<320):
BTNCOLOUR = (100,150,200)
else:
BTNCOLOUR = (58,105,150)
#This event is for the mouse button click
#this will be what the interface button should do
if events.type == pygame.MOUSEBUTTONDOWN:
#Get mouse pos
pos = pygame.mouse.get_pos()
x,y = pos
#Is the mouse over the button if so change the current screen
if (x>280) and (x<470) and (y>255) and (y<320):
CURRENT = "PLAY"
#Draw screen
SCREEN.fill(BGCOLOUR)
createpanel()
pygame.display.update()
Two Panel Example
#Import statements are to enable the code to use the functions from the library
import pygame
import sys
import os
#initialize pygame & window
os.environ["SDL_VIDEO_CENTERED"] = "1"
pygame.init()
SCREENWIDTH = 800
SCREENHEIGHT = 500
SCREENSIZE = [SCREENWIDTH, SCREENHEIGHT]
SCREEN = pygame.display.set_mode(SCREENSIZE)
BGCOLOUR = (255, 230, 255)
GUICOLOUR = (105,142,184)
GUIOUTLINECOLOUR = (15,48,125)
BTNCOLOUR = (58,105,150)
BTNOUTLINECOLOUR = (30,139,195)
SHADOWCOLOUR = (0,0,0)
CURRENT = "MAIN"
#caption for the game
pygame.display.set_caption("GUI Example")
def createpanel():
if CURRENT == "MAIN":
OUTER = pygame.Rect([150,50,450,400])
INNER = pygame.Rect([155,55,440,390])
SHADOW = pygame.Rect([152,52,450,400])
elif CURRENT == "PLAY":
OUTER = pygame.Rect([600,0,198,498])
INNER = pygame.Rect([605,5,188,488])
SHADOW = pygame.Rect([602,2,200,500])
pygame.draw.rect(SCREEN, SHADOWCOLOUR, SHADOW, 0)
pygame.draw.rect(SCREEN, GUIOUTLINECOLOUR, OUTER, 0)
pygame.draw.rect(SCREEN, GUICOLOUR, INNER, 0)
if CURRENT == "MAIN":
#Add button
BTNOUTER = pygame.Rect([275,250,200,75])
BTN = pygame.Rect([280,255,190,65])
SHADOW = pygame.Rect([277,252,200,75])
pygame.draw.rect(SCREEN, SHADOWCOLOUR, SHADOW, 0)
pygame.draw.rect(SCREEN, BTNOUTLINECOLOUR, BTNOUTER, 0)
pygame.draw.rect(SCREEN, BTNCOLOUR, BTN, 0)
myfont = pygame.font.SysFont("monospace", 30)
label = myfont.render("Play", True, (255,255,0))
shadow = myfont.render("Play", True, (0,0,0))
SCREEN.blit(shadow, (352,272))
SCREEN.blit(label,(350,270))
#Add title
myfont = pygame.font.SysFont("monospace", 30)
myfont.set_bold(True)
label = myfont.render("My Game Title", True, (255,255,0))
shadow = myfont.render("My Game Title", True, (0,0,0))
SCREEN.blit(shadow, (252,102))
SCREEN.blit(label,(250,100))
elif CURRENT == "PLAY":
myfont = pygame.font.SysFont("monospace", 20)
myfont.set_bold(True)
label = myfont.render("Score: ", True, (255,255,0))
shadow = myfont.render("Score: ", True, (0,0,0))
SCREEN.blit(shadow, (617,27))
SCREEN.blit(label,(615,25))
#game loop
while True:
for events in pygame.event.get(): #get all pygame events
if events.type == pygame.QUIT: #if event is quit then shutdown window and program
pygame.quit()
sys.exit()
if events.type == pygame.MOUSEMOTION:
#Get mouse pos
pos = pygame.mouse.get_pos()
x,y = pos
#Mouse over effect
if (x>280) and (x<470) and (y>255) and (y<320):
BTNCOLOUR = (100,150,200)
else:
BTNCOLOUR = (58,105,150)
if events.type == pygame.MOUSEBUTTONDOWN:
#Get mouse pos
pos = pygame.mouse.get_pos()
x,y = pos
#Mouse click on button
if (x>280) and (x<470) and (y>255) and (y<320) and (CURRENT=="MAIN"):
CURRENT = "PLAY"
#Draw screen
SCREEN.fill(BGCOLOUR)
createpanel()
pygame.display.update()
