Displaying Surfaces in Pygame

Surfaces

In order to draw or display any kind of image a surface is needed,

Two types of surfaces:

1. Display surface

   • The game window
   • Must be unique
   • Is always visible

2. Regular surface

   • A single image
   • Needs to be put on display surface to be visible
   • Flexible amount
   • Only displayed when connect to the display surface
   • Regular Surfaces:- Plain Colour surfaces/ Image Surfaces/ Text Surfaces

Positions in Pygame

The point of origin (0,0) is in the top left corner. In order to move right x axis should be increased and in order to move to bottom the y axis should be increased. If the size of the display surface is (1000, 600) the maximum x coordinate is 1000 and maximum y coordinate is 600. In order to display a surface of size (200, 300) at the bottom left corner :- (display width size - surface width size, display height size - screen height size) / position_coordinates = (800,300). THE COORDINATE SYSTEM IS BASED ON PIXELS

Creating A Surface With Plain Colour

import pygame
from sys import exit

pygame.init()
screen = pygame.display.set_mode((800,400))
pygame.display.set_caption('Runner')
clock = pygame.time.Clock()

############## Creating and Adding Colour to s Surface #############################
####################################################################################
test_surface = pygame.Surface((100,200)) # Creating a new surface ((Widht, Height))
test_surface.fill('Red') # adding colour to the surface
####################################################################################
####################################################################################

while True:
    for event in pygame.event.get():  
        if event.type == pygame.QUIT:
            pygame.quit()
            exit()


    ######################## Displaying the created surface in display Surface ###########################
    ######################################################################################################

    screen.blit(test_surface, (0,0))  # attach the surface to display surface. blit --> Block Image Transfer(putting one surface on another surface). (surface, position of the display surface)

    '''
    screen.blit(test_surface, (0,0)) -->
        Getting the top left corner(0,0) of the test_surface and placing it in the (0,0) of the diplay surface
        screen.blit(test_surface, (surface to be displayes, position of the display surface to be displayed))
    '''

    screen.blit(test_surface, (700,200)) # (display width size - surface width size, display height size - screen height size)   display on the bottom corner

    #######################################################################################################
    #######################################################################################################

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

Creating A Surface With Images

import pygame
from sys import exit

pygame.init()
screen = pygame.display.set_mode((800,400))
pygame.display.set_caption('Runner')
clock = pygame.time.Clock()

##################### Importing an Image ###########################################
####################################################################################
test_surface = pygame.image.load('assets/background/sky.png').convert_alpha()

####################################################################################
####################################################################################

while True:
    for event in pygame.event.get():  
        if event.type == pygame.QUIT:
            pygame.quit()
            exit()


    ######################## Displaying the Image in display Surface #####################################
    ######################################################################################################

    screen.blit(test_surface, (0,0))

    #######################################################################################################
    #######################################################################################################

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

.convert_alpha() convert the images so pygame can use them much more easier

Creating Text

1. creating an image of the text
2. placing it on the display surface

import pygame
from sys import exit

pygame.init()
screen = pygame.display.set_mode((800,400))
pygame.display.set_caption('Runner')
clock = pygame.time.Clock()
test_surface = pygame.image.load('assets/background/sky.png')

############### Importing an font and creating text surface ########################
####################################################################################

test_font = pygame.font.Font('assets/fonts/font1.ttf', 50)
# pygame.font.Font(font type, font size). None --> default font

text_surface = test_font.render('My game', False, 'Blue')
# test_font.render(text information, anti aliasing, colour)
# anti aliasing --> smoothing the edges of the text

####################################################################################
####################################################################################

while True:
    for event in pygame.event.get():  
        if event.type == pygame.QUIT:
            pygame.quit()
            exit()


    ################### Displaying the text surface in display Surface ###################################
    ######################################################################################################

    screen.blit(test_surface, (0,0))
    screen.blit(text_surface, (300,50))

    #######################################################################################################
    #######################################################################################################

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

Tags: /python/ /python3/ /pygame/ /gamedev/ /tutorial/