CINXE.COM
HTML5 Games Workshop - Start here
<!DOCTYPE html> <head> <title>HTML5 Games Workshop - Start here</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="../../../../css/styles.css"/> <link rel="stylesheet" href="../../../../vendor/prism/prism.css"/> <script src="../../../../vendor/prism/prism.js"></script> </head> <body> <header class="main-header"> <h1><a href="../../../..">HTML5 Games Workshop</a></h1> </header> <main> <article> <h1>Start here</h1> <aside class="author"> <p>Guide written by Belén "Benko" Albeza" (<a href="https://twitter.com/ladybenko">@ladybenko</a>).</p> </aside><p>We are going to create a classic <strong>one-screen platformer</strong> game! It will feature a main character, who can run and jump to platforms. There will also be enemies that this character will have to avoid –or kill! The goal of the game is to fetch the key and open the door that leads to the next level.</p> <p><a href="/html5-games-workshop/platformer/"><img src="/html5-games-workshop/assets/platformer/platformer_screenshot.png" alt="Screenshot"/></a></p> <p>You can <a href="/html5-games-workshop/platformer/">play the game here</a>.</p> <p>We will be implementing the following game development concepts:</p> <ul> <li><strong>Loading</strong> assets.</li> <li>Handling <strong>game states</strong>.</li> <li>Rendering <strong>images</strong> on the screen.</li> <li>Implementing <strong>sprites</strong>.</li> <li>Reading the player's input via <strong>keyboard</strong>.</li> <li>Using a <strong>physics engine</strong> to move sprites and handle <strong>collisions</strong>.</li> <li>Writing <strong>text</strong> with a bitmap font.</li> <li>Playing <strong>sound</strong> effects and background music.</li> </ul> <p>We will focus on game development concepts and the Phaser API in a way that is accessible to as many people as possible. This means that some good practises, like modules, that require of additional tools or a better understanding of JavaScript will <em>not</em> be seen here.</p> <p>That said, if <em>you</em> are familiar with this tools/concepts and want to use them in this workshop, by all means, do it.</p> <h2 id="important-">Important!</h2> <p>This guide uses <a href="http://phaser.io/docs/2.6.2/index">Phaser version <strong>2.6.2 "Kore Springs"</strong></a>. This version is what it's included in the project template provided in the next step.</p> <p>It is possible that later on some changes in Phaser API in future versions might make this guide not 100% compatible with the latest Phaser version. We will try to keep this updated, though.</p> <h2 id="about-the-art-assets">About the art assets</h2> <p>The graphic and audio assets of the game in this guide have been released in the public domain under a <a href="https://creativecommons.org/share-your-work/public-domain/cc0/">CC0 license</a>. These assets are:</p> <ul> <li>The images have been created by <a href="http://kenney.nl/">Kenney</a>, and are part of his <a href="http://opengameart.org/content/platformer-art-pixel-redux"><em>Platformer Art: Pixel Redux</em> set</a> (they have been scaled up, and some of them have minor edits).</li> <li>The background music track, <a href="http://opengameart.org/content/happy-adventure-loop"><em>Happy Adventure</em></a>, has been created by <a href="http://www.tinyworlds.org/">Rick Hoppmann</a>.</li> <li>The sound effects have been randomly generated with the <a href="http://www.bfxr.net/">Bfxr</a> synth.</li> </ul> <h1>Contents of this guide</h1> <ol class="toc" start="0"> <li><a href="">Start here</a></li> <li><a href="../initialise-phaser">Initialise Phaser</a></li> <li><a href="../the-game-loop">The game loop</a></li> <li><a href="../creating-platforms">Creating platforms</a></li> <li><a href="../the-main-character-sprite">The main character sprite</a></li> <li><a href="../keyboard-controls">Keyboard controls</a></li> <li><a href="../moving-sprites-with-physics">Moving sprites with physics</a></li> <li><a href="../gravity">Gravity</a></li> <li><a href="../jumps">Jumps</a></li> <li><a href="../pickable-coins">Pickable coins</a></li> <li><a href="../walking-enemies">Walking enemies</a></li> <li><a href="../death">Death</a></li> <li><a href="../scoreboard">Scoreboard</a></li> <li><a href="../animations-for-the-main-character">Animations for the main character</a></li> <li><a href="../win-condition">Win condition</a></li> <li><a href="../switching-levels">Switching levels</a></li> <li><a href="../moving-forward">Moving forward…</a></li> </ol> <nav class="paginated-nav"> <ul> <li class="next">Next: <a href="../initialise-phaser">Initialise Phaser</a> »</li> </ul> </nav> </article> </main> <footer class="main-footer"> <p>With love,<br/>the game dev fairies at <a href="https://mozilla.org">Mozilla</a>.</p> </footer> </body>