diff options
Diffstat (limited to '')
-rw-r--r-- | libraries/irrlicht-1.8/examples/06.2DGraphics/tutorial.html | 326 |
1 files changed, 163 insertions, 163 deletions
diff --git a/libraries/irrlicht-1.8/examples/06.2DGraphics/tutorial.html b/libraries/irrlicht-1.8/examples/06.2DGraphics/tutorial.html index ea6291a..c8acea0 100644 --- a/libraries/irrlicht-1.8/examples/06.2DGraphics/tutorial.html +++ b/libraries/irrlicht-1.8/examples/06.2DGraphics/tutorial.html | |||
@@ -1,163 +1,163 @@ | |||
1 | <html> | 1 | <html> |
2 | <head> | 2 | <head> |
3 | <title>Irrlicht Engine Tutorial</title> | 3 | <title>Irrlicht Engine Tutorial</title> |
4 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> | 4 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> |
5 | </head> | 5 | </head> |
6 | 6 | ||
7 | <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> | 7 | <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> |
8 | <br> | 8 | <br> |
9 | <table width="95%" border="0" cellspacing="0" cellpadding="2" align="center"> | 9 | <table width="95%" border="0" cellspacing="0" cellpadding="2" align="center"> |
10 | <tr> | 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> | 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%"> | 12 | <td bgcolor="#666699" width="100%"> |
13 | <div align="center"> | 13 | <div align="center"> |
14 | <div align="center"></div> | 14 | <div align="center"></div> |
15 | <div align="left"><b><font color="#FFFFFF">Tutorial 6. 2D Graphics</font></b></div> | 15 | <div align="left"><b><font color="#FFFFFF">Tutorial 6. 2D Graphics</font></b></div> |
16 | </div> | 16 | </div> |
17 | </td> | 17 | </td> |
18 | </tr> | 18 | </tr> |
19 | <tr bgcolor="#eeeeff"> | 19 | <tr bgcolor="#eeeeff"> |
20 | <td height="90" colspan="2"> | 20 | <td height="90" colspan="2"> |
21 | <div align="left"> | 21 | <div align="left"> |
22 | <p>This Tutorial shows how to do 2d graphics with the Irrlicht Engine. | 22 | <p>This Tutorial shows how to do 2d graphics with the Irrlicht Engine. |
23 | It shows how to draw images, keycolor based sprites, transparent rectangles | 23 | It shows how to draw images, keycolor based sprites, transparent rectangles |
24 | and different fonts. You will may consider this useful if you want to | 24 | and different fonts. You will may consider this useful if you want to |
25 | make a 2d game with the engine, or if you want to draw a cool interface | 25 | make a 2d game with the engine, or if you want to draw a cool interface |
26 | or head up display for your 3d game.</p> | 26 | or head up display for your 3d game.</p> |
27 | <p>The program which is described here will look like this:</p> | 27 | <p>The program which is described here will look like this:</p> |
28 | <p align="center"><img src="../../media/006shot.jpg" width="259" height="204"><br> | 28 | <p align="center"><img src="../../media/006shot.jpg" width="259" height="204"><br> |
29 | </p> | 29 | </p> |
30 | </div> | 30 | </div> |
31 | </td> | 31 | </td> |
32 | </tr> | 32 | </tr> |
33 | </table> | 33 | </table> |
34 | <br> | 34 | <br> |
35 | <table width="95%" border="0" cellspacing="0" cellpadding="2" align="center"> | 35 | <table width="95%" border="0" cellspacing="0" cellpadding="2" align="center"> |
36 | <tr> | 36 | <tr> |
37 | <td bgcolor="#666699"> <div align="center"><b><font color="#FFFFFF"></font></b></div> | 37 | <td bgcolor="#666699"> <div align="center"><b><font color="#FFFFFF"></font></b></div> |
38 | <b><font color="#FFFFFF">Lets start!</font></b></td> | 38 | <b><font color="#FFFFFF">Lets start!</font></b></td> |
39 | </tr> | 39 | </tr> |
40 | <tr> | 40 | <tr> |
41 | <td height="90" bgcolor="#eeeeff" valign="top"> <div align="left"> | 41 | <td height="90" bgcolor="#eeeeff" valign="top"> <div align="left"> |
42 | <p>As always, I include the header files, use the irr namespace, and tell | 42 | <p>As always, I include the header files, use the irr namespace, and tell |
43 | the linker to link with the .lib file. </p> | 43 | the linker to link with the .lib file. </p> |
44 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> | 44 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> |
45 | <tr> | 45 | <tr> |
46 | <td> <pre>#include <irrlicht.h><br>#include <iostream><br><br>using namespace irr;</pre> | 46 | <td> <pre>#include <irrlicht.h><br>#include <iostream><br><br>using namespace irr;</pre> |
47 | <pre>#pragma comment(lib, "Irrlicht.lib") | 47 | <pre>#pragma comment(lib, "Irrlicht.lib") |
48 | </pre></td> | 48 | </pre></td> |
49 | </tr> | 49 | </tr> |
50 | </table> | 50 | </table> |
51 | <p>At first, we let the user select the driver type, then start up the | 51 | <p>At first, we let the user select the driver type, then start up the |
52 | engine, set a caption, and get a pointer to the video driver.</p> | 52 | engine, set a caption, and get a pointer to the video driver.</p> |
53 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> | 53 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> |
54 | <tr> | 54 | <tr> |
55 | <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> | 55 | <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> |
56 | <pre> IrrlichtDevice *device = createDevice(driverType, | 56 | <pre> IrrlichtDevice *device = createDevice(driverType, |
57 | core::dimension2d<s32>(512, 384));</pre> | 57 | core::dimension2d<s32>(512, 384));</pre> |
58 | <pre> if (device == 0) | 58 | <pre> if (device == 0) |
59 | return 1; | 59 | return 1; |
60 | <br> device->setWindowCaption(L"Irrlicht Engine - 2D Graphics Demo");</pre> | 60 | <br> device->setWindowCaption(L"Irrlicht Engine - 2D Graphics Demo");</pre> |
61 | <pre> video::IVideoDriver* driver = device->getVideoDriver();</pre></td> | 61 | <pre> video::IVideoDriver* driver = device->getVideoDriver();</pre></td> |
62 | </tr> | 62 | </tr> |
63 | </table> | 63 | </table> |
64 | <p> All 2d graphics in this example are put together into one texture, | 64 | <p> All 2d graphics in this example are put together into one texture, |
65 | 2ddemo.bmp. Because we want to draw colorkey based sprites, we need | 65 | 2ddemo.bmp. Because we want to draw colorkey based sprites, we need |
66 | to load this texture and tell the engine, which part of it should be | 66 | to load this texture and tell the engine, which part of it should be |
67 | transparent based on a colorkey. In this example, we don't tell it the | 67 | transparent based on a colorkey. In this example, we don't tell it the |
68 | color directly, we just say "Hey Irrlicht Engine, you'll find the | 68 | color directly, we just say "Hey Irrlicht Engine, you'll find the |
69 | color I want at position (0,0) on the texture.". Instead, it would | 69 | color I want at position (0,0) on the texture.". Instead, it would |
70 | be also possible to call <font face="Courier New, Courier, mono">driver->makeColorKeyTexture(images, | 70 | be also possible to call <font face="Courier New, Courier, mono">driver->makeColorKeyTexture(images, |
71 | video::SColor(0,0,0,0))</font>, to make e.g. all black pixels transparent. | 71 | video::SColor(0,0,0,0))</font>, to make e.g. all black pixels transparent. |
72 | Please note, that makeColorKeyTexture just creates an alpha channel | 72 | Please note, that makeColorKeyTexture just creates an alpha channel |
73 | based on the color. </p> | 73 | based on the color. </p> |
74 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> | 74 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> |
75 | <tr> | 75 | <tr> |
76 | <td> <pre>video::ITexture* images = driver->getTexture("../../media/2ddemo.bmp");<br>driver->makeColorKeyTexture(images, core::position2d<s32>(0,0));</pre></td> | 76 | <td> <pre>video::ITexture* images = driver->getTexture("../../media/2ddemo.bmp");<br>driver->makeColorKeyTexture(images, core::position2d<s32>(0,0));</pre></td> |
77 | </tr> | 77 | </tr> |
78 | </table> | 78 | </table> |
79 | <p>To be able to draw some text with two different fonts, we load them. | 79 | <p>To be able to draw some text with two different fonts, we load them. |
80 | Ok, we load just one, as first font we just use the default font which | 80 | Ok, we load just one, as first font we just use the default font which |
81 | is built into the engine.<br> | 81 | is built into the engine.<br> |
82 | Also, we define two rectangles, which specify the position of the images | 82 | Also, we define two rectangles, which specify the position of the images |
83 | of the red imps (little flying creatures) in the texture.</p> | 83 | of the red imps (little flying creatures) in the texture.</p> |
84 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> | 84 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> |
85 | <tr> | 85 | <tr> |
86 | <td> <pre>gui::IGUIFont* font = device->getGUIEnvironment()->getBuiltInFont();<br>gui::IGUIFont* font2 = device->getGUIEnvironment()->getFont( | 86 | <td> <pre>gui::IGUIFont* font = device->getGUIEnvironment()->getBuiltInFont();<br>gui::IGUIFont* font2 = device->getGUIEnvironment()->getFont( |
87 | "../../media/fonthaettenschweiler.bmp");</pre> | 87 | "../../media/fonthaettenschweiler.bmp");</pre> |
88 | <pre>core::rect<s32> imp1(349,15,385,78); | 88 | <pre>core::rect<s32> imp1(349,15,385,78); |
89 | core::rect<s32> imp2(387,15,423,78);</pre></td> | 89 | core::rect<s32> imp2(387,15,423,78);</pre></td> |
90 | </tr> | 90 | </tr> |
91 | </table> | 91 | </table> |
92 | <p>Everything is prepared, now we can draw everything in the draw loop, | 92 | <p>Everything is prepared, now we can draw everything in the draw loop, |
93 | between the begin scene and end scene calls. In this example, we are | 93 | between the begin scene and end scene calls. In this example, we are |
94 | just doing 2d graphics, but it would be no problem to mix them with | 94 | just doing 2d graphics, but it would be no problem to mix them with |
95 | 3d graphics. Just try it out, and draw some 3d vertices or set up a | 95 | 3d graphics. Just try it out, and draw some 3d vertices or set up a |
96 | scene with the scene manager and draw it.</p> | 96 | scene with the scene manager and draw it.</p> |
97 | </div> | 97 | </div> |
98 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> | 98 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> |
99 | <tr> | 99 | <tr> |
100 | <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)); | 100 | <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)); |
101 | </pre></td> | 101 | </pre></td> |
102 | </tr> | 102 | </tr> |
103 | </table> | 103 | </table> |
104 | <p> First, we draw 3 sprites, using the alpha channel we created with makeColorKeyTexture. | 104 | <p> First, we draw 3 sprites, using the alpha channel we created with makeColorKeyTexture. |
105 | The last parameter specifiys that the drawing method should use thiw alpha | 105 | The last parameter specifiys that the drawing method should use thiw alpha |
106 | channel. The parameter before the last one specifies a color, with wich | 106 | channel. The parameter before the last one specifies a color, with wich |
107 | the sprite should be colored. (255,255,255,255) is full white, so the | 107 | the sprite should be colored. (255,255,255,255) is full white, so the |
108 | sprite will look like the original. The third sprite is drawed colored | 108 | sprite will look like the original. The third sprite is drawed colored |
109 | based on the time. </p> | 109 | based on the time. </p> |
110 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> | 110 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> |
111 | <tr> | 111 | <tr> |
112 | <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> | 112 | <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> |
113 | <pre>// draw flying imp | 113 | <pre>// draw flying imp |
114 | driver->draw2DImage(images, core::position2d<s32>(164,125), | 114 | driver->draw2DImage(images, core::position2d<s32>(164,125), |
115 | (time/500 % 2) ? imp1 : imp2, 0, | 115 | (time/500 % 2) ? imp1 : imp2, 0, |
116 | video::SColor(255,255,255,255), true);</pre> | 116 | video::SColor(255,255,255,255), true);</pre> |
117 | <pre>// draw second flying imp with colorcylce | 117 | <pre>// draw second flying imp with colorcylce |
118 | driver->draw2DImage(images, core::position2d<s32>(270,105), | 118 | driver->draw2DImage(images, core::position2d<s32>(270,105), |
119 | (time/500 % 2) ? imp1 : imp2, 0, | 119 | (time/500 % 2) ? imp1 : imp2, 0, |
120 | video::SColor(255,(time) % 255,255,255), true);</pre></td> | 120 | video::SColor(255,(time) % 255,255,255), true);</pre></td> |
121 | </tr> | 121 | </tr> |
122 | </table> | 122 | </table> |
123 | <p> Drawing text is really simple. The code should be self explanatory.</p> | 123 | <p> Drawing text is really simple. The code should be self explanatory.</p> |
124 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> | 124 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> |
125 | <tr> | 125 | <tr> |
126 | <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> | 126 | <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> |
127 | <pre>// draw some other text | 127 | <pre>// draw some other text |
128 | if (font2) | 128 | if (font2) |
129 | font2->draw(L"This is some other text.", | 129 | font2->draw(L"This is some other text.", |
130 | core::rect<s32>(130,20,300,60), | 130 | core::rect<s32>(130,20,300,60), |
131 | video::SColor(255,time % 255,time % 255,255));</pre></td> | 131 | video::SColor(255,time % 255,time % 255,255));</pre></td> |
132 | </tr> | 132 | </tr> |
133 | </table> | 133 | </table> |
134 | <p>At last, we draw the Irrlicht Engine logo (without using a color or an | 134 | <p>At last, we draw the Irrlicht Engine logo (without using a color or an |
135 | alpha channel) and a transparent 2d Rectangle at the position of the mouse | 135 | alpha channel) and a transparent 2d Rectangle at the position of the mouse |
136 | cursor.</p> | 136 | cursor.</p> |
137 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> | 137 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> |
138 | <tr> | 138 | <tr> |
139 | <td> <pre> // draw logo<br> driver->draw2DImage(images, core::position2d<s32>(10,10),<br> core::rect<s32>(354,87,442,118));</pre> | 139 | <td> <pre> // draw logo<br> driver->draw2DImage(images, core::position2d<s32>(10,10),<br> core::rect<s32>(354,87,442,118));</pre> |
140 | <pre> // draw transparent rect under cursor | 140 | <pre> // draw transparent rect under cursor |
141 | core::position2d<s32> m = device->getCursorControl()->getPosition(); | 141 | core::position2d<s32> m = device->getCursorControl()->getPosition(); |
142 | driver->draw2DRectangle(video::SColor(100,255,255,255), | 142 | driver->draw2DRectangle(video::SColor(100,255,255,255), |
143 | core::rect<s32>(m.X-20, m.Y-20, m.X+20, m.Y+20));</pre> | 143 | core::rect<s32>(m.X-20, m.Y-20, m.X+20, m.Y+20));</pre> |
144 | <pre> driver->endScene(); | 144 | <pre> driver->endScene(); |
145 | } | 145 | } |
146 | }</pre></td> | 146 | }</pre></td> |
147 | </tr> | 147 | </tr> |
148 | </table> | 148 | </table> |
149 | <p>That's all, it was not really difficult, I hope.</p> | 149 | <p>That's all, it was not really difficult, I hope.</p> |
150 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> | 150 | <table width="95%" border="0" cellspacing="2" cellpadding="0" bgcolor="#CCCCCC" align="center"> |
151 | <tr> | 151 | <tr> |
152 | <td> <pre> device->drop(); | 152 | <td> <pre> device->drop(); |
153 | return 0; | 153 | return 0; |
154 | }</pre> | 154 | }</pre> |
155 | </td> | 155 | </td> |
156 | </tr> | 156 | </tr> |
157 | </table> | 157 | </table> |
158 | <p> </p></td> | 158 | <p> </p></td> |
159 | </tr> | 159 | </tr> |
160 | </table> | 160 | </table> |
161 | <p> </p> | 161 | <p> </p> |
162 | </body> | 162 | </body> |
163 | </html> | 163 | </html> |