video game programming l.
Skip this Video
Loading SlideShow in 5 Seconds..
Video Game Programming PowerPoint Presentation
Download Presentation
Video Game Programming

Loading in 2 Seconds...

play fullscreen
1 / 17

Video Game Programming - PowerPoint PPT Presentation

  • Uploaded on

Video Game Programming DCU Games Society Tutorial #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’.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Video Game Programming' - albert

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
video game programming

Video Game Programming

DCU Games Society

Tutorial #2

loading images
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
  • Copy this image into the res folder
loading images3
Loading Images
  • Now lets add some to our existing 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);


loading images4
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.
moving our character
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)
moving our character6
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);


moving our character7
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;



frames per second
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).
setting the fps
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:


  • We can also hide the FPS counter in the top left corner of the screen with this line of code:


loading maps
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:
  • We’ll also need some tiles to place on our map:
creating a map
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:
creating a map12
Creating A Map
  • Now, let’s make a map! Click ‘File’, and then ‘New’.
  • A small window popup, change it to look like this:
creating a map13
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.
creating a map14
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!
loading a map
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/”);

drawing a map
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:
running the game
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.