Skip to content

Commit

Permalink
Tutorial update.
Browse files Browse the repository at this point in the history
  • Loading branch information
photonstorm committed Nov 29, 2013
1 parent efe8399 commit f9b82b6
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 3 deletions.
34 changes: 33 additions & 1 deletion tutorials/01 Getting Started/part4.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,39 @@ <h1>Getting started with Phaser</h1>

<h2>Part 4 - Choosing an Editor</h2>

<p></p>
<p>You're going to need an editor in which to prepare your JavaScript code. There are <em>many</em> available, each with their own strengths and weaknesses. If you're an experienced developer you will probably already have your own preferred editor, in which case carry on to Part 5 of this guide. Otherwise here are some options for you:</p>

<h3>Sublime Text</h3>

<p>This is the editor the Phaser team use for building the framework and examples. It's even the editor this guide is being written in. Sublime should be considered as an extremely powerful text editor rather than an IDE. An IDE is an integrated development environment, that often bundles additional features such as built-in web servers, source control and code in-sight / completion. Sublime focuses on being an amazing editor first and foremost, and its multiple cursor and mini-map features are two of the most time saving we've ever come across in decades of development. Using a comprehensive Package system you can enhance it in multiple ways.</p>

<p>The full version costs $70 but is worth every penny and is available for Windows and OS X.</p>

<p><a href="http://www.sublimetext.com/">Sublime Text</a></p>

<h3>WebStorm</h3>

<p>JetBrains WebStorm is an extremely advanced fully development environment. It goes well beyond simple code editing and offers all of the high-level features you'd expect from a proper IDE include code-insight, npm built-in, code style/syntax reports, source control and a wealth of other features designed more for web developers than game developers. It's based on Eclipse, which is both a good and bad thing. For a start the actual code editing experience is nothing like as smooth and freeform as with Sublime, but the power features can often make up for that. Having errors with your code spotted for you, before you've even tested your game can be really useful. And code-completion is great too, although obviously somewhat limited by the myriad ways JavaScript can be written.</p>

<p>The full version starts from $49 and is available for Windows and OS X. There are often deals to be found on the JetBrains site too.</p>

<p><a href="http://www.jetbrains.com/webstorm/">JetBrains WebStorm</a></p>

<h3>Visual Studio</h3>

<p>This should only really be considered if you wish to write your game using <a href="http://www.typescriptlang.org/">TypeScript</a> instead of JavaScript. Phaser has a TypeScript definitions file available, which allows you to use Microsofts new ES6 inspired lanauge to develop in. This gives you access to a statically typed language, with traditional class inheritance, interfaces and most of the OO style trappings you may be used to in other languages like AS3.</p>

<p>The full version varies in cost and Microsoft do great student details. Naturally it's only available for Windows.</p>

<p><a href="http://www.visualstudio.com/">Visual Studio</a></p>

<h3>Brackets</h3>

<p>Although primarily developed for building web site code, Brackets has really come into its own lately. It's a free open-source code editor and rans across Windows, OS X and Linux. It's actually written in JavaScript and is incredibly hackable, with new versions and extensions released every couple of weeks. It has a modern and dark UI, probably familiar to anyone who uses Adobe CS. It's well worth considering, especially if you're after a free editor.</p>

<p>Brackets is a multi-platform and free open-source product.</p>

<p><a href="http://brackets.io/">Brackets</a></p>

<p><a href="part5.html">Part 5: Downloading Phaser</a></p>

Expand Down
20 changes: 19 additions & 1 deletion tutorials/01 Getting Started/part6.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,25 @@ <h1>Getting started with Phaser</h1>

<h2>Part 6 - Hello World!</h2>

<p></p>
<p>With your editor set-up, web server installed and Phaser downloaded it's time to create something and check it's all working.</p>

<p>You need to discover where your 'web root' is on your machine. This is the folder in which the server looks for files. If you are using WAMP on Windows you can locate it by clicking the WAMP icon in your system-tray and select "www directory" from the pop-up menu. Other servers will have other methods of determining the location, but from this point on we'll refer to it as the 'webroot'.</p>

<p>1. Within the webroot create a folder called 'hellophaser'. Download <a href="">this zip file</a> and extract the contents to the 'hellophaser' folder.</p>

<p>2. Using your text editor create a file called index.html within the 'hellophaser' folder and paste the following code into it:</p>

<code>

</code>

<p>3. Save the file and on Windows the final folder should look something like this:</p>

<h3>Testing, testing ...</h3>

<p>Open your web browser and browse to your local server. This may be as simple as typing in 'localhost' or '127.0.0.1' or you may need to specify a port number as well, it depends entirely on which server set-up method you used. If the server is set-up correctly and running you will see the default installation page in your browser. This will vary from server to server, but as long as the page doesn't "time out" or throw a permissions error you are good to go.</p>

<p>Now add <em>/hellophaser</em> onto the end of the URL and the Hello World test should load. If it does it will display a black game area with a phaser logo in the middle. If it doesn't for whatever reason you need to bring up the debug console and see what errors are output. In most browsers you can do this by pressing F12. This works across Chrome, Firefox and Internet Explorer. Check to see what the error is, hopefully it's a simple one like the files being missing, in which case check your folder names and refresh the page. If it's something more complex feel free to post about it <a href="http://www.html5gamedevs.com/forum/14-phaser/">on the forum</a> and we'll help.</p>

<p><a href="part7.html">Part 7: The Phaser Examples</a></p>

Expand Down
4 changes: 3 additions & 1 deletion tutorials/01 Getting Started/part7.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ <h1>Getting started with Phaser</h1>

<h2>Part 7 - The Phaser Examples</h2>

<p></p>
<p>Phaser comes with a comprehensive suite of examples. At the current count over 160 of them. Whenever we add a new feature into Phaser we create an example to demonstrate how to use it. They are short self-contained snippets of code that focus on just a couple of elements and nothing more, and as such they're really useful to learn from!</p>

<p>Although we've uploaded the Examples to our site, we still recommend that you copy the whole phaser folder (the entire repository) to your webroot, so you can easily run the Example browser locally.

<p><a href="part8.html">Part 8: Next Steps</a></p>

Expand Down

0 comments on commit f9b82b6

Please sign in to comment.