Part 2: Level Editor in Python – Scrolling Background and Grid

Feautured Img Level Editor P2

Hey there! So in this tutorial, we will be continuing to build our level editor. Level editors are really useful to create an amazing challenging game environment for the gamers to play in.

In this part, we would be concentrating on creating a scrolling background and a grid for us to work on. Let’s begin by having a look at what we have achieved till now.

Read: Part 1: Level Editor in Python – Setup and Background Image


Part 1 – Final Code

In this last part, we successfully created the setup for the level editor and added the background image to the window. The code from the last part is as follows:

import pygame
pygame.init()

screen_width = 800
screen_height = 640

lower_margin = 100
side_margin = 300

screen = pygame.display.set_mode((screen_width+side_margin,screen_height+lower_margin))
pygame.display.set_caption('Level Editor')

tree1 = pygame.image.load('Images/Background_Images/grass1.png').convert_alpha()
tree2 = pygame.image.load('Images/Background_Images/grass2.png').convert_alpha()
mountain = pygame.image.load('Images/Background_Images/mountain.png').convert_alpha()
sky = pygame.image.load('Images/Background_Images/sky.png').convert_alpha()

def paint_bg():
    screen.blit(sky,(0,0))
    screen.blit(mountain,(0,screen_height-mountain.get_height()-300))
    screen.blit(tree1,(0,screen_height-tree1.get_height()-150))
    screen.blit(tree2,(0,screen_height-tree2.get_height()))
    
running = True
while(running):
    
    paint_bg()
    
    for event in pygame.event.get():
        if(event.type==pygame.QUIT):
            running = False
            
    pygame.display.update()

pygame.quit()
LevelEditor Draft1
LevelEditor Draft1

Scrolling Ability of the Background

Before we work with the scrolling background we need to declare some variables which are listed below:

  1. scroll_left
  2. scroll_right
  3. scroll
  4. scroll_speed

The declaration happens before the running function. The below declare the variables starting from line 13.

After the declaration of these variables, in order to have the scrolling ability, we need to add conditional statements in the running loop based on the event happening.

1. Declaring Scroll Variables and Keys

Now for the scrolling event to happen, one needs to press the LEFT arrow key to move left and RIGHT arrow key to move right. Hence the type of the event will be a KEYDOWN event type.

Further, we will check if the key is K_LEFT then make the scroll_left variable True and similar will happen for the K_RIGHT and the scroll_right variable.

We also need to add the action when the key is released because then the scrolling needs to stop and both the variables are set to False again. Such event type is KEYUP event.

Look at the code mentioned below for all the things that are explained earlier.

import pygame
pygame.init()

screen_width = 800
screen_height = 640

lower_margin = 100
side_margin = 300

screen = pygame.display.set_mode((screen_width+side_margin,screen_height+lower_margin))
pygame.display.set_caption('Level Editor')

scroll_left = False
scroll_right = False
scroll = 0
scroll_speed = 1

tree1 = pygame.image.load('Images/Background_Images/grass1.png').convert_alpha()
tree2 = pygame.image.load('Images/Background_Images/grass2.png').convert_alpha()
mountain = pygame.image.load('Images/Background_Images/mountain.png').convert_alpha()
sky = pygame.image.load('Images/Background_Images/sky.png').convert_alpha()

def paint_bg():
    screen.blit(sky,(0,0))
    screen.blit(mountain,(0,screen_height-mountain.get_height()-300))
    screen.blit(tree1,(0,screen_height-tree1.get_height()-150))
    screen.blit(tree2,(0,screen_height-tree2.get_height()))
    
running = True
while(running):
    
    paint_bg()
    
    for event in pygame.event.get():
        if(event.type==pygame.QUIT):
            running = False
        
        if(event.type == pygame.KEYDOWN):
            if(event.key == pygame.K_LEFT):
                scroll_left = True
            if(event.key == pygame.K_RIGHT):
                scroll_right = True
            
        if(event.type == pygame.KEYUP):
            if(event.key == pygame.K_LEFT):
                scroll_left = False
            if(event.key == pygame.K_RIGHT):
                scroll_right = False
        
    pygame.display.update()

