GAME DEVELOPMENT TUTORIAL: DAY 1-11: Threads and Graphics

Welcome to the final lesson of Unit 1 of our Game Development Tutorial Series.
If you have stuck with me this far, you have taken a small step that will become a giant leap for your game development career.

Before we continue, I'd like to ask you once more to support Kilobolt! These lessons are offered to you free-of-charge, but it costs us real money from our pockets to maintain this website and our Dropbox. 

So if you could support us by:

1. Downloading TUMBL+ from the Play Store
2. Sending us a little donation
3. Liking us on Facebook
4. Linking to us on your blog or website

It would help us a lot! Really!

Or if you are unable to do any of these things, just tell your friends about us or put up a link to our site on your website, blog, or whatever! 

Thank you so much for being a Kilobolt supporter! 
We will continue to deliver high-quality content to you, and hopefully you guys will learn a lot from us!

Let's begin!

Lesson #1-21: Threads

So far in Java, we have followed a simple and general rule: when you press the Run button, the program runs line by line from top to bottom (unless it is looping).

When you start game development, however, you may realize that you require simultaneous processes for your game to work.

This is where a Thread comes in handy.

As the word thread may suggest, a thread is a single, lightweight process. When you have multiple threads, these processes are carried out simultaneously.

How do we create a thread?

The method is similar to how we would create a random object.

To create a random object, we used the code:

---

Random random = new Random();

---

To create a Thread, we do the following:

---

Thread thread = new Thread();

---

This creates a new Thread object called "thread."

Unlike random objects, however, creation of thread objects is a bit more lengthy process.

Threads require a built-in "run()" method, and we will incorporate it directly into the statement above. 

---

Example 1: Threads

1. We begin like so, adding braces to the end of the statement:

Thread thread = new Thread(){ };


2. These braces will contain the run method (which is, again, REQUIRED for a thread). I know this is new for you guys, so just try to apply your knowledge of hierarchy in code when you examine this next part:

Thread thread = new Thread(){ 
   public void run () {

   }

};


3. When you want this thread to start, you would type a built-in Java function (meaning that it is already defined by the language when used with a thread: .start();

thread.start();


4. When thread is started by .start(); it looks for the thread's run method and begins to run the lines of code there. At the moment, it is empty, so we will add a few lines of code to the run method:

Thread thread = new Thread(){ 
   public void run () {
      for (int i = 0; i < 10; i += 2){
         System.out.println("hello");
      }
   }

 }; 


5. And now when we execute the thread with: thread.start(); we will see:

Output:
hello
hello
hello
hello
hello


6. Now threads would be useless by themselves, so we will create another one. Here is what the full code will look like! To run this thread on your own eclipse, create a Class file called ThreadDemo and copy and paste.

 public class ThreadDemo {
    public static void main(String args[]) {

        // This is the first block of code
        Thread thread = new Thread() {
            public void run() {
                for (int i = 0; i < 10; i += 2) {
                    System.out.println("hello this is thread one");
                }
            }

        };

        // This is the second block of code
        Thread threadTwo = new Thread() {
            public void run() {
                for (int i = 0; i < 10; i += 2) {
                    System.out.println("hello this is thread two");
                }
            }

        };

        // These two statements are in the main method and begin the two
        // threads.
        // This is the third block of code
        thread.start();

        // This is the fourth block of code
        threadTwo.start();
    }

} 

Let's now discuss step by step what happens when you run this code. Of course, as with all Java Programs, when this class is run, it will look for the main method. The main method contains 4 main blocks of code (indicated above with comments //).

The first one creates a Thread called thread and defines its run method. The second one creates a thread called threadTwo and defines its run method. The third one starts Thread thread, and the fourth one starts Thread threadTwo.


Output:
hello this is thread one
hello this is thread one
hello this is thread one
hello this is thread one
hello this is thread one
hello this is thread two
hello this is thread two
hello this is thread two
hello this is thread two
hello this is thread two

Hold on. I mentioned that a thread allows simultaneous processes. Why didn't it alternate between thread one and thread two? 


We will discuss this in Unit 2. Stay tuned! :)

Lesson #1-22: Graphics

Nobody likes programs running on a shell like DOS (on second thought, I know a few people who enjoy showing off on Command Line). Most people like GUI's (graphical user interface) that they can interact with. Functionality is important, but interfaces are sometimes even more important.

We now begin our discussion of graphics. There is so much to talk about in graphics, so we will just touch upon a few statements that allow us to display graphics.

Note*: When I use the word graphics, I am referring to a digital image and not to game graphics, so keep that in mind!

In this lesson, we are first going to create a window, which can display images, and then try displaying some graphics on that.

To start, create a class called GraphicsDemo in Eclipse. This can be done by right clicking on the src folder of a project (in the package explorer to the left), selecting New >> Class, and typing GraphicsDemo for the name. You should then get this:

---

public class GraphicsDemo{

}

---

We now need to apply what we learned about Inheritance in the previous lesson.
To display images, we must extend the superclass JFrame like so:

---

public class GraphicsDemo extends JFrame{

} 

---

Eclipse will give you an error saying that JFrame cannot be resolved. So you have to import it.

Shortcut: Ctrl + Shift + O
Alternate: Put your mouse over "JFrame," which will have a red underline, and import JFrame like so:

---

You will now see:
import javax.swing.JFrame;

public class GraphicsDemo extends JFrame{ 

} 

---

One of the first things we talked about in Unit 1 for Game Development is that classes are blueprints for objects. We never really discussed how this works. 

