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()
Scrolling Ability of the Background
Before we work with the scrolling background we need to declare some variables which are listed below:
- scroll_left
- scroll_right
- scroll
- 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()
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()
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! 😇