Drawing problems with ignition & tiled
Monkey Targets Forums/HTML5/Drawing problems with ignition & tiled
| ||
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 ? |
| ||
Nobody ? |
| ||
It looks like a rounding problem on scale. Does it happen on all targets? |
| ||
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 |
| ||
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 |
| ||
Or from the monkey forum: http://www.monkey-x.com/Community/posts.php?topic=5359&post=59672&view=all#59672 |
| ||
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) |
| ||
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" |
| ||
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. |
| ||
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. |
| ||
Could you send me the project completly but without the padding so I can start from the beginning to see whats wrong? |
| ||
This is the download link : https://www.dropbox.com/s/9wnmgom7v1f8npd/CyberBlaster.zip?dl=0 |
| ||
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! |
| ||
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. |
| ||
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! |
| ||
Thanks a lot. All works fine now. |
| ||
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. |
| ||
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. |
| ||
Thanks a lot. :-) |
| ||
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. |
| ||
Thanks for your works. May be they are in an old update. |