Drawing problems with ignition & tiled

Monkey Targets Forums/HTML5/Drawing problems with ignition & tiled

Vignoli(Posted 2014) [#1]
Hi,

I can't draw correctly a simple layer with ignition & tiled.
There are some garbages.

Look :
https://www.dropbox.com/s/6fxrlppikawm17e/drawing_problem.jpg?dl=0

Is there something i have to do to repair this ?

Also, how can i test collisions with tiles within sprites, and how can i perform drawing operations after drawing sprites and tiles ?


Vignoli(Posted 2014) [#2]
Nobody ?


ziggy(Posted 2014) [#3]
It looks like a rounding problem on scale. Does it happen on all targets?


Vignoli(Posted 2014) [#4]
I don't know. I've not installed the tools for other targets than HTML5.

This is my source code, in case of it can serves :

Strict

Import playniax.ignitionx.tilesystem.tileengine
Import playniax.ignitionx.tilesystem.worldcreators.tiled

Import playniax.ignitionx.engine

Global gameScene:Game

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

Class MyApp Extends iApp

    Method OnCreate:Int()

        gameScene=New Game()

        iStart(gameScene,60)

        Return 0
    
    End Method

End Class

Class Game Extends iEngine

    Field playfield:iPlayfield
	Field layer:iLayer
	Field layerTileMap:iLayerTileMap
	
	Field heroeSprite:iLayerSprite
	
	Field scores:Image

	Field wx:Int
	Field wy:Int
	
    Method OnCreate:Int()
       
        Self.playfield=New iPlayfield()
        Self.playfield.AttachLast(Self)

        Self.playfield.Virtual(320,240,True)
        
   		Self.layer=New iLayer
		Self.layer.AttachLast(Self.playfield)
		
		Self.layerTileMap=New iLayerTileMap
		Self.layerTileMap.AttachLast(layer)

		Local tileMapLoader:iTiledWorldCreator = New iTiledWorldCreator("map1.tmx")
		tileMapLoader.Load()
		tileMapLoader.importer = Null
		
		' Tell the layer object what tile map to use:
		layerTileMap.TileMap = tileMapLoader.TileMap
	
		heroeSprite = New iLayerSprite
		heroeSprite.AttachLast (layer)
		heroeSprite.ImagePointer ("heroe.png")
		heroeSprite.Position(24,104);
		
		scores = LoadImage("scores.png")
        
        Return 0
        
    End Method

    Method OnRender:Int()

'       	DrawImage scores,Self.wx,wy,0

        Return 0
    End Method

    Method OnUpdate:Int()
    	
		' ======= Move the heroe Ship =======
		If KeyDown(KEY_LEFT)
			Self.heroeSprite.PositionX=Self.heroeSprite.PositionX-1
			Self.heroeSprite.ScaleX = -1.0
		End If
	
		If KeyDown(KEY_RIGHT)
			Self.heroeSprite.PositionX=Self.heroeSprite.PositionX+1
			Self.heroeSprite.ScaleX = 1.0
		End If
	
		If KeyDown(KEY_UP)
			Self.heroeSprite.PositionY=Self.heroeSprite.PositionY-1
		Else
			Self.heroeSprite.PositionY=Self.heroeSprite.PositionY+1		
		End If

		' ======= Test if Collided with tiles =======
'  		If Self.heroeSprite.CheckCollision(collisionLayer,Self.heroeSprite.CollisionMask())
'			iExplosion.Create(0,0,0,0.75,Self.testSprite)
'		End If
		
		' ======= Position the tiles level walls =======
		wx = Self.heroeSprite.PositionX-160
		wy = Self.heroeSprite.PositionY-120
		
		If(wx < 0) Then wx = 0
		If(wx > (1280 - 160)) Then wx = (1280 - 160)
		If(wy < 0) Then wy = 0
		If(wy > (960 - 120)) Then wy = (960 - 120)
		
		Self.playfield.cameraX=wx
		Self.playfield.cameraY=wy

		Return 0
    End Method

End Class



Playniax(Posted 2014) [#5]
This not a Monkey X or Ignition X limitation!
It is target specific and various topics can be found on the subject on the forums.
On some targets you can solve this by disabling image filtering, round positions to integers and/or not use virtual resolutions.
But that would be far from ideal or even quite useless.

You can solve this by turning on padding.
This also means the tiles in the bitmap need a border of 1 extra pixel.

From the Ignition docs


Playniax(Posted 2014) [#6]
Or from the monkey forum: http://www.monkey-x.com/Community/posts.php?topic=5359&post=59672&view=all#59672


Vignoli(Posted 2014) [#7]
I've tried to do that, but i've got an error message about "an image size problem".
Can't solve this. (with 16x16 tiles, a border of 1 and an offset of 2, if i remember)
Also, designing tiles with a border of 1 pixel is not easy when they must correspond.
And tiled don't let the possibility to change a tileset whitout loosing my map.
I dislike to loose all my work.

How can i set the filter off, please, in HTML5 ? (my map has a view of 320x240, so i've just to put a window resolution of 640x480 in HTM5, which is the double, to have no problems, i think)


Vignoli(Posted 2014) [#8]
This is the exact error messages :

Monkey Runtime Error : Image frame outside surface
D:/MonkeyXPro81b/modules/mojo/graphics.monkey<176>
D:/MonkeyXPro81b/modules/mojo/graphics.monkey<110>
D:/MonkeyXPro81b/modules/playniax/ignitionx/tilesystem/tileengine/tileset.monkey<51>
D:/MonkeyXPro81b/modules/playniax/ignitionx/tilesystem/tileengine/tileset.monkey<77>
D:/MonkeyXPro81b/modules/playniax/ignitionx/tilesystem/worldcreators/tiled/tiled.monkey<117>
D:/MonkeyXPro81b/modules/playniax/ignitionx/tilesystem/importers/tiled/tiled.monkey<214>
D:/MonkeyXPro81b/modules/playniax/ignitionx/tilesystem/importers/tiled/tiled.monkey<153>
D:/MonkeyXPro81b/modules/playniax/ignitionx/tilesystem/importers/tiled/tiled.monkey<120>
D:/MonkeyXPro81b/modules/playniax/ignitionx/tilesystem/worldcreators/tiled/tiled.monkey<63>
D:/Documents/Mes Progs/MonkeyX/CyberBlaster.monkey<58>
D:/MonkeyXPro81b/modules/playniax/ignitionx/framework/app.monkey<558>
D:/MonkeyXPro81b/modules/playniax/ignitionx/framework/app.monkey<358>
D:/MonkeyXPro81b/modules/playniax/ignitionx/engine/components/engine.monkey<13>
D:/Documents/Mes Progs/MonkeyX/CyberBlaster.monkey<30>
D:/Documents/Mes Progs/MonkeyX/CyberBlaster.monkey<20>
D:/MonkeyXPro81b/modules/mojo/app.monkey<89>



And this is a Tileset Resizer i've just made with B+, for automatic creation of the border :
http://www.retro-bruno.com/freewares/blitz/TilesetResizer.zip

To edit the border parameters in the XML tiled file, just add :
spacing="2" margin="1"

after
tilewidth="16" tileheight="16"



Playniax(Posted 2014) [#9]
Your bitmap is probably not the right size so that grabbing the tiles exceeds the boundaries of the bitmap. It has to be the right size exactly!

Also you must set the tile width and height correctly taking into account the extra border so if the they where 16 before you have to add 2 pixels making it 18.

Try our tool tileset padder: http://playniax.com/download.html

There is a readme.txt on how to use it.


Vignoli(Posted 2014) [#10]
Thanks for your help.

I've used the tileset padder.
You're right, but there is still something wrong. (same image error)
This is the beginning of my XML Tiled file :

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" renderorder="right-down" width="80" height="60" tilewidth="18" tileheight="18">
<tileset firstgid="1" name="cyberblaster_tileset" tilewidth="18" tileheight="18" spacing="2" margin="1">
<image source="cyberblaster_tileset.png" width="320" height="320"/>
</tileset>
<layer name="Calque de Tile 1" width="80" height="60">



In Tiled, all is right. I think it may be a problem of spacing/margin.


Playniax(Posted 2014) [#11]
Could you send me the project completly but without the padding so I can start from the beginning to see whats wrong?


Vignoli(Posted 2014) [#12]
This is the download link :
https://www.dropbox.com/s/9wnmgom7v1f8npd/CyberBlaster.zip?dl=0


Playniax(Posted 2014) [#13]
I had a look at it and it looks like that it is a 'bug' in tile the engine.
I need some more time to fix it though.
I guess you can carry on with your project without the padding for now until I have a fix.
Should be in a couple of days!
Good find!


Vignoli(Posted 2014) [#14]
Thanks a lot for your help.
I can wait, no problems, i'm developing the same game in C++, i'll work on it for the moment.


Playniax(Posted 2014) [#15]
Okay, should be fixed.

Open the tileset,monkey in the modules/playniax/ignitionx/tilesystem/tileengine folder and replace these lines in the CreateTilesFromBitmap method:

Local width:Int=image.Width() / tw
Local height:Int=image.Height() / th

With:
Local width:Int=image.Width() / (tw+spacing)
Local height:Int=image.Height() / (th+spacing)

Also, I will send you the working files!


Vignoli(Posted 2014) [#16]
Thanks a lot. All works fine now.


Vignoli(Posted 2014) [#17]
Just a question, where can i find an example on how to detect collisions with tiles from Tiled, please ?
I've tried "GetTile" but i can't find an example in the help files.


Playniax(Posted 2014) [#18]
Yes, it's GetTile()

In you case add these lines in your OnUpdate()

Local tile:iTile=layerTileMap.TileMap.GetTile(0,Self.heroeSprite.x,Self.heroeSprite.y)
If tile And tile.Gid()<>0
	Print tile.Gid() + Rnd(1)
End If


It will show the Gid of the tile it collides with.

The Rnd stuff is just to see that the console is updating.

The Boulderdash and Jungle demo show more tile collisions stuff in the bananas.

I am expanding the tutorials at the moment about the tile system.


Vignoli(Posted 2014) [#19]
Thanks a lot. :-)


Playniax(Posted 2014) [#20]
Your welcome!

It is strange but I was sure I included more collision examples but after checking the bananas I noticed that some of them have 'disappeared' (?!).

I need to find or rewrite them and inlcude them in next update.


Vignoli(Posted 2014) [#21]
Thanks for your works. May be they are in an old update.