Tile Map Editor

Hi all.

Lately I have started my study about the implementation of Tile Maps
(the TileMapDraw() of Marcus / Sorunome have helped me a lot... XD), but create this Tile Maps
"manually" it's a very Boring.

I googled and did not find any software that can facilitated me the "development" of TileMap's (for Gamebuino)
So I decided to do something for my own account. One hour in the front of the Visual Basic and I (-a-l-m-o-s-t-) got
it:


https://www.youtube.com/watch?v=dQEh6naLetQ


My idea is to use a Data Grid View as a matriz to set the position of sprites, after that
take this position and transfer (in code) for the variable TileMap [] (this step is more easy), the GUI
give me more "Work", I still have much to do in the GUI such as:

- add more capacity for spriteSheets (in the video it still 1)
- Save/Load Button ??
- Add some "Rubber Tool"
- Using 8x8 sprites -> the "streechImage" atribute leaves the Sprites with horrible appearance (I hope this can be fixed some way)
It is possible to use larger sprites, the recipent Cell is 32x32 (smaller than that is not visible), but I think
unnecessary to do 8x8 sprites for the game and 32x32 for tilemaper, It is double work.


If someone want to take a look, I can put the source here to download
but I warn "This program does not do anything useful, only the drawing part was (-a-l-m-o-s-t-) implemented"

I want to do it in Java, but my java is not enough for that, so I'll be in visual basic for now :lol:

This is looking quite nice, also glad you like the gb.display.drawTilemap! ^.^

That looks really good!

Are you aware of http://www.mapeditor.org?
It can be a pain to set up & get the output "Gamebuino friendly", but I am still a beginner with that software and would appreciate a simple, Gamebuino related solution :-)

Thanks Sorunome...

I hope it will be useful for somebody (besides me ...) XD

Hey Marcus... I have see a lot of this aplications, but the problem is "pairing" them with the output for the Gamebuino (really tough...huehue), I did not know that Link, I will take a look... Thanks.


UPDATE:

- Add 0 at 8 Sprites.
- Add Eraser (in Brazil we say rubber... rsrs)
- Add ClearAll Button
- Add Code Generator for the TileMap
- Add Code Generator for the SpriteSheet (using the name of Sprites archives)
- "Map Generator" Limited to Max 200x200 DataGrid (it work, but it is about 40,000 Sprites)

we can use sprites of any size... the Cells are 32x32, so we have a deformation by the "Streech Image",
I have not tested to much, but it seems to be working well:

Interface:





Code Generated:





The Result (using gb.display.tilemapDraw()):




Download Program:Tile Map drawer BETA0.87.rar
Download Program + Source:TileMap Beta0.87 Source.rar

Any problem with downloading, please tell me.... :lol:

Suggestions are always welcome!!

Coming:

- Save/Load button
- 32 Sprites suport
- Add a formated Font to the output code Generated (only by the esthetics)

This is looking awesome!
Does it also have it where you can be the tilesize be whatever? For gb.display.drawTilemap they don't even have to be square, lol

Sorunome wrote:This is looking awesome!
Does it also have it where you can be the tilesize be whatever? For gb.display.drawTilemap they don't even have to be square, lol

It works with any sprite (using the buttons below the pane to load the sprites). Take a look:



In this example, I have not used only squares sprites, It works for any.
the only work is to scan with the bitmap Encoder Sprites when put in the code.
so I have to use the bitmap Encoder to get the sprites of trees, block's, grass, etc. and put in the code with the tile Map Drawer output (tileMap and Spritesheet) and it Done!!

maybe in the future I integrate a Bitmap Encoder together the tileMap Drawer (it sound funny...huehue) so needing only Bitmap of Sprite.... In the future.... :lol:


EDIT:
I forgot to mention - the "void"(or NULL) tile/block is the number 77.

It would be awesome to draw sprites/tiles in the program, especially to try how well it repeats in a larger area. So far I have to do it in my garphic editor, reload the tiles or copy+paste a mockup to find out.

Another existing option for tile maps is the Tiled Map Editor at http://www.mapeditor.org/, which I used for my (still in development) 10-hour challenge:



It's specifically designed to integrate easily with game engines, I personally had no problems getting my data out of it.

Hey Myndale, thats look Amazing!!!... You have Any tutorial about Tiled ?? I can Draw the tile Map, but
I can't get the output to Gamebuino(I need to configure/create some plugin?).



The Update on my TileMap Software:

