Difference between revisions of "Creating A DIY Interface"

From TRCCompSci - AQA Computer Science
Jump to: navigation, search
(Two Panel Example)
Line 108: Line 108:
 
SHADOWCOLOUR = (0,0,0)
 
SHADOWCOLOUR = (0,0,0)
 
CURRENT = "MAIN"
 
CURRENT = "MAIN"
 
  
 
#caption for the game
 
#caption for the game
Line 140: Line 139:
 
         SCREEN.blit(shadow, (352,272))
 
         SCREEN.blit(shadow, (352,272))
 
         SCREEN.blit(label,(350,270))
 
         SCREEN.blit(label,(350,270))
 
  
 
         #Add title
 
         #Add title

Revision as of 22:26, 30 June 2018

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()
SCREENWIDTH = 800
SCREENHEIGHT = 500
SCREENSIZE = [SCREENWIDTH, SCREENHEIGHT]
SCREEN = pygame.display.set_mode(SCREENSIZE)
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")

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])

        pygame.draw.rect(SCREEN, SHADOWCOLOUR, SHADOW, 0)
        pygame.draw.rect(SCREEN, GUIOUTLINECOLOUR, OUTER, 0)
        pygame.draw.rect(SCREEN, GUICOLOUR, INNER, 0)

        #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))

#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):
                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()