Making a map editor

jparril1 · April 6, 2011, 1:51pm

Hey Guys,

 So I thought It would be useful to make myself a simple tile map editor. My plan is to have a window with 2 sections, a tile library and a grid canvas. The user can select a tile type from the library and use it to paint onto the grid. The plan is to store this as a simple 2d array, then when saved, write it to a file using numbers (1 is grass, 2 is water, 3 is dirt, etc) The problem is I am having trouble getting the design down. I cant figure out how to translate what they place in the grid into an array, and then translate that to a file. I guess Im having a disconnection between the GUI and the back end and I cant figure out how to have them communicate

steveyO · April 6, 2011, 2:55pm

Am not sure am following. When they place a tile in the grid can you simply not take the X and Y mouse coordinates and divide by the tile width/height. This would give you your array position x and y position (and set this value to the currently selected tile) with your Bounds checking of course. (I assume you are using a 2x2 array). Alternatively, have you checked out http://www.mapeditor.org/ and http://tilestudio.sourceforge.net/. You may be able to adapt these to suit your needs.

jparril1 · April 6, 2011, 3:10pm

Well yes those example programs are pretty much what I want to make. I do want to make my own though, I think it will be a good learning experience. I think getting the mouse coordinates should work. What I have set up now is one main JFrame, and 2 JPanels (one for the actual map and one for the library of tiles). My plan was to put a separate canvas on each of the panels so that I can draw on each section separately. Ive been having some problems getting both canvases working. I never experience an issue in my games drawing on one canvas, but adding two different canvases to two different panels is creating an issue. I think I might just be messing up the packing with swing. Ill post code later to show you guys.

steveyO · April 6, 2011, 3:34pm

Ok see what you mean now Swing issues huh… Can’t really help you with this (hate Swing). In the past I created a couple of Map Editors using plain Java2D, and using the techniques I described earlier to place the tiles/save the array. It worked very well and was very easy to code, however not really suitable if you want other users to use your tool, in which case better stick with your approach… Good luck!

jparril1 · April 6, 2011, 4:39pm

Yes I hate swing dearly. My plan was to mainly use Java2d. The only place I am touching swing is my main Frame and Panels. Once I added my 2 canvases to their respective panels I was planning on doing all of the scrollbars, buttons, graphics, etc with custom JAva2d shapes and images. The only reason I was using Jpanels is because I really dont know any other way of supporting a canvas. The only way Ive ever known to do this (I use this in games as well) Is to make a JFrame, pack a Jpanel in it, then add a canvas to that Jpanel. Then I create a buffer strategy on the canvas and get the graphics context from that buffer strategy and use that to draw. IS there a way to avoid Jpanels and all that?

Also, I like to write my own render methods so I dont use paint() and repaint() at all. Thats why I use the buffer strategy to get the Graphics object.

jparril1 · April 6, 2011, 8:41pm

Ok maybe you guys can help, heres my code. Apparently something is wrong with my buffer strategys when I create the buffer. Any ideas?? This code has worked fine in my games…!

Heres the main Window class

package userInterface;

import java.awt.BorderLayout;
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.GridLayout;
import java.awt.MenuBar;

import javax.swing.BorderFactory;
import javax.swing.JFrame;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JPanel;
import javax.swing.JScrollBar;
import javax.swing.border.Border;

public class Window {

	//window areas
	private JFrame mainFrame;

	private JPanel canvasPanel;
	private JPanel tileLibraryPanel;

	//drawing canvases
	private TileLibraryCanvas tileLibraryCanvas;
	private MapCanvas mapCanvas;

	//menubar
	private JMenuBar menuBar;
	private JMenu fileButton;

	//borders
	Border tileLibraryBorder;
	Border canvasAreaBorder;



	public Window() {

		//initializng the frame and inner panels
		mainFrame = new JFrame("Map Editor");
		canvasPanel = new JPanel();
		tileLibraryPanel = new JPanel();

		//initializing the canvases
		tileLibraryCanvas = new TileLibraryCanvas();
		mapCanvas = new MapCanvas();

		//initializing menu bar and items
		menuBar = new JMenuBar();
		fileButton = new JMenu("File");

		//adding the menubar to the frame
		mainFrame.setJMenuBar(menuBar);

		//adding the filebutton to the menu bar
		menuBar.add(fileButton);

		//creating borders
		Border tileLibraryBorder = BorderFactory.createTitledBorder("Tile Library");
		Border canvasAreaBorder = BorderFactory.createTitledBorder("Map");

		//setting panel sizes
		canvasPanel.setPreferredSize(new Dimension(600, 600));
		tileLibraryPanel.setPreferredSize(new Dimension(200, 600));

		//adding things to panels
		canvasPanel.setBorder(canvasAreaBorder);
		tileLibraryPanel.setBorder(tileLibraryBorder);

		canvasPanel.add(mapCanvas);
		tileLibraryPanel.add(tileLibraryCanvas);

		//setting layout and adding panels to frame
		mainFrame.getContentPane().setLayout(new BorderLayout());
		mainFrame.getContentPane().add(canvasPanel, BorderLayout.CENTER);
		mainFrame.getContentPane().add(tileLibraryPanel, BorderLayout.WEST);


		//setting various attributes
		mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		mainFrame.setPreferredSize(new Dimension(800, 600));
		mainFrame.setResizable(false);
		mainFrame.pack();
		mainFrame.setVisible(true);

	}

}

