Goal:

In step 2 we created a semi-playable version of breakout; we could break the blocks but there was only one level and no way to win or lose. Next tutorial we will add the rest of the gameplay, but in this one we are going to make a level editor so we can create levels very quickly and easily. At the end you should be able to crank out new levels in a couple second each.

The Plan

To create the level editor we are going to copy over a bunch of code from the game and modify it. We want the editor to have exactly the same setup as the main board, so we will set up the background the same way. Our goal is to have an easy interface to create a bunch of blocks and then export them into a file we can easily parse in the next step of the tutorial. I decided we will do this by creating a full ‘level’ of Blocks and adjusting the Block class to represent both a blank space and an unbreakable block in addition to the 5 block levels we already have. Now we just figure out what Block the user clicks on and increment/decrement its level accordingly. Then when the user decides to save, we will take our level of Blocks and save off a file containing all their levels.

The Setup

The very first thing to do is start a new file. This is a separate program so we want it in its own file. At the top of the file put the usual import code.

try:
    import sys, os
    import pygame
    from pygame.locals import *

except ImportError, err:
    print "%s Failed to Load Module: %s" % (__file__, err)
    sys.exit(1)

The Pieces

Now we need to copy over some of the pieces we used in the real game. We could have imported the classes from the game file and modified them, but the changes are pretty severe and I felt like it was more clear to just rewrite everything here. The first thing we have is our Block class. It is fairly similar to the game one, except we made some changes. We removed the hit function since we don’t need it and added up and down functions to adjust the block level. We also added the resetImage function which just reloads the correct image for the Block when we change its level.

class Block(pygame.sprite.Sprite):
    """A block sprite. Has a level and a position."""
    def __init__(self, xy, images, level=1):
        pygame.sprite.Sprite.__init__(self)

        # save images and level
        self.images = images
        self.level = level

        # create initial rect
        self.rect = pygame.Rect(xy[0]-25, xy[1]-10, 50, 20) # left, top, width, height

        # set image and rect so we can be rendered
        self.resetImage()

    def up(self):
        self.level += 1
        self.resetImage()

    def down(self):
        self.level -= 1
        self.resetImage()

    def resetImage(self):
        if self.level in self.images:
            self.image = self.images[self.level]
            xy = self.rect.center               # save previous position
            self.rect = self.image.get_rect()   # reset rect in case shape changes
            self.rect.center = xy               # reset block to old position

BlockFactory

Next we copy over the BlockFactory. This is nearly the same except we remove the getSolidBlock function and add the gray block image to the regular image list we pass to new Blocks. That way we don’t have to do anything different when we want to create a solid block - it is just another level as far as our Block class is concerned.

class BlockFactory(object):
    """Using this class to return blocks with a copy of the images
        already loaded. No sense in re-loaded all the images for
        every block every time one is created."""

    def __init__(self):
        # load all our block images
        self.images = {
            1: pygame.image.load(os.path.join('images','block_blue.png')),
            2: pygame.image.load(os.path.join('images','block_green.png')),
            3: pygame.image.load(os.path.join('images','block_red.png')),
            4: pygame.image.load(os.path.join('images','block_orange.png')),
            5: pygame.image.load(os.path.join('images','block_purple.png')),
            6: pygame.image.load(os.path.join('images','block_gray.png'))
        }

    def getBlock(self, xy, level=1):
        return Block(xy, self.images, level)

Button Sprite

Since the rest of the editor is all mouse clicks, I wanted a button the user could click to save the level instead of having to go to the keyboard and hitting ctrl-s, so here is an extremely simple button class. It is just a sprite that uses the font class to generate an image and uses that for rendering. It isn’t pretty, but we could easily make it a little nicer looking if we wanted to with a little draw code instead of just filling the background.

class Button(pygame.sprite.Sprite):
    """An extremely simple button sprite."""
    def __init__(self, xy, text):
        pygame.sprite.Sprite.__init__(self)
        self.xy = xy
        self.font = pygame.font.Font(None, 25)  # load the default font, size 25
        self.color = (0, 0, 0)         # our font color in rgb
        self.text = text
        self.generateImage() # generate the image

    def generateImage(self):
        # draw text with a solid background - about as simple as we can get
        self.image = self.font.render(self.text, True, self.color, (200,200,200))
        self.rect = self.image.get_rect()
        self.rect.center = self.xy

Text Sprite

This one is very very similar to the button sprite above, but for clarity I decided they could be two different classes. This one stores and renders some text the same way, but has another method for changing the text. I also hardcoded the colors into these classes because I’m lazy – If you wanted to merge them you would just need to make some options for setting the font color and filling the background.

