Next Tutorial
Posted on: 24-10-2012

Gravity Platformer Tutorial #1 : Setting up

In this tutorial I will be using the Slick2D framework for Java and will be developing in the IDE Eclipse. This tutorial will require basic knowledge of Object Oriented programming.
Links for Slick2D and Eclipse can be found at the bottom of this post.

Before we head off and start programming, lets first take a look at what we are going to create.

A common mistake is to delve into the programming without determing and writing down what you want to achieve.

So the first thing we are going to do is to determine a scope for our first milestone. What do we actually want to achieve with this game?

Here is some of the key features:
  • Tiled based platforming
  • Ability to shift gravity by 90 degrees at a time
  • Simple action combat with fantasy weapons

This leaves us plenty of room for additional gameplay elements, but we will get a crappy game if the basics don't feel right.

Now that we have a scope can we start programming already?

No we can't, but we can start by setting up a basic program that will draw something on our screen.

First step is to create our project in Eclipse, if you have never done this before, simply start up Eclipse and close the welcome screen. There should be a package explorer now, right click there and then create new Java Project.

Now comes the tricky part, setting up the project to use the LWJGLlibrary and the Slick2D framework.

  1. Right click on your project and click properties.

  2. Go to java build path and you should see the following screen:

  3. Click the add external jars button to point to the right jar files.
    If you don't have them yet, there is a download link at the bottom of this post. It is important that you leave the 2 jars in their respective folders, they have dependencies on the jars in that folder, so if you move them somewhere else it won't work.

  4. The next step is to tell LWJGL where the native files are for your operating system. First you expand the jwjgl.jar by click the small arrow next to it, then you click on the "native library location". Once you have this selected you want to click edit and point towards the folder that contains the native files.

    I use windows in this example so mine points towards the windows folder, there is also a folder for linux and macosx.

  5. All we have to do is confirm now and we have a project where we can use Slick2D and LWJGL!

Now that we have a project set up to be used, we are going to test this by creating a small testing class called "SetupTest".

  1. Start by right clicking on your project again, then new->class.

  2. Name this class SetupTest and click on Finish

  3. Now we have to extend the class from BasicGame:
    1. import org.newdawn.slick.BasicGame;
    3. public class SetupTest extends BasicGame {
    5. }
  4. Now you see that there is an error at SetupTest. You can resolve this by hovering of it and clicking add constructor.

  5. Something that looks like the following should be automatically added:
    1. public SetupTest(String title) {
    2. super(title);
    3. // TODO Auto-generated constructor stub
    4. }
  6. Now what, even more errors? Again, hover over but this time click on "add unimplemented methods" to add the methods that we inherited from the BasicGame class.

  7. We see three new methods being added. A render, init and update method.

    Something that we will learn later on is how to use these methods, but for now it is sufficient to know that the init method is called at the start of your game, the update and render are called on every frame. The update being used to update all the game properties (example: moving your character). The render is used to well, render the graphics on your screen, this function also has access to a object that allows us to do so.

  8. We also see that there are no more errors (yay!). But if we try to run the application (click the green "play" icon at the top) it still gives an error. This is because we still have to create method that starts the application. In Java this is the "main" function.
    1. public static void main(String args[]){
    3. }
  9. Now that we have that method, we can run it. But when we run it, nothing happens yet because we don't have anything started in the main.

    We have to create something called the "AppGameContainer". This is the container which will run our game.

    1. AppGameContainer app = new AppGameContainer(new SetupTest("Setup Test"));
  10. You might get a few errors again, first hover over AppGameContainer and click to import it, this will add the right class file to the import list. Next hover SetupTest and click "add throws declaration".

  11. Now that we have the container object, we only have 2 things left to do. Specify the dimension of the window and start the application.

    If we put that all together we get a main function like this:

    1. public static void main(String args[]) throws SlickException{
    2. AppGameContainer app = new AppGameContainer(new SetupTest("Setup Test"));
    4. app.setDisplayMode(400, 100, false);
    6. app.start();
    7. }

  12. If we try to run the application, we should see a small black screen with a fps counter in it. You can disable the fps counter by adding the line "app.setShowFPS(false);"

  13. Next up is adding an image, because I expect you to have a bit of OO programming experience I am not going to do this step by step but rather show you the end result explain the added lines.

    1. import org.newdawn.slick.AppGameContainer;
    2. import org.newdawn.slick.BasicGame;
    3. import org.newdawn.slick.GameContainer;
    4. import org.newdawn.slick.Graphics;
    5. import org.newdawn.slick.Image;
    6. import org.newdawn.slick.SlickException;
    8. public class SetupTest extends BasicGame {
    10. private Image testImage;
    12. public SetupTest(String title) {
    13. super(title);
    14. }
    16. public void init(GameContainer arg0) throws SlickException {
    17. testImage = new Image("data/img/test_image.png");
    18. }
    20. public void update(GameContainer arg0, int arg1) throws SlickException {
    22. }
    24. public void render(GameContainer arg0, Graphics arg1) throws SlickException {
    25. testImage.draw(200, 50);
    26. }
    28. public static void main(String args[]) throws SlickException {
    29. AppGameContainer app = new AppGameContainer(new SetupTest("Setup Test"));
    31. app.setDisplayMode(400, 100, false);
    32. app.setShowFPS(false);
    34. app.start();
    35. }
    37. }

  14. There is a couple of things I added here:
    • line 10: a variable for the image object
    • line 17: in our init we load our image from the folder "data/img/"
    • line 25: we draw the image in the render method by supplying it with an x and an y
    • line 32: I also included this line, but during development it is often nice to know how our game performs

    The "data" folder I used is located in the root of the project and the test image i used can be found here.

Closing notes

I hope this was a clear and informative tutorial, I highly suggest you play around a bit with the different methods of the Image and AppGameContainer class.

If you found this hard to follow you might want to follow some tutorials on Java because it is only going to get harder.


Categories: Game Design, Game Development, Java, Tutorial


Keith T said: (28-10-2012)
Thanks for the tutorial! Please don't stop with them! What are the odds you'll get deep into networking games?
Frums said: (28-10-2012)
For this particular game, probably not. But it is a topic that I want to cover at the some point in the future.
Jordan said: (28-10-2012)
Thanks a lot pal! I hope you continue producing these
R. Coleman said: (06-11-2012)
Informative tutorial. Your efforts are appreciated and I look forward to continuing each one of these.
Gaz said: (07-01-2013)
Thanks this was very helpful
condorcraft110 said: (15-04-2014)
C:UsersSmurf XD

Anyway, very helpful, thanks :P

What is the name of the website? (to counter the spam)