Tilemap engine

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
While working on Quantum2, I figured I would need a level designer.
One thing lead to another and after one evening I now have a new tilemap class featuring

1) Multiple layers
2) Variable parallax
3) Animation tiles
4) Single file for level data (file also includes gfx data for the tiles)
5) Builtin live editor.

The live editor makes it stand out for me... I can activate in my game while playing and edit the level on the fly. Makes design and testing a lot easier
Class also compiles with no editor code with removal of #TILEMAP_EDITOR="true"

As a quick demo, I created a simple platform game. You can see halfway through, the character cant get back up. So iI activate the editor and change the level while playing.
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
Once I've polished it a bit, I'm thinking of releasing it
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
Very simple code for an editor....
Cerberus X:
Strict

#TILEMAP_EDITOR=True

Import mojo2
Import tilemap

Class editor Extends App
    Field cnvs:Canvas
    Field editor:Tilemap
   
    Method OnCreate:Int()
        SetUpdateRate(60)              
        cnvs = New Canvas
        ' create blank tilemap
        editor = New Tilemap()
        ' enable editor
        editor.EnableEditor()
        Return 0
    End
   
    Method OnUpdate:Int()
        ' stops user exiting editor
        If editor.Update()=False Then editor.EnableEditor()
        Return 0
    End

    Method OnRender:Int()
        ' draw editor and levels
        editor.Draw(cnvs)
        cnvs.Flush
        Return 0
    End
End

Function Main:Int()
    New editor      
    Return 0
End
editor.png
 
Last edited:

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
more progress. This time, ive created an AlienBreed style level.
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
I had to improve the tile import functions as the original import didnt like alpha channels.
Thats all fixed now, so now I can add shadows to the above level
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
and heres the code for the above...
Cerberus X:
Strict

#TILEMAP_EDITOR=True

Import mojo2
Import tilemap

Class player   
    Field x:Float,y:Float
    Field dx:Float,dy:Float
    Field img:Image
    
    Method Draw:Void(cnvs:Canvas)
        cnvs.DrawImage img,x,y
    End
    
    Method Update:Void()
    End
End

Class myClass Extends App
    Field cnvs:Canvas
    Field tiles:Tilemap
    Field p:player
        
    Method OnCreate:Int()
        ' level data
        tiles = LoadTilemap("ab1.gtm")

        ' set up player       
        p=New player()
        p.x=300
        p.y=300
        p.img = Image.Load("smiley.png",0.5,0.5)

        SetUpdateRate(60)               
        cnvs = New Canvas
        Return 0
    End
    
    Method OnUpdate:Int()
        p.dx = 0
        p.dy = 0
        
        If KeyDown(KEY_UP) Then p.dy=-3
        If KeyDown(KEY_DOWN) Then p.dy=3
        If KeyDown(KEY_RIGHT) Then p.dx=3
        If KeyDown(KEY_LEFT) Then p.dx=-3
            
        If KeyHit(KEY_E) Then tiles.EnableEditor()

        If Not tiles.CollideRect(p.x-16+p.dx,p.y-16,32,32,p.dx,p.dy) Then p.x+=p.dx
        If Not tiles.CollideRect(p.x-16,p.y-16+p.dy,32,32,p.dx,p.dy) Then p.y+=p.dy
        
        tiles.Update()
        p.Update()

        Return 0
    End

    Method OnRender:Int()
        ' Clear the canvas with a black color.
        cnvs.SetScissor(0,0,DeviceWidth(),DeviceHeight())
        cnvs.Clear (0,0.5,0)   

        cnvs.PushMatrix()
        cnvs.Translate 0,0
        tiles.SetPosition(p.x-300,p.y-200)
        ' draw floor (layer 2)
        tiles.Draw(cnvs,False,[2])

        tiles.Translate(cnvs)       
        p.Draw(cnvs)
        cnvs.PopMatrix()

        ' draw shadows and walls (next layers)
        tiles.Draw(cnvs,False,[0,1])

        ' Flush the canvas so it becomes visible.       
        cnvs.Flush

        Return 0
    End
End

'---------------------------------------------------------------
' The Main function is the starting point of every Cerberus X app.
Function Main:Int()
    ' Create an instance of your class that you have defined above.
    New myClass       
    Return 0
