Frictional Game Wiki

<h1>Visual Studio Code Setup</h1> <div class="level1"> <p> This is an extended guide on how to setup Visual Studio Code to use Intellisense for HPL3 and SOMA. Visual Studio Code is a lightweight notepad-esque version of Microsoft's full IDE Visual Studio. As Visual Studio Code is still under active development, some steps of this guide may need to be altered, so feel free to do so as the need arises. </p> <p> Note: Even though Visual Studio Code is a cross-platform program, HPL3 is designed to be modded on a Windows machine. As such, the instructions in this guide assume that you are on a Windows OS. (Linux users who have successfully gotten the HPL3 modding tools may use this guide as a base to get Intellisense working on their platform.) </p> </div> <h2>Install VS Code</h2> <div class="level2"> <p> You will need to download and install VS Code. You can do so from Microsoft's <a href="https://code.visualstudio.com/" class="urlextern" title="https://code.visualstudio.com/" rel="nofollow">VS Code website</a>. Simply choose your desired platform and download the installer. Follow the instructions given in the installer to install VS Code on your computer. </p> </div> <h2>Open SOMA Folder in VS Code</h2> <div class="level2"> <p> VS Code has the capability of opening an entire folder into its internal directory tree. Doing this gives you the benefit to be able to quickly and easily navigate to files in that folder and in subsequent folders. It also grants added benefits for inter-file relationships, such as C++ linking capabilities. </p> <p> To do this, simply navigate to your SOMA installation folder and right-click on the window background. (i.e. Don't click on any file or folder within the SOMA folder.) Then select the "Open with Code" option from the drop down menu: </p> <p> <a href="/lib/exe/fetch.php?media=hpl3:community:scripting:01.png" class="media" title="hpl3:community:scripting:01.png"><img src="/lib/exe/fetch.php?media=hpl3:community:scripting:01.png" class="mediacenter" alt="" /></a> </p> </div> <h2>Associate HPS files with C++</h2> <div class="level2"> <p> The first thing to do is to associate HPL3 script files with VS Code's C++ syntax highlighting engine. To do so, you need to open VS Code's preferences file: </p> <p> <a href="/lib/exe/fetch.php?media=hpl3:community:scripting:02.png" class="media" title="hpl3:community:scripting:02.png"><img src="/lib/exe/fetch.php?media=hpl3:community:scripting:02.png" class="mediacenter" alt="" /></a> </p> <p> In VS Code, settings are saved in a JSON file. The window on the left is the VS Code default settings, while the window on the right is a JSON file for creating and saving user configurations. </p> <p> To associate &lt;html>.hps&lt;/html> files with C++, simply copy the following text into the user preferences window (on the right): </p> <pre class="code">"files.associations": { "*.hps": "cpp" } </pre><p> </p> <p> Afterwards, your preferences file should look something like this: </p> <p> <a href="/lib/exe/fetch.php?media=hpl3:community:scripting:03.png" class="media" title="hpl3:community:scripting:03.png"><img src="/lib/exe/fetch.php?media=hpl3:community:scripting:03.png" class="mediacenter" alt="" /></a> </p> </div> <h2>Install CPPTools extension</h2> <div class="level2"> <p> Next, you will need to get the C/C++ extension for VS Studio. To do this, go to the Extensions tab on the left side of the window. In the search bar, search for "cpptools". The extension you want should appear at the top of the list (it's authored by Microsoft). After you find it, click the green "Install" button: </p> <p> <a href="/lib/exe/fetch.php?media=hpl3:community:scripting:04.png" class="media" title="hpl3:community:scripting:04.png"><img src="/lib/exe/fetch.php?media=hpl3:community:scripting:04.png" class="mediacenter" alt="" /></a> </p> <p> (After you install it, the window will need to be reloaded twice. The first time is after installing the extension, and the second time is after the extension downloads and installs its needed dependencies. Simply click on the "Reload" button as it appears and VS Code will restart itself for you, retaining your open files.) </p> </div> <h2>Configure The HPL3 Profile</h2> <div class="level2"> <p> Now you need to congifure the extension to use the HPL3 script files for its Intellisense. To do this, open the Command Palette by pressing "Ctrl-Shift-P". From there, find and select the "C/Cpp: Edit Configurations" option: </p> <p> <a href="/lib/exe/fetch.php?media=hpl3:community:scripting:05.png" class="media" title="hpl3:community:scripting:05.png"><img src="/lib/exe/fetch.php?media=hpl3:community:scripting:05.png" class="mediacenter" alt="" /></a> </p> <p> On this page, you will see a lot of existing JSON text. This was automatically generated by the extension, and there's no need to change it. Instead, we are going to add a new profile for the Intellisense to use in our projects. </p> <p> Scroll to the bottom and put the cursor after the closing bracket of the last profile. (It's the third bracket from the bottom.) </p> <p> <a href="/lib/exe/fetch.php?media=hpl3:community:scripting:06.png" class="media" title="hpl3:community:scripting:06.png"><img src="/lib/exe/fetch.php?media=hpl3:community:scripting:06.png" class="mediacenter" alt="" /></a> </p> <p> After that bracket, add a comma, add a new line (press Enter), then paste the following text: </p> <pre class="code">{ "name": "HPL3", "includePath": [ "F:/Program Files (x86)/Steam/steamapps/common/SOMA", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/agents", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/areas", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/base", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/critters", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/custom_depth", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/custom_depth/helper_custom_depth_imgui", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/effects", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/helpers", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/interfaces", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/modules", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/player", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/props", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/utilities" ], "intelliSenseMode": "clang-x64", "browse":{ "path":[ "F:/Program Files (x86)/Steam/steamapps/common/SOMA", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/agents", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/areas", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/base", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/critters", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/custom_depth", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/custom_depth/helper_custom_depth_imgui", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/effects", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/helpers", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/interfaces", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/modules", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/player", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/props", "F:/Program Files (x86)/Steam/steamapps/common/SOMA/script/utilities" ] } } </pre><p> </p> <p> Afterwards, the text should look like this (the new text is highlighted): </p> <p> <a href="/lib/exe/fetch.php?media=hpl3:community:scripting:07.png" class="media" title="hpl3:community:scripting:07.png"><img src="/lib/exe/fetch.php?media=hpl3:community:scripting:07.png" class="mediacenter" alt="" /></a> </p> <p> (If your text has any red squiggles in it, then you copied the text into the wrong place. Compare your text to the image above to make sure it looks the same.) </p> <p> Now your profile is ready to go. Save and close the file, then go back to your map script. Open the Command Palette again ("Ctrl-Shift-P") and navigate to "C/Cpp: Select a Configuration": </p> <p> <a href="/lib/exe/fetch.php?media=hpl3:community:scripting:08.png" class="media" title="hpl3:community:scripting:08.png"><img src="/lib/exe/fetch.php?media=hpl3:community:scripting:08.png" class="mediacenter" alt="" /></a> </p> <p> Under the drop-down menu, select "HPL3": </p> <p> <a href="/lib/exe/fetch.php?media=hpl3:community:scripting:09.png" class="media" title="hpl3:community:scripting:09.png"><img src="/lib/exe/fetch.php?media=hpl3:community:scripting:09.png" class="mediacenter" alt="" /></a> </p> <p> And that's it! You're done! Go ahead and test it out in your map script: </p> <p> <a href="/lib/exe/fetch.php?media=hpl3:community:scripting:10.png" class="media" title="hpl3:community:scripting:10.png"><img src="/lib/exe/fetch.php?media=hpl3:community:scripting:10.png" class="mediacenter" alt="" /></a> </p> </div>