Final version of the Getting Started guide.

2026-07-16 01:20:13 +08:00 · 2013-11-29 18:28:55 +00:00
parent f9b82b66db
commit d9ffd6afd4
16 changed files with 263 additions and 111 deletions
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <title>hello phaser!</title>
+        <script src="phaser.min.js"></script>
+    </head>
+    <body>
+
+    <script type="text/javascript">
+
+    window.onload = function() {
+
+        var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
+
+        function preload () {
+
+            game.load.image('logo', 'phaser.png');
+
+        }
+
+        function create () {
+
+            var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo');
+            logo.anchor.setTo(0.5, 0.5);
+
+        }
+
+    };
+
+    </script>
+
+    </body>
+</html>
@@ -17,7 +17,35 @@

        <h2>Part 3 - Run in the Cloud</h2>

-        <p></p>
+        <p>If you're not comfortable with github cloning, and setting up a web server, or if you don't want to bother with all that, you can run phaser in the Cloud.</p>
+
+        <p>More than a marketing buzzword, the Cloud is often used by developers as tool which allows you to create, edit and share your content without having to install anything, or make the people you share your content with do so.</p>
+
+        <p>There are several JavaScript online collaboration tools such as JSBin, codepen and JSFiddle just to name a few of them.</p>
+
+        <p>There is another tool that we recommend which is called Cloud9 IDE that allows you get up and running very quickly.</p>
+
+        <img src="https://c9.io/site/wp-content/themes/cloud9/img/logo_cloud9.png"/>
+
+        <p>First, sign up to the website using GitHub, and once this is completed, you will be redirected to your dashboard.</p>
+
+        <img src="images/dashboard.jpg"/>
+
+        <p>From this dashboard, you can create private or shared project, or, the feature that interests us in this case, you can create a project from a GitHub repository.</p>
+
+        <p>Click the "create workspace" button and select the "clone from URL" option from the drop-down menu.</p>
+
+        <img src="images/cloneFrom.jpg"/>
+
+        <p>Once the repository is integrated into c9.io, you'll see this window:</p>
+
+        <img src="images/start.jpg"/>
+
+        <p>When you click on the "start editing" button you'll be redirected here:</p>
+
+        <img src="images/editor.jpg"/>
+
+        <p>You have now a copy of the Phaser repository.</p>

        <p><a href="part4.html">Part 4: Choosing an Editor</a></p>

@@ -21,15 +21,7 @@

        <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>
+        <p>Download <a href="hellophaser.zip">this zip file</a>. It contains a folder called 'hellophaser' inside which you'll find a JavaScript file, an index.html and a PNG. Copy the 'hellophaser' folder to your webroot.</p>

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

@@ -17,9 +17,17 @@

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

-        <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>Phaser comes with a comprehensive suite of examples. At the current count over 160 of them. 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! Whenever we add a new feature into Phaser we create an example to demonstrate how to use it, so there are all kinds of examples from simple things like loading audio to sprite animation and input handling.</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>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 Examples locally. If you've copied the phaser folder into your webroot then you can access the examples at:</p>
+
+        <code>http://localhost/phaser/examples</code>
+
+        <p>Note: The URL above will differ based on your server set-up.</p>
+
+        <h3>Side by side</h3>
+
+        <p>There are two ways to explore the examples. The default view is a big long list and each new example opens in a new page. There is also a 'Side View', a link to which you'll find at the top of the page. This puts all of the examples in a list down the left and the content and code loads into a frame on the right. Each one has its advantages, so play around and explore!</p>

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

@@ -17,7 +17,29 @@

        <h2>Part 8 - Next Steps</h2>

-        <p></p>
+        <p>Your game development experience with Phaser begins here! Although we've only touched upon the basics you still have a fully working development environment, access to the API docs and hundreds of examples. Even so it's always best to code as part of a community - and for that we cannot recommend our forum enough. It has gone from strength to strength over the past few months, and you're sure to find help and support when you need it most.</p>
+
+        <p>Bounce ideas of others, hang-out in the chat room, browse the games showcase and just be involved!</p>
+
+        <p><a href="http://www.html5gamedevs.com/forum/14-phaser/">Join the Forum</a></p>
+
+        <h3>Phaser Newsletter</h3>
+
+        <p>We publish a monthly Phaser newsletter. As well as details about new releases it also contains short tutorials and features. Sign-up for free to have it hit your inbox during the first week of the month.</p>
+
+        <p><a href="https://confirmsubscription.com/h/r/369DE48E3E86AF1E">Subscribe to the Newsletter</a></p>
+
+        <h3>Contribute</h3>
+
+        <p>You can help shape the way in which Phaser grows. If you find a bug, please report it. It won't take you long, and to date we have fixed over 91% of all reported issues (and we're still working on the other 9%). You can also issue Pull Requests against the development branch, or release your own plugins or filters.</p>
+
+        <p><a href="https://github.com/photonstorm/phaser/issues/new">Report Issues on GitHub</a></p>
+
+        <h3>Show us your games!</h3>
+
+        <p>We spend many tireless hours working on Phaser because we want it to be the best HTML5 game development framework it can possibly be. We understand it won't be perfect for everyone, and we're cool with that. But if you use it and make something, no matter how small you think that is, please do let us know. You won't believe with a real motivational boost it is when devs show us the games they've been working on! Reach out to us either on the forum, via twitter (<a href="https://twitter.com/photonstorm">@photonstorm</a>) or by <a href="mailto:rdavey@gmail.com">email</a>.</p>
+
+        <p>Most of all though, we truly hope you have fun making your game.</p>

        <ul>
            <li><a href="index.html">Part 1: Introduction</a></li>