2D Map editor

Shared Code
#21

Most of those are isometric, which this editor doesn’t do. it could probably be hacked in easily but it’s not something i am interested in just now. things like the trees would work anywhere though.one of the things on the todo list is a tileset editor.

In the meantime if you want to chuck your own tile into a tileset, just open up gfx/outdoors.dat, and add two lines into the Tiles block…

where it says

58 1 Old Tree
tiles/oldtree.png
}

you can add for example the ani fir tree from that collection like so:

58 1 Old Tree
tiles/oldtree.png
59 1 Ani fir
tiles/fir A ani0001.bmp
}

the transparency won’t work though, It looks like they are working within some colour pallette restriction and using the magic colour (horrible, unnatural magenta) as transparent, whereas i am just using gif/png transparency, whatever that happens to be. hooray for the libraries doing all the work!

hacking in magic colour transparency to the graphics bank would not be too hard.

#22

Thanks for the info. I think I’ll actually end up using cartoony pokemon terrains since it’s so much easier to make characters, menus, and new tiles that match the basic, minimalist non-detailed purposely-pixelly pokemon style. When I get up to making proper maps I’ll post a zip file of the images I’ll be using in this editor.

#23

So I had a play with this, but there doesn’t seem to be any way to add your own tiles? You always have to use the ones that are already hardcoded. Similarly, there doesn’t seem to be a way of adding/removing layers, so I’m stuck with the hardcoded 3. And there doesn’t seem to be any documentation about the map format.

It’s slick and all, but don’t these limitations make it basically unusable for anyone other than yourself?

#24

Started working on undo function.

CommanderKeith, i hacked in the ani fir to the tileset as an example. you can see the modified tileset here, chuck it in gfx/outdoors.dat. the image i edited a bit to put in gif transparency, and can be seen here, chuck that in gfx/tiles/
here’s a screenshot.
it’s not animated though. that sort of thing i’ll leave to the hypothetical game engine for now.

Hi orangy, no theres no tileset editor or chooser. the tileset is defined in gfx/outdoors.dat and my previous post showed how you can hack in your own tiles by adding a couple of lines to it… you can only choose a tileset other than “outdoors.dat” by taking a text editor to the map file. sorry, it’s on the potential todo list.

the “documentation” for the map format is on the previous page :slight_smile: it’s basically the width, the height, then a whole bunch of numbers indexing the tiles in the tileset, with one line break after each layer. the “colorization” stuff can be ignored if you arent interested in writing that sort of thing into your rendering engine

layers is indeed hardcoded.

#25

That looks great, thanks for the explanation.

By the way, I don’t think it matters about the hard-coded stuff and the way maps are saved - the simplicity of the code makes it easy to just port over the stuff you want and change things to save it in your own format.

#26

yeah i agree, 1 of the things i love about this, is the code simplicity

#27

http://juddman.googlepages.com/Mapedit0.10-JuddMan.jar

I tried to implement undo and redo but it’s not working properly yet. what i have tried so far is at the end of the MapComponent.java file, but it’s disabled.

This version contains a bit of refactoring of the main MapEdit.java file, partially for readability, but mainly to avoid using anonymous inner classes for the actionListeners. (so it doesn’t spit out so many .class files when compiling)

Reduced lines of code in MapEdit.java by 88. I thought the toolbars were getting too big, so which do you prefer?

http://juddman.googlepages.com/tooloptions.png

(seems to be shrunk a little by the forum. here’s full size)

  1. old style (but rearranged a bit)

  2. compact, borders, 2 rows

  3. compact, borders, 1 row

  4. compact, no borders, one row.

I like number 4 but it’s perhaps a bit too cramped.

If you feel like it, you can try the different styles by adjusting:

	boolean compactToolbars = true;
	boolean borderedButtons = true;

on or off as you like in MapEdit.java

#28

all the button layouts look decent in my opinion.

shame about the undo function.

#29

Undo and redo are working now.

I was originally using a list of states and an index to the current position so that you could redo… it wasnt working out.

It turned out to be a lot simpler and easier to just use two stacks:


	Stack undoStack;
	Stack redoStack;

and call saveUndoState before the user makes any changes to the map.


	void saveUndoState()
	{
		redoStack.clear();
		undoStack.push(map.toIntArray());
	}
	void undo() {
		if(!undoStack.empty()) {
			redoStack.push(map.toIntArray());
			int[][][] i = (int[][][])undoStack.pop();
			map.setAllTiles(i, mapEdit.scene.tileset);
		}
	}
	void redo() {
		if(!redoStack.empty()) {
			undoStack.push(map.toIntArray());
			int[][][] i = (int[][][])redoStack.pop();
			map.setAllTiles(i, mapEdit.scene.tileset);
		}
	}

undo/redo seems to break when the map is resized though. a workaround is to save and load the map after any resize

grab here:
juddman.googlepages.com

Also, you can drag the map around with the right mouse button now. you can still just click to center on that point if you dont want to drag.

There’s a settings tab, where the colour sliders have been moved to. The other settings do not work yet.

There’s a new beach “tile”… it’s pretty big. you can see it used in the ‘waterScene’ map which should be in the jar file.

