HOME | DD

digibodyTileMap Editor-b55-pokemon by-nd

Published: 2011-01-09 21:48:47 +0000 UTC; Views: 87248; Favourites: 2162; Downloads: 2975
Redirect to original
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!!!
Related content
Comments: 834

Shaded-Gaming [2015-10-20 18:35:48 +0000 UTC]

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!!

👍: 0 ⏩: 0

JewelandGarnet [2014-01-04 18:00:16 +0000 UTC]

Awwww, that's awesome

👍: 0 ⏩: 0

kid45buu2 [2013-10-06 03:59:24 +0000 UTC]

use the print screen key to save your maps to the clipboard and paste it in paint or any image manipulation program.

👍: 0 ⏩: 0

MistytheVictini [2013-04-22 19:04:02 +0000 UTC]

The actual buck this is awesome

👍: 0 ⏩: 0

Redglares-decendent [2012-12-28 23:17:53 +0000 UTC]

this is cool ^^

👍: 0 ⏩: 0

Scizor24 [2012-12-20 03:20:00 +0000 UTC]

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.

👍: 0 ⏩: 0

Pokemoniac [2012-12-04 20:30:02 +0000 UTC]

what about the trees?

👍: 0 ⏩: 1

Eggbreeder1 In reply to Pokemoniac [2012-12-15 22:25:11 +0000 UTC]

The trees can be uploaded if you make a custom tile set for it.

👍: 0 ⏩: 0

Pokemoniac [2012-12-04 19:47:38 +0000 UTC]

how large is it? the 'map'

👍: 0 ⏩: 0

ForgottonKeyblade [2012-12-02 17:07:45 +0000 UTC]

I love my new little island!!!!

👍: 0 ⏩: 0

BloomSaraLucia [2012-10-08 11:55:00 +0000 UTC]

Awsome!How you make it?

👍: 0 ⏩: 0

rui-thinik [2012-09-14 10:13:29 +0000 UTC]

woow, this is sweet! it's really easy and fun and one could spend hours on it.

👍: 0 ⏩: 0

MitzuSojaki [2012-07-28 12:37:53 +0000 UTC]

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

👍: 0 ⏩: 0

Arcaniss18 [2012-07-27 20:03:57 +0000 UTC]

really cool i actually made an entire village it looked so cool i cant wait to see what you are going to do next

👍: 0 ⏩: 0

SakuraNeko14 [2012-07-23 04:33:49 +0000 UTC]

WOAH...

👍: 0 ⏩: 0

MapFreak [2012-07-10 16:44:28 +0000 UTC]

very nice job!

👍: 0 ⏩: 0

theanonimous [2012-06-26 01:02:21 +0000 UTC]

very good

👍: 0 ⏩: 0

RainbowEspeon1523 [2012-06-15 20:37:12 +0000 UTC]

this is so awsome

👍: 0 ⏩: 0

thekeobamaster [2012-06-14 19:52:10 +0000 UTC]

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?

👍: 0 ⏩: 0

Star-chaser97 [2012-05-27 19:41:39 +0000 UTC]

This is just amazing!

👍: 0 ⏩: 0

shangerz [2012-02-29 08:13:34 +0000 UTC]

this is brilliant!!! and not just from a players perspective, but also from a flash game developer point of view as well! great job

👍: 0 ⏩: 0

ticklishnatasha [2012-01-30 20:53:33 +0000 UTC]

this is so cool!

👍: 0 ⏩: 0

AxelCyrus13 [2012-01-10 21:13:55 +0000 UTC]

this is cool

👍: 0 ⏩: 0

OhAnton [2012-01-08 03:47:53 +0000 UTC]

Nice work!
You've inspired me to make my own!!
[link]

👍: 0 ⏩: 1

digibody In reply to OhAnton [2012-01-10 20:48:37 +0000 UTC]

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?

👍: 0 ⏩: 1

OhAnton In reply to digibody [2012-01-17 17:46:03 +0000 UTC]

I used KoolMoves to make it. It's a Flash type program.
I have a little more info about the game here:
[link]

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. :/

👍: 0 ⏩: 1

digibody In reply to OhAnton [2012-01-18 17:50:44 +0000 UTC]

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.

👍: 0 ⏩: 0

wolflover144 [2011-12-28 02:06:24 +0000 UTC]

awsom but it it toke me 2 hours to perfect

👍: 0 ⏩: 0

animelover876 [2011-12-06 04:48:44 +0000 UTC]

Thats so cool how you can like make one save it load it awseome place is what my place was called

👍: 0 ⏩: 1

digibody In reply to animelover876 [2011-12-07 19:56:48 +0000 UTC]

Yes

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)

👍: 0 ⏩: 1

animelover876 In reply to digibody [2011-12-08 19:49:58 +0000 UTC]

cool

👍: 0 ⏩: 0

Satsumo [2011-11-28 17:22:11 +0000 UTC]

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.

👍: 0 ⏩: 1

digibody In reply to Satsumo [2011-11-28 18:28:16 +0000 UTC]

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.

👍: 0 ⏩: 1

Satsumo In reply to digibody [2011-11-28 22:27:34 +0000 UTC]

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.

👍: 0 ⏩: 1

digibody In reply to Satsumo [2011-11-29 01:26:24 +0000 UTC]

I dont understand what you mean by box drawing exactly, I thought the select and drag option covered it?

👍: 0 ⏩: 1

Satsumo In reply to digibody [2011-11-29 15:30:23 +0000 UTC]

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.

👍: 0 ⏩: 0

reshiram98 [2011-11-18 22:01:45 +0000 UTC]

Update Now Please!

👍: 0 ⏩: 1

digibody In reply to reshiram98 [2011-11-26 19:31:35 +0000 UTC]

sorry, just did not have the time recently to do so.

👍: 0 ⏩: 1

reshiram98 In reply to digibody [2011-11-26 19:36:24 +0000 UTC]

Ok

👍: 0 ⏩: 0

rainbowsnivy [2011-10-15 20:50:26 +0000 UTC]

can u add people??

👍: 0 ⏩: 3

animelover876 In reply to rainbowsnivy [2011-12-06 04:49:57 +0000 UTC]

I know right!

👍: 0 ⏩: 0

AVPMismylife In reply to rainbowsnivy [2011-11-23 00:03:53 +0000 UTC]

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

👍: 0 ⏩: 0

digibody In reply to rainbowsnivy [2011-10-16 00:47:11 +0000 UTC]

Not yet.
Something I always planned to do but never got around to designing it.

👍: 0 ⏩: 0

rainbowsnivy [2011-10-15 20:48:29 +0000 UTC]

i ♥ this game

👍: 0 ⏩: 1

digibody In reply to rainbowsnivy [2011-10-29 22:37:06 +0000 UTC]

thanks

👍: 0 ⏩: 0

icytemporalist [2011-10-04 07:36:57 +0000 UTC]

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!

👍: 0 ⏩: 1

digibody In reply to icytemporalist [2011-10-08 22:49:47 +0000 UTC]

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.

👍: 0 ⏩: 1

icytemporalist In reply to digibody [2011-10-10 09:10:47 +0000 UTC]

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!

👍: 0 ⏩: 0

BrazilianFerrets [2011-09-22 18:56:04 +0000 UTC]

<3

👍: 0 ⏩: 0

Demonshark151 [2011-09-11 22:19:18 +0000 UTC]

omg this is so cool :'D

👍: 0 ⏩: 1


| Next =>