aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/src/others/irrlicht-1.8.1/examples/05.UserInterface/tutorial.html
diff options
context:
space:
mode:
Diffstat (limited to 'src/others/irrlicht-1.8.1/examples/05.UserInterface/tutorial.html')
-rw-r--r--src/others/irrlicht-1.8.1/examples/05.UserInterface/tutorial.html225
1 files changed, 225 insertions, 0 deletions
diff --git a/src/others/irrlicht-1.8.1/examples/05.UserInterface/tutorial.html b/src/others/irrlicht-1.8.1/examples/05.UserInterface/tutorial.html
new file mode 100644
index 0000000..3f3614f
--- /dev/null
+++ b/src/others/irrlicht-1.8.1/examples/05.UserInterface/tutorial.html
@@ -0,0 +1,225 @@
1<html>
2<head>
3<title>Irrlicht Engine Tutorial</title>
4<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
5</head>
6
7<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
8<br>
9<table width="95%" border="0" cellspacing="0" cellpadding="2" align="center">
10 <tr>
11 <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>
12 <td bgcolor="#666699" width="100%">
13<div align="center">
14<div align="center"></div>
15 <div align="left"><b><font color="#FFFFFF">Tutorial 5.User Interface</font></b></div>
16 </div>
17 </td>
18 </tr>
19 <tr bgcolor="#eeeeff">
20 <td height="90" colspan="2">
21 <div align="left">
22 <p>This tutorial shows how to use the built in User Interface of the Irrlicht
23 Engine. It will give a brief overview and show how to create and use
24 windows, buttons, scroll bars, static texts and list boxes. </p>
25 <p>The program which is described here will look like this:</p>
26 <p align="center"><img src="../../media/005shot.jpg" width="259" height="204"><br>
27 </p>
28 </div>
29 </td>
30 </tr>
31</table>
32<br>
33<table width="95%" border="0" cellspacing="0" cellpadding="2" align="center">
34 <tr>
35 <td bgcolor="#666699"> <div align="center"><b><font color="#FFFFFF"></font></b></div>
36 <b><font color="#FFFFFF">Lets start!</font></b></td>
37 </tr>
38 <tr>
39 <td height="90" bgcolor="#eeeeff" valign="top"> <div align="left">
40 <p>As always, we include the header files (conio and curses for getting
41 user input from the console), and use the irrlicht namespaces. We also
42 store a pointer to the Irrlicht device, a counter variable for changing
43 the creation position of a window, and a pointer to a listbox.</p>
44 <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
45 <tr>
46 <td> <pre>#include &lt;irrlicht.h&gt;
47#include &lt;iostream&gt;<br>
48using namespace irr;</pre>
49 <pre>using namespace core;
50using namespace scene;
51using namespace video;
52using namespace io;
53using namespace gui;</pre>
54 <pre>#pragma comment(lib, &quot;Irrlicht.lib&quot;)</pre>
55 <pre>IrrlichtDevice *device = 0;
56s32 cnt = 0;
57IGUIListBox* listbox = 0;
58</pre></td>
59 </tr>
60 </table>
61 <p>The Event Receiver is not only capable of getting keyboard and mouse
62 input events, but also events of the graphical user interface (gui).
63 There are events for almost everything: Button click, Listbox selection
64 change, events that say that a element was hovered and so on. To be
65 able to react to some of these events, we create <br>
66 an event receiver. We only react to gui events, and if it's such an
67 event, we get the id of the caller (the gui element which caused the
68 event) and get the pointer to the gui environment. </p>
69 <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
70 <tr>
71 <td> <pre>class MyEventReceiver : public IEventReceiver<br>{<br>public:<br> virtual bool OnEvent(const SEvent&amp; event)<br> {<br> if (event.EventType == EET_GUI_EVENT)<br> {<br> s32 id = event.GUIEvent.Caller-&gt;getID();<br> IGUIEnvironment* env = device-&gt;getGUIEnvironment();</pre>
72 <pre> switch(event.GUIEvent.EventType)
73 {</pre>
74 </td>
75 </tr>
76 </table>
77 <p> If a scrollbar changed its scroll position, and it is 'our' scrollbar
78 (the one with id 104), then we change the <br>
79 transparency of all gui elements. This is a very easy task: There is
80 a skin object, in which all color settings are stored. We simply go
81 through all colors stored in the skin and change their alpha value.
82 </p>
83 <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
84 <tr>
85 <td height="80"> <pre>case EGET_SCROLL_BAR_CHANGED:<br> if (id == 104)<br> {<br> s32 pos = ((IGUIScrollBar*)event.GUIEvent.Caller)-&gt;getPos();<br> <br> for (s32 i=0; i&lt;EGDC_COUNT ; ++i)<br> {<br> SColor col = env-&gt;getSkin()-&gt;getColor((EGUI_DEFAULT_COLOR)i);<br> col.setAlpha(pos);<br> env-&gt;getSkin()-&gt;setColor((EGUI_DEFAULT_COLOR)i, col);<br> }<br> }<br>break;</pre></td>
86 </tr>
87 </table>
88 <p>If a button was clicked, it could be one of 'our' three buttons. If
89 it is the first, we shut down the engine.<br>
90 If it is the second, we create a little window with some text on it.
91 We also add a string to the list box to log<br>
92 what happened. And if it is the third button, we create a file open
93 dialog, and add also this as string to the list box.<br>
94 That's all for the event receiver.</p>
95 <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
96 <tr>
97 <td>
98 <pre> case EGET_BUTTON_CLICKED:
99 if (id == 101)
100 {
101 device-&gt;closeDevice();
102 return true;
103 }</pre>
104 <pre> if (id == 102)
105 {
106 listbox-&gt;addItem(L&quot;Window created&quot;);
107 cnt += 30;
108 if (cnt &gt; 200)
109 cnt = 0;</pre>
110 <pre> IGUIWindow* window = env-&gt;addWindow(
111 rect&lt;s32&gt;(100 + cnt, 100 + cnt, 300 + cnt, 200 + cnt), <br> false, // modal?
112 L&quot;Test window&quot;);</pre>
113 <pre> env-&gt;addStaticText(L&quot;Please close me&quot;,
114 rect&lt;s32&gt;(35,35,140,50),
115 true, // border?,
116 false, // wordwrap?
117 window);
118
119 return true;
120 }</pre>
121 <pre> if (id == 103)
122 {
123 listbox-&gt;addItem(L&quot;File open&quot;);
124 env-&gt;addFileOpenDialog(L&quot;Please choose a file.&quot;);
125 return true;
126 }</pre>
127 <pre> break;
128 }
129 }
130 return false;
131 }
132 };</pre>
133 </td>
134 </tr>
135 </table>
136 <p>Ok, now for the more interesting part. First, create the Irrlicht device.
137 As in some examples before, we ask the user which driver he wants to
138 use for this example:</p>
139 </div>
140 <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
141 <tr>
142 <td> <pre>int main()
143{
144 // ask user for driver
145 video::E_DRIVER_TYPE driverType;
146
147
148 printf(&quot;Please select the driver you want for this example:\n&quot;\<br> &quot; (a) Direct3D 9.0c\n (b) Direct3D 8.1\n (c) OpenGL 1.5\n&quot;\<br> &quot; (d) Software Renderer\n (e) Apfelbaum Software Renderer\n&quot;\<br> &quot; (f) NullDevice\n (otherKey) exit\n\n&quot;);<br><br> char i;<br> std::cin &gt;&gt; i;<br>
149 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 1;<br> }
150
151 // create device and exit if creation failed
152 device = createDevice(driverType, core::dimension2d&lt;s32&gt;(640, 480));<br>
153 if (device == 0)
154 return 1;
155</pre>
156 </td>
157 </tr>
158 </table>
159 <p>The creation was successful, now we set the event receiver and store
160 pointers to the driver and to the gui environment. </p>
161 <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
162 <tr>
163 <td><pre>MyEventReceiver receiver;
164device-&gt;setEventReceiver(&amp;receiver);
165device-&gt;setWindowCaption(L&quot;Irrlicht Engine - User Inferface Demo&quot;);</pre>
166 <pre>video::IVideoDriver* driver = device-&gt;getVideoDriver();
167IGUIEnvironment* env = device-&gt;getGUIEnvironment();
168</pre>
169 </td>
170 </tr>
171 </table>
172 <p>We add three buttons. The first one closes the engine. The second creates
173 a window and the third opens a file open dialog. The third parameter is
174 the id of the button, with which we can easily identify the button in
175 the event receiver.</p>
176 <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
177 <tr>
178 <td><pre>env-&gt;addButton(rect&lt;s32&gt;(10,240,100,270), 0, 101, L&quot;Quit&quot;);<br>env-&gt;addButton(rect&lt;s32&gt;(10,280,100,320), 0, 102, L&quot;New Window&quot;);<br>env-&gt;addButton(rect&lt;s32&gt;(10,330,100,370), 0, 103, L&quot;File Open&quot;);</pre></td>
179 </tr>
180 </table>
181 <p> Now, we add a static text and a scrollbar, which modifies the transparency
182 of all gui elements. We set the maximum value of the scrollbar to 255,
183 because that's the maximal value for a color value.<br>
184 Then we create an other static text and a list box.</p>
185 <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
186 <tr>
187 <td><pre>env-&gt;addStaticText(L&quot;Transparent Control:&quot;, rect&lt;s32&gt;(150,20,350,40), true);<br>IGUIScrollBar* scrollbar = env-&gt;addScrollBar(true,
188 rect&lt;s32&gt;(150, 45, 350, 60), 0, 104);<br>scrollbar-&gt;setMax(255);</pre>
189 <pre>env-&gt;addStaticText(L&quot;Logging ListBox:&quot;, rect&lt;s32&gt;(50,110,250,130), true);
190listbox = env-&gt;addListBox(rect&lt;s32&gt;(50, 140, 250, 210));</pre></td>
191 </tr>
192 </table>
193 <br>
194 To make the font a little bit nicer, we load an external font and set it
195 as new font in the skin. An at last, we create a nice Irrlicht Engine logo
196 in the top left corner. <br>
197 <br>
198 <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
199 <tr>
200 <td> <pre>IGUISkin* skin = env-&gt;getSkin();<br>IGUIFont* font = env-&gt;getFont(&quot;../../media/fonthaettenschweiler.bmp&quot;);<br>if (font)<br> skin-&gt;setFont(font);</pre>
201 <pre>IGUIImage* img = env-&gt;addImage(<br> driver-&gt;getTexture(&quot;../../media/irrlichtlogoalpha.tga&quot;),<br> position2d&lt;int&gt;(10,10));</pre></td>
202 </tr>
203 </table>
204 <p>That's all, we only have to draw everything.</p>
205 <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center">
206 <tr>
207 <td>
208 <pre> while(device-&gt;run() &amp;&amp; driver)<br> if (device-&gt;isWindowActive()) <br> {<br> driver-&gt;beginScene(true, true, SColor(0,122,65,171));
209 env-&gt;drawAll();
210 driver-&gt;endScene();
211 }
212
213 device-&gt;drop();</pre>
214 <pre> return 0;
215}</pre>
216 </td>
217 </tr>
218 </table>
219
220 </td>
221 </tr>
222</table>
223<p>&nbsp;</p>
224 </body>
225</html>
generated by cgit v1.1 at 2024-06-27 09:23:54 +0000