Shop Forum More Submit  Join Login
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.


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 ([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]

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

Have fun!!!
Add a Comment:

Daily Deviation

Given 2011-02-02
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" ( Suggested by The-Titan and Featured by Gashu-Monsata )
Shaded-Gaming Featured By Owner Oct 20, 2015  Hobbyist Interface Designer
I LOVE this!!!!

My only concern is that I did load a new tileset BUT was not able to figure out on how to use all the blocks...

Is there a scroll button somewhere that I cannot find or....?

But in the end, this is one of the best I've seen so far!!
JewelandGarnet Featured By Owner Jan 4, 2014  Hobbyist General Artist
Awwww, that's awesome :D
kid45buu2 Featured By Owner Oct 5, 2013  Hobbyist General Artist
use the print screen key to save your maps to the clipboard and paste it in paint or any image manipulation program.
MistytheVictini Featured By Owner Apr 22, 2013  Hobbyist General Artist
The actual buck this is awesome
Redglares-decendent Featured By Owner Dec 28, 2012
this is cool ^^
Scizor24 Featured By Owner Dec 19, 2012  Hobbyist General Artist
WOW! I'm impressed how simple the interface is, all things considered. I'm developing my own map editor currently, but this is just simply masterful :) congrats on completion.
Pokemoniac Featured By Owner Dec 4, 2012  Hobbyist Traditional Artist
what about the trees?
Eggbreeder1 Featured By Owner Dec 15, 2012
The trees can be uploaded if you make a custom tile set for it.
Pokemoniac Featured By Owner Dec 4, 2012  Hobbyist Traditional Artist
how large is it? the 'map'
ForgottonKeyblade Featured By Owner Dec 2, 2012  Student General Artist
I love my new little island!!!!
BloomSaraLucia Featured By Owner Oct 8, 2012  Hobbyist General Artist
Awsome!How you make it?
rui-thinik Featured By Owner Sep 14, 2012
woow, this is sweet! it's really easy and fun and one could spend hours on it.
MitzuSojaki Featured By Owner Jul 28, 2012  Hobbyist Digital Artist
First of all, sorry for the bad English. :3

I really LOVE this! It's so beautiful and smooth. And I can make Citys and Towns so FAST! :3
Currently I'm working on a RPG to a danish Fanside, but if I have to make the Citys and Towns by myself, it takes me DAYS to finish just one! With this, I have made 3 Towns / Citys just TODAY! It's fantastic! :3 (I really hope I may use this to make a RPG. I will naturally credit you, for your amazing work! :3)

But I have a question:
It's not very easy for me to place buildings... they are all so similar to each other. I have problems building Pokemarts, Pokecenters and Gyms + other special buildings!
Maybe it's not the point of this game, but it would be very helpful. :3

But anyways, it's a fantastic help for people like me! Thank you SO much for being so awesome you made this! :3
Arcaniss18 Featured By Owner Jul 27, 2012
really cool i actually made an entire village it looked so cool i cant wait to see what you are going to do next
SakuraNeko14 Featured By Owner Jul 22, 2012  Student
MapFreak Featured By Owner Jul 10, 2012  Hobbyist Traditional Artist
very nice job!
theanonimous Featured By Owner Jun 25, 2012
very good
RainbowEspeon1523 Featured By Owner Jun 15, 2012
this is so awsome=D
thekeobamaster Featured By Owner Jun 14, 2012  Hobbyist Artist
why is it when i save it it doesn't appear in my documents? i put it in pictures, but it won't appear! why?
Star-chaser97 Featured By Owner May 27, 2012  Student Writer
This is just amazing!
shangerz Featured By Owner Feb 29, 2012
this is brilliant!!! and not just from a players perspective, but also from a flash game developer point of view as well! great job:)
ticklishnatasha Featured By Owner Jan 30, 2012  Hobbyist General Artist
this is so cool!
AxelCyrus13 Featured By Owner Jan 10, 2012  Student Artist
this is cool
OhAnton Featured By Owner Jan 7, 2012
Nice work!
You've inspired me to make my own!!
digibody Featured By Owner Jan 10, 2012  Professional Digital Artist
Very nice, what did you use to make it?
You should really have a blurb somewhere to describe it a bit.

And how did my work inspire you?
OhAnton Featured By Owner Jan 17, 2012
I used KoolMoves to make it. It's a Flash type program. :)
I have a little more info about the game here:

I loved your editor but I just wished there was a way to play through the maps I created!
So basically I made the same thing but also added a way to play through the maps after creating them. :)
I can't post the game on deviantart because it needs access to PHPs to work. :/
digibody Featured By Owner Jan 18, 2012  Professional Digital Artist
Ahhh ... I see.
I love it, womderful ideas.

I think I should update my editor ... I have recently found a tool for me to create swf's inside of flash (so hopefully I can create runnable games from within the editor)

