Java Graphics Engine Part 1

Java has a basic graphics engine which can be used to develop games or display pictures. It’s a bit tricky to get working so I’ll explain how it works. Java can display a window which is called a JFrame. Once we get a JFrame working we can attach useful things to the JFrame such as buttons or textboxes. One of the other things we can attach to a JFrame is a drawing surface. Based upon information in the computer’s memory the surface is drawn a certain way. At first it is just blank. But by changing the values in the memory upon which the engine draws the surface we can display a new picture. The picture is persistent until modified, meaning that although the computer displays the image again and again to us the image does not change until we change it. By changing the memory upon which the drawing is based at certain times we can change the image and simulate a moving picture creating basic animation. I will guide you through the process of getting a basic drawing surface working and will cover animation another time. We will be using the compiler environment Eclipse but you can use any compiler as long as it is set up properly.

Step 1: Begin a new project. In Eclipse click File – New – Java Project. Name the project MyCoolProgram and click Finish. (Remember Java is very case sensitive, so pay attention to the cases in this tutorial.) If your eclipse crashes after you click Finish just open it back up and the project will be there. I don’t know why mine does it, but I don’t seem to have trouble with it in WindowsXp, but I do in Linux. I think it has something to do with the default layouts not resetting after using the tutorials because it started after I was messing with them and using the tutorials.

Step 2: Adding a new Class. On the left hand side is the Package Explorer. Right click on the folder which says MyCoolProgram and click New – Class . Name the class MyCoolProgram and make sure the option which says “public static void main(String[] args) is unclicked since we are going to add this ourselves. Then click Finish.

Step 3: Writing the first class. The window for your first class is now open. Clear the text and enter the blue text below manually. Pasting from this site may not work as double quotes ” do not always paste correctly and end up as two single quotes like ‘ ‘. Other than that pasting is fine. Be careful how you type and check it carefully for spelling, capitalization and punctuation. Any error will prevent your program from working. After you have entered the text save the changes to your file.

 public class MyCoolProgram {
    public static void main(String[] args){
        AJFrame myjframe = new AJFrame();

Let me explain what we have done. Line by line.

The first line declares that we are making a publicly accessible class (meaning other classes can use it) called MyCoolProgram. The body of the class begins where the first brace { begins and ends at the last brace.

The second line is the first line of the body of the class. It declares a method. A method is a functional portion of your program. The method is also public. It is static, which means that it can be used without creating an object. The word “void” means that we will not be getting any value from the method after it is finished working. The parenthesis () means that we are passing information into the method. The word String, which must be capitalized tells the computer what sort (or type) of information we are passing into the method and the brackets [] tell the computer that the information is in the form of an array, which is a collection of multiple pieces of information in a single unit. The word “args” is what we want to call the information once it is inside of our method. The next brace begins the body of our method and the body ends at the next brace.

The third line tells the computer that we want to create a virtual object which we will control. The first word “AJFrame” tells the computer which kind (or type) of object it is. The word “myjframe” is the name we will use for the object. The equals sign means we will be making a copy of something. The word new means we are going to create a new object rather than making a copy of something that already exists. The word AJFrame again means that we will be making a copy from the AJFrame class which is a blueprint of the object we will be making. The blank parenthesis means we will be using the AJFrame’s “constructor” method when we make a copy.

Right now the third line will give us an error because AJFrame does not exist. We are going to make it. Let me explain. AFrame is a basic java window. In another section of the program we are going to create a copy of JFrame that we are going to call AJFrame which we will modified to be a bit different than the standard JFrame. This third line of code is written in anticipation of that so that once the custom JFrame is ready the computer will make an object based on the new version of JFrame that we will make.

Step 4: Repeat step 2, but call this class AJFrame remembering that java is very case sensitive.

Step 5: Writing the AJFrame class. Clear the old text that the computer generated for you and enter the blue text below.

import java.awt.BorderLayout;
import javax.swing.*;

public class AJFrame extends JFrame{{
    ASurface mysurface = new ASurface();
    this.setTitle(“My JFrame”);
    this.add(mysurface, BorderLayout.CENTER);

The first and second lines import classes provided in the basic java set into our class so that we can use them. The Layout thing makes it easier to line things up in the window we are going to create and the swing thing allows us to make a basic JFrame.

The next line declares a public class called AJFrame, but the import part is the “extends JFrame” which means that our class called AJFrame will be a copy of the standard JFrame that we will customize. Two braces are necessary after that and you will have two at the end.

The next line creates an object called mysurface based upon a class which we will later write called ASurface. This will be the surface upon which the computer draws.

The next line means set our JFrame, which we are currently in and customizing, the one called AJFrame, to a size of 300,300. We continue settings options like this until the last line of the body which says to add the object mysurface using a borderlayout using the center method. Since the mysurface object has not been created because ASurface class has not been created you will get an error on line 5 and probably 10 as well.

Step 6. Create the last class. Repeat step 2 but name the class ASurface and clear the automatically generated text from the window after the program make the class for you.

Step 7. Writing the last class. Make sure the text is clear and type this..

import java.awt.*;
import java.awt.geom.*;
import javax.swing.*;

public class ASurface extends JComponent{
public void paint(Graphics g)
Graphics2D mygraphicalcontroller = (Graphics2D)g;
mygraphicalcontroller.setStroke(new BasicStroke(2));
mygraphicalcontroller.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
Shape myline = new Line2D.Float(25,25, 25, 100);

The explanation is complex, but the first three lines are our imports.

The next line is declaring a class called ASurface which is a copy of a basic JComponent which can be added to a JFrame just like a button or whatever could be.

The next line declares a paint method. Every time the surface paints or repaints, which happens every time the image needs to be change, updated, or refreshed all the code within the paint method will re-execute. All surfaces have this method, but since we are being specific about how ours will work it will be different than the standard surface.  The phrase “Graphics g” means that we are passing information into this method which is of the Graphics kind (or type) and it will be called g in the method which we are writing. This is important.

The next line creates an object of the Graphics2D kind which is called mygraphicalcontroller and its a copy of a standard Graphics2D kind but with g modifying it.  This is also important.

The next line sets up a standard drawing stroke of 2 pixels.

The next line enables anti-aliasing which will make the image appear softer.

The next line sets up a basic drawing color .

The next line creates an object of the Shape kind called myline. It is a copy of a 2D line where the information about the line is in the format of a series of Floating numbers. We supply these numbers to the constructor so our line has a specific shape. It will start at the location 25,25 which is 25 units to the right and below the starting point of our surface (which is in the upper left hand corner). The line begins at unit 25 and continues to unit 100. The line has not been drawn yet, only defined.

Now the last line is the most important because we use the graphical controller object we created to draw our line.

We close the program with two braces.

Step 8: Running the program. Make certain you’ve saved all the classes recently by clicking File – Save All. Click the tab which shows which is the heart of your program. Now click Run – Run or just click the biggest red button with the arrow pointing to the right.

Tada. You’ve drawn a line.  The same graphical surface can be used to draw more lines, but the old ones will remain until you clear the screen. That will be in the next lesson. Then I will show you have to display pictures.

Leave a Reply