pygame.quit()

But this will not add the scrolling yet. As we have assigned the values to some variables but had done nothing with them yet.

2. Create Scroll Conditions

To achieve that we would be creating some conditional statements in the running loop after calling the background painting function as shown in the code mentioned below.

We would like to make the window scroll by a pixel value of 5 and another important step we need to do is making sure the background image is painted in both directions starting from the scroll.

Hence in the paint_bg function we have we will change the starting coordinate for the images as scroll. And another important thing we need to do is add a minus ( – ) before the coordinates to make the scroll in the correct direction.

You will be shocked to see the output. Check it out yourself!

import pygame
pygame.init()

screen_width = 800
screen_height = 640

lower_margin = 100
side_margin = 300

screen = pygame.display.set_mode((screen_width+side_margin,screen_height+lower_margin))
pygame.display.set_caption('Level Editor')

scroll_left = False
scroll_right = False
scroll = 0
scroll_speed = 1

tree1 = pygame.image.load('Images/Background_Images/grass1.png').convert_alpha()
tree2 = pygame.image.load('Images/Background_Images/grass2.png').convert_alpha()
mountain = pygame.image.load('Images/Background_Images/mountain.png').convert_alpha()
sky = pygame.image.load('Images/Background_Images/sky.png').convert_alpha()

def paint_bg():
    screen.blit(sky,(-scroll,0))
    screen.blit(mountain,(-scroll,screen_height-mountain.get_height()-300))
    screen.blit(tree1,(-scroll,screen_height-tree1.get_height()-150))
    screen.blit(tree2,(-scroll,screen_height-tree2.get_height()))
    
running = True
while(running):
    
    paint_bg()
    
    if(scroll_left==True):
        scroll-=5
    
    if(scroll_right==True):
        scroll+=5
        
    for event in pygame.event.get():
        if(event.type==pygame.QUIT):
            running = False
        
        if(event.type == pygame.KEYDOWN):
            if(event.key == pygame.K_LEFT):
                scroll_left = True
            if(event.key == pygame.K_RIGHT):
                scroll_right = True
            
        if(event.type == pygame.KEYUP):
            if(event.key == pygame.K_LEFT):
                scroll_left = False
            if(event.key == pygame.K_RIGHT):
                scroll_right = False
        
    pygame.display.update()

pygame.quit()
LevelEditor Scroll Output 1
LevelEditor Scroll Output 1

Oh, look how messed up our image became after scrolling! Do we want this? No right.

Let’s fix our background!

3. Optimize the Scrolled Background

First, let’s make the scrolling background some random colors. To do that we would make sure that at each iteration, my background is filled with color, and later on, we will fill the original background image on top of the color painted.

In order to achieve that, we would take a variable x and iterate it n no of times ( this n can be any value, for now i have taken 4). Then we will change the initial coordinate and add the width of the images to that as well.

Here the width of images is the same so we can take a single variable. In your case, if the widths are different take them individually.

Another thing we need to do is limit our scrolling. For that, we add an additional condition in line 38 of the code mentioned below.

import pygame
pygame.init()

screen_width = 800
screen_height = 640

lower_margin = 100
side_margin = 300

screen = pygame.display.set_mode((screen_width+side_margin,screen_height+lower_margin))
pygame.display.set_caption('Level Editor')

scroll_left = False
scroll_right = False
scroll = 0
scroll_speed = 1

tree1 = pygame.image.load('Images/Background_Images/grass1.png').convert_alpha()
tree2 = pygame.image.load('Images/Background_Images/grass2.png').convert_alpha()
mountain = pygame.image.load('Images/Background_Images/mountain.png').convert_alpha()
sky = pygame.image.load('Images/Background_Images/sky.png').convert_alpha()

def paint_bg():
    
    screen.fill((144,201,120)) # Green Color
    width = sky.get_width()
    for x in range(4):
        screen.blit(sky,((x*width)-scroll,0))
        screen.blit(mountain,((x*width)-scroll,screen_height-mountain.get_height()-300))
        screen.blit(tree1,((x*width)-scroll,screen_height-tree1.get_height()-150))
        screen.blit(tree2,((x*width)-scroll,screen_height-tree2.get_height()))
    
