[Solved] Need help with yet another tile based map editor!

Java 2D
#1

I’ve been implementing a tile based map editor for some days now and I’m having some problems with the painting grid.

How do i do it? I started by creating a JPanel with gridlayout, and fill it with objects, but this doesn’t seem like a good way to go. I’m thinking of implementing one big canvas(?), check for mouseClick and calculate the position to draw the sprite on. Does it sound good?

I’m new to graphical programming in Java and I have no idea of what classes to use, so all help you can provide is appreciated!

#2

Just attach a MouseListener to it. You can easily calculate the tile coordinates of the tile being clicked on by dividing the mouse coordinates with the size of a tile. If you have a moveable “camera” (translation) you’ll have to factor that in too. Not really sure what “problem” you actually have here. =S
I started making a map editor for a tile based game with Java2D a few years ago, but I didn’t get very far with it. Basically I used 2 different canvases, one for showing the map and the other for the tile chooser, where you choose what tile from a tileset to put on the screen. You may also want to implement some basic “painter tools” to speed up filling large areas with the same tile. Now that I think about it, just try to make a remake of MS Paint with tiles instead of colors. xD

#3

Yeah, it’s now possible to paint on my canvas, my only problem is that all that has been drawn resets everytime i either scroll or resize the window.Does it happen becuase of a method I’ve forgotten to override or something?

#4

I don’t entirely understand what you are trying to do (probably do to lack of familiarity with this aspect of Game programming). Is a Map a collection of Tiles and their positions? When editing a tile-based map, is the goal to place already completed Tiles in a grid? Or are you still working on the images for the various tiles?

Using GridBag layout with a JPanel seems to me like a cool idea for an editor. I like it. Was that what you were first attempting? Each Tile is then made part of the display via an .add() method and paintComponent() will automatically include them in any redraw. (Assumes Tile subclasses a component of some sort.)

What sort of problems did you run up against when you tried that, may I ask?

If you are just going to draw directly onto the screen (via things like grid rectangles or images that correspond to the various tiles), maybe use a JComponent instead of a JPanel, as the extra functionality provided by a JPanel (ability to be a container) is wasted.

What is the problem that occurs with the redrawing? It takes too long? The position or size of things is altered? I do know that
when you resize, the program will trigger a repaint and try to apply whatever Layout you are using to the display window. Maybe using a null Layout and drawing all the graphics with absolute x & y values will reduce the redrawing.

#5

Why not use Tiled?

It’s supported by many, like Slick and libgdx, and probably Java2D as well.

#6

You shoud first create a good (yet simple) model of your TileMap. I am thinking of a Map class, and it could contains an 2D-Array of Tile objects, which have an Image property.

This is the basic model, you can later add properties for supporting overlays, checking for walkable areas, jagged (no square) maps and so on.

Derive from JPanel or JComponent, and override its paint-Method. Check for the JavaDoc of Graphics class. In the method you go through the tiles of the map and draw its images (using Graphic’s methods).

With a MouseListener attached, you can check which Tile you have clicked on, change its Image and draw the component anew.

Try to play around a bit with it, the details depend on the style of you map and game.

#7

I have made a lot of progress with my level editor. I started by extending JPanel and writing my on paintComponent method. When the MouseListener detects a button click, the logic counts where to draw the tile. In the background I have a Tile[][] matrix that contains data about every tile that has been added. This way it was easy for me to save the content (using ObjectOutputStream) and load it again when the user wishes to do so.

When I started this I wasn’t familiar with the classes involved and I think that I have figured out most of it. I had a lot of issues with memory management and the application now runs at 100 mb memory. (Got it down to 100 from 200 mb). There is probably some bad code there that causes this, which I will take a look at later, but at least the application doesn’t crash because of OutOfMemoryException anymore! I’ll probably post some pictures when I have added all the necessary buttons, the model part is done, I just have to implement the view.

#8

It’s been a while since I worked with my editor, but I thought that it would be fun to post a picture of it! As a sign of that your help didn’t go to waste!

http://img202.imageshack.us/img202/6970/screenshot20110727at208.png

Feel free to ask any questions if you wonder something :slight_smile: I have implemented save and export functionality, so it’s now possible to actually use the editor for any 2D-game!

#9

Your graphics look pretty good. I look forward to seeing the a game demo. Did you break all your sprite elements down to the size of your grid? Or do you all sprites to be a size factor of the grid size. i.e. sprite can take up 2x2 grids?

#10

IIRC, there is even a link to the Java source.
(so you can have a look around at how it handles tile maps)

#11

I’m not sure if I understand your question correctly, but I’ll explain how i have implemented it. When you start a new project you can define the size of each tile in pixels. In the code I have left support for two different parameters, one size for the tile set, and one size for the map. But at the moment you can just choose a common size for both of them. I have tested this by hard coding different sizes and my solution for handling the different sizes is to, say that you have chosen 32x32 pixels for each tile from the tile set and the map has tiles of size 50x50. What happens is that the tiles from the tile set are stretched to match the size of the map. Does it make sense? The reason why I haven’t added support for this is in the GUI is because i don’t know how to handle this when I export the completed level. I will later on add support for placing characters on the map, and they will be separated from the tile system, making it possible for them to have bigger textures separated from the tile system.

I haven’t made the tile set myselft, it’s just something I got from the Internet, but we have people drawing tiles, so hopefully our finalized products will look good.

I’m aware of that. When I started I had no idea of how image manipulation and everything related to level editors works in java. So instead of studying the code and try to understand I thought that in the end I would save time by implementing and learning it all by myself. Now when I have an idea of how this works I’m thinking of starting to contribute to Tiled instead. I’ve implemented a file-parser for it for one of my projects in C++ and I think that their solution for the exported file looks much better than mine. I did this since they have support for isometric view and it wasn’t anything I was planning implement for my own editor.

And it’s a bit too late to look at their source of how to handle tiles, since I’m done with my own implementation of it, but I’m sure they’re a bit more organized than my negligently implemented MVC-pattern.