class TextSprite(pygame.sprite.Sprite):
    """An extremely simple text sprite."""

    def __init__(self, xy, text=''):
        pygame.sprite.Sprite.__init__(self)
        self.xy = xy    # save xy -- will center our rect on it when we change the text
        self.font = pygame.font.Font(None, 25)  # load the default font, size 25
        self.color = (255, 165, 0)         # our font color in rgb
        self.text = text
        self.generateImage() # generate the image

    def setText(self, text):
        self.text = text
        self.generateImage()

    def generateImage(self):
        """Updates the text. Renders a new image and re-centers at the initial coordinates."""
        self.image = self.font.render(self.text, True, self.color)
        self.rect = self.image.get_rect()
        self.rect.center = self.xy

LevelBuilder

Next we have our LevelBuilder class. This is the same as the Game class in the previous tutorials, and you’ll see that their init and run methods are very similar. Things to notice in the init – we are now also listening for mouse click events, we create our save button and feedback text sprites, and we have a function resetLevel that we call to get it set up and ready for the user.

class LevelBuilder(object):
    """Our level builder object! Initializes everything."""

    def __init__(self):
        """Initializes pygame and sets up our pygame window
        and other pygame tools."""

        # load and set up pygame
        pygame.init()

        # create our window
        self.window = pygame.display.set_mode((520, 600))

        # clock for ticking
        self.clock = pygame.time.Clock()

        # set the window title
        pygame.display.set_caption("Pygame Tutorial 4 - Breakout")

        # tell pygame to only pay attention to certain events
        # we want to know if the user hits the X on the window, and we
        # want keys so we can close the window with the esc key
        pygame.event.set_allowed([QUIT, KEYDOWN, KEYUP, MOUSEBUTTONDOWN])

        # make background
        self.background = pygame.image.load(os.path.join('images','background.jpg'))
        # blit the background onto the window
        self.window.blit(self.background, (0,0))
        # flip the display so the background is on there
        pygame.display.flip()

        # create sprite group for blocks
        self.blocks = pygame.sprite.RenderUpdates()

        # create sprite group for everything else
        self.sprites = pygame.sprite.RenderUpdates()

        # create our blockfactory object
        self.blockfactory = BlockFactory()

        # create a blank level
        self.resetLevel()

        # Save button sprite
        self.savebutton = Button((260,450), 'Save')
        self.sprites.add(self.savebutton)

        # feedback sprite
        self.feedback = TextSprite((260, 550),  '')
        self.sprites.add(self.feedback)

LevelBuilder.run

The run method is almost exactly the same except each frame we also call self.drawGrid which draws grid lines to show where the user can click. I put this method after we draw the blocks, which makes the lines overlap them a bit, but doing it before the clear was causing some flickering I didn’t like. Try both ways and see what I mean.

def run(self):
    """Runs the game. Contains the game loop that computes and renders
    each frame."""

    print 'Starting Event Loop'

    running = True
    # run until something tells us to stop
    while running:

        # tick pygame clock
        # you can limit the fps by passing the desired frames per seccond to tick()
        self.clock.tick(60)

        # handle pygame events -- if user closes game, stop running
        running = self.handleEvents()

        # update the title bar with our frames per second
        pygame.display.set_caption('Pygame Tutorial 4 - Breakout   %d fps' % self.clock.get_fps())

        # render blocks
        self.blocks.clear(self.window, self.background)
        dirty = self.blocks.draw(self.window)

        # render everything else
        self.sprites.clear(self.window, self.background)
        dirty += self.sprites.draw(self.window)

        # draw a grid on our background
        self.drawGrid()

        # blit the dirty areas of the screen
        pygame.display.update(dirty)                        # updates just the 'dirty' areas

    print 'Quitting. Thanks for playing'

LevelBuilder.resetLevel

Here is the resetLevel method we called in the init. The first line empties our block render group so we don’t leave any Blocks in there rendering when they were supposed to be removed. The rest creates an empty 2D array then fills it with Blocks of level 0.

def resetLevel(self):
    # empty our sprite group
    self.blocks.empty()

    # create our level object -- 2D array of blocks with level 0
    self.level = []
    for y in range(5):
        row = []
        for x in range(10):
            pos = (35+(x*50), 20+(y*20))    # calculate the position for the block
            block = self.blockfactory.getBlock(pos, 0)  # create the block
            row.append(block)               # add the block to the row
        self.level.append(row)              # add the row to the array

LevelBuilder.drawGrid

Next is the drawGrid class we call each frame to, you guessed it, draw the grid. It uses the pygame.draw functions to put white lines around all the places we can put a block. Looking back now, I think a better way to write this would have been to just create another block image that was just an outline and pass that to new Blocks as their level 0 image. Oh well - take this as an example of how there are lots of ways to solve the same problem.