- Add suport to 32 Sprites
- Add Cell Size control (10x10 , 20x20 , 24x24 , 32x32)
- Add 250x250 tileMap suport (take some time to genarate de code, thats is a max of 62,500 tiles)
- Removed the "Sortable" Border of dataGrid (if you click then cause some Bugs in the Version 0.86)
- Add Save/Load function (it use a .gtm file)

The .gtm don't have anything in commom with the GPS Tracker Maker file format.
the generated .gtm basically is a large string conteining the size of DataGrid and cell's, the path
to Sprites loaded and the matriz generated under the dataGrid (it's possible modify then with the Note Pad :lol: ).

I think I will not go over this, so for now this is the last Version.

Program: TileMapDrawer BETA V1.0.rar
Source Code: Tile Map BETA V1.0 Source.rar

Some Pics:

Interface increments:






Inside of generated .gtm File:

Nice to see how this is slowly taking shape!

This project is great!
I plan using this in my further game development.
Keep up the good work!

hehe... Thanks all.


I'm trying to implement the "bitmap encoder" inside my Software, that's work for 8x8 or smaller (monochromatic 's)
sprites, after that it bug (if width go over 8 pixel's, in Height over 8 lines I thinks that work fine), this routine need to be optimized in the future.

I have made a video to demonstrate the implementation of "bitmap Encoder" on the code generator, and it working with arduino IDE and Simbuino:

https://www.youtube.com/watch?v=5CQx2Olnsng

At the final of video it's possible to see a little bug, it's occurs when I try save the new .gtm file
over the loaded file (overwrite), the Error Log say: It's not possible access the file why it still in use for other process
But the "other Process" is in the same Program. I was told to try the .dispose() but I haven't tried yet.
If you save with other file name (no Overwrite) it work very Well.

ps: The program don't Crash!, if you click "Continue" it go on without any apparent problem

When I fix this Bug I will put here to Download the program and Source Code commented, in this way someone who wants give me some help with this routine's (or modify then) can start where I Stoped...huehuehue

That looks great, I'm looking forward to it!
This'll save a lot of work.

One little more Update:

- Overwrite Save Bug Fixed (I forget the use of system.IO.streamWriter.close() to end the "load" process)
- Add "Replace Sprite" Button, it change the current Sprite (in all tileMap) to other, so it's possible to
change all the trees or all the floor with two click's.
- Add "Remove Sprite" button, it can remove from all tile map the current sprite (replace with void tile)
- Add "Draw Selected Tiles" button, with it, you can select one area (linear or no) holding "Ctrl", when you click
in this button, the current sprite will be placed in the selected area (useful to draw the floor... rsrs)


It's all for now...
In this software still have a several things to do, but I will give a break in the "improvement" of this program (busy at this time).

The last Version you can download here:


Source (comented):TileMapSource BETA V1.02.rar
Executable in the "Bin->Release" Folder


One pic of a 30x30 tilemap (tile 8x8) than I have made:






the result (without any collision routine):


(I'm really bad to draw sprite... XD)

Looking awesome!

Also, you'll have to adjust the output as I changed a bit on how drawTIlemap is working, more about that here: viewtopic.php?f=12&t=3213#p10002

Sorunome wrote:Looking awesome!

Also, you'll have to adjust the output as I changed a bit on how drawTIlemap is working, more about that here: viewtopic.php?f=12&t=3213#p10002

Hi Sorunome.

Yes, I will do it, thanks for warn me.


Edit:

Software update to the new data layout of drawtilemap()
It "get" the size of first tile loaded, so is important the use of same size in all tiles.

This tile Map.



Resulted in this code generated.

Code: Select all

  const byte tilemap[] PROGMEM = {10,10,
 8, 8,
 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
 0, 0, 0, 0,77,77, 0, 0, 0, 0,
 0, 0, 0,77,77,77,77, 0, 0, 0,
 0, 0,77,77, 1, 1,77,77, 0, 0,
 0,77,77, 1, 1, 1, 1,77,77, 0,
 0,77,77, 1, 1, 1, 1,77,77, 0,
 0, 0,77,77, 1, 1,77,77, 0, 0,
 0, 0, 0,77,77,77,77, 0, 0, 0,
 0, 0, 0, 0,77,77, 0, 0, 0, 0,
 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 } ;

const byte arvore[] PROGMEM = {   
B00010000,
B00101000,
B01000100,
B10000010,
B10000010,
B01101100,
B00101000,
B01010100 } ;

const byte grass1[] PROGMEM = {   
B00000000,
B01000100,
B00100010,
B00011001,
B01000000,
B00000100,
B00100010,
B00000000 } ;


const byte *spritesheet[] = {   arvore,grass1 } ;
 

77 is the voidtile, take care about it, It may appear some garbage on the screen if the drawtilemap() try to render a void tile.
It occurs why the index of a matriz is one point of reference in the memory adress, so Spritesheet[77] can refer to a memory location where is saved other thing.
I would not recommend leave voidtiles


Download:TileMapBeta V1.02.rar
Executable in the Bin->Release



A little OFF-Topic coment (about drawTilemap())

I have a take a look at the gb.display.drawtilemap, and I tried to add some list of sprites drawn in the display,
My idea is use this "mapping" for colision (example), so I have add two variables in the display.h:

Code: Select all

   typedef struct{         //line 171 "Public Variables
  int x;                    //X coordinate
  int y;                    //Y coordinate
  const byte *spritecol;    //Sprite of object
  }object;
  object solid[60];

  byte numcolision = 0;    //count of solid objects


So now I have access to gb.display.numcolision (number of sprites on the display)
and access to gb.display.solid[index].x (or y, or the sprite of index object)

And I add this lines to display.cpp:

Code: Select all

   numcolision = 0;                                 //Line 735 - clear numcolision
    for(uint8_t ddy = startDdy;ddy < maxDdy;ddy++){
        for(uint8_t ddx = startDdx;ddx < maxDdx;ddx++){
            int8_t drawX = ddx*tile_width + x + dx;
            int8_t drawY = ddy*tile_height + y + dy;
            uint8_t tile = pgm_read_byte(tilemap + ddy*tilemap_width + ddx);
            if(drawX >= dx && drawY >= dy && drawX <= (ddw-tile_width) && drawY <= (ddh-tile_height)){
                drawBitmap(drawX,drawY,spritesheet[tile]);
            
            solid[numcolision].x = drawX;                     //Save X coordinate
            solid[numcolision].y = drawY;                     //Save Y coordinate
            solid[numcolision].spritecol = spritesheet[tile]; //Save Sprite of tile
            numcolision++;                                    //Increment numcolision
            
            }else{ // we need to draw a partial bitmap
                drawBitmap(drawX,drawY,spritesheet[tile],dx,dy,dw,dh);
            }
        }
    }


With this routine I can save the X,y and sprites of all tiles rendered (non partial), I think is possible to concat this with
physics (collide) library, to add some collision to drawTilemap() (it's possible?).

I checked the data received from each tile, and appear to be right, but I can't get the collideBitmapBitmap() to work... :?

EDIT:

I got it! Collision working with tilemapDraw()...

Revising the collideBitmapBitmap() code I can see the problem, it get the Width and Heigth of Bitmap using the two initial bytes of sprites,
this bytes was removed in update of Drawtilemap(), so it did not work, I have changed to gb.collideRectRect() and it Work.

Take a look:

Code: Select all

for(i=0; i < gb.display.numcolision + 1; i++)
   {
    if(gb.collideRectRect(player.posx,player.posy,8,8,gb.display.solid[i].x,gb.display.solid[i].y,8,8))
    {
          if(gb.display.solid[i].spritecol == floor1); //Do nothing because it's floor
else      if(gb.display.solid[i].spritecol == arvore)gb.popup(F("Tree"),10);
else      if(gb.display.solid[i].spritecol == agua2 )gb.popup(F("Water"),10);
else      if(gb.display.solid[i].spritecol == agua3 )gb.popup(F("Water"),10);
else      if(gb.display.solid[i].spritecol == tijolo)gb.popup(F("Brick"),10);

      }   
  } 
   
    if(gb.buttons.repeat(BTN_B,1))
    {
      gb.display.print("CPU Load: ");
      gb.display.print(gb.getCpuLoad());
      gb.display.cursorX = 0;
    }


The result:

Wow! Awesome!

Can you please make a download link outside of 4shared like MediaFire or Dropbox? I'm not comfortable with having to log in to my social networks in order to download.

Zvoc47 wrote:Wow! Awesome!

Can you please make a download link outside of 4shared like MediaFire or Dropbox? I'm not comfortable with having to log in to my social networks in order to download.

Hi Guy...

There is a link to Media Fire download.

http://www.mediafire.com/download/1wc8du99c1ucc38/TileMapBeta_V1.02.rar

If you will try to use this on a "serious" project, take care about the several Bug's, especially with the "save" option, never leave a void sprite between two other sprites, or it will bug when you try to load the MAP.