Video Game Programming

1. Video Game Programming DCU Games Society Tutorial #2

2. Loading Images • Slick has built in support for loading and rendering .png images. • To do this, we need a folder to store all our images. So in our game folder, create a new folder named ‘res’. • Now download the image of blinky from http://games.dcu.ie/events/programming/blinky.png • Copy this image into the res folder

3. Loading Images • Now lets add some to our existing Game.java file: class Game extends BasicGame { Image blinky; public void init(GameContainergc) throws SlickException { blinky = new Image(“/res/blinky.png”); } public void render(GameContainergc, Graphics g) throws SlickException { g.drawImage(blinky, 128, 128); }

4. Loading Images • Basically, we store the image in the Game class so that we can render it each loop. • We load it using the ‘init’ method because images can only be loaded in that method. • We then render the image every loop in the ‘render’ method at co-ordinates 128, 128.

5. Moving Our Character • Now that we have an image of Blinky showing on screen, let’s move him about! • For this, we need to add a new method to the bottom of our class to handle keyboard input: public void keyPressed(int key, char c) { //c will be the character of the button, e.g. ‘x’, ‘$’, etc. } • You can add support for mouse and even gamepads using different methods: • public void mousePressed(int button, int x, int y) • public void controllerButtonPressed(int controller, int button)

6. Moving Our Character • To move our character about, we need to store his x and y co-ordinates: class Game extends BasicGame { int x; int y; Image blinky; public void init(GameContainer gc) throws SlickException { blinky = new Image(“/res/blinky.png”); x = 0; y = 0; } public void render(GameContainer gc, Graphics g) throws SlickException { g.drawImage(blinky, x, y); }

7. Moving Our Character • We then need to add some code to our keyPressed method: public void keyPressed(int key, char c) { if(key == Input.KEY_UP) { y = y – 32; } else if(key == Input.KEY_DOWN) { y = y + 32; } else if(key == Input.KEY_LEFT) { x = x – 32; } else if(key == Input.KEY_RIGHT) { x = x + 32; } }

8. Frames Per Second • Before we can move our character around, we need to limit the Frames Per Second (FPS) in the game. • The FPS represents how many times the window is updated/rendered per second. • The human eye can only see around 24FPS but more FPS means smoother gameplay (as some frames will be skipped if complex calculations are being carried out). • Typically, games run at around 60FPS for optimal performance. • Currently our game is running at the maximum FPS possible (indicated by the FPS counter in the top-left corner of the screen).

9. Setting the FPS • We can set a target FPS that the game should run at. This means slick will attempt to run the game at this FPS but isn’t always guaranteed. • To do this, we simply tell the GameContainer the target FPS we want in our ‘init’ method using the following line of code: gc.setTargetFrameRate(60); • We can also hide the FPS counter in the top left corner of the screen with this line of code: gc.setShowFPS(false);

10. Loading Maps • Slick has built-in support for loading maps made with a free map editor named ‘Tiled’. • We this, we can easily create game worlds. • We can download Tiled from the following website: • www.mapeditor.org • We’ll also need some tiles to place on our map: • http://games.dcu.ie/events/programming/tileset.png

11. Creating A Map • So now that we have our tilesets and map editor, open up the Tiled.jar file. • You should now see something like this:

12. Creating A Map • Now, let’s make a map! Click ‘File’, and then ‘New’. • A small window popup, change it to look like this:

13. Creating A Map • Now we’ll need a tileset! • A tileset is simply an image which contains all the graphics we need for our map. • To add a tileset, select ‘Tilesets’ and then ‘New Tileset’. • Name the tileset ‘pacman’ and select ‘Reference tileset image’. • Then click ‘Browse’ and select our tileset image we download earlier.

14. Creating A Map • We should now see our tileset at the bottom of the Tiled window. You can now select tiles and draw them on to the map! • When you’re done making your map, make sure to save it as map1.tmx and save it in the same folder as your tileset. • Finally, copy the tileset and the map to the ‘res’ folder of our game. • Now let’s add our map to the game!

15. Loading A Map • We’ll need to store the map for drawing, so add the following lines of code: import org.newdawn.slick.*; import org.newdawn.slick.tiled.*; class Game extends BasicGame { TiledMap map; • To load the map, add the following line to the init method: map = new TiledMap(“./res/map1.tmx”, “./res/”);

16. Drawing A Map • To render the map, add the following line to our render method: map.render(0, 0); • This will render our entire map at 0,0 on the screen. • Slick provides extra methods for rendering specific portions of the map at different points on the screen: • http://slick.cokeandcode.com/javadoc/org/newdawn/slick/tiled/TiledMap.html

17. Running The Game • Now, if we compile our game and run it again we should have Blinky running around the screen on a map! • But there’s one problem...he’s able to walk through walls (pretty cool but not exactly a good thing). • So, next week we’ll be learning how to make a collisions system.