Pin Me

3D on the web with Java and Irrlicht - Displaying 2D textures

written by: Matthew Casperson•edited by: Linda Richter•updated: 10/12/2009

This tutorial shows you how to display 2D graphics with Irrlicht that use 3D hardware acceleration.

  • slide 1 of 3

    Using a 3D engine to draw 2D graphics may seem a little backwards, but it’s actually not as contradictory as it seems. A 3D engine, in conjunction with 3D graphics hardware, allows you to do effects such as transparency, scaling and rotations for 2D graphics much faster than using the CPU alone.

    Irrlicht allows you to draw 2D images using hardware acceleration by way of the draw2DImage function in the IVideoDriver class. With a 3D scene models, lights and other 3D entities are attached to the scene, which is then rendered in one hit with the drawAll function of the ISceneManager class. Drawing 2D elements to the screen requires a little more work. First we need to modify the render loop to allow BaseObjects to render 2D graphics. Source Code

    Inside the enterGameLoop we have added a call to draw2D. The draw2D function loops through the collection of BaseObjects and in turns calls a new function in the BaseObject class similarly called draw2D. It’s inside this function that any class extending the BaseObject class can draw 2D graphics.

    Irrlicht does not have any built in way to animate 2D images, so we need to build a class that will hold the information needed for displaying 2D images, both static and animated. For this we create the TwoDGraphicsResource class. Source Code

    The TwoDGraphicsResource class holds 4 important properties: texture, area, fps and frames. The texture property points to the actual texture data that will be eventually displayed on the screen. The area property defines what area of the image will be displayed. For most static images the area displayed will cover the entire image, but being able to display only a section of an texture gives us the ability to display animations, and will also come in handy when loading and displaying tiled backgrounds. The fps property defines how fast an animation will play, while the frames property defines how many frames of animation a texture has. For a static image frames will be set to 1.

    The TwoDGraphicsResource startupTwoDGraphicsResource function also takes a color value to be used as the alpha (or transparent) channel. By making a call to the makeColorKeyTexture function of the IVideoDriver class and supplying both the transparent color value and the texture, Irrlicht will make all pixels from the texture that match that color transparent.

    The TwoDGraphicsResource class only defines an image, it does not display it. The TwoDGameObject class will be used to draw the images to the screen. Source Code

    The two important functions to note here are enterFrame and draw2D. The enterFrame function is used to calculate the current frame. When currentFrame is incremented the TwoDGameObject will display a new section of the image, producing an animation. Of course if the image is not animated (i.e. the frames property of the TwoDGraphicsResource class is set to 1) then only a static image will be displayed. The draw2D function makes use of the new event triggered by the EngineManager class during the render loop to display the 2D image to the screen.

    TwoDGameObject has two other useful functions built in called keepOnScreen and shutdownIfOffScreen. The keepOnScreen function is designed to be used by extending classes to stop a 2D object moving off the screen (the Player class uses this), while the shutdownIfOffScreen function is designed to shutdown the object once it has moved completely off the screen (the Weapon and Enemy classes use this).

    By modifying the render loop and creating the TwoDGameObject class we now have an easy way to display both static and animated 2D images while still using the full power of the underlying 3D hardware. Check out the online demo here, browse the source code here, and download the source code in a TAR file here.

  • slide 2 of 3


    Irrlicht demo screenshot
  • slide 3 of 3

    Related Article

    SDL Logo SDL Programming Tutorials

    This free series shows you how to create an old school shoot'em'up with SDL and C++.