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
driverChoice.h
irrlicht.h
Main header file of the irrlicht, the only file needed to include.
irr
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,
core::dimension2d<u32>(512, 384));
if (device == 0)
return 1; // could not create selected driver.
device->setWindowCaption(L"Irrlicht Engine - 2D Graphics Demo");
video::IVideoDriver* driver = device->getVideoDriver();
irr::IrrlichtDevice
The Irrlicht device. You can create it with createDevice() or createDeviceEx().
Definition IrrlichtDevice.h:44
irr::IrrlichtDevice::setWindowCaption
virtual void setWindowCaption(const wchar_t *text)=0
Sets the caption of the window.
irr::IrrlichtDevice::getVideoDriver
virtual video::IVideoDriver * getVideoDriver()=0
Provides access to the video driver for drawing 3d and 2d geometry.
irr::core::dimension2d
Specifies a 2 dimensional size.
Definition dimension2d.h:21
irr::video::IVideoDriver
Interface to driver which is able to perform 2d and 3d graphics functions.
Definition IVideoDriver.h:257
irr::video::E_DRIVER_TYPE
E_DRIVER_TYPE
An enum for all types of drivers the Irrlicht Engine supports.
Definition EDriverTypes.h:15
irr::video::EDT_COUNT
@ EDT_COUNT
No driver, just for counting the elements.
Definition EDriverTypes.h:56
irr::createDevice
IRRLICHT_API IrrlichtDevice *IRRCALLCONV createDevice(video::E_DRIVER_TYPE deviceType=video::EDT_SOFTWARE, const core::dimension2d< u32 > &windowSize=(core::dimension2d< u32 >(640, 480)), u32 bits=16, bool fullscreen=false, bool stencilbuffer=false, bool vsync=false, IEventReceiver *receiver=0)
Creates an Irrlicht device. The Irrlicht device is the root object for using the engine.

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");
driver->makeColorKeyTexture(images, core::position2d<s32>(0,0));
irr::video::ITexture
Interface of a Video Driver dependent Texture.
Definition ITexture.h:99
irr::video::IVideoDriver::getTexture
virtual ITexture * getTexture(const io::path &filename)=0
Get access to a named texture.
irr::video::IVideoDriver::makeColorKeyTexture
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* font = device->getGUIEnvironment()->getBuiltInFont();
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);
irr::IrrlichtDevice::getGUIEnvironment
virtual gui::IGUIEnvironment * getGUIEnvironment()=0
Provides access to the 2d user interface environment.
irr::core::rect
Rectangle template.
Definition rect.h:27
irr::gui::IGUIEnvironment::getFont
virtual IGUIFont * getFont(const io::path &filename)=0
Returns pointer to the font with the specified filename.
irr::gui::IGUIEnvironment::getBuiltInFont
virtual IGUIFont * getBuiltInFont() const =0
Returns the default built-in font.
irr::gui::IGUIFont
Font interface.
Definition IGUIFont.h:40

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

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

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));
irr::ITimer::getTime
virtual u32 getTime() const =0
Returns current virtual time in milliseconds.
irr::IrrlichtDevice::run
virtual bool run()=0
Runs the device.
irr::IrrlichtDevice::getTimer
virtual ITimer * getTimer()=0
Provides access to the engine's timer.
irr::IrrlichtDevice::isWindowActive
virtual bool isWindowActive() const =0
Returns if the window is active.
irr::video::IVideoDriver::beginScene
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.
irr::video::SColor
Class representing a 32 bit ARGB color.
Definition SColor.h:202
irr::u32
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);
irr::video::IVideoDriver::draw2DImage
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));
irr::gui::IGUIFont::draw
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);
irr::video::IVideoDriver::enableMaterial2D
virtual void enableMaterial2D(bool enable=true)=0
Enable the 2d override material.

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

core::position2d<s32> m = device->getCursorControl()->getPosition();
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;
}
irr::IReferenceCounted::drop
bool drop() const
Drops the object. Decrements the reference counter by one.
Definition IReferenceCounted.h:116
irr::IrrlichtDevice::getCursorControl
virtual gui::ICursorControl * getCursorControl()=0
Provides access to the cursor control.
irr::gui::ICursorControl::getPosition
virtual const core::position2d< s32 > & getPosition()=0
Returns the current position of the mouse cursor.
irr::video::IVideoDriver::endScene
virtual bool endScene()=0
Presents the rendered image to the screen.
irr::video::IVideoDriver::draw2DRectangle
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.

- Irrlicht Engine Documentation © 2003-2012 by Nikolaus Gebhardt. Generated on for Irrlicht 3D Engine by Doxygen 1.15.0