<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Irrlicht Engine: Tutorial 6: 2D Graphics</title>
<link href="doxygen.css" rel="stylesheet" type="text/css">
</head><body>
<table class="irrlicht" >
<tr valign="middle">
<td><font size="2"><a class="qindex" href="index.html"><font color="#FFFFFF">Home</font></a>
| <a class="qindex" href="namespaces.html"><font color="#FFFFFF">Namespaces</font></a>
| <a class="qindex" href="hierarchy.html"><font color="#FFFFFF">Hierarchy</font></a>
| <a class="qindex" href="classes.html"><font color="#FFFFFF">Alphabetical
List</font></a> | <a class="qindex" href="annotated.html"><font color="#FFFFFF">
Class list</font></a> | <a class="qindex" href="files.html"><font color="#FFFFFF">Files</font></a>
| <a class="qindex" href="namespacemembers.html"><font color="#FFFFFF">
Namespace Members</font></a> | <a class="qindex" href="functions.html"><font color="#FFFFFF">Class
members</font></a> | <a class="qindex" href="globals.html"><font color="#FFFFFF">File
members</font></a> | <a class="qindex" href="pages.html"><font color="#FFFFFF">Tutorials</font></a></font> </td>
</tr>
</table>
<!-- Generated by Doxygen 1.5.6 -->
<div class="contents">
<h1><a class="anchor" name="example006">Tutorial 6: 2D Graphics </a></h1><div align="center">
<img src="006shot.jpg" alt="006shot.jpg">
</div>
<p>
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.<p>
As always, I include the header files, use the <a class="el" href="namespaceirr.html" title="Everything in the Irrlicht Engine can be found in this namespace.">irr</a> namespace, and tell the linker to link with the .lib file. <div class="fragment"><pre class="fragment"><span class="preprocessor">#include <<a class="code" href="irrlicht_8h.html" title="Main header file of the irrlicht, the only file needed to include.">irrlicht.h</a>></span>
<span class="preprocessor">#include <iostream></span>
<span class="keyword">using namespace </span>irr;
<span class="preprocessor">#ifdef _MSC_VER</span>
<span class="preprocessor"></span><span class="preprocessor">#pragma comment(lib, "Irrlicht.lib")</span>
<span class="preprocessor">#endif</span>
</pre></div><p>
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. <div class="fragment"><pre class="fragment"><span class="keywordtype">int</span> main()
{
<span class="comment">// let user select driver type</span>
<a class="code" href="namespaceirr_1_1video.html#e35a6de6d436c76107ad157fe42356d0" title="An enum for all types of drivers the Irrlicht Engine supports.">video::E_DRIVER_TYPE</a> driverType;
printf(<span class="stringliteral">"Please select the driver you want for this example:\n"</span>\
<span class="stringliteral">" (a) Direct3D 9.0c\n (b) Direct3D 8.1\n (c) OpenGL 1.5\n"</span>\
<span class="stringliteral">" (d) Software Renderer\n (e) Burning's Software Renderer\n"</span>\
<span class="stringliteral">" (f) NullDevice\n (otherKey) exit\n\n"</span>);
<span class="keywordtype">char</span> i;
std::cin >> i;
<span class="keywordflow">switch</span>(i)
{
<span class="keywordflow">case</span> <span class="charliteral">'a'</span>: driverType = <a class="code" href="namespaceirr_1_1video.html#e35a6de6d436c76107ad157fe42356d04691ca314f9018f508dcf2c57dcaacec" title="Direct3D 9 device, only available on Win32 platforms.">video::EDT_DIRECT3D9</a>;<span class="keywordflow">break</span>;
<span class="keywordflow">case</span> <span class="charliteral">'b'</span>: driverType = <a class="code" href="namespaceirr_1_1video.html#e35a6de6d436c76107ad157fe42356d08cc3807f6f28404f3424ad7e31b3142f" title="Direct3D8 device, only available on Win32 platforms.">video::EDT_DIRECT3D8</a>;<span class="keywordflow">break</span>;
<span class="keywordflow">case</span> <span class="charliteral">'c'</span>: driverType = <a class="code" href="namespaceirr_1_1video.html#e35a6de6d436c76107ad157fe42356d02715182a79f1cb8e2826fd68a8150a53" title="OpenGL device, available on most platforms.">video::EDT_OPENGL</a>; <span class="keywordflow">break</span>;
<span class="keywordflow">case</span> <span class="charliteral">'d'</span>: driverType = <a class="code" href="namespaceirr_1_1video.html#e35a6de6d436c76107ad157fe42356d01598cd235a1a6bd052e2011b559e8995" title="The Irrlicht Engine Software renderer.">video::EDT_SOFTWARE</a>; <span class="keywordflow">break</span>;
<span class="keywordflow">case</span> <span class="charliteral">'e'</span>: driverType = <a class="code" href="namespaceirr_1_1video.html#e35a6de6d436c76107ad157fe42356d0e85481da26159b967191ccc6de1e4a05" title="The Burning&#39;s Software Renderer, an alternative software renderer.">video::EDT_BURNINGSVIDEO</a>;<span class="keywordflow">break</span>;
<span class="keywordflow">case</span> <span class="charliteral">'f'</span>: driverType = <a class="code" href="namespaceirr_1_1video.html#e35a6de6d436c76107ad157fe42356d0cfdbd476cbfd4d05e72f9adffcc42210" title="Null driver, useful for applications to run the engine without visualisation.">video::EDT_NULL</a>; <span class="keywordflow">break</span>;
<span class="keywordflow">default</span>: <span class="keywordflow">return</span> 0;
}
<span class="comment">// create device</span>
IrrlichtDevice *device = <a class="code" href="namespaceirr.html#baf4d8719cc26b0d30813abf85e47c76" title="Creates an Irrlicht device. The Irrlicht device is the root object for using the...">createDevice</a>(driverType,
core::dimension2d<u32>(512, 384));
<span class="keywordflow">if</span> (device == 0)
<span class="keywordflow">return</span> 1; <span class="comment">// could not create selected driver.</span>
device->setWindowCaption(L<span class="stringliteral">"Irrlicht Engine - 2D Graphics Demo"</span>);
video::IVideoDriver* driver = device->getVideoDriver();
</pre></div><p>
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.<p>
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. <div class="fragment"><pre class="fragment"> video::ITexture* images = driver->getTexture(<span class="stringliteral">"../../media/2ddemo.png"</span>);
driver->makeColorKeyTexture(images, core::position2d<s32>(0,0));
</pre></div><p>
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. <div class="fragment"><pre class="fragment"> gui::IGUIFont* font = device->getGUIEnvironment()->getBuiltInFont();
gui::IGUIFont* font2 =
device->getGUIEnvironment()->getFont(<span class="stringliteral">"../../media/fonthaettenschweiler.bmp"</span>);
core::rect<s32> imp1(349,15,385,78);
core::rect<s32> imp2(387,15,423,78);
</pre></div><p>
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. <div class="fragment"><pre class="fragment"> <span class="keywordflow">while</span>(device->run() && driver)
{
<span class="keywordflow">if</span> (device->isWindowActive())
{
<a class="code" href="namespaceirr.html#0416a53257075833e7002efd0a18e804" title="32 bit unsigned variable.">u32</a> time = device->getTimer()->getTime();
driver->beginScene(<span class="keyword">true</span>, <span class="keyword">true</span>, video::SColor(255,120,102,136));
</pre></div><p>
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. <div class="fragment"><pre class="fragment"> <span class="comment">// draw fire & dragons background world</span>
driver->draw2DImage(images, core::position2d<s32>(50,50),
core::rect<s32>(0,0,342,224), 0,
video::SColor(255,255,255,255), <span class="keyword">true</span>);
<span class="comment">// draw flying imp</span>
driver->draw2DImage(images, core::position2d<s32>(164,125),
(time/500 % 2) ? imp1 : imp2, 0,
video::SColor(255,255,255,255), <span class="keyword">true</span>);
<span class="comment">// draw second flying imp with colorcylce</span>
driver->draw2DImage(images, core::position2d<s32>(270,105),
(time/500 % 2) ? imp1 : imp2, 0,
video::SColor(255,(time) % 255,255,255), <span class="keyword">true</span>);
</pre></div><p>
Drawing text is really simple. The code should be self explanatory. <div class="fragment"><pre class="fragment"> <span class="comment">// draw some text</span>
<span class="keywordflow">if</span> (font)
font->draw(L<span class="stringliteral">"This demo shows that Irrlicht is also capable of drawing 2D graphics."</span>,
core::rect<s32>(130,10,300,50),
video::SColor(255,255,255,255));
<span class="comment">// draw some other text</span>
<span class="keywordflow">if</span> (font2)
font2->draw(L<span class="stringliteral">"Also mixing with 3d graphics is possible."</span>,
core::rect<s32>(130,20,300,60),
video::SColor(255,time % 255,time % 255,255));
</pre></div><p>
At last, we draw the Irrlicht Engine logo (without using a color or an alpha channel) and a transparent 2d Rectangle at the position of the mouse cursor. <div class="fragment"><pre class="fragment"> <span class="comment">// draw logo</span>
driver->draw2DImage(images, core::position2d<s32>(10,10),
core::rect<s32>(354,87,442,118));
<span class="comment">// draw transparent rect under cursor</span>
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();
<span class="keywordflow">return</span> 0;
}
</pre></div><p>
That's all. I hope it was not too difficult. </div>
<hr size="1">
<address style="align: right;">
<small> </small>
</address>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="0"> <div align="left"><small><a href="http://irrlicht.sourceforge.net" target="_blank"><img src="irrlicht.png" alt="The Irrlicht Engine" align="middle" border=0 width=88 height=31></a></small></div></td>
<td> <div align="left"><small><em><font size="2">The <a href="http://irrlicht.sourceforge.net" target="_blank">Irrlicht
Engine</a> Documentation © 2003-2009 by Nikolaus Gebhardt. Generated
on Sun Jan 10 09:24:06 2010 by <a href="http://www.doxygen.org" target="_blank">Doxygen</a>
(1.5.6)</font></em></small></div></td>
</tr>
</table>
<address style="align: right;">
</address>
</body>
</html>
