Lab

01 - Setting up Eclipse and Slick

Goals
Get you familiar with some of the basic func4ons of Eclipse. Show you how to set up an Eclipse project that works with the Slick library. Create and display a simple scene.

Resources
Files in \\oucs1278\CourseMaterials\Labs\Lab01. Note that from here on, I may refer to \\oucs1278\CourseMaterials as the shared folder. GeCng Slick set up : o hFp://slick.cokeandcode.com/wiki/doku.php?id=geCng_started_and_setup

Simple game tutorial: o hFp://slick.cokeandcode.com/wiki/doku.php?id=01_-_a_basic_slick_game

What to do
This lab walks you through the ini4al set up of a Java project in Eclipse. It will use the Slick library to give us a basic game loop and put some preFy pictures on screen.

Set up a place to work

1. OK, log in and open up a Windows Explorer window. 2. Create a working folder under C:\Users\user360\YourIni<alsOrName. This is a convenient place to put all your work in general and well come back here oWen. Create Labs and Labs/ Lab01 folders in here.

3. Run Eclipse its the purple orb icon in your task bar: 4. Eclipse will ask you to choose a Workspace folder. Point it at your Labs folder C:\Users \user360\YourIni<alsOrName\Labs. Close the welcome screen in Eclipse.

5. (FYI) If you go back to Windows Explorer, you may no4ce that Eclipse has created a .metadata folder in your Labs folder. This is where Eclipse keeps workspace specic informa4on.

Create a Java project in Eclipse

1. Now we need to create a new Java project. Choose File | New |Java Project. Call it Lab01 and hit Finish. 2. Next well set up some structure for the project. Right click on the Lab01 folder in the Package Explorer (see image), and choose New | Folder and call the new folder lib. Add another folder called data. The lib folder is where well put all the third party libraries we depend on (for example, the Slick library, and lwjgl, the library Slick is built on top of). The data folder is where well put all our assets images, fonts, sounds etc.

Hook up the Slick libraries

Unfortunately using any third party soWware usually requires a certain amount of hoop jumping. Theres a bit to do for Slick. Once youve done this a couple of 4mes its very easy to do. 1. Right click on the lib folder in the Package Explorer. Choose Import | General | File System. Click Browse and navigate to \\oucs1278\CourseMaterials\Resources\Slick\lib. Select slick.jar to add, and click on Finish. 2. The slick.jar library should have shown up in the lib folder. Right click on it and choose Build Path | Add to Build Path. Once youve done this, Eclipse will show up a new folder in the Package Explorer, called Referenced Libraries and you should also see slick.jar in here. 3. Right click on slick.jar (under Referenced Libraries), and choose Proper<es | Javadoc loca<on. Browse to \\oucs1278\CourseMaterials\Slick\javadoc. This tells Eclipse where the documenta4on for Slick is kept. Ive had some trouble geCng this working o a shared folder. If it doesnt work properly, this step is not cri4cal. 4. Slick uses the lwjgl.jar library. Repeat steps 1 and 2, except this 4me get the lwjgl.jar library from \\oucs1278\CourseMaterials\Resources\Slick\lib. Alterna4vely, you can drag and drop the lwjgl.jar library onto the lib folder this is the same as performing the Import command. 5. OK, were almost there. The lwjgl library relies on na4vely compiled libraries (.dll les under Windows) to access hardware graphics accelera4on. Right click on the lib folder, and choose

Import | General | Acrhive. Browse to \\oucs1278\CourseMaterials\Resources\Slick\lib \na<ves-win32.jar and add the all the les shown in the dialog window. 6. (Op4onal) To add support for Mac and Linux, repeat step 5 adding the na4ve Linux and Mac libraries - add all libraries in the relevant folders. 7. Under Referenced Libraries, right click on lwjgl.jar, and choose Proper<es | Na<ve Library. Click on Workspace... and point it to the Lab01\lib folder.

