Image Editor Help

To help make it easier for you to make an interesting game, I put together a little tool that allows you to create arrays of small images graphically.

It should also be noted that as of my writing of this, the editor is certainly not at the point of a commercial product. It is a bit rough, but when you do get to the point of trying to make the graphics look nice it will be easier to use than hand coding in the graphics for it.


The image editor has a fairly simple interface that is broken into three parts. The left most part selects the color that you are currently drawing with. This has a large panel that is a JColorChooser for picking the RGB. It also has a slider at the top to pick the alpha value. Alpha controls transparency. When it is all the way to the right there is no transparency. When it is all the way to the left, the pixels will be completely transparent. In between you get partial transparency. You can play with this some to see what it produces.

The central display is the image that you are editing. The has a checkered background of gray and white blocks so that you can tell when things are transparent because that texture will show through. Left clicking on this area will set the pixel you are on to the current selected ARGB value. Dragging with a left click will color over an entire square. Right cliping is like in ink dropper that will capture the color of that pixel and set the current color to it.

On the right hand side of the display you get a region that allows you to select from multiple images. This editor always writes and saves 2D arrays of images. They don't have to be square arrays. The idea is that you can have multiple animations. The first index selects which animation and the second index is the frame of the animation. In the representation, the first index corresponds to a row and the second one corresponds to a column. There is a translucent red square that will be on the image you are currently editing. The images are shows as minatures (actually close to real size) with a yellow box around them. Clicking on one sets it to be the current image.

In addition to the three areas, there are two menus. The File menu has fairly standard options. When you first open the program there are no images so you will either need to select new or load to get some images. If you use new, it will ask you for the size you want the images to be. It will create one image.

The Edit menu has standard options in copy and paste. After that are more specific options for this application. The "Set Image Size" option is fairly self explanitory. It only sets the size on the current image. The "Add Rows" options allows you to add in extra rows so increase the length of the first index of the array. The "Add Columns" option will add columns to the row of the currently selected image. All images are added at the end of the arrays, they are not inserted. After that are options to remove single images and entire rows. The application will not allow empty rows, nor can you go below one row.

To use the images you create in your code, the ImageEditor class has a static method with the signature BufferedImage[][] readImageArray2D(String fileName) throws IOException. You can use this by putting something in your getImage function for a class that looks like this

if(img==null) {

try {

img=ImageEditor.readImageArray2D("whateveryoucallyourimagefile.pic");

} catch(IOException e) {

System.out.println("Error occured reading the image file.");
e.printStackTrace();
return null;

}

}

Note that for this to work, img needs to be a 2D array of BufferedImages and you will have to return one element of that.

Using the ImageEditor is easier than using the ScreenEditor because it doesn't require any command line arguments. Basically, if you have the JAR file with it in it just use java -cp Whatever.jar ImageEditor. You won't even need the ":." because it's not going to be looking up any of your classes.