Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
209 lines (183 sloc) 7.51 KB
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Plasma Forks</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="WebGL game prototype">
<meta name="author" content="Tapio Vierros">
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
color: #aaa;
background-color: #111;
.container-narrow {
margin: 0 auto;
max-width: 700px;
.container-narrow > hr {
margin: 30px 0;
.jumbotron {
margin: 30px 0;
text-align: center;
.jumbotron h1 {
font-size: 72px;
line-height: 1;
.jumbotron .btn-large {
font-size: 21px;
padding: 14px 24px;
.marketing {
margin: 30px 0;
.marketing p + h4 {
margin-top: 28px;
.red { color: red; }
.alert a { color: blue; }
#webgl-error { display: none; }
#firefox-warning { display: none; }
#angle-warning { display: none; }
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src=""></script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32826962-1']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
<div class="container-narrow">
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li><a href="#about">About</a></li>
<li><a href="game.html">Play</a></li>
<li><a href="editor/">Editor</a></li>
<li><a href="">GitHub</a></li>
<h3 class="muted">Plasma Forks</h3>
<div class="jumbotron">
<h1>3D Sci-fi FPS for the Modern Web!</h1>
<p class="lead">Battle against killer robots with your powerful
fork gun in this open source 3d first-person shooter.</p>
<img class="shot" src="assets/shot-1.png" alt="Screenshot" title="Screenshot" width="320" height="240"></img>
<img class="shot" src="assets/shot-2.png" alt="Screenshot" title="Screenshot" width="320" height="240"></img>
<a class="btn btn-large btn-success" href="game.html">Play!</a>
<a class="btn btn-small" href="#video">Video</a>
<div id="webgl-error" class="alert alert-error">
Oh no! Your browser or GPU doesn't seem to support <a href="">WebGL</a>.
Unfortunately you can't play the game without it.
<div id="angle-warning" class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
You may be affected by ANGLE/browser bug.<br/>
Try disabling <em>shadows</em> in the options and reloading the game if there are missing textures.
<div id="firefox-warning" class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
You seem to be using Firefox. It has bad performance and reduced features.<br/>
Check out <a href="">Performance Tips</a> or switch to Chrome.
<hr id="about"/>
<div class="row-fluid marketing">
<div class="span6">
<h4>System Requirements</h4>
<li>Latest version of Chrome
<li>Currently on Windows, you might need to launch it with <strong>--use-gl=desktop</strong> flag or disable shadows due to ANGLE bugs</li>
<li>Firefox kind of works too, but has bad performance and some missing features</li>
<li>IE does not support WebGL and Opera is broken</li>
<li><strong class="red">Excellent dedicated GPU and drivers</strong> (both must not be blacklisted for WebGL by the browser vendors)</li>
<li><strong class="red">Fast CPU and 1GB of free RAM</strong> so that JavaScript runs well</li>
<li>Single-player campaign</li>
<li>Editor for creating and sharing more levels</li>
<li>High quality textures, models etc</li>
<li>Rigid body dynamics, i.e. physics</li>
<li>Dynamic lighting with shadows</li>
<li>Post-processing effects</li>
<li>Spatial audio</li>
<h4>GitHub Game Off 2012</h4>
<p>This game was made for GitHub's <a href="">Game Off 2012</a> challenge.
Since existing engines were allowed, I took <a href="">Dark Corners</a>,
completely replaced the medieval-themed assets with a sci-fi setting, implemented stuff needed for a shooter,
such as sounds, weapons, "power-ups", smarter enemies etc. and came up with this new game, complete with a short campaign.
Unfortunately, the game did not place within the 18 (of around 200 playable) entries mentioned
<a href="">in the winners.</a></p>
<div class="span6">
<p>If you experience problems, follow these steps:
<li>Check that your system fulfills the system requirements on the left.</li>
<li>Read the <a href="">
Known Issues</a> wiki page.</li>
<li>Check out the <a href="">
Performance Tips</a> wiki page if needed.</li>
<li>If the above didn't solve the problem, you are welcome to
<a href="">file an issue</a>.</li>
<p>There is also a level editor for creating and editing levels for the game.
For maximum productivity and minimal learning curve, the editor is 2D, but
you can test your creation very easily with a push of a button.</p>
<p>Levels can be exported and then shared with friends.</p>
<p><a class="btn btn-inverse" href="editor/">Launch editor &raquo;</a></p>
<h4>Open Source</h4>
<p>This game is open source under the very permissive MIT license, so you can freely study and modify it.
Assets have different but still free licenses. Everything is available at GitHub.</p>
<p><a class="btn btn-inverse" href="">Project page @ GitHub &raquo;</a></p>
<iframe id="video" width="700" height="394" src="" frameborder="0" allowfullscreen></iframe>
<p class="muted"><small>&copy; Tapio Vierros 2012</small>
<small><a href="credits.html">Credits</a></small></p>
<script src="libs/jquery-1.8.1.min.js"></script>
<script src="libs/bootstrap.min.js"></script>
// Warnings and errors
var hasWebGL;
try {
hasWebGL = !!window.WebGLRenderingContext && !!document.createElement('canvas').getContext('experimental-webgl');
} catch( e ) { hasWebGL = false; }
if (!hasWebGL) $("#webgl-error").show();
var isFirefox = /Firefox/i.test(navigator.userAgent);
var isChrome = /Chrome/i.test(navigator.userAgent);
var isWindows = /Win/i.test(navigator.platform);
if (isFirefox) $("#firefox-warning").show();
if (isWindows && (isFirefox || isChrome)) $("#angle-warning").show();
Something went wrong with that request. Please try again.