Difference between revisions of "Creating A DIY Interface"

From TRCCompSci - AQA Computer Science
Jump to: navigation, search
(Created page with "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,...")
 
Line 1: Line 1:
 
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.
 
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==
 +
<syntaxhighlight lang=python>
 +
#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()
 +
</syntaxhighlight>
 +
 +
 +
==Two Panel Example==
 +
<syntaxhighlight lang=python>
 +
#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()
 +
</syntaxhighlight>

Revision as of 21:23, 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()
Retrieved from ‘http://www.trccompsci.online/mediawiki/index.php?title=Creating_A_DIY_Interface&oldid=5433’