#30

Hi Juddman,

YEEAH!

The undo/redo works and I have changed a few bits to use it for my project.

Changed: Map.java
different tilewidth/height
render changed so that it loads a fixed background that I’m using

TileChooser: tile size

Made my own ‘myown.dat’ scene using myown tiles.

http://martineijmans.nl/pixeljoint/mapeditor.jpg

Again, thank you very much for sharing this!
You will be credited!

Kind regards from

M.E.

#31

This is super pretty, and looks like it works great. It’s too bad I already have my own level editors created for my games… maybe I can actually add onto your project. I’ve got other features like as many layers as you want, being able to add custom Java code to each level (so like pushing a block into a wall can make something happen, etc.), and a few other things.

Let me know if you’re perhaps interested in those additions.

#32

well this one has no sort of scripting or interaction at all, so if you want to add something like that, it would be great, or even just post some code if you dont have time to do it yourself.

me: Nice screenshot. Its great to see someone making use of it. It looks completely different with those tiles.
I wonder why you set the tilebuttons so wide like that…

#33

The reason for changing the tilesize in TileChooser is because the
tiles that I use are overlapping eachother half.
The actual tile is Height:100xWidth:50.
There was only one dimension that I could change in the
TileChooser.java and that was the width. Granted, I could modify
the whole chooser code but I wanted to have a quick go at it.
So I changed the tile to 100 and thus resulting in the extreme width
of the tile.

Maybe I did go about it incorrectly and you can point me to the
best way of changing the tile dimension in the tilechooser…

Best regards from

M.E.

#34

change
int tileWidth = 32;
to
int tileWidth = 50;

and lines 54 & 55 to:


			Image i2 = new BufferedImage(50,100, BufferedImage.TYPE_INT_ARGB);
			i2.getGraphics().drawImage(i, 0, 0, 50,100, null);

Or if your base tiles, ie. the ground ones are 50x50, then use 50, 50.

i have to redo the tileset stuff properly one day. i have been playing around with drag n drop, i wanted to make it so you could create your tileset by just draging images onto the tilechooser panel and then it would ask you for a bit of info about it and add it for you. but first need to add a save function to the GraphicsBank class, which holds a tileset. Actually, it might not be all that much work.

#35

Great!

Changing lines 54 and 55 did the trick! The tileWidth was
changed already but the tile was scaled to the 32x32 image
which made a distortion.

Thanks a bunch!

Draging images onto the chooser would be nice,
but I didn’t mind investigating what you had.

Kind regards from

M.E.

#36

Okeydoke, I’ll put some code up somewhere, perhaps.

#37

Dropping an image onto the tile chooser now adds it as a usable tile, but there’s one problem still.

Drag and drop gives me the files i drop as File objects with absolute paths like so:

“C:\Documents and Settings\Judd\Desktop\Judd’s Junk\Java\mapedit\gfx\tiles\fence.gif”

But to add them to the tileset, I just want the path relative to wherever you’re running the editor from, or wherever the tileset file is located. such as:
“gfx\tiles\fence.gif”

I can think of one quick and dirty way to get this… make a new file at the location of the tileset file, then call getAbsolutePath() on it, make it a string, and clip the beginning of that from the beginning of the other string.

This seems a bit messy to me. Is there another way to do this more reliably?

#38

when u drag and drop, cant you just have a InputDialog and ask the user for new images description name, then save it to the tilemaps working directory, aswell as apending a line to the current tile script file.

#39

This sounds fine to me.

The drag and drop feature sounds fantastic.

#40

i hadn’t thought of that, and it’s a good idea.
I think what i’ll do is have the program attempt the path clipping thing on the filename first. If it doesnt match (ie. tile above path of tileset, tile on a different partition… tile on your desktop), then i will copy the image file to the tile directory, otherwise i’ll just put the clipped path into the tile list…

EDIT:
I have done a complete rewrite of the GraphicsBank (the class that loads / saves tilesets). It has been simplified. Here’s an example of the new tileset format:

# This file lists all tile resources
# Whitespace at the start of a line, and immediately before and
# after a comma are ignored. Don't use commas in the description.
# Each tile must be on its own line.

ID number,Image file,name,type,Other info...

26, tiles/grass.gif, Green Grass,  No type,   You walk on it...,
1 , tiles/dirt.gif,  Dirt,         No type,   It makes boots muddy,
2 , tiles/tree.gif,  Plain Tree,   no type,   It is a bit wooden,

I think it’s both easier to read, and easier to parse, you only need do readLine(), split(",") and trim() to get values.

All paths used to find files are now relative to the file that’s referencing them, rather than the location you started the editor from. The editor can no longer read tiles / tilesets inside its own JAR, so will launch with a clean slate instead (but this seems broken right now).

Currently it’s not finished so i won’t put a new set of files onto the webpage, but if you’re curious to take a peek, you can see the SVN here: http://code.google.com/p/simple-map-editor/source/checkout

New properties dialog (left) and some new decoration (right). I decided to stop caring about rendering speed, so any new decorations will be in png with alpha transparency.