User Tools

Site Tools


hpl2:tutorials:level_editor:tutorial_7

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
Last revision Both sides next revision
hpl2:tutorials:level_editor:tutorial_7 [2015/05/13 09:12]
romulator
hpl2:tutorials:level_editor:tutorial_7 [2019/09/16 12:24]
romulator [How do I make a Skybox?]
Line 1: Line 1:
-====== Level Editor - Skyboxes ​[Needs Fixing] ​======+====== Level Editor - Skyboxes ====== 
 + 
 +===== Developers! Read! ===== 
 + 
 +As of Amnesia'​s 1.3.1 release, the method in which the game reads Skyboxes has changed slightly, breaking them. **HOWEVER:​** Thanks to Daemian'​s skills on the forum and finding the issue, you can fix them as a developer by downloading this version of [[https://​www.dropbox.com/​s/​c2e7bi3k8f871ka/​DevIL.zip?​dl=0|DevIL.dll]]. You __DO NOT__ need this file if your //Amnesia: The Dark Descent // version is not 1.3.1. Optionally include the file when exporting your Custom Story or Full Conversion, however have a readme or note as to why DevIL.dll is included out of courtesy to the user. 
 + 
 +Skyboxes may show incorrectly depending on which Amnesia version a user plays on.
  
-<​note>​As of Amnesia'​s 1.3 release, the method in which the game reads Skyboxes has changed slightly, \\ 
-noticeably in orientation and raw image layout. For now, the information is a **TEMPORARY FIX. \\ 
-** Should the Skybox issues be fixed, this will be rewritten. The below applies to Amnesia: \\ 
-The Dark Descent version 1.3 or above. Skyboxes may show incorrectly depending on which \\ 
-Amnesia version you choose. </​note>​ 
 ===== What is a Skybox? ===== ===== What is a Skybox? =====
  
Line 14: Line 15:
 So let's get started. For this tutorial, I used: So let's get started. For this tutorial, I used:
  
-<​nowiki>​*</​nowiki> ​Adobe Photoshop ( or for a free alternative,​ you may use [[http://​www.gimp.org/​|GIMP]],​ and may make use of this [[http://​www.youtube.com/​watch?​v=9uKBYVEyw1s|video tutorial]]).\\ +Adobe Photoshop ( or for a free alternative,​ you may use [[http://​www.gimp.org/​|GIMP]],​ and may make use of this [[http://​www.youtube.com/​watch?​v=9uKBYVEyw1s|video tutorial]]).\\ 
-<​nowiki>​*</​nowiki>​.DDS plugin for your appropriate image editor (nVida for [[https://​developer.nvidia.com/​nvidia-texture-tools-adobe-photoshop|Photoshop]] or [[https://​code.google.com/​p/​gimp-dds/​|GIMP]])\\ +.DDS plugin for your appropriate image editor (nVidia ​for [[https://​developer.nvidia.com/​nvidia-texture-tools-adobe-photoshop|Photoshop]] or [[https://​code.google.com/​p/​gimp-dds/​|GIMP]])\\ 
-<​nowiki>​*</​nowiki> ​A raw collection of images which will make up your skybox<​sup>​1</​sup> ​.\\ +A raw collection of images which will make up your skybox .\\ 
-<​nowiki>​*</​nowiki> ​The HPL2 Level Editor.\\ +The HPL2 Level Editor ​and either a Steam or Retail copy of AmnesiaThe Dark DescentI was using Retail.
-<​sup>​1</​sup>​ I made use of [[http://www.redsorceress.com/​skybox.html|this website]] to retrieve my images. You will need something to open .zip files if you are using that site.+
  
 ===== How do I make a Skybox? ===== ===== How do I make a Skybox? =====
  
-I used Adobe Photoshop to make the skybox. ​I also used the //​Mountains//​ skybox from the above page.+I used Adobe Photoshop to make the skybox. 
 ==== Step 0: Understanding the construction of a Skybox ==== ==== Step 0: Understanding the construction of a Skybox ====
  
-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. //Top// is at an angle because the new orientation of that raw image does not match up to the //Left//. Once you place //Top // onto the canvas, rotate it 90 degrees clockwise.+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 below. //Top// is at an angle because the new orientation of that raw image does not match up to the //Left//. Once you place //Top // onto the canvas, rotate it 90 degrees clockwise.
  
 {{http://​puu.sh/​hKAiV/​cae3b2e8ed.png?​direct&​640}} {{http://​puu.sh/​hKAiV/​cae3b2e8ed.png?​direct&​640}}
  
-//For those interested, ​the changes which occurred between 1.and 1.3 involving Skyboxes were;\\ +Please note that this may apply only to the images on the webpage aboveIf there are issues ​and you're using the above layout, ​please shoot me a Personal Message on the forumsI placed a link at the bottom of this wiki page.
-- Back and Left were swapped. As in, the layout ​was LeftFront, Top, Bottom, Right, Back.\\ +
-- Top was, obviously, rotated to reflect ​this change. 90 degrees clockwise.//+
  
 ==== Step 1: Setting Up ==== ==== Step 1: Setting Up ====
  
-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 //Bottom//, which you can simply make a 512×512 square of a color (I tend to use RGB=128 ​Grey, but it is completely optional).+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 //Bottom//, which you can simply make a 512×512 square of a color (I tend to use Grey, but it is completely optional)
 + 
 +Another option is to double the dimensions of your images (so in this case, 1024×1024, making a 6144×1024 sized skybox). It's completely optional, and won't too greatly affect your end result, because the skybox will be scaled down appropriately to suit the engine'​s capability.
  
 Download your skybox and extract it if you're using the link above. Download your skybox and extract it if you're using the link above.
Line 103: Line 104:
 ==== Step 5: Importing into the Level Editor ==== ==== Step 5: Importing into the Level Editor ====
  
-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+If the Skybox is not already somewhere in your Amnesia folders, move it somewhere there so it can be found in a directory specified by the resources.cfg file. For the sake of custom story exporting, let's assume I placed it here: custom_stories/​test/​skybox/​mountains.dds
  
 Now we just open the Level Editor, load up your map (if necessary), then navigate to //Edit > Level Settings//. Tick "​Active"​ and set the texture to your skybox directory. Now we just open the Level Editor, load up your map (if necessary), then navigate to //Edit > Level Settings//. Tick "​Active"​ and set the texture to your skybox directory.
  
-Done, at least, with Photoshop. ​(I'll work on GIMP tutorial ​if I can get around ​to it, considering it involves fairly extensive instruction).+{{http://​puu.sh/​hQ3z2/​807c7e7380.jpg?​direct&​600}} 
 + 
 +Done
 + 
 +===== What else can I do with a Skybox? ===== 
 + 
 +==== Creating Skyboxes with different Basemaps ==== 
 + 
 +Some Skyboxes are great. Instead of requiring construction in Photoshopthey are already set out in a format which looks great to other Skybox building applications. What we made earlier by placing the six images side by side was called a Horizontal strip. 
 + 
 +{{http://​www.cgtextures.com/​tutorials/​cubemaps/​images/​cubemap_layouts.gif?​direct&​}} 
 + 
 +As you can seethere are many ways to create a Skybox. [[http://​developer.amd.com/​tools-and-sdks/​archive/​legacy-cpu-gpu-tools/​cubemapgen/​|AMD/​ATI'​s application CubeMapGen]] is able to load vertical cross images, which you can find on the internet and even assemble yourself ​with enough practice. CubeMapGen is also able to preview the Skybox, and export .dds images in a similar way the NVidia Tool does in Photoshop. 
 + 
 +{{http://​puu.sh/​hRHHW/​014f9dc5ec.jpg?​direct&​800}} 
 + 
 +There are likely other methods, but won't go too in-depth with those. 
 + 
 +==== Raising my horizon ==== 
 + 
 +As we can see above in CubeMapGen, the horizon, or rather, the moment the grey bottom meets the sides of the cubemap is quite low. As such, it looks unrealistic when viewing from the edge of your walkable map boundary. In Photoshop, raising the horizon is rather simple! 
 + 
 +=== Step 1: Have your Horizontal Strip ready. === 
 + 
 +The easiest way to do this is to do so with Horizontal Strip, or the same format as explained by the above tutorial
 + 
 +{{http://​puu.sh/​hRIst/​76954162a1.jpg?​direct&​800}} 
 + 
 +am using a different skybox to the previous tutorial, since you can use just about any skybox, as most horizons are in the approximate middle of the cubemap. 
 + 
 +=== Step 2: Color === 
 + 
 +Create a Layer and push it all the way to the bottom and color it something like grey. This will serve as your bottom tile of your basemapand when you delete parts of your skybox, the grey color will appear and remain the same, allowing the blend from the sides of the map and the bottom to become even lesser noticeable. 
 + 
 +{{http://​puu.sh/​hRJ6d/​84e4df9120.jpg?​direct&​800}} 
 + 
 +=== Step 3: Select and Delete === 
 + 
 +Use the Rectangular Marquee Tool to select the entire bottom half of the image. Be default, that tool is the second from the top of Photoshop'​s Tools window, and is shaped like a square with a few openings between the outline. 
 + 
 +Starting slightly outside the image on the left side, click, hold and drag to the bottom right corner of the image, effectively selecting the whole bottom half. Zoom in if you have to. 
 + 
 +{{http://​puu.sh/​hRJok/​1b125282b6.jpg?​direct&​800}} 
 + 
 +Now, select your Front from the layers window and then press the Delete key. It will remove the bottom half of your front. Now repeat by selecting your Back, Left and Right layers and deleting those. 
 + 
 +{{http://​puu.sh/​hRKmP/​90935ba4c3.jpg?​direct&​800}} 
 + 
 +=== Step 4: Export === 
 + 
 +Now just save as you would by following the earlier tutorial above. 
 + 
 +Here's how my Skybox looks. 
 + 
 +{{http://​puu.sh/​hRKP5/​5ab89283cd.jpg?​direct&​800}} 
 + 
 +Now we have a flat horizon, which hopefully will not be visible to the player. You can adjust the horizon point by lowering the amount of area which you delete. Just remember not to delete any part of the '​Top'​ image, as then you will have half a top on your skybox!
  
 ===== HELP! SOMETHING WENT WRONG! ===== ===== HELP! SOMETHING WENT WRONG! =====
  
-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 [[https://​www.frictionalgames.com/​forum/​private.php?​action=send&​uid=27667|this link]], or make a thread about your issue in the [[https://​www.frictionalgames.com/​forum/​forum-39.html|Development Support subforum]].+==== First of all... ==== 
 + 
 +Are you using an Amnesia version greater than 1.3? If so, the problem is caused by a .dll file titled DevIL.dll which has been included with Amnesia since its release. Between 1.3 and 1.3.1, the source code changed slightly, breaking the skyboxes. [[https://​www.dropbox.com/​s/​c2e7bi3k8f871ka/​DevIL.zip?​dl=0|Download an older DevIL.dll file here]] (the same one included with 1.3), and you should not have any issues. Include it with your Custom Story or Full Conversion export if necessary, but notify the user as to why it is included. A readme in the least should suffice. 
 + 
 +==== Otherwise... ==== 
 + 
 +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. But if that is really getting to you, or you encounter other issues, drop me a PM using [[https://​www.frictionalgames.com/​forum/​private.php?​action=send&​uid=27667|this link]], or make a thread about your issue in the [[https://​www.frictionalgames.com/​forum/​forum-39.html|Development Support subforum]].
  
hpl2/tutorials/level_editor/tutorial_7.txt · Last modified: 2020/04/14 16:40 by mudbill