In this lesson, we will use the GraphicsDemo class to create an object, much like we created a Thread object above.

To do so, we add a constructor to our class. A constructor is basically a set of instructions for creating an object:

---

 import javax.swing.JFrame;

public class GraphicsDemo extends JFrame {

    // The constructor follows:
    public GraphicsDemo() {

    }

    // All classes need a main method, so we create that here too!
    public static void main(String args[]) {
        // We will create a GraphicsDemo object in the main method like so:
        // This should be familar, as we used this to create Random objects and
        // Thread objects:
        GraphicsDemo demo = new GraphicsDemo();

    }

} 

---

The above code, when executed, will look for the main method. This main method contains one statement:
      GraphicsDemo demo = new GraphicsDemo();

When this statement executes, you will be creating a GraphicsDemo object using the constructor (so named because it is used for construction of objects) of the GraphicsDemo class: and the name of this object will be demo.

At the moment, the constructor is empty:
   public GraphicsDemo(){
      


   } 

So when the GraphicsDemo object called demo is created, it will have no function. So we proceed by adding a few built-in statements that belong to the JFrame superclass (we can utilize these because we imported JFrame in the first line of code).

public GraphicsDemo(){
   setTitle("GraphicsDemo with Kilobolt");
   setSize(800,480);
   setVisible(true);
   setDefaultCloseOperation(EXIT_ON_CLOSE);
}


The four statements within the constructor are self-explanatory. setTitle sets the title of the window when it is opened. The second statement setSize sets the resolution in pixels of the window. setVisible ensures that this window is visible when you create it. The final statement just allows the window to close properly and terminate the program.

We now add the constructor back into place:

---

 import javax.swing.JFrame;

public class GraphicsDemo extends JFrame {

    // The constructor follows:
    public GraphicsDemo() {
        setTitle("GraphicsDemo with Kilobolt");
        setSize(800, 480);
        setVisible(true);
        setDefaultCloseOperation(EXIT_ON_CLOSE);

    }

    // All classes need a main method, so we create that here too!
    public static void main(String args[]) {
        // We will create a GraphicsDemo object in the main method like so:
        // This should be familar, as we used this to create Random objects and
        // Thread objects:
        GraphicsDemo demo = new GraphicsDemo();

    }

} 

---

Now if you run the code, you will see a window of size 800,480 (X,Y).

---

IMPORTANT! The origin (0,0) of the coordinate system on a monitor is the TOP LEFT not BOTTOM LEFT. This means that the Y values increase as you go down the screen!

---

To add images, we simply need to add one more method:

public void paint(Graphics g){

}


This method requires that you import Graphics, so...
Add import java.awt.Graphics; to the top of your code (remember that this just specifies to the compiler where it can find the Graphics class).

Now this paint method will draw whatever you ask it to draw on the window that you created. I will now teach you a few basic statements.

Note: The g. just denotes the fact that these statements (which are built-in methods of the Graphics class) are being executed on the object g. 

g.clearRect(int x, int y, int width, int height);  - Creates a filled rectangle with the current color (or default color if g.setColor() has not been called) with the top left corner at (0,0) with width witdh and height height.

g.setColor(Color c);      - Sets the current color of g as Color c.
g.drawString(String str, int x, int y);    - Draws whatever string (text) str at the point (x,y).
g.drawRect(int x, int y, int width, int height);    - Draws the outline of a rectangle beginning at (x,y) with width width and height height.

Let's add each of these to the paint method above.

---

 public void paint(Graphics g){

    //This sets the color of g as Black.
       g.setColor(Color.WHITE);

    //The first statement creates the background rectangle on which the others are drawn.
       g.fillRect(0,0,800,480);

    //This sets the color of g as Blue.
       g.setColor(Color.BLUE);

    //This will draw the outline of a Blue rectangle, as the color of g when this is called is Blue.
       g.drawRect(60, 200, 100, 250);

    //This sets the color of g as Black.
       g.setColor(Color.BLACK);

    //This will display a black string.
       g.drawString("My name is James", 200, 400);
        
} 

---

We are using Color.BLUE and Color.Black from the Color superclass in the Java library, so we must import that too:

import java.awt.Color;

We add all this to the full class like below:

---

 import java.awt.Color;
import java.awt.Graphics;
import javax.swing.JFrame;

public class GraphicsDemo extends JFrame {

    // The constructor follows:
    public GraphicsDemo() {
        setTitle("GraphicsDemo with Kilobolt");
        setSize(800, 480);
        setVisible(true);
        setDefaultCloseOperation(EXIT_ON_CLOSE);

    }

    public void paint(Graphics g) {
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, 800, 480);
        g.setColor(Color.BLUE);
        g.drawRect(60, 200, 100, 250);
        g.setColor(Color.BLACK);
        g.drawString("My name is James", 200, 400);
    }

    // All classes need a main method, so we create that here too!
    public static void main(String args[]) {
        // We will create a GraphicsDemo object in the main method like so:
        // This should be familar, as we used this to create Random objects and
        // Thread objects:
        GraphicsDemo demo = new GraphicsDemo();

    }

} 

---

Running this results in:

And there, we have created our first "graphics."

Thank you so much for sticking with these tutorials! This concludes Unit 1. 
We've covered a lot of material, and I hope that this Unit was both informative and fun for you.

I hope to implement a slightly different style of teaching in Unit 2, where we will build our first game together. Please join me there!

And finally...

Go to Day 10: Inheritance, Interface

Go to Unit 2: Creating a Game