The big problem is I think I lost the original code :(. Harddrive crash, so I will try to work backwards with some old code.
wolflover144 Featured By Owner Dec 27, 2011  Hobbyist General Artist
awsom but it it toke me 2 hours to perfect
animelover876 Featured By Owner Dec 5, 2011
Thats so cool how you can like make one save it load it awseome place is what my place was called
digibody Featured By Owner Dec 7, 2011  Professional Digital Artist

I know I should update it, but I decided it to build my own engine first and then write the tilemap editor for that one instead. (Currently using flashpunk API)
animelover876 Featured By Owner Dec 8, 2011
Satsumo Featured By Owner Nov 28, 2011  Professional Traditional Artist
This is a fine piece of work, I do appreciate how hard this is to do. If I write one of these myself this will be standard I measure against.

I would like to see a box drawing tool. Instead of selecting a single tiles from the palette, allow the user to select a square of them. The user draws a a rectangle on the grid with the box tool, and the program fills the box using the selected tiles as a pattern. If you select 3x3 it uses the outside tiles for a frame and repeats the inside tile. If you select 4x4 it uses the frame tiles and alternates the middle two tiles, and so on.

I realise that's quite involved, but it would be fantastic tool.
digibody Featured By Owner Nov 28, 2011  Professional Digital Artist
you can already select a group.
What you are describing is already implemented

When you select the tile, just keep the left mouse button pressed down, then drag and select the group you want.
Satsumo Featured By Owner Nov 28, 2011  Professional Traditional Artist
I noticed that almost as soon as I'd posted the comment. But the box drawing thing isn't there, or at least I can't find it.
digibody Featured By Owner Nov 28, 2011  Professional Digital Artist
I dont understand what you mean by box drawing exactly, I thought the select and drag option covered it?
Satsumo Featured By Owner Nov 29, 2011  Professional Traditional Artist
Maybe I'm not understanding the way it works?

I mean drawing a box on the map as well as on the palette. The rectangle on the map is automatically filled according to the pattern you select in the tile palette. I don't think the editor does this already. If I click and drag in the map it works like a paint brush. Maybe there are other functions that I haven't noticed yet. I realise it's complex to do that.

I'm curious, the tile palette doesn't seem to change size when a new PNG is loaded? The default image is 10 tiles wide. If the user creates an image that is 11 tiles wide, I guess the multi-tile rectangle images will be out of alignment? Nothing wrong with that as a design. It keep everything within predictable limits, which makes for a stable program. Can't help it, the programmer in me goes through all the possibilities.
reshiram98 Featured By Owner Nov 18, 2011  Hobbyist General Artist
Update Now Please!
digibody Featured By Owner Nov 26, 2011  Professional Digital Artist
sorry, just did not have the time recently to do so.
reshiram98 Featured By Owner Nov 26, 2011  Hobbyist General Artist
rainbowsnivy Featured By Owner Oct 15, 2011  Student Artist
can u add people??
animelover876 Featured By Owner Dec 5, 2011
I know right!
AVPMismylife Featured By Owner Nov 22, 2011  Student General Artist
haha i used to have the same icon as you, so when I saw your comment i was all OMG I COMMENTED ALREADY? BUT I'VE NEVER SEEN THIS!!! D: lol i understand now :)
digibody Featured By Owner Oct 15, 2011  Professional Digital Artist
Not yet.
Something I always planned to do but never got around to designing it.
rainbowsnivy Featured By Owner Oct 15, 2011  Student Artist
i ♥ this game
digibody Featured By Owner Oct 29, 2011  Professional Digital Artist
icytemporalist Featured By Owner Oct 4, 2011  Hobbyist General Artist
Fantastic Coding there, I can see a lot of work has gone into this to get it to run smoothly. Perhaps on a later version, you could enable saving the image as a .png or .gif?

Anyway, I used it to create this: [link]

Thanks again!
digibody Featured By Owner Oct 8, 2011  Professional Digital Artist
That is cool the map. I just wish I had created added more tiles.

I decided I needed a better sprite engine so I started to work on one from the ground up. Hence this map editor is based on 'flashpunk' is not getting updated anymore.

I am planning to start to show off some of my work as I progress.
icytemporalist Featured By Owner Oct 10, 2011  Hobbyist General Artist
I think I got all of that. I'm glad you liked the map! (Later I might make some more tiles of my own so there aren't any unnessary cliff/dirt/grass areas.:) We shall see what we shal see...)

Well I'm certain you've recieved enough feedback from both here and your site. I look forward to seeing the finished products!
BrazilianFerrets Featured By Owner Sep 22, 2011  Hobbyist General Artist
Demonshark151 Featured By Owner Sep 11, 2011  Hobbyist Digital Artist
omg this is so cool :'D
Add a Comment:


Submitted on
January 9, 2011
Image Size
106 KB


59,476 (1 today)
2,208 (who?)


Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-No Derivative Works 3.0 License.