And here are the two canvases, they are identical basically

package userInterface;

import java.awt.Canvas;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferStrategy;

public class MapCanvas extends Canvas {

	private static final long serialVersionUID = 5075462132756421808L;

	BufferStrategy bufferStrategy;

	public MapCanvas() {

		setVisible(true);
		setIgnoreRepaint(true);

		createBufferStrategy(2);
		bufferStrategy = getBufferStrategy();

	}


	public void render() { 

		Graphics2D g = (Graphics2D) bufferStrategy.getDrawGraphics();

		g.setColor(Color.GREEN);
		g.fillRect(0, 0, 90, 50);   
	}
}

package userInterface;

import java.awt.Canvas;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferStrategy;

public class TileLibraryCanvas extends Canvas {


	BufferStrategy bufferStrategy;
	
	public TileLibraryCanvas() {

		setVisible(true);
		setIgnoreRepaint(true);
		
		createBufferStrategy(2);
		bufferStrategy = getBufferStrategy();

	}

	public void render() { 

		Graphics2D g = (Graphics2D) bufferStrategy.getDrawGraphics();
		
		g.setColor(Color.GREEN);
		g.fillRect(0, 0, 90, 50);   
	} 
}

Heres the error:

Exception in thread “main” java.lang.IllegalStateException: Component must have a valid peer
at java.awt.Component$FlipBufferStrategy.createBuffers(Unknown Source)
at java.awt.Component$FlipBufferStrategy.(Unknown Source)
at java.awt.Component$FlipSubRegionBufferStrategy.(Unknown Source)
at java.awt.Component.createBufferStrategy(Unknown Source)
at java.awt.Canvas.createBufferStrategy(Unknown Source)
at java.awt.Component.createBufferStrategy(Unknown Source)
at java.awt.Canvas.createBufferStrategy(Unknown Source)
at userInterface.TileLibraryCanvas.(TileLibraryCanvas.java:19)
at userInterface.Window.(Window.java:48)
at userInterface.Driver.main(Driver.java:7)

I want to note that if I pass 1 to createBufferStrategy() it compiles and runs, but the canvases are not painted so Im not even sure if theyre there.

jparril1 · April 7, 2011, 1:29am

Ok so I found out that I was trying to get the buffer before the canvas was added to the JPanel. I read that If I add this to addNotify(), it will only happen when its added to the panel. The error is gone but now I cant even see my panels at all. Whats going on? Building the Frame and Panel and Canvas layer is confusing me and I think I must be missing something.

Heres the new code:

package userInterface;

import java.awt.BorderLayout;
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.GridLayout;
import java.awt.MenuBar;

import javax.swing.BorderFactory;
import javax.swing.JFrame;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JPanel;
import javax.swing.JScrollBar;
import javax.swing.border.Border;

public class Window {

	//window areas
	private JFrame mainFrame;

	private JPanel canvasPanel;
	private JPanel tileLibraryPanel;

	//drawing canvases
	private TileLibraryCanvas tileLibraryCanvas;
	private MapCanvas mapCanvas;

	//menubar
	private JMenuBar menuBar;
	private JMenu fileButton;

	//borders
	Border tileLibraryBorder;
	Border canvasAreaBorder;



	public Window() {

		//initializng the frame and inner panels
		mainFrame = new JFrame("Map Editor");
		canvasPanel = new JPanel();
		tileLibraryPanel = new JPanel();

		//initializing the canvases
		tileLibraryCanvas = new TileLibraryCanvas();
		mapCanvas = new MapCanvas();

		//initializing menu bar and items
		menuBar = new JMenuBar();
		fileButton = new JMenu("File");

		//adding the menubar to the frame
		mainFrame.setJMenuBar(menuBar);

		//adding the filebutton to the menu bar
		menuBar.add(fileButton);

		//creating borders
		Border tileLibraryBorder = BorderFactory.createTitledBorder("Tile Library");
		Border canvasAreaBorder = BorderFactory.createTitledBorder("Map");

		//setting panel sizes
		canvasPanel.setPreferredSize(new Dimension(600, 600));
		tileLibraryPanel.setPreferredSize(new Dimension(200, 600));

		//adding things to panels
		canvasPanel.setBorder(canvasAreaBorder);
		tileLibraryPanel.setBorder(tileLibraryBorder);

		canvasPanel.add(mapCanvas);
		tileLibraryPanel.add(tileLibraryCanvas);

		//setting layout and adding panels to frame
		mainFrame.getContentPane().setLayout(new BorderLayout());
		mainFrame.getContentPane().add(canvasPanel, BorderLayout.CENTER);
		mainFrame.getContentPane().add(tileLibraryPanel, BorderLayout.WEST);


		//setting various attributes
		mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		mainFrame.setPreferredSize(new Dimension(800, 600));
		mainFrame.setResizable(false);
		mainFrame.setIgnoreRepaint(true);
		mainFrame.pack();
		mainFrame.setVisible(true);

	}

}

