Monday, February 16, 2015

Simple Graphics

After a short hiatus, I'm back to goofing around on the Simon project. I finally took the leap into learning Pygame. I'm not following any particular tutorial, but just cobbling things together with what I can find on the internet. My primary source right now is the following website: http://programarcadegames.com/index.php?lang=en. It's very well organized with a lot of comments, which is very helpful.

My only task tonight was to just get a basic window up with some colors and some text. This is just the basic type of task I need to understand in order to finish making the game. So I decided to just put together a basic color test that shows all the colors I was going to use in the project.

There are all sorts of new commands I needed learn. I've put them into groups based on concept, as opposed to the specific order they're called in:
  • General commands:
    • import pygame: This just calls up the Pygame module.
    • for event in pygame.event.get(): This cycles through the various things that the user has done in the window. I will probably need to explore this more if I wanted to make the Simon game also respond to clicks. But I don't want to do that in the current project. The current project is much more about physical buttons and lights.
    • if event.type == pygame.QUIT: This is what happens when the X in the window.
  • Font commands:
    • font = pygame.font.SysFont('Calibri', 36, False, False): This defines the font that the program will use. The pattern is font style, size, bold, and italics. Presumably, you can set multiple fonts because you call this command when you actually create text.
    • text = font.render("Welcome", True, WHITE): This renders a piece of text. The text is in the quotes, the next parameter has to do with anti-aliasing (which is something about smoothing things out), and then the last parameter is the text color.
    • Other commands: There are some commands I took off of a website. It has to do with grabbing and setting different attributes. I'm not going to go through them one at a time because I'm feeling lazy.
    • screen.blit(text, textpos): This actually puts the text into the window. But it won't appear until the screen is flipped, just like any other drawing command.
  • Window commands:
    • screen = pygame.display.set_mode((400,250)): This creates a window that is referred to as screen. The dimensions of the window are set inside of the parentheses.
    • pygame.display.set_caption("Simon"): This names the window. I'm not entirely sure how this works in the sense that it doesn't call the screen by its name. But it works.
    • Colors: Colors in Pygame are defined by RGB codes. I needed two version of the four main colors: one for when the light is on and one for when the light is off. To calculate the color-on value, I just averaged the color-off value with the white value.
    • pygame.draw.rect(screen, RED, [0, 0, 100, 100]): This draws a rectangle on the screen of the given color. The first two coordinates give the top left corner and the second two coordinates give the dimensions.
    • pygame.display.flip(): This redraws the screen. I'm not sure why it's called a flip instead of a redraw, but that's what it is.
  • Clock commands:
    • clock = pygame.time.Clock(): This establishes a clock that is used later in the code to control the refresh rate.
    • clock.tick(60): This limits the program to running only 60 frames per second. The purpose of this is just to slow down the refresh rate to not eat up too much CPU power.
The full code is below. What it does is draw a window with 8 colored squares and a little bit of text at the bottom.
import pygame

RED = (255,0,0)
GREEN = (0,255,0)
BLUE = (0,0,255)
YELLOW = (255,255,0)

REDON = (255,127,127)
GREENON = (127,255,127)
BLUEON = (127,127,255)
YELLOWON = (255,255,127)

WHITE = (255,255,255)

pygame.init()

font = pygame.font.SysFont('Calibri', 36, False, False)

screen = pygame.display.set_mode((400,250))
pygame.display.set_caption("Simon")

done = False
clock = pygame.time.Clock()

while not done:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            done = True

    pygame.draw.rect(screen, RED, [0, 0, 100, 100])
    pygame.draw.rect(screen, YELLOW, [100, 0, 100, 100])
    pygame.draw.rect(screen, GREEN, [200, 0, 100, 100])
    pygame.draw.rect(screen, BLUE, [300, 0, 100, 100])

    pygame.draw.rect(screen, REDON, [0, 100, 100, 100])
    pygame.draw.rect(screen, YELLOWON, [100, 100, 100, 100])
    pygame.draw.rect(screen, GREENON, [200, 100, 100, 100])
    pygame.draw.rect(screen, BLUEON, [300, 100, 100, 100])

    text = font.render("Welcome", True, WHITE)
    textpos = text.get_rect()
    textpos.centerx = screen.get_rect().centerx
    textpos.y = 210
    screen.blit(text, textpos)

    pygame.display.flip()
    clock.tick(60)

pygame.quit()
My next task will be to get the actual game play into the program. I don't think it should be too difficult. But I've said that type of thing before and been completely wrong. So we'll see what happens.

No comments:

Post a Comment