Frictional Game Wiki

<h1>Level Editor - Useful tricks (in progress)</h1> <div class="level1"> <p> While The Basics and Light tutorial are great enough to create atmospheric maps, there are some things that can easily help achieve interesting results. </p> </div> <h2>Billboards</h2> <div class="level2"> <p> <a href="http://www.youtube.com/watch?v=Sw4du21rNqc" class="urlextern" title="http://www.youtube.com/watch?v=Sw4du21rNqc" rel="nofollow">Demonstration</a> </p> <p> Step by step tutorial. Starting with easy way to setup and control billboards for your map, and continuing to more advanced effects. </p> <p> First make sure you have read and understood <a href="http://wiki.frictionalgames.com/hpl2/tutorials/level_editor/tutorial_1#billboards_particles" class="urlextern" title="http://wiki.frictionalgames.com/hpl2/tutorials/level_editor/tutorial_1#billboards_particles" rel="nofollow">this</a>. </p> <p> <b><br/> </b> </p> <p> <b>Start off by creating a billboard and a point light and connect the billboard into the point light. </b> This helps you control the color value of every billboard you duplicate from the original connected billboard. Keep all of the billboards colors at 1 value. (That one extra point light in the picture is useless for the first parts) </p> <p> <img src="/lib/exe/fetch.php?w=800&h=489&tok=4e453c&media=http%3A%2F%2Fi1237.photobucket.com%2Falbums%2Fff478%2FKhyrpa%2FWikiTutorial%2FBB_01.jpg" class="media" title="bb_01.jpg" alt="bb_01.jpg" width="800" height="489" /> </p> <p> Then align your billboards properly into your window. Some videos about creating billboards. These are done without the connection to light, but the placement should be okay: </p> <p> <a href="http://www.youtube.com/watch?v=Jb0xJRBO2d8&t=3m37s" class="urlextern" title="http://www.youtube.com/watch?v=Jb0xJRBO2d8&t=3m37s" rel="nofollow">Office hlp2 level editor[P2] (billboards, lighting)</a> </p> <p> <a href="http://www.youtube.com/watch?v=u8EhP59tmjA" class="urlextern" title="http://www.youtube.com/watch?v=u8EhP59tmjA" rel="nofollow">Billboard Action Amnesia level editor </a> </p> <p> <a href="/lib/exe/fetch.php?tok=144dca&media=http%3A%2F%2Fi1237.photobucket.com%2Falbums%2Fff478%2FKhyrpa%2FWikiTutorial%2FBB_02.jpg" class="media" title="http://i1237.photobucket.com/albums/ff478/Khyrpa/WikiTutorial/BB_02.jpg"><img src="/lib/exe/fetch.php?w=800&h=480&tok=288375&media=http%3A%2F%2Fi1237.photobucket.com%2Falbums%2Fff478%2FKhyrpa%2FWikiTutorial%2FBB_02.jpg" class="media" title="bb_02.jpg" alt="bb_02.jpg" width="800" height="480" /></a> </p> <p> Then tinker with the color of the connected point light and adjust the lenght and width of the billboards. This is the hardest and time consuming part about billboards. Make sure to often check in game because billboards look different there and you can see if they look good from every angle. </p> <p> <a href="/lib/exe/fetch.php?tok=769871&media=http%3A%2F%2Fi1237.photobucket.com%2Falbums%2Fff478%2FKhyrpa%2FWikiTutorial%2FBB_03.jpg" class="media" title="http://i1237.photobucket.com/albums/ff478/Khyrpa/WikiTutorial/BB_03.jpg"><img src="/lib/exe/fetch.php?w=800&h=482&tok=2afdab&media=http%3A%2F%2Fi1237.photobucket.com%2Falbums%2Fff478%2FKhyrpa%2FWikiTutorial%2FBB_03.jpg" class="media" title="bb_03.jpg" alt="bb_03.jpg" width="800" height="482" /></a> </p> <p> <b>That was it for simple billboards, but if you continue, you get to the interesting parts!</b> </p> <p> To create better looking billboards, not all of them should be of the same color, so create another point light and connect the billboards that you think need different colors to other point lights. For simplicitys sake I keep them connected to only 2 point lights. (Colors changed so you can see better what I did) </p> <p> <a href="/lib/exe/fetch.php?tok=9b8e67&media=http%3A%2F%2Fi1237.photobucket.com%2Falbums%2Fff478%2FKhyrpa%2FWikiTutorial%2FBB_04.jpg" class="media" title="http://i1237.photobucket.com/albums/ff478/Khyrpa/WikiTutorial/BB_04.jpg"><img src="/lib/exe/fetch.php?w=800&h=479&tok=034a7d&media=http%3A%2F%2Fi1237.photobucket.com%2Falbums%2Fff478%2FKhyrpa%2FWikiTutorial%2FBB_04.jpg" class="media" title="bb_04.jpg" alt="bb_04.jpg" width="800" height="479" /></a> </p> <p> <b>Flicker effect</b> </p> <p> You can create the flickering effect with various methods. First and easiest one would be to use the point lights own flickering settings inside the level editor. Tweak the Off Color and Diffuse Color to suit your liking. Example settings: </p> <p> <img src="/lib/exe/fetch.php?tok=b32e67&media=http%3A%2F%2Fi1237.photobucket.com%2Falbums%2Fff478%2FKhyrpa%2FWikiTutorial%2FBB_05.jpg" class="media" title="bb_05.jpg" alt="bb_05.jpg" /> </p> <p> Using the level editor only is not as interesting as randomly changing colors of billboards and every light that acts as the windows shine in sync with script. </p> <p> So next phase would be to set up additional lights to the window, spot light and some ambient point lights in this case. Name them so you can easily track what they are. In this case I named mine like this: </p> <p> window_light_bright_1 (spot light with gobo (<b>Rotate the gobo if its upside down</b>), I want this bright) </p> <p> window_light_bright_2 (point light close to window, bright also) </p> <p> window_light_dark_1 (large point light) </p> <p> <a href="/lib/exe/fetch.php?tok=af4ecb&media=http%3A%2F%2Fi1237.photobucket.com%2Falbums%2Fff478%2FKhyrpa%2FWikiTutorial%2FBB_06.jpg" class="media" title="http://i1237.photobucket.com/albums/ff478/Khyrpa/WikiTutorial/BB_06.jpg"><img src="/lib/exe/fetch.php?w=800&h=480&tok=13a68f&media=http%3A%2F%2Fi1237.photobucket.com%2Falbums%2Fff478%2FKhyrpa%2FWikiTutorial%2FBB_06.jpg" class="media" title="bb_06.jpg" alt="bb_06.jpg" width="800" height="480" /></a> </p> <p> Then the rest is up to script. Example script for controlling, very simple vers. You can tweak the ideas around alot. Like this one does not change the color of the lights into same color as the billboards. </p> <pre class="code c"><span class="kw4">void</span> FlickerTimer<span class="br0">(</span>string <span class="sy0">&</span>in asTimer<span class="br0">)</span> <span class="br0">{</span> <span class="kw4">float</span> ftimer <span class="sy0">=</span> RandFloat<span class="br0">(</span><span class="nu17">0.6f</span><span class="sy0">,</span><span class="nu17">1.6f</span><span class="br0">)</span><span class="sy0">;</span> FadeLightTo<span class="br0">(</span>"bb_bright"<span class="sy0">,</span> RandFloat<span class="br0">(</span><span class="nu17">0.2f</span><span class="sy0">,</span><span class="nu17">0.3f</span><span class="br0">)</span><span class="sy0">,</span> RandFloat<span class="br0">(</span><span class="nu17">0.2f</span><span class="sy0">,</span><span class="nu17">0.35f</span><span class="br0">)</span><span class="sy0">,</span> RandFloat<span class="br0">(</span><span class="nu17">0.3f</span><span class="sy0">,</span><span class="nu17">0.39f</span><span class="br0">)</span><span class="sy0">,</span> <span class="nu0">1</span><span class="sy0">,</span> <span class="sy0">-</span><span class="nu0">1</span><span class="sy0">,</span> ftimer<span class="br0">)</span><span class="sy0">;</span> FadeLightTo<span class="br0">(</span>"bb_dark"<span class="sy0">,</span> RandFloat<span class="br0">(</span><span class="nu17">0.15f</span><span class="sy0">,</span><span class="nu17">0.29f</span><span class="br0">)</span><span class="sy0">,</span> RandFloat<span class="br0">(</span><span class="nu17">0.18f</span><span class="sy0">,</span><span class="nu17">0.35f</span><span class="br0">)</span><span class="sy0">,</span> RandFloat<span class="br0">(</span><span class="nu17">0.35f</span><span class="sy0">,</span><span class="nu17">0.39f</span><span class="br0">)</span><span class="sy0">,</span> <span class="nu0">1</span><span class="sy0">,</span> <span class="sy0">-</span><span class="nu0">1</span><span class="sy0">,</span> ftimer<span class="br0">)</span><span class="sy0">;</span> <span class="kw1">for</span><span class="br0">(</span><span class="kw4">int</span> i<span class="sy0">=</span><span class="nu0">0</span><span class="sy0">;</span>i< 2<span class="sy0">;</span>i<span class="sy0">++</span><span class="br0">)</span> FadeLightTo<span class="br0">(</span>"window_light_bright_"<span class="sy0">+</span>i<span class="sy0">,</span> RandFloat<span class="br0">(</span><span class="nu17">0.55f</span><span class="sy0">,</span><span class="nu17">0.7f</span><span class="br0">)</span><span class="sy0">,</span> RandFloat<span class="br0">(</span><span class="nu17">0.69f</span><span class="sy0">,</span><span class="nu17">0.8f</span><span class="br0">)</span><span class="sy0">,</span> RandFloat<span class="br0">(</span><span class="nu17">0.8f</span><span class="sy0">,</span><span class="nu17">0.9f</span><span class="br0">)</span><span class="sy0">,</span> <span class="nu0">1</span><span class="sy0">,</span> <span class="sy0">-</span><span class="nu0">1</span><span class="sy0">,</span> ftimer<span class="br0">)</span><span class="sy0">;</span> <span class="kw1">for</span><span class="br0">(</span><span class="kw4">int</span> i<span class="sy0">=</span><span class="nu0">0</span><span class="sy0">;</span>i< 2<span class="sy0">;</span>i<span class="sy0">++</span><span class="br0">)</span> FadeLightTo<span class="br0">(</span>"window_light_dark_"<span class="sy0">+</span>i<span class="sy0">,</span> RandFloat<span class="br0">(</span><span class="nu17">0.4f</span><span class="sy0">,</span><span class="nu17">0.5f</span><span class="br0">)</span><span class="sy0">,</span> RandFloat<span class="br0">(</span><span class="nu17">0.5f</span><span class="sy0">,</span><span class="nu17">0.6f</span><span class="br0">)</span><span class="sy0">,</span> RandFloat<span class="br0">(</span><span class="nu17">0.6f</span><span class="sy0">,</span><span class="nu17">0.7f</span><span class="br0">)</span><span class="sy0">,</span> <span class="nu0">1</span><span class="sy0">,</span> <span class="sy0">-</span><span class="nu0">1</span><span class="sy0">,</span> ftimer<span class="br0">)</span><span class="sy0">;</span> AddTimer<span class="br0">(</span>"repeat"<span class="sy0">,</span> ftimer<span class="sy0">,</span> "FlickerTimer"<span class="br0">)</span><span class="sy0">;</span> <span class="br0">}</span> </pre><p> </p> <p> Then here is the one I used for the demonstration video clip. (Can cause performance issues when done with lots of billboards and particles, I haven't tested…). Minor tweaking, added spawn areas for particles and finetuned the script for long. The script could be done more efficient, if someone can, please edit! </p> <p> <a href="/lib/exe/fetch.php?tok=63d682&media=http%3A%2F%2Fi1237.photobucket.com%2Falbums%2Fff478%2FKhyrpa%2FWikiTutorial%2FBB_07.jpg" class="media" title="http://i1237.photobucket.com/albums/ff478/Khyrpa/WikiTutorial/BB_07.jpg"><img src="/lib/exe/fetch.php?w=800&h=483&tok=7cc44e&media=http%3A%2F%2Fi1237.photobucket.com%2Falbums%2Fff478%2FKhyrpa%2FWikiTutorial%2FBB_07.jpg" class="media" title="bb_07.jpg" alt="bb_07.jpg" width="800" height="483" /></a> </p> <pre class="code c"> </pre><p> </p> </div>