package userInterface;

import java.awt.Canvas;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferStrategy;

public class TileLibraryCanvas extends Canvas {


	BufferStrategy bufferStrategy;

	public TileLibraryCanvas() {

		setVisible(true);
		setIgnoreRepaint(true);


	}

	public void render() { 

		Graphics2D g = (Graphics2D) bufferStrategy.getDrawGraphics();

		g.setColor(Color.GREEN);
		g.fillRect(0, 0, 90, 50);

		g.dispose();
		bufferStrategy.show();
	} 

	public void addNotify() {

		super.addNotify();

		createBufferStrategy(2);
		bufferStrategy = getBufferStrategy();
	}
}

package userInterface;

import java.awt.Canvas;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferStrategy;

public class MapCanvas extends Canvas {

	private static final long serialVersionUID = 5075462132756421808L;

	BufferStrategy bufferStrategy;

	public MapCanvas() {

		setVisible(true);
		setIgnoreRepaint(true);


	}


	public void render() { 

		Graphics2D g = (Graphics2D) bufferStrategy.getDrawGraphics();

		g.setColor(Color.GREEN);
		g.fillRect(0, 0, 90, 50);   
		
		g.dispose();
		bufferStrategy.show();
	}
	
	public void addNotify() {

		super.addNotify();

		createBufferStrategy(2);
		bufferStrategy = getBufferStrategy();
	}
}

ra4king · April 7, 2011, 1:39am

You were getting that IllegalStateException because you need to call mainFrame.setVisible(true) before creating the BufferStrategy.

EDIT: Putting “createBufferStrategy(2)” in addNotify() works too

Also, you can completely avoid using JPanel here at all. I don’t understand why you need to add each Canvas to a JPanel when adding them directly to the JFrame works too. Also, you don’t need to call “getContentPane()” because that is done automatically for you for the “add()” and “setLayout()” methods.


...
mainFrame.add(mapCanvas, BorderLayout.CENTER);
mainFrame.add(tileLibraryCanvas, BorderLayout.WEST);
...

jparril1 · April 7, 2011, 1:54am

ra4king:

You were getting that IllegalStateException because you need to call mainFrame.setVisible(true) before creating the BufferStrategy.

EDIT: Putting “createBufferStrategy(2)” in addNotify() works too

Also, you can completely avoid using JPanel here at all. I don’t understand why you need to add each Canvas to a JPanel when adding them directly to the JFrame works too. Also, you don’t need to call “getContentPane()” because that is done automatically for you for the “add()” and “setLayout()” methods.
...
mainFrame.add(mapCanvas, BorderLayout.CENTER);
mainFrame.add(tileLibraryCanvas, BorderLayout.WEST);
...

Thanks! Well I was using JPanels as a way to separate the frame into 2 sections, one for the map and one for the tile selection. If I just added the canvases directly to the JFrame, how would I go about keeping them on their own side of the frame? The idea was to have about 1/3 of the frame be the tiles library and the rest to be the actual area to drop the tiles.

Also, even when I got rid of the error and stopped getting the contentpane, its still broken. Before I did anything with the canvases I could at least see my panels and borders, now my frame is basically just blank entirely, its actually glitched and showing a view of whats on my desktop.

ra4king · April 7, 2011, 2:11am

If it’s showing an image of your desktop, that means the program hung

EDIT: Canvas will be layed out just like JPanel and any other class that extends Component.

Couple things I also noticed looking through the code:
-You don’t need to call setVisible(true) and setIgnoreRepaint(true) in your canvases because its already been done to the frame.
-You need to follow this design when using BufferStrategy (Scroll down to the code section).

Also, who calls render() or do you have an external game loop?

jparril1 · April 7, 2011, 2:55am

thanks ra4king, Im gonna need to look over this a bit more. It wasnt showing my desktop before, must be something I messed with. I even commented out the canvases to try to get it to work the way it used to, just with the jpanels, but no luck. If you have any ideas let me know. If not, Ill be picking at this for a while until I get it. Thanks again!

I think I might take as much swing out of this project as possible, and do what you said. I guess I can just size the canvases appropriately and just put them in the JFrame, avoiding the panels completely.