Video game programming l.jpg
This presentation is the property of its rightful owner.
Sponsored Links
1 / 17

Video Game Programming PowerPoint PPT Presentation

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’.

Download Presentation

Video Game Programming

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 l.jpg

Video Game Programming

DCU Games Society

Tutorial #2


Loading images l.jpg

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


Loading images3 l.jpg

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);

    }


Loading images4 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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);


Loading maps l.jpg

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


Creating a map l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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


Running the game l.jpg

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.


  • Login