def drawGrid(self):
    # draw lines on the background where blocks can go
    linecolor = (255,255,255)
    for col in range(11):   # 11 so we get both sides of all the columns
        # surface, color, start, end
        pygame.draw.line(self.window, linecolor, (10+(col*50),10), ((10+col*50),110))

        for row in range(6):    # 6 so we get both sides of all the rows
            pygame.draw.line(self.window, linecolor, (10, 10+(row*20)), (510, 10+(row*20)))
    # render the display
    pygame.display.flip()

LevelBuilder.handleEvents

This one is pretty similar to the game handleEvents method. We check if the user presses escape to end or control-s to save and we send any mouse clicks to the mouseDown method for processing.

def handleEvents(self):
    """Poll for PyGame events and behave accordingly. Return false to stop
    the event loop and end the level builder."""

    # poll for pygame events
    for event in pygame.event.get():
        if event.type == QUIT:
            return False

        # handle user input
        elif event.type == KEYDOWN:

            # if the user presses escape, quit the event loop.
            if event.key == K_ESCAPE:
                return False

            # ctrl-s saves the level
            elif event.key == K_s and event.mod & KMOD_CTRL:
                self.save()

        # handle mouse clicks in self.mouseDown
        elif event.type == MOUSEBUTTONDOWN:
            self.mouseDown(event.pos, event.button)

    return True

LevelBuilder.mouseDown

This is the bulk of the level editor functionality. First, we check if the user clicked the save button and call the save function. Next, we filter out any clicks that aren’t in our level area because we don’t care about those. Then we figure out what Block the click was over and call Block.up for left clicks and Block.down for right clicks. We also have some code to remove Blocks with level 0 from the render group. Note: we wouldn’t need this extra code if we had gone with the alternative transparent level 0 image discussed above.

def mouseDown(self, position, button):
    """Handles all the mouse clicks. We want left clicks
    to add to a block or create one and right clicks to take away."""
    posx, posy = position

    # check if the save button was clicked
    if self.savebutton.rect.collidepoint( position):
        self.save()
        return

    # otherwise, only care about clicks in the level area
    if posx < 10 or posx >= 510 or posy < 0 or posy >= 110:
        return

    # convert mouse position to block coordinate
    x = int((posx-10) / 50)     # subtract 10 for the wall and divide by block width
    y = int((posy-10) / 20)     # subtract 10 for the wall and divide by block height

    # get the block we are on
    block = self.level[y][x]    # notice y then x because our level is rows then cols

    # Left click
    if button == 1:
        # if the block in this space is level 0, increment and add for render
        if block.level == 0:

            # increment block level
            block.up()

            # add to rendering group so it gets displayed
            self.blocks.add(block)

        # on a block with level less than 6
        elif block.level < 6:
            # increment block level
            block.up()

        # on a block with level > 6
        else:
            # loop back to an empty block
            block.level = 0

            # remove from rendering group
            self.blocks.remove(block)

    # right click
    elif button == 3:
        # if the block in this space is greater than 1
        if block.level > 1:
            # decrement block level
            block.down()

        # on a block with level < 1
        else:
            # change back to an empty block
            block.level = 0

            # remove from rendering group
            self.blocks.remove(block)

LevelBuilder.save

The last thing we need to do in the LevelBuilder class is the save method. We first generate the ‘next’ level name by starting at level1.level and incrementing the number until there is not already a file with that name. Then we create the file and write the level of each block in each row, separated by spaces. Finally, we call resetLevel to clear out all the Blocks and give the user a clean slate to work from.

def save(self):
    self.feedback.setText('Saving...')

    # generate unique level name
    count = 1
    name = 'level%d.level'%count
    while os.path.isfile( os.path.join('levels', name) ):
        count += 1
        name = 'level%d.level'%count

    # create file
    f = open(os.path.join('levels',name), 'w')

    # generate contents from self.level
    for row in self.level:
        for col in row:
            f.write('%d ' % col.level)    # write block level
        f.write('\n')   # write new line

    # close file handle
    f.close()

    # show level name in feedback
    self.feedback.setText('Saved level to levels/%s' % name)
    print 'Saved levels/%s' % name

    # reset level
    self.resetLevel()

The End

The very last thing is the couple lines of code at the end to create the LevelBuilder object and run it when the script is run.

if __name__ == '__main__':
    lb = LevelBuilder()
    lb.run()

Result

Now we have a fully functional level builder! Use left and right clicks to add/subtract block levels and hit save to save. Couldn’t be more simple.