digibody on DeviantArthttp://creativecommons.org/licenses/by-nd/3.0/https://www.deviantart.com/digibody/art/TileMap-Editor-b55-pokemon-192833522digibody

Deviation Actions

Daily Deviation

Daily Deviation

February 2, 2011
TileMap Editor-b47-pokemon by *digibodyThe suggestor said: "i would like to suggest this flash deviation, i think it really needs featuring, a little flash utility that would be useful to anyone working on games with tiles, its got some really nice features in it already... you'd understand if you tried making any tile games your self. :3"
Featured by Gashu-Monsata
Suggested by The-Titan
digibody's avatar

TileMap Editor-b55-pokemon

By
Published:
86.6K Views

Description

Notes: I am going through an interface and tileset redesign. In a few days a whole new set should be uploaded, including features. You could lose your saved maps, wanted to provide ample warning.

Build 55:
Added the Save and Load buttons (save and loads text files). Decided not to do XML until AFTER I add the objects and collision map layers. Also decided NOT to do the save to PNG file (for now). The build number now shows up at the title screen in the letter 'D'.

Build 53:
Minor fixes, link by digibody should be fixed, cookie state (to save map if you leave page) is saved at EACH mouse release (not on a draw event), that way you don't lose your last brush stroke that you did.

Build:52

There is a lot more work that has gotten into this than many realize.
I had to create my own button class, it does not re-use Flash's standard buttons. Not just the button graphics, but also all the logic. For the text, I created my own Alphabet glyphs and use that to write on buttons, titles, etc.. had to create 127 separate images, most of which is not used, but are available when needed.

There are layers of reasoning behind simple things like in which direction does a grouped set of tiles get rendered in. Short answer left to right, top to bottom. The standard way in which to write text, it just felt natural for English speakers. Also the pen does not interfere with the tiles toolbox on the right in this fashion. Also note, all the brushes (on the cursor and the buttons, lean in the direction of which the drawing is rendered in). The highlights on the grid also shows EXACTLY what will be drawn.

Also for Clearing the tilemap, just clicking on the trash can will not clear the tilemap, you would need to actually click on the tilemap. Also added a lot of visual indicators that show WHAT you are about to manipulate, like when you are about to clear the screen, the whole tilemap screen is highlighted (as well as having an icon showing the trash can over the cursor to show the state). It all operates consistently and simply, so one can just use the tool without having to read a manual, the way all tools are meant to be. :)

Creating the drag-select feature took awhile since I had to apply it consistently across all phases of tools, FILL, PENCIL SMALL, MEDIUM and LARGE, LINE X and LINE Y. But its DONE! :)

The biggest feature is the Load a new tile set feature.
Any PNG will do, it will automatically divide it it 16x16 squares. It can display up to 250 tiles. 10x25 (160x400 pixels)

Lets not forget the AutoSave option (using shared objects in flash), If you accidentally reload the page, the map does NOT get erased.

Also added in this version is the UNDO 'z' button. Just hit the undo button to go back a stroke or two. Added the shortcut keys as well, Will help speed up the 'drawing' process.

To do ... next:
Adding objects, trees, buildings, people on a separate layer (on top of the tiles)

Other features like collision maps and event triggers are on the drawing board and I will need to scratch the noggin a bit more before starting on it.

Used the sprite engine flashpunk.net ([link]) to help code the tilemap editor.

Quick Start:
Click 'Start'
Select any tile from the top right corner, then draw it on the grid.
There are 3 drawing options (see below the tilemap).
3 PENCIL's (first 3 buttons), draws a tile at a time
FILL (fourth button), replace the selected tile with a new tile fill.
FILLX (fifth button), fills a horizontal line with the tile you selected
FILLY (sixth button), fills a vertical line with the tile you selected
TRASH (seventh), select the tilemap area to clear it.


Thanks to suggestions and help by ~RedForest100 and =X-DarkAngel-Xx and ~ArtCrusade and ~powerfullz and =The-Titan and ~Animaleante (and more I am sure I forgot many others)

If you are looking for another platform editor, see: ~Animaleante, he created a neat one, you can see it there: [link]

COOL MAPS EXAMPLES:
by ~RebanadaDePan titled: Pika-pikah [link] (<---PikaChu!)
by ~Yiggdrasile title: Mountain Lake [link](<-- Mountain Lake)
by *Master-Kankuro titled: Crown City [link]

Have fun!!!
Image size
960x800px 105.66 KB
Comments834
Join the community to add your comment. Already a deviant? Log In
SoulTomy2021's avatar

Yes idea , I use mine to detect invisible paste . Good luck