Some code!
Phew! That was a pain now for some fun. Well add some preFy images and some code to move and display them. 1. Were going to import a java source le. It can be found in \\oucs1278\CourseMaterials \Labs\Lab01\Lab01Main.java. Drag the Lab01Main.java le onto the src folder in Eclipses Package Explorer. Once again, we could use the Import command here instead. 2. While were at it, do the same thing again, impor4ng the les background.png, planet.png, rocketship.png and star.png, adding them to the data folder. 3. When we import these les, two things happen. By default, Eclipse will make a local copy in our Workspace. If you look in C:\Users\user360\YourIni<alsOrName\Labs\Lab01\src youll see a copy of Lab01Main.java. There are no prizes for guessing whats in the data folder... 4. The second thing is that Eclipse will start to build the code in the background. Almost immediately youll see a red icon with a white cross on it. This is Eclipse telling us that the java code doesnt compile. Lets x that. 5. Double click on the Lab01Main.java le to open it in the text editor. Youll see that it highlights the rst line in the le. If you mouse over this line, a pop up displays more detail

about the error - The declared package lab01 does not match the expected package. 6. Conveniently, Eclipse oers us a couple of ways to x the problem. This is where a good IDE can really save you 4me. Choose the rst op4on Move Lab01Main.java to package lab01. 7. The nasty red crosses should have disappeared now, and Eclipse has moved things around to where they should be. Its 4me to run our code.

8. Clicking on the green Play icon on the toolbar, or choosing Run | Run from the menu will get our code going. You should see something like this: 9. Eclipse tries to be fairly clever about knowing what to run but it doesnt always get it right. If for some reason it isnt able to gure out what to run, select Lab01Main.java in the Package Explorer, and choose Run it should work this 4me.

Lets take a closer look

Now that weve got something running, we can start to play around with the code. Heres a quick overview of the important parts.
public class Lab01Main extends BasicGame

Our class extends the class BasicGame, which is part of the Slick library. It takes care of all the window setup and maintenance. It provides a few virtual methods that we hook into below.
Image background = null; Image star = null; Image planet = null; double gameTime = 0;

We declare member variables to store the images well be using. The variable gameTime will be used to keep track of 4me more specically the number of seconds the game has been running.
public Lab01Main() { super("Hello World!"); }

The constructor simply calls the constructor for BasicGame, passing the text to put in the windows 4tle bar as a parameter to BasicGames constructor.
@Override public void init(GameContainer container) throws SlickException { background = new Image("data/background.png"); star = new Image("data/star.png"); planet = new Image("data/planet.png"); }

This is the rst of the virtual methods from BasicGame that we make use of. init() gives us a chance to do any set up at the start of our game. In this case we load up the images that well be using.
@Override public void update(GameContainer container, int delta) throws SlickException { gameTime += (delta / 1000.0); }

