Mon, 17 Feb 2020 00:49:40 -0700
- Make .mediaContainer a flexbox
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="description" content="Source 2 Documentation"> <link rel="stylesheet" href="style.css"> <link rel="icon" type="image/png" href="/s2favicon.png"> <title>Source 2 Documentation Project</title> </head> <body> <div class="main" > <div id="header"> <img class="headerlogo" src="source2_new.svg" title="Source 2"> <nav> <ul class="buttons"> <a href="home.html"><li>Home</li></a> <a href="features.html"><li class="active">Features</li></a> <a href=""><li>Wiki</li></a> <a href="about.html"><li>About</li></a> </ul> </nav> </div> <div class="content"> <h1>Source 2 Engine Features > Tools</h1> <p> Source 2 comes with an integrated development environment (IDE), consisting of: </p> <hr> <div class="contentSection" id="toolsSectionAssetBrowser"> <a href="#toolsSectionAssetBrowser"><h3>- Asset Browser <img class="toolIconSM" src="features/tools/asset_browser_sm.png"></h3></a> <p> The Asset Browser allows quick searching, previewing, grouping, and managing assets. <br> It also serves as the hub for development, launching the other tools either by their icon, or by double clicking an asset. <br> Assets inside the browser can also be dragged into other tools (such as Hammer). <br> <div class="mediaContainer"> <video width="577" height="438" autoplay loop> <source src="features/tools/asset_browser_demo.webm" type="video/webm"> (Unsupported video format?) </video> </div> </p> </div> <div class="contentSection" id="toolsSectionHammerEditor"> <a href="#toolsSectionHammerEditor"><h3 >- Hammer Editor <img class="toolIconSM" src="features/tools/hammer/hammer_sm.png"></h3></a> <p> The Source 2 Level Editor (Hammer) is a revolutionary leap above even contemporary level editors. <br> On top of the expected brush-based manipulation, you can edit individual faces, edges, and even vertices, making it a full model editor. <br> <br> The new primitive in S2 is the <i>Mesh</i>, a vertex-based system, allowing concave, and complex geometry to be authored by the level designer. </p> <br> <div class="mediaContainer"> <video width="256" height="256" autoplay loop> <source src="features/tools/hammer/editbasics.webm" type="video/webm" title="Mesh editing"> Mesh Editing (Video) </video> <video width="256" height="256" autoplay loop> <source src="features/tools/hammer/convexmesh.webm" type="video/webm" title="Convex mesh editing"> Convex Mesh Editing (Video) </video> <video width="256" height="256" autoplay loop> <source src="features/tools/hammer/faceremoval.webm" type="video/webm" title="Convex mesh editing"> Convex Mesh Editing (Video) </video> <video width="256" height="256" autoplay loop> <source src="features/tools/hammer/edittimelapse.webm" type="video/webm" title="Convex mesh editing"> Convex Mesh Editing (Video) </video> </div> <br> <p> Meshes can be exported for further editing in 3D applications, and then re-imported as DMX, OBJ, or FBX. <br> Legacy Source VMFs can also be imported. </p> </div> <div class="contentSection" id="toolsSectionMaterialEditor"> <a href="#toolsSectionMaterialEditor"><h3 >- Material Editor <img class="toolIconSM" src="features/tools/met/met_sm.png"></h3></a> <p> No more fiddling with text-based VMT files, slow material reloads, and trial & error debugging. <br> S2 MET Supports real-time editing and previews, with in-editor texture importing. <br> </p> <br> <div class="mediaContainer"> <img class="mediaImage" src="features/tools/met/properties.png" width="578px"> </div> <br> <p> MET Also supports extensive dynamic functions, and the following image formats: PSD, TGA, TIF, PFM, MKS, PNG, JPG </p> </div> <div class="contentSection" id="toolsSectionModelEditor"> <a href="#toolsSectionModelEditor"><h3>- Model Editor <img class="toolIconSM" src="features/tools/model_editor/model_editor_sm.png"></h3></a> <p> Model viewer, and editor. No more fiddling with QC files, this does it all. <br> Used to configure hitboxes, collision, poses, weights, LODs, animations, constraints, attachments, and anything involving models. <br> </p> <br> <div class="mediaContainer"> <img class="mediaImage" src="features/tools/model_editor/editor.png" width="653px"> <video height="400px" autoplay loop> <source src="features/tools/model_editor/modelviewer.webm" type="video/webm" title="Model Viewer"> Convex Mesh Editing (Video) </video> </div> <br> <p> Model Importing supports the following formats: DMX, SMD, FBX, OBJ </p> </div> <div class="contentSection" id="toolsSectionPET"> <a href="#toolsSectionPET"><h3>- Particle Editor <img class="toolIconSM" src="features/tools/pet/pet_sm.png"></h3></a> <p> With richer in-app documentation, model viewing support, control-point improvements, and expanded debugging information. <br> The Source 2 Particle Editor is further refined and cleaner tool than its predecessor. <br> </p> <br> <div class="mediaContainer"> <img class="mediaImage" src="features/tools/pet/pet_example.png" width="578px"> </div> <br> </div> <div class="contentSection" id="toolsSectionSFM"> <a href="#toolsSectionSFM"><h3>- Filmmaker <img class="toolIconSM" src="features/tools/sfm/sfm_sm.png"></h3></a> <p> The Filmmaker is used for rendering high-quality cinematics from in-engine. <br> With animation, audio, and offline rendering, this is an all-in-one film studio inside your game. <br> </p> <br> <div class="mediaContainer"> <img class="mediaImage" src="features/tools/sfm/sfm_example.png" width="578px"> </div> <br> </div> <div class="contentSection" id="toolsSectionVC2"> <a href="#toolsSectionVC2"><h3>- VConsole2 <img class="toolIconSM" src="features/tools/vconsole2/vconsole2_sm.png"></h3></a> <p> Vastly improved over the simple in-engine console of yore. Using a networked API for engine communication it allows remote debugging. <br> VC2 also features multi-tabbed displays for multitasking, extensive filtering, and verbosity control. <br> </p> <br> <div class="mediaContainer"> <img class="mediaImage" src="features/tools/vconsole2/main.png" > </div> <br> </div> <h2>Unreleased</h2> <div class="contentSection" id="toolsSectionFaceposer"> <a href="#toolsSectionFaceposer"><h3>- Faceposer <img class="toolIconSM" src="features/tools/faceposer/faceposer_sm.png"></h3></a> <p> Used to make Choreo scenes. </p> <div class="mediaContainer"> </div> </div> <div class="contentSection" id="toolsSectionModeldoc"> <a href="#toolsSectionModeldoc"><h3>- Modeldoc <img class="toolIconSM" src="features/tools/model_doc/model_doc_sm.png"></h3></a> <p id="textNotice"><b>Notice: </b>Unknown.</p> </div> <div class="contentSection" id="toolsSectionSnooper"> <a href="#toolsSectionSnooper"><h3>- Snooper <img class="toolIconSM" src="features/tools/snooper/snooper_sm.png"></h3></a> <p id="textNotice"><b>Notice: </b>Unknown.</p> </div> <div class="contentSection" id="toolsSectionVMix"> <a href="#toolsSectionVMix"><h3>- VMix <img class="toolIconSM" src="features/tools/vmix/vmix_sm.png"></h3></a> <p id="textNotice"><b>Notice: </b>Unknown.</p> </div> <div class="contentSection" id="toolsSectionGrapheditor"> <a href="#toolsSectionGrapheditor"><h3>- Grapheditor <img class="toolIconSM" src="features/tools/grapheditor/grapheditor_sm.png"></h3></a> <p id="textNotice"><b>Notice: </b>Unknown.</p> </div> </div> <div class="footer"> <p class="copyright">Source Creator Collective - 2020</p> </div> </div> </body> </html>