Creating A DIY Interface

From TRCCompSci - AQA Computer Science
Jump to: navigation, search

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.

In the example below, CURRENT is the screen to display and this is used in create panel to draw the shapes and text required in the correct order.

CURRENT is also used in the event loop, this will check the appropriate areas of the interface for rollover effects and interface clicks. Remember these are simply shapes, you could go down the full on GUI class definitions to create a panel, button, label etc:

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" #the current screen to display

#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

This example takes the previous and shows how to have multiple panels. The game loop events for MOUSEMOTION & MOUSEBUTTON now also check the CURRENT value. The create panel will use CURRENT to draw the appropriate panel: 

#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) and (CURRENT=="MAIN"):
                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()
Retrieved from ‘http://www.trccompsci.online/mediawiki/index.php?title=Creating_A_DIY_Interface&oldid=5437’