site/features_tools.html

changeset 1
0a8d8d1522b7
child 2
5322f0778cb1
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/site/features_tools.html	Thu Jan 02 03:02:34 2020 -0700
@@ -0,0 +1,217 @@
+<!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">
+</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 enviornment (IDE), consisting of:
+			<br>
+			<i>Asset Browser</i>, <i>Level Editor</i>, <i>Material Editor</i>, <i>Model Editor</i>, <i>Particle Editor</i>, and <i>Film Maker</i>.
+			<br>
+		</p>
+		<hr>
+
+		<div class="contentSection">
+			<a href="#toolsSectionAssetBrowser"><h3 id="toolsSectionAssetBrowser">- Asset Browser <img 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">
+								(Unspported video format?)
+							</video> 
+					</div>
+			</p>
+		</div>
+	
+		<div class="contentSection">
+				<a href="#toolsSectionHammerEditor"><h3 id="toolsSectionHammerEditor">- Hammer Editor <img 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 verticies, 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">
+				<a href="#toolsSectionMaterialEditor"><h3 id="toolsSectionMaterialEditor">- Material Editor <img 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 realtime editing and previews, with in-editor texture importing.
+				<br>
+			</p>
+				<br>
+				<div class="mediaContainer">
+					<img class="mediaImage" src="features/tools/met/properties.png" width="1024px">
+				</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">
+				<a href="#toolsSectionModelEditor"><h3 id="toolsSectionModelEditor">- Model Editor <img 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" height="400px">
+					<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">
+				<a href="#toolsSectionPET"><h3 id="toolsSectionPET">- Particle Editor <img src="features/tools/pet/pet_sm.png"></h3></a>
+			<p>
+				PET is for editing particles
+				<br>
+				...
+				<br>
+			</p>
+				<br>
+				<div class="mediaContainer">
+				</div> 
+				<br>
+		</div>
+
+		<div class="contentSection">
+				<a href="#toolsSectionSFM"><h3 id="toolsSectionSFM">- Filmmaker <img src="features/tools/sfm/sfm_sm.png"></h3></a>
+			<p>
+				The Filmmaker is used for rendering high-quality cinematics from in-engine.
+				<br>
+				...
+				<br>
+			</p>
+				<br>
+				<div class="mediaContainer">
+				</div> 
+				<br>
+		</div>
+
+		<div class="contentSection">
+				<a href="#toolsSectionVC2"><h3 id="toolsSectionVC2">- VConsole2 <img 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">
+				<a href="#toolsSectionFaceposer"><h3 id="toolsSectionFaceposer">- Faceposer <img src="features/tools/faceposer/faceposer_sm.png"></h3></a>
+			<p>
+				Used to make Choreo scenes.
+			</p>
+				<div class="mediaContainer">
+				</div> 
+		</div>
+
+		<div class="contentSection">
+				<a href="#toolsSectionModeldoc"><h3 id="toolsSectionModeldoc">- Modeldoc <img src="features/tools/model_doc/model_doc_sm.png"></h3></a>
+			<p id="textNotice"><b>Notice: </b>Unknown.</p>
+		</div>
+
+		<div class="contentSection">
+				<a href="#toolsSectionSnooper"><h3 id="toolsSectionSnooper">- Snooper <img src="features/tools/snooper/snooper_sm.png"></h3></a>
+			<p id="textNotice"><b>Notice: </b>Unknown.</p>
+		</div>
+
+		<div class="contentSection">
+				<a href="#toolsSectionVMix"><h3 id="toolsSectionVMix">- VMix <img src="features/tools/vmix/vmix_sm.png"></h3></a>
+			<p id="textNotice"><b>Notice: </b>Unknown.</p>
+		</div>
+
+		<div class="contentSection">
+				<a href="#toolsSectionGrapheditor"><h3 id="toolsSectionGrapheditor">- Grapheditor <img 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>

mercurial