Creating a map for a platformer game

[Meg]

Hello,
Is it easier to design a map on something like paint and then program 'invisible' tiles over the imported image or would it be easier to start with an empty template and draw the tiles onto the image?

 

[Rich]

Both are valid ways
The first method could result in too much memory being used especially if the level is great than the the screen size. Think about drawing some of those Mario levels and how big that image has to be.
It could result in more interesting levels though

The other way is pretty reliable and make each level from a selection of tiles. Each tile can be used more than once. This way the levels can be massive as as all way are storing is a map of the index of the tile. You can then use Drawimage and change the frame when when drawing.
The downside is level graphics could look repeated.

 

[Meg]

Both are valid ways
The first method could result in too much memory being used especially if the level is great than the the screen size. Think about drawing some of those Mario levels and how big that image has to be.
It could result in more interesting levels though

The other way is pretty reliable and make each level from a selection of tiles. Each tile can be used more than once. This way the levels can be massive as as all way are storing is a map of the index of the tile. You can then use Drawimage and change the frame when when drawing.
The downside is level graphics could look repeated.

Which method do you think would take less time ?

 

[Rich]

Not actually knowing what the end result should be, I think using a tilemap is quite quick.

1) create an array that represents your screen layout . Lets say play area is 640*480. you could use blocks that represnt 32*32 pixels. That means you need a map 20*15. The map can just use 0 and 1s for testing
2) scan the array and if its 1 draw a solid rect of pixels 32*32

Get the platform game working, and then you can create some blocks, assign them in the array and draw them instead

 

[Meg]

Not actually knowing what the end result should be, I think using a tilemap is quite quick.

1) create an array that represents your screen layout . Lets say play area is 640*480. you could use blocks that represnt 32*32 pixels. That means you need a map 20*15. The map can just use 0 and 1s for testing
2) scan the array and if its 1 draw a solid rect of pixels 32*32

Get the platform game working, and then you can create some blocks, assign them in the array and draw them instead

This is what i'm trying to achieve

 

[dawlane]

Is it easier to design a map on something like paint and then program 'invisible' tiles over the imported image or would it be easier to start with an empty template and draw the tiles onto the image?

DO NOT USE FULL IMAGES AS GAME LEVELS.

The first thing you do is design your levels using a pencil and graph paper. Then think how you are going to encode your game level that will be fast and memory efficient.

You can go with breaking up the screen into grid and using a two dimensional array to represent the screen level layout. This means that each platform in the game is made of of a fixed size block that needs to be the same size as each screen grid cell. So like what Rich said, the screen is broken into a grid of 32*32 pixels and the position of each block that goes to make the level is stored in a two dimensional array. This would be a like for like representation of the pencil and graph paper.

Another approach is to treat each level platform as a type of sprite object stored in a list or stack container that can be looped through.
Here you create a class that holds the starting point screen position, the direction and number of blocks to render and the collision rectangle for each platform. You then add this to the container.

There are tools out there to create tile maps, but you need to know how to write a level importer for their saved data into a form that you can use.

 

[dawlane]

A demonstration of the latter.

Strict

Import mojo

Enumerate LEFT=$01, RIGHT=$02, UP=$04, DOWN=$08, JUMP=$10, FIRE=$20
Enumerate BLOCK_WALL, BLOCK_FLOOR

' Base class that all game sprites should inherit
Class BaseObject
    Field x:Float
    Field y:Float
    Field w:Int
    Field h:Int
 
    Method New(x:Int, y:Int, width:Int, height:Int)
        Self.x = x
        Self.y = y
        Self.w = width
        Self.h = height
    End Method
     
    Method X:Float() Property
        Return Self.x
    End Method
 
    Method X:Void(x:Float) Property
        Self.x = x
    End Method
 
    Method Y:Float() Property
        Return Self.y
    End Method
 
    Method Y:Void(y:Float) Property
        Self.y = y
    End Method
 
    Method Width:Float() Property
        Return Self.w
    End Method
 
    Method Width:Void(width:Float) Property
        Self.w = width
    End Method
 
    Method Height:Float() Property
        Return Self.h
    End Method
 
    Method Height:Void(height:Float) Property
        Self.h = height
    End Method
     
End Class

' Class template to represent a platform or wall
Class PlatformObject Extends BaseObject

    Field dir:Int
    Field count:Int
    Field blockWidth:Int
    Field blockHeight:Int
    Field type:Int
 
    ' A block size of 20*20 gives a screen grid of 32*24 cells on a display of 640*480
    Method New(x:Int, y:Int, dir:Int, count:Int, blockType:Int=BLOCK_FLOOR, blockWidth:Int=20, blockHeight:Int=20)
        Super.New(x*blockWidth, y*blockHeight, blockWidth, blockHeight)
     
        Self.blockWidth = blockWidth
        Self.blockHeight = blockHeight
        Self.count = count
        Self.type = blockType
     
        If dir=DOWN
            Self.dir=DOWN
            Self.Height = count*blockHeight
        Else
            Self.dir=RIGHT
            Self.Width = count*blockWidth
        Endif
    End Method
 
    ' Get the direction
    Method PlatformDirection:Int()
        Return Self.dir
    End Method
 
    ' Get the block type
    Method PlatformType:Int()
        Return Self.type
    End Method
 
    Method DrawPlatform:Void()
        For Local c:=0 Until Self.count
            Select Self.type
                Case BLOCK_FLOOR
                    SetColor(Rnd(255),255,255)
                Case BLOCK_WALL
                    SetColor(200,0,0)
                Default
                    SetColor(255, 255, 255)
            End Select

            If Self.dir=DOWN
                DrawRect(Self.X, Self.Y+c*Self.blockHeight, Self.blockWidth, Self.blockHeight)
            Else
                DrawRect(Self.X+c*Self.blockWidth, Self.Y, Self.blockWidth, Self.blockHeight)
            Endif
        Next
    End Method
End Class

Class Game Extends App
    Field platformList:= New List<PlatformObject>
 
    Method OnCreate:Int()
        platformList.AddLast(New PlatformObject(0, 0, DOWN, 24, BLOCK_WALL))
        platformList.AddLast(New PlatformObject(31, 0, DOWN, 24, BLOCK_WALL))
        platformList.AddLast(New PlatformObject(1, 23, RIGHT, 30))
        platformList.AddLast(New PlatformObject(1, 12, RIGHT, 10))
        platformList.AddLast(New PlatformObject(15, 18, RIGHT, 6))


        Return 0
    End Method
 
    Method OnUpdate:Int()
        Return 0
    End Method
 
    Method OnRender:Int()
        Cls
        For Local i:=Eachin Self.platformList
            i.DrawPlatform()
        Next
        Return 0
    End Method
End Class

Function Main:Int()
    New Game()
    Return 0
End Function

For other examples visit here.