Irrlicht 3D Engine
 
Loading...
Searching...
No Matches
Tutorial 6: 2D Graphics

This Tutorial shows how to do 2d graphics with the Irrlicht Engine. It shows how to draw images, keycolor based sprites, transparent rectangles, and different fonts. You may consider this useful if you want to make a 2d game with the engine, or if you want to draw a cool interface or head up display for your 3d game.

As always, I include the header files, use the irr namespace, and tell the linker to link with the .lib file.

#include <irrlicht.h>
#include "driverChoice.h"
using namespace irr;
#ifdef _MSC_VER
#pragma comment(lib, "Irrlicht.lib")
#endif
Main header file of the irrlicht, the only file needed to include.
Everything in the Irrlicht Engine can be found in this namespace.
Definition aabbox3d.h:13

At first, we let the user select the driver type, then start up the engine, set a caption, and get a pointer to the video driver.

int main()
{
// ask user for driver
video::E_DRIVER_TYPE driverType=driverChoiceConsole();
if (driverType==video::EDT_COUNT)
return 1;
// create device
IrrlichtDevice *device = createDevice(driverType,
if (device == 0)
return 1; // could not create selected driver.
device->setWindowCaption(L"Irrlicht Engine - 2D Graphics Demo");
video::IVideoDriver* driver = device->getVideoDriver();
The Irrlicht device. You can create it with createDevice() or createDeviceEx().
virtual void setWindowCaption(const wchar_t *text)=0
Sets the caption of the window.
virtual video::IVideoDriver * getVideoDriver()=0
Provides access to the video driver for drawing 3d and 2d geometry.
Axis aligned bounding box in 3d dimensional space.
Definition aabbox3d.h:22
Interface to driver which is able to perform 2d and 3d graphics functions.
E_DRIVER_TYPE
An enum for all types of drivers the Irrlicht Engine supports.

All 2d graphics in this example are put together into one texture, 2ddemo.png. Because we want to draw colorkey based sprites, we need to load this texture and tell the engine, which part of it should be transparent based on a colorkey.

In this example, we don't tell it the color directly, we just say "Hey Irrlicht Engine, you'll find the color I want at position (0,0) on the texture.". Instead, it would be also possible to call driver->makeColorKeyTexture(images, video::SColor(0,0,0,0)), to make e.g. all black pixels transparent. Please note that makeColorKeyTexture just creates an alpha channel based on the color.

video::ITexture* images = driver->getTexture("../../media/2ddemo.png");
Interface of a Video Driver dependent Texture.
Definition ITexture.h:99
virtual ITexture * getTexture(const io::path &filename)=0
Get access to a named texture.
virtual void makeColorKeyTexture(video::ITexture *texture, video::SColor color, bool zeroTexels=false) const =0
Sets a boolean alpha channel on the texture based on a color key.

To be able to draw some text with two different fonts, we first load them. Ok, we load just one. As the first font we just use the default font which is built into the engine. Also, we define two rectangles which specify the position of the images of the red imps (little flying creatures) in the texture.

gui::IGUIFont* font2 =
device->getGUIEnvironment()->getFont("../../media/fonthaettenschweiler.bmp");
core::rect<s32> imp1(349,15,385,78);
core::rect<s32> imp2(387,15,423,78);
virtual gui::IGUIEnvironment * getGUIEnvironment()=0
Provides access to the 2d user interface environment.
virtual IGUIFont * getFont(const io::path &filename)=0
Returns pointer to the font with the specified filename.
virtual IGUIFont * getBuiltInFont() const =0
Returns the default built-in font.
Font interface.
Definition IGUIFont.h:40

Prepare a nicely filtering 2d render mode for special cases.

driver->getMaterial2D().AntiAliasing=video::EAAM_FULL_BASIC;
virtual SMaterial & getMaterial2D()=0
Get the 2d override material for altering its values.
SMaterialLayer TextureLayer[MATERIAL_MAX_TEXTURES]
Texture layer array.
Definition SMaterial.h:297
u8 AntiAliasing
Sets the antialiasing mode.
Definition SMaterial.h:372
bool BilinearFilter
Is bilinear filtering enabled? Default: true.

Everything is prepared, now we can draw everything in the draw loop, between the begin scene and end scene calls. In this example, we are just doing 2d graphics, but it would be no problem to mix them with 3d graphics. Just try it out, and draw some 3d vertices or set up a scene with the scene manager and draw it.

while(device->run() && driver)
{
if (device->isWindowActive())
{
u32 time = device->getTimer()->getTime();
driver->beginScene(true, true, video::SColor(255,120,102,136));
virtual u32 getTime() const =0
Returns current virtual time in milliseconds.
virtual bool run()=0
Runs the device.
virtual ITimer * getTimer()=0
Provides access to the engine's timer.
virtual bool isWindowActive() const =0
Returns if the window is active.
virtual bool beginScene(bool backBuffer=true, bool zBuffer=true, SColor color=SColor(255, 0, 0, 0), const SExposedVideoData &videoData=SExposedVideoData(), core::rect< s32 > *sourceRect=0)=0
Applications must call this method before performing any rendering.
Class representing a 32 bit ARGB color.
Definition SColor.h:202
unsigned int u32
32 bit unsigned variable.
Definition irrTypes.h:58

First, we draw 3 sprites, using the alpha channel we created with makeColorKeyTexture. The last parameter specifies that the drawing method should use this alpha channel. The last-but-one parameter specifies a color, with which the sprite should be colored. (255,255,255,255) is full white, so the sprite will look like the original. The third sprite is drawn with the red channel modulated based on the time.

// draw fire & dragons background world
driver->draw2DImage(images, core::position2d<s32>(50,50),
core::rect<s32>(0,0,342,224), 0,
video::SColor(255,255,255,255), true);
// draw flying imp
driver->draw2DImage(images, core::position2d<s32>(164,125),
(time/500 % 2) ? imp1 : imp2, 0,
video::SColor(255,255,255,255), true);
// draw second flying imp with colorcylce
driver->draw2DImage(images, core::position2d<s32>(270,105),
(time/500 % 2) ? imp1 : imp2, 0,
video::SColor(255,(time) % 255,255,255), true);
virtual void draw2DImage(const video::ITexture *texture, const core::position2d< s32 > &destPos)=0
Draws a 2d image without any special effects.

Drawing text is really simple. The code should be self explanatory.

// draw some text
if (font)
font->draw(L"This demo shows that Irrlicht is also capable of drawing 2D graphics.",
core::rect<s32>(130,10,300,50),
video::SColor(255,255,255,255));
// draw some other text
if (font2)
font2->draw(L"Also mixing with 3d graphics is possible.",
core::rect<s32>(130,20,300,60),
video::SColor(255,time % 255,time % 255,255));
virtual void draw(const core::stringw &text, const core::rect< s32 > &position, video::SColor color, bool hcenter=false, bool vcenter=false, const core::rect< s32 > *clip=0)=0
Draws some text and clips it to the specified rectangle if wanted.

Next, we draw the Irrlicht Engine logo (without using a color or an alpha channel). Since we slightly scale the image we use the prepared filter mode.

driver->enableMaterial2D();
driver->draw2DImage(images, core::rect<s32>(10,10,108,48),
core::rect<s32>(354,87,442,118));
driver->enableMaterial2D(false);
virtual void enableMaterial2D(bool enable=true)=0
Enable the 2d override material.

Finally draw a half-transparent rect under the mouse cursor.

driver->draw2DRectangle(video::SColor(100,255,255,255),
core::rect<s32>(m.X-20, m.Y-20, m.X+20, m.Y+20));
driver->endScene();
}
}
device->drop();
return 0;
}
bool drop() const
Drops the object. Decrements the reference counter by one.
virtual gui::ICursorControl * getCursorControl()=0
Provides access to the cursor control.
virtual const core::position2d< s32 > & getPosition()=0
Returns the current position of the mouse cursor.
virtual bool endScene()=0
Presents the rendered image to the screen.
virtual void draw2DRectangle(SColor color, const core::rect< s32 > &pos, const core::rect< s32 > *clip=0)=0
Draws a 2d rectangle.

That's all. I hope it was not too difficult.