164 lines
9.6 KiB
HTML
164 lines
9.6 KiB
HTML
<html>
|
|
<head>
|
|
<title>Irrlicht Engine Tutorial</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
|
</head>
|
|
|
|
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
|
|
<br>
|
|
<table width="95%" border="0" cellspacing="0" cellpadding="2" align="center">
|
|
<tr>
|
|
<td bgcolor="#666699" width="10"><b><a href="http://irrlicht.sourceforge.net" target="_blank"><img src="../../media/irrlichtlogo.jpg" width="88" height="31" border="0"></a></b></td>
|
|
<td bgcolor="#666699" width="100%">
|
|
<div align="center">
|
|
<div align="center"></div>
|
|
<div align="left"><b><font color="#FFFFFF">Tutorial 6. 2D Graphics</font></b></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr bgcolor="#eeeeff">
|
|
<td height="90" colspan="2">
|
|
<div align="left">
|
|
<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 will 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>
|
|
<p>The program which is described here will look like this:</p>
|
|
<p align="center"><img src="../../media/006shot.jpg" width="259" height="204"><br>
|
|
</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<br>
|
|
<table width="95%" border="0" cellspacing="0" cellpadding="2" align="center">
|
|
<tr>
|
|
<td bgcolor="#666699"> <div align="center"><b><font color="#FFFFFF"></font></b></div>
|
|
<b><font color="#FFFFFF">Lets start!</font></b></td>
|
|
</tr>
|
|
<tr>
|
|
<td height="90" bgcolor="#eeeeff" valign="top"> <div align="left">
|
|
<p>As always, I include the header files, use the irr namespace, and tell
|
|
the linker to link with the .lib file. </p>
|
|
<table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
|
|
<tr>
|
|
<td> <pre>#include <irrlicht.h><br>#include <iostream><br><br>using namespace irr;</pre>
|
|
<pre>#pragma comment(lib, "Irrlicht.lib")
|
|
</pre></td>
|
|
</tr>
|
|
</table>
|
|
<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.</p>
|
|
<table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
|
|
<tr>
|
|
<td> <pre>int main()<br>{<br> // let user select driver type<br> video::E_DRIVER_TYPE driverType;<br><br> printf("Please select the driver you want for this example:\n"\<br> " (a) Direct3D 9.0c\n (b) Direct3D 8.1\n (c) OpenGL 1.5\n"\<br> " (d) Software Renderer\n (e) Apfelbaum Software Renderer\n"\<br> " (f) NullDevice\n (otherKey) exit\n\n");<br><br> char i;<br> std::cin >> i;<br><br> switch(i)<br> {<br> case 'a': driverType = video::EDT_DIRECT3D9;break;<br> case 'b': driverType = video::EDT_DIRECT3D8;break;<br> case 'c': driverType = video::EDT_OPENGL; break;<br> case 'd': driverType = video::EDT_SOFTWARE; break;<br> case 'e': driverType = video::EDT_BURNINGSVIDEO;break;<br> case 'f': driverType = video::EDT_NULL; break;<br> default: return 0;<br> } <br><br> // create device</pre>
|
|
<pre> IrrlichtDevice *device = createDevice(driverType,
|
|
core::dimension2d<s32>(512, 384));</pre>
|
|
<pre> if (device == 0)
|
|
return 1;
|
|
<br> device->setWindowCaption(L"Irrlicht Engine - 2D Graphics Demo");</pre>
|
|
<pre> video::IVideoDriver* driver = device->getVideoDriver();</pre></td>
|
|
</tr>
|
|
</table>
|
|
<p> All 2d graphics in this example are put together into one texture,
|
|
2ddemo.bmp. 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 <font face="Courier New, Courier, mono">driver->makeColorKeyTexture(images,
|
|
video::SColor(0,0,0,0))</font>, to make e.g. all black pixels transparent.
|
|
Please note, that makeColorKeyTexture just creates an alpha channel
|
|
based on the color. </p>
|
|
<table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
|
|
<tr>
|
|
<td> <pre>video::ITexture* images = driver->getTexture("../../media/2ddemo.bmp");<br>driver->makeColorKeyTexture(images, core::position2d<s32>(0,0));</pre></td>
|
|
</tr>
|
|
</table>
|
|
<p>To be able to draw some text with two different fonts, we load them.
|
|
Ok, we load just one, as first font we just use the default font which
|
|
is built into the engine.<br>
|
|
Also, we define two rectangles, which specify the position of the images
|
|
of the red imps (little flying creatures) in the texture.</p>
|
|
<table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
|
|
<tr>
|
|
<td> <pre>gui::IGUIFont* font = device->getGUIEnvironment()->getBuiltInFont();<br>gui::IGUIFont* font2 = device->getGUIEnvironment()->getFont(
|
|
"../../media/fonthaettenschweiler.bmp");</pre>
|
|
<pre>core::rect<s32> imp1(349,15,385,78);
|
|
core::rect<s32> imp2(387,15,423,78);</pre></td>
|
|
</tr>
|
|
</table>
|
|
<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.</p>
|
|
</div>
|
|
<table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
|
|
<tr>
|
|
<td> <pre>while(device->run() && driver)<br>{<br> if (device->isWindowActive())<br> {<br> u32 time = device->getTimer()->getTime();<br> driver->beginScene(true, true, video::SColor(0,120,102,136));
|
|
</pre></td>
|
|
</tr>
|
|
</table>
|
|
<p> First, we draw 3 sprites, using the alpha channel we created with makeColorKeyTexture.
|
|
The last parameter specifiys that the drawing method should use thiw alpha
|
|
channel. The parameter before the last one specifies a color, with wich
|
|
the sprite should be colored. (255,255,255,255) is full white, so the
|
|
sprite will look like the original. The third sprite is drawed colored
|
|
based on the time. </p>
|
|
<table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
|
|
<tr>
|
|
<td><pre>// draw fire & dragons background world<br>driver->draw2DImage(images, core::position2d<s32>(50,50),<br> core::rect<s32>(0,0,342,224), 0, <br> video::SColor(255,255,255,255), true);</pre>
|
|
<pre>// draw flying imp
|
|
driver->draw2DImage(images, core::position2d<s32>(164,125),
|
|
(time/500 % 2) ? imp1 : imp2, 0,
|
|
video::SColor(255,255,255,255), true);</pre>
|
|
<pre>// 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);</pre></td>
|
|
</tr>
|
|
</table>
|
|
<p> Drawing text is really simple. The code should be self explanatory.</p>
|
|
<table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
|
|
<tr>
|
|
<td><pre>// draw some text<br>if (font)<br> font->draw(L"This is some text.",<br> core::rect<s32>(130,10,300,50),<br> video::SColor(255,255,255,255));</pre>
|
|
<pre>// draw some other text
|
|
if (font2)
|
|
font2->draw(L"This is some other text.",
|
|
core::rect<s32>(130,20,300,60),
|
|
video::SColor(255,time % 255,time % 255,255));</pre></td>
|
|
</tr>
|
|
</table>
|
|
<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.</p>
|
|
<table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
|
|
<tr>
|
|
<td> <pre> // draw logo<br> driver->draw2DImage(images, core::position2d<s32>(10,10),<br> core::rect<s32>(354,87,442,118));</pre>
|
|
<pre> // draw transparent rect under 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));</pre>
|
|
<pre> driver->endScene();
|
|
}
|
|
}</pre></td>
|
|
</tr>
|
|
</table>
|
|
<p>That's all, it was not really difficult, I hope.</p>
|
|
<table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
|
|
<tr>
|
|
<td> <pre> device->drop();
|
|
return 0;
|
|
}</pre>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<p> </p></td>
|
|
</tr>
|
|
</table>
|
|
<p> </p>
|
|
</body>
|
|
</html>
|