Alright! This is gonna be long so listen up.
Some basic knowledge of JAVA is needed, but I explain alot of stuff, so don't worry
A video game programm is typically layed out like this:
->Init
->Main Loop
->Game Exit
But for java, it's a little different, but simillar. We need a way to process a game frame by frame and display it to the screen. Obviously, you're going to need an Applet because JAVA games are usually Applets that are put into HTML pages.
An Applet is a graphical JAVA application that is set to run in browsers for easy and quick access. To view an Applet, a web page is needed.
For whatever JAVA creation program you are using, it may be different. Here is the base code, (the hello world) of an Applet:
CODE
import java.awt.event.*; // Use events
import java.awt.*; // Use graphics
import java.applet.*; // Use applets
import javax.swing.*; // Use swing stuff (GUI)
import java.util.*; // Use util
public class Tutorial extends JApplet
{
public void init()
{
setSize(256,256);
}
}
And here is the web page code (in HTML) needed to view the Applet:
CODE
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="000000">
<CENTER>
<APPLET
code = "Tutorial.class"
width = "256"
height = "256"
>
</APPLET>
</CENTER>
</BODY>
</HTML>
Now compile and run the Application, you get a blank applet of 256*256 pixels! Here is what happened:
CODE
public class Tutorial extends JApplet
{
Simply creates a main class as an entry point of the program, and is created based on an JApplet using the extends keyword. It gets all the functions a JApplet object has plus our own.
CODE
public void init()
{
setSize(256,256);
}
setSize is a method from JApplet that we can use because of the extended keyword. It simply sets the size (in pixels) of the applet window. Use any size you need here
Next, we need some form of smooth animation... For that, we need a JPanel. Consider the following class (nested in the current code):
CODE
public class Tutorial extends JApplet
{
public class DemoPanel extends JPanel
{
void DemoPanel()
{
// Does nothing here
}
public void paintComponent(Graphics page)
{
super.paintComponent(page);
repaint(); // Recursivly keeps calling the paint function
// This way, it begins a new frame, and then another.
}
}
public void init()
{
setSize(256,256);
getContentPane().add(new DemoPanel()); // Add the video panel
}
}
Compile and run it. No change? But there was one, let me explain:
CODE
public class DemoPanel extends JPanel
{
This defines a new class that extends JPanel, or takes all of the stuff from JPanel.
CODE
void DemoPanel()
{
// Does nothing here
}
Is usually the constructor, but we don't need it in our Applet.
CODE
public void paintComponent(Graphics page)
{
super.paintComponent(page);
repaint(); // Recursivly keeps calling the paint function
// This way, it begins a new frame, and then another.
}
A JPanel has a paintComponent which is simillar to a paint method for an Applet. The "super.paintComponent(page);" is needed for the repaint function to work. This allows the applet to update itself constantly which is what we need. Do you want to see some action now? I will now show you how to write code for something like this.
CODE
public class Tutorial extends JApplet
{
public class DemoPanel extends JPanel
{
private int blueValue = 0; // Starts out as zero
void DemoPanel()
{
// Does nothing here
}
public void paintComponent(Graphics page)
{
super.paintComponent(page);
Color currentColor = new Color(0,0,blueValue); // Updates currentColor with the new color
setBackground(currentColor); // Sets the background to the new color
blueValue++;
if(blueValue > 255) // If blueValue is greater than maximum, reset it
blueValue = 0;
repaint();
}
}
public void init()
{
setSize(256,256);
getContentPane().add(new DemoPanel());
}
}
When run, the Applet flashes blue! Let me explain what just happened:
CODE
private int blueValue = 0; // Starts out as zero
We need a variable to store the blue channel value for the background color. A private class variable is perfect.
CODE
Color currentColor = new Color(0,0,blueValue); // Updates currentColor with the new color
A Color class stores a color, and we can create our own by using the Color constructor. It looks like this:
Color(int red,int green,int blue); // Where each is a value from 0-255
I simply have created a new color with our variable as the blue channel.
CODE
setBackground(currentColor); // Sets the background to the new color
Is a method from the JPanel class that we got using the extends keyword. It, err..., sets the background color of the Applet. We simply provide it with our new color.
CODE
blueValue++;
Since the paintComponent is called repeatedly through infinite looping (repaint), we only need to increase the value by 1 each frame. Each frame, it runs our set of instructions.
CODE
if(blueValue > 255) // If blueValue is greater than maximum, reset it
blueValue = 0;
Errors happen if we exceed the 255 limit when creating a new color. We need to make sure this doesn't happen before the new frame is called.
Now, to finish off my Tutorial, part 1, let's do some simple logic.
Let's make a red vertical line move back and forth, bouncing of the edges of our application. If you are already guessing how to do this, you might think of using two variables, one for the current position, and the other for line direction. And in the loop, it checks where the line is going and if it's out of bounds. Here:
CODE
public class Tutorial extends JApplet
{
public class DemoPanel extends JPanel
{
private int linePos = 0; // Line's X value
private int lineDir = 1; // Line's direction
void DemoPanel()
{
// Does nothing here
}
public void paintComponent(Graphics page)
{
super.paintComponent(page);
page.setColor(Color.red); // Use the stock color, red
page.drawLine(linePos,0,linePos,256); // From (linePos,0) to (linePos,256)
linePos += lineDir;
if(linePos > 256 || linePos < 0)
lineDir = -lineDir;
repaint();
}
}
public void init()
{
setSize(256,256);
getContentPane().add(new DemoPanel());
}
}
CODE
private int linePos = 0; // Line's X value
private int lineDir = 1; // Line's direction
These are those line status variables
CODE
page.setColor(Color.red); // Use the stock color, red
page.drawLine(linePos,0,linePos,256); // From (linePos,0) to (linePos,256)
This draws the line
CODE
linePos += lineDir;
if(linePos > 256 || linePos < 0)
lineDir = -lineDir;
And this performs the logic. See, if the line is out of bounds using this if statement:
CODE
if(linePos > 256 || linePos < 0)
Then:
CODE
lineDir = -lineDir;
Reverse the line direction, and since:
CODE
linePos += lineDir;
Is being called every frame, it will work.
Compile, and run this Applet. Woah! It moves too fast to be seen clearly! That is where we need to slow the Applet down. Add the final bit of code:
CODE
public void paintComponent(Graphics page)
{
super.paintComponent(page);
page.setColor(Color.red); // Use the stock color, red
page.drawLine(linePos,0,linePos,256); // From (linePos,0) to (linePos,256)
linePos += lineDir;
if(linePos > 256 || linePos < 0)
lineDir = -lineDir;
for(int index = 0;index < 1000000;index++){}
repaint();
}
This line:
CODE
for(int index = 0;index < 1000000;index++){}
Simply causes the Applet to be Idle for a really quick moment. Try running the Applet now. The line move slow enough.
Try playing with various effects like the line bouncing back and forth. If the Applet is too slow, simply reduce the large number, 1000000, until the Applet runs at the speed you need.
When I have more time, I will write part 2 which will show you how to add mouse input, and how to write very simple tracking AI programs that follow the mouse.
Step-by-Step JAVA games (Part 1), Creating a video demo JPanel (games)
6 Jan, 2006 - 11:17 PM
| 