running = True
while(running):
    
    paint_bg()
    
    if(scroll_left==True and scroll>0):
        scroll-=5
    
    if(scroll_right==True):
        scroll+=5
        
    for event in pygame.event.get():
        if(event.type==pygame.QUIT):
            running = False
        
        if(event.type == pygame.KEYDOWN):
            if(event.key == pygame.K_LEFT):
                scroll_left = True
            if(event.key == pygame.K_RIGHT):
                scroll_right = True
            
        if(event.type == pygame.KEYUP):
            if(event.key == pygame.K_LEFT):
                scroll_left = False
            if(event.key == pygame.K_RIGHT):
                scroll_right = False
        
    pygame.display.update()

pygame.quit()

Drawing Grid on Screen

In order to have the gridlines, first we need to declare some variables which include the no of rows and columns you need on your screen ( you can set them according to your preference ). We also need to compute the size of each square tile on the grid and we defined the color WHITE to add color to the grid.

To paint the gridlines on the screen we declare a function that will paint the vertical and horizontal lines on the screen. We will be using loops to make sure that the gridlines move along with the scroll and do not stay static on the screen.

The code for gridlines begin around Line 34 in the code mentioned below.

import pygame
pygame.init()

screen_width = 800
screen_height = 640

lower_margin = 100
side_margin = 300

screen = pygame.display.set_mode((screen_width+side_margin,screen_height+lower_margin))
pygame.display.set_caption('Level Editor')

scroll_left = False
scroll_right = False
scroll = 0
scroll_speed = 1

tree1 = pygame.image.load('Images/Background_Images/grass1.png').convert_alpha()
tree2 = pygame.image.load('Images/Background_Images/grass2.png').convert_alpha()
mountain = pygame.image.load('Images/Background_Images/mountain.png').convert_alpha()
sky = pygame.image.load('Images/Background_Images/sky.png').convert_alpha()

def paint_bg():
    
    screen.fill((144,201,120)) # Green Color
    width = sky.get_width()
    for x in range(4):
        screen.blit(sky,((x*width)-scroll,0))
        screen.blit(mountain,((x*width)-scroll,screen_height-mountain.get_height()-300))
        screen.blit(tree1,((x*width)-scroll,screen_height-tree1.get_height()-150))
        screen.blit(tree2,((x*width)-scroll,screen_height-tree2.get_height()))
    
no_rows = 16
no_columns = 150
tile_size = screen_height//no_rows
WHITE = (255, 255, 255)

def draw_gridlines():
    #vertical lines
	for c in range(no_columns + 1):
		pygame.draw.line(screen, WHITE, (c * tile_size - scroll, 0), (c * tile_size - scroll, screen_height))
	#horizontal lines
	for c in range(no_rows + 1):
		pygame.draw.line(screen, WHITE, (0, c * tile_size), (screen_width, c * tile_size))
        
running = True
while(running):
    
    paint_bg()
    draw_gridlines()
    
    if(scroll_left==True and scroll>0):
        scroll-=5
    
    if(scroll_right==True):
        scroll+=5
        
    for event in pygame.event.get():
        if(event.type==pygame.QUIT):
            running = False
        
        if(event.type == pygame.KEYDOWN):
            if(event.key == pygame.K_LEFT):
                scroll_left = True
            if(event.key == pygame.K_RIGHT):
                scroll_right = True
            
        if(event.type == pygame.KEYUP):
            if(event.key == pygame.K_LEFT):
                scroll_left = False
            if(event.key == pygame.K_RIGHT):
                scroll_right = False
        
    pygame.display.update()

pygame.quit()
LevelEditor GridLines Addition
LevelEditor GridLines Addition

I understand that you might be wondering about the section which only consists of the vertical lines. Well, that section will get covered with the side panel in the later sections.

So don’t worry about it. 😇


Conclusion

By end of this part, we learned to add a scrolling effect on the level editor and add gridlines to help us put blocks for the level later on. In the next part, we will be learning how to add some more elements to the screen.

Stay tuned for more parts! Happy Learning! 😇