site/features_tools.html

<!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>

	<!--Fonts-->
	<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Arimo&display=swap" rel="stylesheet">
</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>