• Dear Cerberus X User!

    As we prepare to transition the forum ownership from Mike to Phil (TripleHead GmbH), we need your explicit consent to transfer your user data in accordance with our amended Terms and Rules in order to be compliant with data protection laws.

    Important: If you accept the amended Terms and Rules, you agree to the transfer of your user data to the future forum owner!

    Please read the new Terms and Rules below, check the box to agree, and click "Accept" to continue enjoying your Cerberus X Forum experience. The deadline for consent is April 5, 2024.

    Do not accept the amended Terms and Rules if you do not wish your personal data to be transferred to the future forum owner!

    Accepting ensures:

    - Continued access to your account with a short break for the actual transfer.

    - Retention of your data under the same terms.

    Without consent:

    - You don't have further access to your forum user account.

    - Your account and personal data will be deleted after April 5, 2024.

    - Public posts remain, but usernames indicating real identity will be anonymized. If you disagree with a fictitious name you have the option to contact us so we can find a name that is acceptable to you.

    We hope to keep you in our community and see you on the forum soon!

    All the best

    Your Cerberus X Team

Tilemap engine

Rich

Well-known member
CX Code Contributor
3rd Party Module Dev
Tutorial Author
3rd Party Tool Dev
Joined
Sep 9, 2017
Messages
451
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.
 
Once I've polished it a bit, I'm thinking of releasing it
 
Very simple code for an editor....
Cerberus:
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:
more progress. This time, ive created an AlienBreed style level.
 
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
 
and heres the code for the above...
Cerberus:
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
 
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
 
with shadows and lighting. not perfect but its working


youtubes compression doesnt do it justice
screeny.png
 
update with multiple lights and fixes to sprites
screeny.png
 
happier with my code now... not 100% but structure feels nicer. Now to get it all into the editor...
Cerberus:
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
 
slowly getting the lighting into the editor
Image.jpg
 
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
 
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
 
Back
Top Bottom