End
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
Nicely done, great job.
Thank you... I'm currently in the process of breaking it and trying to get proper shadows with varied success.. thinking I might drop this idea, but determined to get something up and running
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
with shadows and lighting. not perfect but its working


youtubes compression doesnt do it justice
screeny.png
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
update with multiple lights and fixes to sprites
screeny.png
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
happier with my code now... not 100% but structure feels nicer. Now to get it all into the editor...
Cerberus X:
Strict

'#TILEMAP_EDITOR=True

Import mojo2
Import tilemap

Class player   
    Field x:Float,y:Float
    Field dx:Float,dy:Float
    Field img:Image
    
    Method Draw:Void(cnvs:TileLayer)
        cnvs.DrawImage img,x,y
    End
    
    Method Update:Void()
    End
End

Class myClass Extends App
    Field cnvs:Canvas
    Field tiles:Tilemap
    Field p:player
    
    Method OnCreate:Int()
        ' level data
        tiles = LoadTilemap("ab1.gtm")

        ' red ambient light
        tiles.SetBackgroundAmbientLight(.8,0,0)
        tiles.SetForegroundAmbientLight(.2,0,0)
                
        ' set up player       
        p=New player()
        p.x=300
        p.y=300
        p.img = Image.Load("smiley.png",0.5,0.5)
        tiles.SetNormalMap(p.img)
        
        SetUpdateRate(60)               
        cnvs = New Canvas

        Return 0
    End
  
    Method OnUpdate:Int()
        p.dx = 0
        p.dy = 0
        
        If KeyDown(KEY_UP) Then p.dy=-3
        If KeyDown(KEY_DOWN) Then p.dy=3
        If KeyDown(KEY_RIGHT) Then p.dx=3
        If KeyDown(KEY_LEFT) Then p.dx=-3
            
        If KeyHit(KEY_E) Then tiles.EnableEditor()

        If Not tiles.CollideRect(p.x-16+p.dx,p.y-16,32,32,p.dx,p.dy) Then p.x+=p.dx
        If Not tiles.CollideRect(p.x-16,p.y-16+p.dy,32,32,p.dx,p.dy) Then p.y+=p.dy
        
        tiles.Update()
        p.Update()

        Return 0
    End

    Method OnRender:Int()
        ' Clear the canvas with a green color.
        cnvs.SetScissor(0,0,DeviceWidth(),DeviceHeight())
        cnvs.Clear (0,0.5,0)   

        ' set tiles posiiton
        tiles.SetPosition(p.x-300,p.y-200)
        
        ' draw floor (layer 2)
        tiles.Draw(cnvs,[2])
            
        ' player light
        Local light:TileLight = tiles.AddLight(1,1,1,p.x,p.y,-100,800)

        ' green light
        light = tiles.AddLight(0.2,1,0.2,1200,900,-100,800)

        ' flashing light
        If (Millisecs()/250) Mod 4 < 3 Then light = tiles.AddLight(1,0,1,800,900,-100,800)

        ' draw player
        Local draw:TileLayer = tiles.DrawLayer()
        draw.PushMatrix()
        tiles.Translate(draw,2)       
        draw.DrawImage p.img,p.x,p.y
        draw.DrawImage p.img,800,800
        draw.PopMatrix()

        ' draw walls (top layer unaffected by  light)
        tiles.Draw(cnvs,[0])
                
        ' Flush the canvas so it becomes visible.       
        cnvs.Flush

        Return 0
    End
End

Function Main:Int()
    New myClass       
    Return 0
End
screeny.png
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
slowly getting the lighting into the editor
Image.jpg
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
are these circles showing the areas of lightning?
yeah.. ive changed it now as it was taking al lot of drawing power, its now just a cross to show range of lighting. Ive not decided which one to keep yet. thoughts?

Image4.jpg

edit: I forgot to turn shadows on in this screenshot
 

Rich

Well-Known Member
CX Code Contributor
3rd Party Module Dev
3rd Party Tool Dev
Joined
Sep 9, 2017
Im getting carried away again.. I now have an automatic tile shape detection so gaps can appear in walls.
Im really happy with this effect.
Image4.jpg
 
Top Bottom