irrlicht/examples/01.HelloWorld/tutorial.html

235 lines
16 KiB
HTML
Raw Normal View History

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen 1.8.13"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Tutorial 1: HelloWorld</title>
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Wanted to avoid copying .css to each folder, so copied default .css from doxyen in here, kicked out most stuff we don't need for examples and modified some a little bit.
Target was having a single html in each example folder which is created from the main.cpp files and needs no files besides some images below media folder.
Feel free to improve :)
-->
<style>
body, table, div, p, dl {
font: 400 14px/22px;
}
body {
background-color: #F0F0F0;
color: black;
margin-left: 5%;
margin-right: 5%;
}
p.reference, p.definition {
font: 400 14px/22px;
}
.title {
font: 400 14px/28px;
font-size: 150%;
font-weight: bold;
margin: 10px 2px;
}
h1, h2, h3, h4, h5, h6 {
-webkit-transition: text-shadow 0.5s linear;
-moz-transition: text-shadow 0.5s linear;
-ms-transition: text-shadow 0.5s linear;
-o-transition: text-shadow 0.5s linear;
transition: text-shadow 0.5s linear;
margin-right: 15px;
}
caption {
font-weight: bold;
}
h3.version {
font-size: 90%;
text-align: center;
}
a {
color: #3D578C;
font-weight: normal;
text-decoration: none;
}
.contents a:visited {
color: #4665A2;
}
a:hover {
text-decoration: underline;
}
a.el {
font-weight: bold;
}
a.code, a.code:visited, a.line, a.line:visited {
color: #4665A2;
}
a.codeRef, a.codeRef:visited, a.lineRef, a.lineRef:visited {
color: #4665A2;
}
pre.fragment {
border: 1px solid #C4CFE5;
background-color: #FBFCFD;
padding: 4px 6px;
margin: 4px 8px 4px 2px;
overflow: auto;
word-wrap: break-word;
font-size: 9pt;
line-height: 125%;
font-family: monospace, fixed;
font-size: 105%;
}
div.fragment {
padding: 0px;
margin: 4px 8px 4px 2px;
background-color: #FBFCFD;
border: 1px solid #C4CFE5;
}
div.line {
font-family: monospace, fixed;
font-size: 13px;
min-height: 13px;
line-height: 1.0;
text-wrap: unrestricted;
white-space: -moz-pre-wrap; /* Moz */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
text-indent: -53px;
padding-left: 53px;
padding-bottom: 0px;
margin: 0px;
-webkit-transition-property: background-color, box-shadow;
-webkit-transition-duration: 0.5s;
-moz-transition-property: background-color, box-shadow;
-moz-transition-duration: 0.5s;
-ms-transition-property: background-color, box-shadow;
-ms-transition-duration: 0.5s;
-o-transition-property: background-color, box-shadow;
-o-transition-duration: 0.5s;
transition-property: background-color, box-shadow;
transition-duration: 0.5s;
}
div.contents {
margin-top: 10px;
margin-left: 12px;
margin-right: 8px;
}
div.center {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
div.center img {
border: 0px;
}
span.keyword {
color: #008000
}
span.keywordtype {
color: #604020
}
span.keywordflow {
color: #e08000
}
span.comment {
color: #800000
}
span.preprocessor {
color: #806020
}
span.stringliteral {
color: #002080
}
span.charliteral {
color: #008080
}
blockquote {
background-color: #F7F8FB;
border-left: 2px solid #9CAFD4;
margin: 0 24px 0 4px;
padding: 0 12px 0 16px;
}
hr {
height: 0px;
border: none;
border-top: 1px solid #4A6AAA;
}
address {
font-style: normal;
color: #2A3D61;
}
div.header {
background-image:url('nav_h.png');
background-repeat:repeat-x;
background-color: #F9FAFC;
margin: 0px;
border-bottom: 1px solid #C4CFE5;
}
div.headertitle {
padding: 5px 5px 5px 10px;
}
.image {
text-align: center;
}
.caption {
font-weight: bold;
}
div.zoom {
border: 1px solid #90A5CE;
}
tr.heading h2 {
margin-top: 12px;
margin-bottom: 4px;
}
</style>
</head>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<!--END TITLEAREA-->
<!-- end header part -->
<!-- Generated by Doxygen 1.8.13 -->
</div><!-- top -->
<div class="header">
<div class="headertitle">
<div class="title">Tutorial 1: HelloWorld </div> </div>
</div><!--header-->
<div class="contents">
<div class="textblock"><div class="image">
<img src="../../media/001shot.jpg" alt="001shot.jpg"/>
</div>
<p>This Tutorial shows how to set up the IDE for using the Irrlicht Engine and how to write a simple HelloWorld program with it. The program will show how to use the basics of the VideoDriver, the GUIEnvironment, and the SceneManager. Microsoft Visual Studio is used as an IDE, but you will also be able to understand everything if you are using a different one or even another operating system than windows.</p>
<p>You have to include the header file &lt;irrlicht.h&gt; in order to use the engine. The header file can be found in the Irrlicht Engine SDK directory <code>include</code>. To let the compiler find this header file, the directory where it is located has to be specified. This is different for every IDE and compiler you use. Let's explain shortly how to do this in Microsoft Visual Studio:</p>
<ul>
<li>If you use Version 6.0, select the Menu Extras -&gt; Options. Select the directories tab, and select the 'Include' Item in the combo box. Add the <code>include</code> directory of the irrlicht engine folder to the list of directories. Now the compiler will find the Irrlicht.h header file. We also need the irrlicht.lib to be found, so stay in that dialog, select 'Libraries' in the combo box and add the <code>lib/VisualStudio</code> directory. <div class="image">
<img src="../../media/vc6optionsdir.jpg" alt="vc6optionsdir.jpg"/>
</div>
<div class="image">
<img src="../../media/vc6include.jpg" alt="vc6include.jpg"/>
</div>
</li>
<li>If your IDE is Visual Studio .NET, select Tools -&gt; Options. Select the projects entry and then select VC++ directories. Select 'show directories for include files' in the combo box, and add the <code>include</code> directory of the irrlicht engine folder to the list of directories. Now the compiler will find the Irrlicht.h header file. We also need the irrlicht.lib to be found, so stay in that dialog, select 'show directories for Library files' and add the <code>lib/VisualStudio</code> directory. <div class="image">
<img src="../../media/vcnetinclude.jpg" alt="vcnetinclude.jpg"/>
</div>
</li>
</ul>
<p>That's it. With your IDE set up like this, you will now be able to develop applications with the Irrlicht Engine.</p>
<p>Lets start!</p>
<p>After we have set up the IDE, the compiler will know where to find the Irrlicht Engine header files so we can include it now in our code. </p><div class="fragment"><div class="line"><span class="preprocessor">#include &lt;irrlicht.h&gt;</span></div></div><!-- fragment --><p> In the Irrlicht Engine, everything can be found in the namespace 'irr'. So if you want to use a class of the engine, you have to write irr:: before the name of the class. For example to use the IrrlichtDevice write: irr::IrrlichtDevice. To get rid of the irr:: in front of the name of every class, we tell the compiler that we use that namespace from now on, and we will not have to write irr:: anymore. </p><div class="fragment"><div class="line"><span class="keyword">using namespace </span>irr;</div></div><!-- fragment --><p> There are 5 sub namespaces in the Irrlicht Engine. Take a look at them, you can read a detailed description of them in the documentation by clicking on the top menu item 'Namespace List' or by using this link: <a href="http://irrlicht.sourceforge.net/docu/namespaces.html">http://irrlicht.sourceforge.net/docu/namespaces.html</a> Like the irr namespace, we do not want these 5 sub namespaces now, to keep this example simple. Hence, we tell the compiler again that we do not want always to write their names. </p><div class="fragment"><div class="line"><span class="keyword">using namespace </span>core;</div><div class="line"><span class="keyword">using namespace </span>scene;</div><div class="line"><span class="keyword">using namespace </span>video;</div><div class="line"><span class="keyword">using namespace </span>io;</div><div class="line"><span class="keyword">using namespace </span>gui;</div></div><!-- fragment --><p> To be able to use the Irrlicht.DLL file, we need to link with the Irrlicht.lib. We could set this option in the project settings, but to make it easy, we use a pragma comment lib for VisualStudio. On Windows platforms, we have to get rid of the console window, which pops up when starting a program with main(). This is done by the second pragma. We could also use the WinMain method, though losing platform independence then. </p><div class="fragment"><div class="line"><span class="preprocessor">#ifdef _IRR_WINDOWS_</span></div><div class="line"><span class="preprocessor">#pragma comment(lib, &quot;Irrlicht.lib&quot;)</span></div><div class="line"><span class="preprocessor">#pragma comment(linker, &quot;/subsystem:windows /ENTRY:mainCRTStartup&quot;)</span></div><div class="line"><span class="preprocessor">#endif</span></div></div><!-- fragment --><p> This is the main method. We can now use main() on every platform. </p><div class="fragment"><div class="line"><span class="keywordtype">int</span> main()</div><div class="line">{</div></div><!-- fragment --><p> The most important function of the engine is the createDevice() function. The IrrlichtDevice is created by it, which is the root object for doing anything with the engine. createDevice() has 7 parameters:</p>
<ul>
<li>deviceType: Type of the device. This can currently be the Null-device, one of the two software renderers, D3D8, D3D9, or OpenGL. In this example we use EDT_SOFTWARE, but to try out, you might want to change it to EDT_BURNINGSVIDEO, EDT_NULL, EDT_DIRECT3D8, EDT_DIRECT3D9, or EDT_OPENGL.</li>
<li>windowSize: Size of the Window or screen in FullScreenMode to be created. In this example we use 640x480.</li>
<li>bits: Amount of color bits per pixel. This should be 16 or 32. The parameter is often ignored when running in windowed mode.</li>
<li>fullscreen: Specifies if we want the device to run in fullscreen mode or not.</li>
<li>stencilbuffer: Specifies if we want to use the stencil buffer (for drawing shadows).</li>
<li>vsync: Specifies if we want to have vsync enabled, this is only useful in fullscreen mode.</li>
<li>eventReceiver: An object to receive events. We do not want to use this parameter here, and set it to 0.</li>
</ul>
<p>Always check the return value to cope with unsupported drivers, dimensions, etc. </p><div class="fragment"><div class="line">IrrlichtDevice *device =</div><div class="line"> createDevice( video::EDT_SOFTWARE, dimension2d&lt;u32&gt;(640, 480), 16,</div><div class="line"> <span class="keyword">false</span>, <span class="keyword">false</span>, <span class="keyword">false</span>, 0);</div><div class="line"></div><div class="line"><span class="keywordflow">if</span> (!device)</div><div class="line"> <span class="keywordflow">return</span> 1;</div></div><!-- fragment --><p> Set the caption of the window to some nice text. Note that there is an 'L' in front of the string. The Irrlicht Engine uses wide character strings when displaying text. </p><div class="fragment"><div class="line">device-&gt;setWindowCaption(L<span class="stringliteral">&quot;Hello World! - Irrlicht Engine Demo&quot;</span>);</div></div><!-- fragment --><p> Get a pointer to the VideoDriver, the SceneManager and the graphical user interface environment, so that we do not always have to write device-&gt;getVideoDriver(), device-&gt;getSceneManager(), or device-&gt;getGUIEnvironment(). </p><div class="fragment"><div class="line">IVideoDriver* driver = device-&gt;getVideoDriver();</div><div class="line">ISceneManager* smgr = device-&gt;getSceneManager();</div><div class="line">IGUIEnvironment* guienv = device-&gt;getGUIEnvironment();</div></div><!-- fragment --><p> We add a hello world label to the window, using the GUI environment. The text is placed at the position (10,10) as top left corner and (260,22) as lower right corner. </p><div class="fragment"><div class="line">guienv-&gt;addStaticText(L<span class="stringliteral">&quot;Hello World! This is the Irrlicht Software renderer!&quot;</span>,</div><div class="line"> rect&lt;s32&gt;(10,10,260,22), <span class="keyword">true</span>);</div></div><!-- fragment --><p> To show something interesting, we load a Quake 2 model and display it. We only have to get the Mesh from the Scene Manager with getMesh() and add a SceneNode to display the mesh with addAnimatedMeshSceneNode(). We check the return value of getMesh() to become aware of loading problems and other errors.</p>
<p>Instead of writing the filename sydney.md2, it would also be possible to load a Maya object file (.obj), a complete Quake3 map (.bsp) or any other supported file format. By the way, that cool Quake 2 model called sydney was modelled by Brian Collins. </p><div class="fragment"><div class="line">IAnimatedMesh* mesh = smgr-&gt;getMesh(<span class="stringliteral">&quot;../../media/sydney.md2&quot;</span>);</div><div class="line"><span class="keywordflow">if</span> (!mesh)</div><div class="line">{</div><div class="line"> device-&gt;drop();</div><div class="line"> <span class="keywordflow">return</span> 1;</div><div class="line">}</div><div class="line">IAnimatedMeshSceneNode* node = smgr-&gt;addAnimatedMeshSceneNode( mesh );</div></div><!-- fragment --><p> To let the mesh look a little bit nicer, we change its material. We disable lighting because we do not have a dynamic light in here, and the mesh would be totally black otherwise. Then we set the frame loop, such that the predefined STAND animation is used. And last, we apply a texture to the mesh. Without it the mesh would be drawn using only a color. </p><div class="fragment"><div class="line"><span class="keywordflow">if</span> (node)</div><div class="line">{</div><div class="line"> node-&gt;setMaterialFlag(EMF_LIGHTING, <span class="keyword">false</span>);</div><div class="line"> node-&gt;setMD2Animation(scene::EMAT_STAND);</div><div class="line"> node-&gt;setMaterialTexture( 0, driver-&gt;getTexture(<span class="stringliteral">&quot;../../media/sydney.bmp&quot;</span>) );</div><div class="line">}</div></div><!-- fragment --><p> To look at the mesh, we place a camera into 3d space at the position (0, 30, -40). The camera looks from there to (0,5,0), which is approximately the place where our md2 model is. </p><div class="fragment"><div class="line">smgr-&gt;addCameraSceneNode(0, vector3df(0,30,-40), vector3df(0,5,0));</div></div><!-- fragment --><p> Ok, now we have set up the scene, lets draw everything: We run the device in a while() loop, until the device does not want to run any more. This would be when the user closes the window or presses ALT+F4 (or whatever keycode closes a window). </p><div class="fragment"><div class="line"><span class="keywordflow">while</span>(device-&gt;run())</div><div class="line">{</div></div><!-- fragment --><p> Anything can be drawn between a beginScene() and an endScene() call. The beginScene() call clears the screen with a color and the depth buffer, if desired. Then we let the Scene Manager and the GUI Environment draw their content. With the endScene() call everything is presented on the screen. </p><div class="fragment"><div class="line"> driver-&gt;beginScene(<span class="keyword">true</span>, <span class="keyword">true</span>, SColor(255,100,101,140));</div><div class="line"></div><div class="line"> smgr-&gt;drawAll();</div><div class="line"> guienv-&gt;drawAll();</div><div class="line"></div><div class="line"> driver-&gt;endScene();</div><div class="line">}</div></div><!-- fragment --><p> After we are done with the render loop, we have to delete the Irrlicht Device created before with createDevice(). In the Irrlicht Engine, you have to delete all objects you created with a method or function which starts with 'create'. The object is simply deleted by calling -&gt;drop(). See the documentation at irr::IReferenceCounted::drop() for more information. </p><div class="fragment"><div class="line"> device-&gt;drop();</div><div class="line"></div><div class="line"> <span class="keywordflow">return</span> 0;</div><div class="line">}</div></div><!-- fragment --><p> That's it. Compile and run. </p>
</div></div><!-- contents -->
<!-- HTML footer for doxygen 1.8.13-->
<!-- start footer part -->
<p>&nbsp;</p>
</body>
</html>