Frictional Game Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

<h1>Level Editor - Skyboxes [Needs Fixing]</h1>
<div class="level1">

<p>
&lt;note>As of Amnesia's 1.3 release, the method in which the game reads Skyboxes has changed slightly, <br/>

noticeably in orientation and raw image layout. For now, the information is a <b>TEMPORARY FIX. <br/>

</b> Should the Skybox issues be fixed, this will be rewritten. The below applies to Amnesia: <br/>

The Dark Descent version 1.3 or above. Skyboxes may show incorrectly depending on which <br/>

Amnesia version you choose. &lt;/note>
</p>

</div>

<h2>What is a Skybox?</h2>
<div class="level2">

<p>
A Skybox is a <em>type of cubemap </em> which is seemingly placed at the furthest drawing point accessible within a game's map. It is essentially the sky, horizon and ground which is used to show where the setting is in relation to the surroundings. For example, a skybox which comprises of planets, stars and asteroids will give the illusion of the player in space, even if the map looks like you're in a castle (though it won't look very good…).
</p>

<p>
Skyboxes are a must have in outdoor or scenic based environments. Not only can it give a sense of light, location and assistance otherwise in developing, it is incredibly useful in immersing the player into the finer details which make up the level.
</p>

<p>
So let's get started. For this tutorial, I used:
</p>

<p>
&lt;nowiki>&#42;&lt;/nowiki> Adobe Photoshop ( or for a free alternative, you may use <a href="http://www.gimp.org/" class="urlextern" title="http://www.gimp.org/"  rel="nofollow">GIMP</a>, and may make use of this <a href="http://www.youtube.com/watch?v=9uKBYVEyw1s" class="urlextern" title="http://www.youtube.com/watch?v=9uKBYVEyw1s"  rel="nofollow">video tutorial</a>).<br/>

&lt;nowiki>&#42;&lt;/nowiki>.DDS plugin for your appropriate image editor (nVida for <a href="https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop" class="urlextern" title="https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop"  rel="nofollow">Photoshop</a> or <a href="https://code.google.com/p/gimp-dds/" class="urlextern" title="https://code.google.com/p/gimp-dds/"  rel="nofollow">GIMP</a>)<br/>

&lt;nowiki>&#42;&lt;/nowiki> A raw collection of images which will make up your skybox<sup>1</sup> .<br/>

&lt;nowiki>&#42;&lt;/nowiki> The HPL2 Level Editor.<br/>

<sup>1</sup> I made use of <a href="http://www.redsorceress.com/skybox.html" class="urlextern" title="http://www.redsorceress.com/skybox.html"  rel="nofollow">this website</a> to retrieve my images. You will need something to open .zip files if you are using that site.
</p>

</div>

<h2>How do I make a Skybox?</h2>
<div class="level2">

<p>
I used Adobe Photoshop to make the skybox. I also used the <em>Mountains</em> skybox from the above page.
</p>

</div>

<h3>Step 0: Understanding the construction of a Skybox</h3>
<div class="level3">

<p>
In order to construct the skybox, you need to know how one is laid out. Here is the layout as read properly by Amnesia 1.3 and above. <em>Top</em> is at an angle because the new orientation of that raw image does not match up to the <em>Left</em>. Once you place <em>Top </em> onto the canvas, rotate it 90 degrees clockwise.
</p>

<p>
<a href="/lib/exe/fetch.php?tok=364f31&media=http%3A%2F%2Fpuu.sh%2FhKAiV%2Fcae3b2e8ed.png" class="media" title="http://puu.sh/hKAiV/cae3b2e8ed.png"><img src="/lib/exe/fetch.php?w=640&tok=6a27bc&media=http%3A%2F%2Fpuu.sh%2FhKAiV%2Fcae3b2e8ed.png" class="media" alt="" width="640" /></a>
</p>

<p>
<em>For those interested, the changes which occurred between 1.2 and 1.3 involving Skyboxes were;<br/>

- Back and Left were swapped. As in, the layout was Left, Front, Top, Bottom, Right, Back.<br/>

- Top was, obviously, rotated to reflect this change. 90 degrees clockwise.</em>
</p>

</div>

<h3>Step 1: Setting Up</h3>
<div class="level3">

<p>
The Skybox you'll be making if you are using the above website will likely be constructed using five raw images of 512×512 dimensions. This isn't much of a dilemma, since while there are five images, the 'missing' section is <em>Bottom</em>, which you can simply make a 512×512 square of a color (I tend to use RGB=128 Grey, but it is completely optional).
</p>

<p>
Download your skybox and extract it if you're using the link above.
</p>

<p>
If you're using Windows 7, roll over one of your extracted images with your mouse. In most cases, the dimensions of the image will be displayed in the tooltip. In my case, it is 512×512, which I will be using for the rest of the tutorial.
</p>

<p>
<a href="/lib/exe/fetch.php?tok=9255c2&media=http%3A%2F%2Fpuu.sh%2FhKARM%2F8e45008788.jpg" class="media" title="http://puu.sh/hKARM/8e45008788.jpg"><img src="/lib/exe/fetch.php?w=640&tok=b53d8a&media=http%3A%2F%2Fpuu.sh%2FhKARM%2F8e45008788.jpg" class="media" title="8e45008788.jpg" alt="8e45008788.jpg" width="640" /></a>
</p>

<p>
If such an option is unavailable, open the image in Paint. The dimensions will be on the bottom of the window.
</p>

</div>

<h3>Step 2: New Project</h3>
<div class="level3">

<p>
1. Start a new Project in Photoshop (File > New…)<br/>

2. Set the Height to the vertical dimensions in which your images are (512 in this case).<br/>

3. Set your Width to your Height multiplied by 6. In my case, 512 x 6 = 3072.<br/>

4. Make sure both Height and Width are in Pixels, then you're all good to press OK.
</p>

<p>
<a href="/lib/exe/fetch.php?tok=cc9690&media=http%3A%2F%2Fpuu.sh%2FhKzLB%2F5428c5b223.png" class="media" title="http://puu.sh/hKzLB/5428c5b223.png"><img src="/lib/exe/fetch.php?tok=cc9690&media=http%3A%2F%2Fpuu.sh%2FhKzLB%2F5428c5b223.png" class="media" alt="" /></a>
</p>

<p>
To make this process easier on how you set out the images, and to assist with snapping, we can make use of the grid features in Photoshop.
</p>

<p>
<a href="/lib/exe/fetch.php?tok=289ad1&media=http%3A%2F%2Fpuu.sh%2FhKAZ5%2F9851328fbc.png" class="media" title="http://puu.sh/hKAZ5/9851328fbc.png"><img src="/lib/exe/fetch.php?w=640&tok=17bc80&media=http%3A%2F%2Fpuu.sh%2FhKAZ5%2F9851328fbc.png" class="media" alt="" width="640" /></a>
</p>

<p>
1. Navigate to <em>Edit > Preferences > Guides, Grid & Slices.</em> <br/>

2. Under the 'Grid' box, set the Gridline to 512 pixels (or the vertical size of your images), and make the subdivision 1, 2 or 4 (any higher is unnecessary).<br/>

3. If your grid is not visible, navigate to <em>View > Show > Grid</em>. This will give you six sections of your image. (If the grid, at any point begins to annoy you or need to check if the images are correctly aligned against their 'partner', pressing <em>Ctrl+H</em> will hide/show the grid).
</p>

</div>

<h3>Step 3: Import</h3>
<div class="level3">

<p>
Import your images. There are many ways to do this, but for the sake of simplicity, just select the five images and drag them onto the canvas. Then, comparing them to the filenames (if the layers do not have their respective filenames), lay them out within the grid in the correct format. <b>Don't forget to rotate <em>Top</em> 90 degrees clockwise!</b>
</p>

<p>
<a href="/lib/exe/fetch.php?tok=ca7b44&media=http%3A%2F%2Fpuu.sh%2FhKBiO%2F43fad4f6c7.jpg" class="media" title="http://puu.sh/hKBiO/43fad4f6c7.jpg"><img src="/lib/exe/fetch.php?w=640&tok=b3c3de&media=http%3A%2F%2Fpuu.sh%2FhKBiO%2F43fad4f6c7.jpg" class="media" title="43fad4f6c7.jpg" alt="43fad4f6c7.jpg" width="640" /></a>
</p>

<p>
Now create a new layer (the paper icon in the Layers window, which in my case, is the second last option, or second from the right)
</p>

<p>
<a href="/lib/exe/fetch.php?tok=2ec990&media=http%3A%2F%2Fpuu.sh%2FhKBpw%2F5611b6b87a.png" class="media" title="http://puu.sh/hKBpw/5611b6b87a.png"><img src="/lib/exe/fetch.php?tok=2ec990&media=http%3A%2F%2Fpuu.sh%2FhKBpw%2F5611b6b87a.png" class="media" alt="" /></a>
</p>

<p>
Use the Paint bucket on this layer to make it any color you want, but not one which will be the same as the sides of your <em>Top</em> or <em>Right</em> images.
</p>

<p>
<a href="/lib/exe/fetch.php?tok=94479f&media=http%3A%2F%2Fpuu.sh%2FhKBx2%2F2b1f805c67.jpg" class="media" title="http://puu.sh/hKBx2/2b1f805c67.jpg"><img src="/lib/exe/fetch.php?tok=94479f&media=http%3A%2F%2Fpuu.sh%2FhKBx2%2F2b1f805c67.jpg" class="media" title="2b1f805c67.jpg" alt="2b1f805c67.jpg" /></a>
</p>

<p>
If the Gradient tool appears in the tools pane, just click and hold and select the Paint Bucket Tool. To change the color, click on the foreground color in the bottom of your tools pane (mine was black), then select a color using the <em>Color Picker. </em> As stated earlier, I just made mine RGB 128, 128, 128 (or #808080 in Hex).
</p>

<p>
If your specified color covers the other images, move your layer as low as possible below the other layers, but higher than background, as that will cover your layer.
</p>

<p>
<a href="/lib/exe/fetch.php?tok=a0f174&media=http%3A%2F%2Fpuu.sh%2FhKBVC%2Fe4ffd9c7cf.png" class="media" title="http://puu.sh/hKBVC/e4ffd9c7cf.png"><img src="/lib/exe/fetch.php?tok=a0f174&media=http%3A%2F%2Fpuu.sh%2FhKBVC%2Fe4ffd9c7cf.png" class="media" alt="" /></a>
</p>

<p>
Now just hide the text, if you're like me and have it there. I grouped mine, so I can just select the eye on the folder, and that will hide all of them. Each eye can be clicked individually however to hide them all just the same way.
</p>

<p>
Which gives us our raw six images which will become our skybox.
</p>

<p>
<a href="/lib/exe/fetch.php?tok=3db0bc&media=http%3A%2F%2Fpuu.sh%2FhKCja%2F77a79c4c52.jpg" class="media" title="http://puu.sh/hKCja/77a79c4c52.jpg"><img src="/lib/exe/fetch.php?w=640&tok=b89b9e&media=http%3A%2F%2Fpuu.sh%2FhKCja%2F77a79c4c52.jpg" class="media" title="77a79c4c52.jpg" alt="77a79c4c52.jpg" width="640" /></a>
</p>

</div>

<h3>Step 4: Saving for use in the Level Editor</h3>
<div class="level3">

<p>
First of all, if you didn't download the nVidia tools as I mentioned in the "What is a Skybox?" for .dds saving, then save your skybox as a .psd, close Photoshop, then download and install the nVidia tools.
</p>

<p>
1. Navigate to File > Save As…<br/>

2. <a href="http://puu.sh/hKCYN/814a062ae8.png" class="urlextern" title="http://puu.sh/hKCYN/814a062ae8.png"  rel="nofollow">Change the save format from .psd to D3D/DDS (.dds)</a><br/>

3. Save the file somewhere. You can put it wherever you want in the Amnesia files (provided resources.cfg can find it) or somewhere and move it there later.<br/>

4. Click "Save" and the following dialog box will come up.
</p>

<p>
<a href="/lib/exe/fetch.php?tok=5cbad5&media=http%3A%2F%2Fpuu.sh%2FhKD4M%2F6308e8e6e3.png" class="media" title="http://puu.sh/hKD4M/6308e8e6e3.png"><img src="/lib/exe/fetch.php?tok=5cbad5&media=http%3A%2F%2Fpuu.sh%2FhKD4M%2F6308e8e6e3.png" class="media" alt="" /></a>
</p>

<p>
5. Make sure your settings match mine. Chances are, all you'll need to change is 2D Texture to Cubemap (which will be in the smaller drop menu on the left side).<br/>

6. Click "Save". You may need to wait a bit, depending on your computer.
</p>

</div>

<h3>Step 5: Importing into the Level Editor</h3>
<div class="level3">

<p>
If the Skybox is not already somewhere in your Amnesia folders, move it somewhere there. For the sake of custom story exporting, let's assume I placed it here: custom_stories/test/skybox/mountains.dds
</p>

<p>
Now we just open the Level Editor, load up your map (if necessary), then navigate to <em>Edit > Level Settings</em>. Tick "Active" and set the texture to your skybox directory.
</p>

<p>
Done, at least, with Photoshop. (I'll work on a GIMP tutorial if I can get around to it, considering it involves fairly extensive instruction).
</p>

</div>

<h2>HELP! SOMETHING WENT WRONG!</h2>
<div class="level2">

<p>
Skyboxes can be a real pain sometimes. If your orientation is screwed up, try tweaking it yourself and see if you can get it fixed yourself. But if that is really getting to you, or you encounter other issues, drop me a PM using <a href="https://www.frictionalgames.com/forum/private.php?action=send&uid=27667" class="urlextern" title="https://www.frictionalgames.com/forum/private.php?action=send&uid=27667"  rel="nofollow">this link</a>, or make a thread about your issue in the <a href="https://www.frictionalgames.com/forum/forum-39.html" class="urlextern" title="https://www.frictionalgames.com/forum/forum-39.html"  rel="nofollow">Development Support subforum</a>.
</p>

</div>
Frictional Game Wiki

User Tools

Site Tools

Page Tools