Next, update() is called every frame and lets us perform any frame to frame logic. This is where could put any checks for use input, simula4on processing, AI etc. In this case, upda4ng our no4on of game 4me. The variable delta is in milliseconds since the last update, so we divide it by 1000 to get a value in seconds.
@Override public void render(GameContainer container, Graphics g) throws SlickException { background.draw(0.0f, 0.0f); star.drawCentered(100.0f, star.drawCentered(190.0f, star.drawCentered(410.0f, star.drawCentered(600.0f, star.drawCentered(720.0f, 100.0f); 290.0f); 400.0f); 520.0f); 200.0f);

float y = (float)(200.0 + 10.0 * Math.sin(gameTime)); planet.drawCentered(200.0f, y); y = (float)(450.0 + 8.0 * Math.sin(1.2 * gameTime)); planet.drawCentered(400.0f, y); y = (float)(320.0 + 10.0 * Math.sin(0.9 * gameTime)); planet.drawCentered(610.0f, y);

g.drawString("Hello, Slick world!", 50, 300);

The render() method is called each frame to let us draw our scene. In this case, we draw our background, ve stars, three bobbing planets and some text. A few things to note are: The images are rendered in the order supplied, so the text is in front of the planets, which are in front of the stars etc. The anima4on of the planets is a simple up and down bobbing mo4on based on a sine wave, using the gameTime variable as an input. The mul4plier inside Math.sin() aects the speed of the bob. The mul4plier outside Math.sin() aects the height of the bob. Try changing these numbers and re-running the program to see what happens. We draw the images using two dierent methods draw() and drawCentered(). Calling draw() on the background, we supply it the coordinates of the top leW corner of the image, which in this case is 800 x 600 pixels, so it lls the window. The other images are drawn using drawCentered(), which we supply the point we want the centre of the image to be. Slick supplies a number of other drawing op4ons, including scaling, drawing parts of an image and so on. We can use whichever is appropriate.

public static void main(String[] args) { try { AppGameContainer app = new AppGameContainer(new Lab01Main()); app.setDisplayMode(800, 600, false); app.start(); } catch (SlickException e) { e.printStackTrace(); } }

Our main method actually sets the whole thing up. We create a new game container (think of a container as a window) for our class. Next we set the containers size and whether or not it runs in full screen mode, before nally star4ng the game.

Debugging
You can add break points to your code so you can stop the program while its running to see whats going on. If you double click in the margin of the text editor window (see above), you can add or remove a break point. This will be ignored when we run the program normally. Instead of running the program, click the Debug buFon (the icon of a bug) to the leW of the Run buFon. This will pop up a menu asking if you want to switch to the Debug perspec4ve. Tick Remember my decision and hit

Yes. The program will now start running, and stop when it hits the break point you added. Also, Eclipses window layout changes (this is a dierent perspec<ve in Eclipse jargon). Now, as well as seeing your source code, we have windows for inspec4ng variables, the call stack and so on. Just below the tool bar at the top of the window is a new tool bar that lets you start, stop and step through the program (See below).

The buFons to switch between normal and debug perspec4ves are in the top right:

Tinkering around
OK, thats the bulk of the lab sorted. Now is a good 4me to play around and learn a bit more about Eclipse and Slick. Below are a few things you might like to try.

When you run the program, you can close it by clicking the close buFon of the window. You can also kill it from Eclipse, which is useful for non-responsive programs. At the boFom right hand side of the main code window you can see a red square (greyed out when the program is not running). Clicking on this will kill the program. In main(), you can adjust the size of the window and make it full screen. Have a play with this. Note that theres currently no way to exit the program when its running youll need to Alt+Tab out of the program, and kill it using the Task Manager or the Terminate buFon in Eclipse (see the previous point). When you have a piece of code that wont compile, remember you can hold the mouse over it for a list of selected xes (alternately, click on the error to move the cursor there and hit Ctrl + 1 to get the same list). OWen this will take care of tedious stu like adding import statements and genera4ng stub methods for you to ll in.

Have a look at the Slick basic game tutorial (in the Resources sec4on on the rst page) to see how to get keyboard input. Use this to handle the player pressing Escape to quit the game. Hint : The GameContainer class passed into the update() method has an exit() method. Eclipse has an auto complete feature thats very useful. Just before app.start() is called, try adding a new line. Type app. - aWer you type this, Eclipse presents a list of possible comple4ons as you type (if it doesnt, Ctrl + Space brings up the list). As you con4nue to type (app.se for example) it will narrow down the list of possibili4es. You can use the up and down arrows to choose the comple4on you want and then Enter. Instant typing and an API look up all in one, lovely. Try adding in the rocket ship image as another sprite. Experiment with the dierent draw methods to scale the image, ash it or apply a colour lter to it (Auto comple4on is your friend here, otherwise, look up the Slick documenta4on (select the word Image in the code, and hit F1 to pop up a help window). Add keyboard handling to move the rocket ship around. If you want some more images to play around with, have a look in: o \\oucs1278\CourseMaterials\Resources\Sprites

Go wild! Explore the Slick Wiki for ideas and sample code.