Page 1 of 1

Step-by-Step JAVA games (Part 1) Creating a video demo JPanel (games) Rate Topic: ***** 4 Votes

#1 WolfCoder  Icon User is offline

  • Isn't a volcano just an angry hill?
  • member icon


Reputation: 783
  • View blog
  • Posts: 7,610
  • Joined: 05-May 05

Post icon  Posted 07 January 2006 - 12:17 AM

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:

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:

<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:

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.

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):

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:

public class DemoPanel extends JPanel
{



This defines a new class that extends JPanel, or takes all of the stuff from JPanel.

void DemoPanel()
{
	// Does nothing here
}



Is usually the constructor, but we don't need it in our Applet.

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.

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:

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.

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.

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.

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.

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:

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());
	}
}



private int linePos = 0; // Line's X value
private int lineDir = 1; // Line's direction



These are those line status variables

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

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:

if(linePos > 256 || linePos < 0)



Then:

lineDir = -lineDir;



Reverse the line direction, and since:

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:

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:

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.

Is This A Good Question/Topic? 2
  • +

Replies To: Step-by-Step JAVA games (Part 1)

#2 Jessehk  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 10
  • View blog
  • Posts: 24
  • Joined: 06-January 06

Posted 07 January 2006 - 09:22 PM

I don't know Java, but you might wan't to write proper HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
     <head>
          <title>Java Applet Tutorial</title>
     </head>

     <body>
          <applet src="whatever source is" width="200" height="200">
          </applet>
     </body>
</html>



This post has been edited by Jessehk: 07 January 2006 - 09:22 PM

Was This Post Helpful? 0
  • +
  • -

#3 WolfCoder  Icon User is offline

  • Isn't a volcano just an angry hill?
  • member icon


Reputation: 783
  • View blog
  • Posts: 7,610
  • Joined: 05-May 05

Post icon  Posted 07 January 2006 - 09:24 PM

That HTML file was studio-generated, I didn't feel like writing a real page, it's just a test page.
Was This Post Helpful? 0
  • +
  • -

#4 Jessehk  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 10
  • View blog
  • Posts: 24
  • Joined: 06-January 06

Posted 07 January 2006 - 09:46 PM

WolfCoder, on 7 Jan, 2006 - 10:21 PM, said:

That HTML file was studio-generated, I didn't feel like writing a real page, it's just a test page.

But when you write a tutorial, you become the role-model.
Somebody who has never written HTML before will learn bad habits.
Was This Post Helpful? 0
  • +
  • -

#5 WolfCoder  Icon User is offline

  • Isn't a volcano just an angry hill?
  • member icon


Reputation: 783
  • View blog
  • Posts: 7,610
  • Joined: 05-May 05

Post icon  Posted 08 January 2006 - 02:15 PM

I'm not concerned, that's where you come in, i'm happy as long as the JAVA code works.

I'm too lazy to write a real HTML page, I just use what the studio gave me to test the Applet out in.
Was This Post Helpful? 0
  • +
  • -

#6 zidane1845  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 27-July 07

Posted 18 September 2007 - 06:53 PM

hey thanks...will give this a shot
Was This Post Helpful? 0
  • +
  • -

#7 Chopster  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 134
  • Joined: 29-March 08

Posted 05 May 2008 - 07:30 AM

Very nice tutorial thanks alot m8!
Was This Post Helpful? 0
  • +
  • -

#8 bacNupe10  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 11-August 08

Posted 15 April 2009 - 08:35 PM

:^: Good tutorial Bruh!!!!
Was This Post Helpful? 0
  • +
  • -

#9 gauravnavgire  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 29-September 09

Posted 29 September 2009 - 03:07 AM

Thank you!!!
I really needed this kind of tutorial to start....
Was This Post Helpful? 0
  • +
  • -

#10 Guest_J*


Reputation:

Posted 26 August 2010 - 01:22 AM

for(int index = 0;index < 1000000;index++){}



What about sleep wouldn't it be better?
Was This Post Helpful? 0

#11 macosxnerd101  Icon User is online

  • Self-Trained Economist
  • member icon




Reputation: 10437
  • View blog
  • Posts: 38,651
  • Joined: 27-December 08

Posted 26 August 2010 - 06:35 AM

No, as Swing isn't Thread-safe. A Swing Timer, however, would be a more viable option.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1