Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-23 21:24:09 +00:00
Code Issues Projects Releases Packages Wiki Activity

New Getting Started Tutorial.

Browse source
This commit is contained in:
photonstorm 2013-11-29 15:16:42 +00:00
parent 00a9897ae2
commit efe839978b
8 changed files with 314 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
tutorials/01 Getting Started/index.html
View file

@ -15,66 +15,32 @@
<h1>Getting started with Phaser</h1>
<h2>Part 1 - Setting up your development environment</h2>
<ul>
<li><a href="index.html">Part 1: Introduction</a></li>
<li><a href="part2.html">Part 2: Installing a web server</a></li>
<li><a href="part3.html">Part 3: Run in the Cloud</a></li>
<li><a href="part4.html">Part 4: Choosing an Editor</a></li>
<li><a href="part5.html">Part 5: Downloading Phaser</a></li>
<li><a href="part6.html">Part 6: Hello World!</a></li>
<li><a href="part7.html">Part 7: The Phaser Examples</a></li>
<li><a href="part8.html">Part 8: Next Steps</a></li>
</ul>
<h2>Part 1 - Introduction</h2>
<p>In this tutorial we're going to cover setting-up a development enviornment with which you can build your Phaser games. This will include running a local web server, picking an IDE, getting the latest version of Phaser and checking it all works together properly.</p>
<p>"But why do I need a local web server anyway? Can't I just drag the html files onto my browser?"</p>
<p><strong>"Why do I need a local web server? Can't I just drag the html files onto my browser?"</strong></p>
<p>Not these days, no. I appreciate that it's a bit confusing, even contradictory at times, but it all boils down to browser security in the end. If you're making a static html web site, with a few images in it, then you can happily drag this into your browser and see the end results. You can also "Save As" entire web pages locally and re-open them, with all the contents mostly intact. So why can't you drag an HTML5 game into a browser and have it work?</p>
<p>Not these days, no. I appreciate that it's a bit confusing, even contradictory at times, but it all boils down to browser security. If you're making a static html web page, perhaps with a few images in it, then you can happily drag this file into your browser and see the end results. You can also "Save As" entire web pages locally and re-open them, with all the contents mostly intact. If both of these things work why can't you drag an HTML5 game into a browser and run it?</p>
<p>It's to do with the protocol used to access the files. When you request anything over the web you're using http - and the server level security is enough to ensure you can only access files you're meant to. But when you drag a file in it's loaded via the local file system (technically file://) and that is a massively restricted one, for obvious reasons. Under file:// there's no concept of domains, no server level security - just a raw file system. Ask yourself this: do you really want JavaScript to have the ability to load files from your local file system? The immediate answer should of course be "no way!". If JavaScript had free reign while operating under file:// there would be nothing stopping it loading up any system file it fancied and sending it off over the net to anywhere it liked.</p>
<p>It's to do with the protocol used to access the files. When you request anything over the web you're using http, and the server level security is enough to ensure you can only access files you're meant to. But when you drag a file in it's loaded via the local file system (technically file://) and that is massively restricted, for obvious reasons. Under file:// there's no concept of domains, no server level security, just a raw file system. Ask yourself this: do you really want JavaScript to have the ability to load files from your local file system? Your immediate answer should of course be "not in a million years!". If JavaScript had free reign while operating under file:// there would be nothing stopping it loading pretty much <em>any</em> file it fancied and sending it off who knows where.</p>
<p>Because this is so dangerous browsers lock themselves down tighter than Alcatraz when running under file://. Every single page becomes treated as a unique local domain. That is why "Save Web page" work, to a degree. They still are under the same cross-site restrictions as if they were on a live server. (to a degree, they still can't save anything or send data out or load data like a game), but also why "Save Web page" cannot make a cross site request, i.e. it can't load or send local data elsewhere. There's a quite detailed post here about it: http://blog.chromium.org/2008/12/security-in-depth-local-web-pages.html
Due to the way that web browser sandbox security works you will need a local web server running. This is so that your games can load in external assets like images and music. By default web browsers are unable to load local files, as if you think about it for a moment you should be grateful for that fact! Although there are ways to modify your browsers start-up settings to bypass the sandbox security we really don't recommend it, and as you're building games for <em>the web</em> it's only sensible that you run a local environment that as closely emulates the web on which your game will be running anyway.</p>
<h2>Download the latest version of Phaser</h2>
<p>In this tutorial we're going to build a game that will introduce some of the core features of Phaser to you. Before we begin there are a few things you'll need to have set-up if you haven't already:</p>
<h2>Download the latest version of Phaser</h2>
<p>The latest version of Phaser is available to download from github. At the time of writing that is version 1.1.2. If you aren't familiar with using git then github offer a handy "Download as zip" option which will download the whole repository in a single zip file. You can then unzip this locally and get to all the files. If you are happy using git then pull down the latest version of the repositiory before starting.</p>
<h2>Set-up your development environment</h2>
<h3>Method 1: Run a local web server</h3>
http://cesanta.com/downloads.html
<p>On Windows there are lots of "single install" bundles available. These are easy-to-install files that package together popular web technologies like Apache, PHP and MySQL and install them all for you at once, often with a handy system-tray icon to manage them too. We would recommend either <a href="http://www.wampserver.com/en/">WAMP Server</a> or <a href="http://www.apachefriends.org/en/xampp.html">XAMPP</a>. Instead of an 'all in one' bundle you could also download just the web server on its own. Microsoft provide IIS and Apache can be downloaded for Windows as well.</p>
<p><strong>Note:</strong> Skype likes to steal port 80 by default. This is the traditional port for a web server to run over and it might interfer with WAMP or similar being able to start. To disable this within Skype go to "Tools - Options - Connection" and uncheck the "Use port 80 and 443 as alternatives for incoming connections" checkbox.</p>
<p>On OS X you could download <a href="http://www.mamp.info/en/index.html">MAMP</a> which comes in two versions (one free, one paid for). Or there are guides for setting up a local web server manually, such as <a href="https://discussions.apple.com/docs/DOC-3083">this guide written for Mountain Lion</a>.
<h3>Method 2: grunt connect</h3>
<p><a href="http://gruntjs.com/">Grunt</a> is an extremely powerful tool to have installed, regardless if you use it as a web server or not. At its essence it's a JavaScript based task runner and allows you to automate tedious time consuming tasks. But it can also be configured with Connect for serving local files and <a href="https://github.com/gruntjs/grunt-contrib-connect">here's a guide on doing just that</a>.
<h3>Method 3: Simple HTTP Server with Python</h3>
<p>If you need a quick web server running and you don't want to mess around with setting up apache or something similar, then Python can help. Python comes with a simple built in HTTP server. With the help of this little HTTP server you can turn any directory in your system into your web server directory. The only thing you need to have installed is Python. <a href="http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python">Read the full guide here</a>.
<h3>Method 4: http-server for node.js</h3>
<p>http-server is a simple, zero-configuration command-line http server for <a href="http://nodejs.org/">node.js</a>. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development, and learning. Or as the web site says "Serving up static files like they were turtles strapped to rockets". Get the npm and instructions from the <a href="https://npmjs.org/package/http-server">http-server web site</a>.</p>
<h3>Method 5: php 5 built-in web server</h3>
<p>As of PHP 5.4.0, the CLI SAPI provides a built-in web server. It's only really suitable for development purposes and servers all files sequentially, but it's easily powerful enough for testing HTML5 games. It's invoked from a single command-line call and you can find details on how to do this in <a href="http://php.net/manual/en/features.commandline.webserver.php">the PHP Manual</a></p>.
<h3>Method 2: Run in the cloud</h3>
<p>Because this is so dangerous browsers lock themselves down tighter than Alcatraz when running under file://. Every single page becomes treated as a unique local domain. That is why "Save Web page" works, to a degree. It opens under the same cross-site restrictions as if they were on a live server. There's a detailed post about it on the Chromium blog: http://blog.chromium.org/2008/12/security-in-depth-local-web-pages.html.</p>
<p>Your game is going to need to load in resources. Images, audio files, JSON data, maybe other JavaScript files. In order to do this it needs to run unhindered by the browser security shackles. It needs http:// access to the game files. And for that we need a web server.</p>
<p><a href="part2.html">Part 2: Installing a web server</a></p>
</body>
</html>

70
tutorials/01 Getting Started/part2.html Normal file
View file

@ -0,0 +1,70 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Phaser Tutorial 01 - Getting Started</title>
<script src="build/phaser.js" type="text/javascript"></script>
<style>
body {
font-family: Arial;
font-size: 14px;
}
</style>
</head>
<body>
<h1>Getting started with Phaser</h1>
<h2>Part 2 - Installing a web server</h2>
<h3>Windows</h3>
<p>On Windows there are lots of "single install" bundles available. These are easy-to-install files that package together popular web technologies like Apache, PHP and MySQL and install them all for you at once, often with a handy system-tray icon to manage them too.</p>
<p>We would recommend either <a href="http://www.wampserver.com/en/">WAMP Server</a> or <a href="http://www.apachefriends.org/en/xampp.html">XAMPP</a>. Both have easy set-up guides available. WAMP specifically installs an icon into your system-try from which you can stop and restart the services as well as modify Apache settings, such as creating a new folder alias for a project.</p>
<p>Cesanta provide the <a href="http://cesanta.com/downloads.html">Mongoose web server</a>. This is a really small application that requires no installation and can run as a single EXE file. Without all of the additional bundles like SSI and WebDAV (none of which you'll need for an HTML5 game) the EXE is a paltry 45KB in size. Even the fully featured one is only 355KB.</p>
<p>Instead of an 'all in one' bundle you could also download just a web server on its own. Both <a href="http://www.iis.net/">Microsoft IIS</a> and <a href="http://httpd.apache.org/">Apache</a> can be downloaded for free from their respective sites.</p>
<p><strong>Note:</strong> Skype likes to steal port 80 by default. This is the traditional port for a web server to run over and it might interfer with WAMP or similar being able to start. To disable this within Skype go to "Tools - Options - Connection" and uncheck the "Use port 80 and 443 as alternatives for incoming connections" checkbox.</p>
<h3>OS X</h3>
<p>Being a Unix environment at heart there are more options available of OS X. But if you'd like an "all in one" approach like WAMP for Windows, with a nice clean and easy to use interface then we'd strongly recommend <a href="http://www.mamp.info/en/index.html">MAMP</a>. This comes in two versions: one free and one paid for.</p>
<p>Naturally there are also guides for setting up a local web server manually, such as <a href="https://discussions.apple.com/docs/DOC-3083">this guide written for Mountain Lion</a>. Pick whichever approach you feel most comfortable with.</p>
<h3>grunt connect</h3>
<p><a href="http://gruntjs.com/">Grunt</a> is an extremely powerful tool to have installed, regardless if you use it as a web server or not. At its essence it's a JavaScript based task runner and allows you to automate tedious time consuming tasks. We use it in Phaser to build our distribution scripts for example. But it can also be configured with Connect to serve local files, acting as a web server, and <a href="https://github.com/gruntjs/grunt-contrib-connect">here's a guide on doing just that</a>.</p>
<h3>Simple HTTP Server with Python</h3>
<p>If you need a quick web server running and you don't want to mess around with setting up Apache or downloading an app, then Python can help. Python comes with a simple built-in HTTP server. With the help of this little HTTP server you can turn any directory on your system into your web server directory. Naturally the only thing you need to have installed is Python. <a href="http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python">Read the full guide here</a>.</p>
<h3>http-server for node.js</h3>
<p>http-server is a simple, zero-configuration command-line http server for <a href="http://nodejs.org/">node.js</a>. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development, and learning. Or as the web site says "Serving up static files like they were turtles strapped to rockets". Get the npm and instructions from the <a href="https://npmjs.org/package/http-server">http-server web site</a>.</p>
<h3>php 5 built-in web server</h3>
<p>As of PHP 5.4.0, the CLI SAPI provides a built-in web server. It's only really suitable for development purposes and serves all files sequentially, but it's easily powerful enough for testing HTML5 games. It's invoked from a single command-line call, and you can find details on how to do this in <a href="http://php.net/manual/en/features.commandline.webserver.php">the PHP Manual</a>.</p>
<p>Rather than running a web server locally you could build your HTML5 game fully in the cloud. We explore some cloud options in Part 3.</p>
<p><a href="part3.html">Part 3: Run in the Cloud</a></p>
<ul>
<li><a href="index.html">Part 1: Introduction</a></li>
<li><a href="part2.html">Part 2: Installing a web server</a></li>
<li><a href="part3.html">Part 3: Run in the Cloud</a></li>
<li><a href="part4.html">Part 4: Choosing an Editor</a></li>
<li><a href="part5.html">Part 5: Downloading Phaser</a></li>
<li><a href="part6.html">Part 6: Hello World!</a></li>
<li><a href="part7.html">Part 7: The Phaser Examples</a></li>
<li><a href="part8.html">Part 8: Next Steps</a></li>
</ul>
</body>
</html>

36
tutorials/01 Getting Started/part3.html Normal file
View file

@ -0,0 +1,36 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Phaser Tutorial 01 - Getting Started</title>
<script src="build/phaser.js" type="text/javascript"></script>
<style>
body {
font-family: Arial;
font-size: 14px;
}
</style>
</head>
<body>
<h1>Getting started with Phaser</h1>
<h2>Part 3 - Run in the Cloud</h2>
<p></p>
<p><a href="part4.html">Part 4: Choosing an Editor</a></p>
<ul>
<li><a href="index.html">Part 1: Introduction</a></li>
<li><a href="part2.html">Part 2: Installing a web server</a></li>
<li><a href="part3.html">Part 3: Run in the Cloud</a></li>
<li><a href="part4.html">Part 4: Choosing an Editor</a></li>
<li><a href="part5.html">Part 5: Downloading Phaser</a></li>
<li><a href="part6.html">Part 6: Hello World!</a></li>
<li><a href="part7.html">Part 7: The Phaser Examples</a></li>
<li><a href="part8.html">Part 8: Next Steps</a></li>
</ul>
</body>
</html>

36
tutorials/01 Getting Started/part4.html Normal file
View file

@ -0,0 +1,36 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Phaser Tutorial 01 - Getting Started</title>
<script src="build/phaser.js" type="text/javascript"></script>
<style>
body {
font-family: Arial;
font-size: 14px;
}
</style>
</head>
<body>
<h1>Getting started with Phaser</h1>
<h2>Part 4 - Choosing an Editor</h2>
<p></p>
<p><a href="part5.html">Part 5: Downloading Phaser</a></p>
<ul>
<li><a href="index.html">Part 1: Introduction</a></li>
<li><a href="part2.html">Part 2: Installing a web server</a></li>
<li><a href="part3.html">Part 3: Run in the Cloud</a></li>
<li><a href="part4.html">Part 4: Choosing an Editor</a></li>
<li><a href="part5.html">Part 5: Downloading Phaser</a></li>
<li><a href="part6.html">Part 6: Hello World!</a></li>
<li><a href="part7.html">Part 7: The Phaser Examples</a></li>
<li><a href="part8.html">Part 8: Next Steps</a></li>
</ul>
</body>
</html>

48
tutorials/01 Getting Started/part5.html Normal file
View file

@ -0,0 +1,48 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Phaser Tutorial 01 - Getting Started</title>
<script src="build/phaser.js" type="text/javascript"></script>
<style>
body {
font-family: Arial;
font-size: 14px;
}
</style>
</head>
<body>
<h1>Getting started with Phaser</h1>
<h2>Part 5 - Downloading Phaser</h2>
<p>Phaser is an open source project and available to download for free. We use github to manage the project and it's on the github site that you will find the latest version:</p>
<p><a href="https://github.com/photonstorm/phaser">https://github.com/photonstorm/phaser</a></p>
<h3>Can I just get a zip file?</h3>
<p>Yes. Github provide the option to <a href="https://github.com/photonstorm/phaser/archive/master.zip">download the whole repository</a> as a zip file. You can then unzip this locally to get to all the files. However we would strongly recommend you learn to use git instead. It will allow you to easily update to the latest versions as we release them, and it makes contributing towards the project much easier as well. If you don't fancy learning to use git via the command-line there are some great applications you can use instead. We'd recommend <a href="http://www.syntevo.com/smartgithg/">SmartGIT</a> on Windows or <a href="http://www.git-tower.com/">Git Tower</a> on OS X.</p>
<h3>Repository Structure</h3>
<p>The Phaser repository is split across 2 main branches: <a href="https://github.com/photonstorm/phaser">master</a> and <a href="https://github.com/photonstorm/phaser/tree/dev">dev</a>. The master branch contains the most recent stable release and is the one you should try first. The dev branch is where we prepare the latest versions. In here you'll find experimental features and API changes, some of which may not work. But it's also where you'll see the bleeding-edge features we're working on.</p>
<p>Right now there is an approximate delay of around 4 weeks between dev and master. This means we build the new features out in dev and let them bake for a month before we move them to master. This gives them time for others to test and comment on them, and it keeps the release rate of Phaser to a manageable monthly cycle.</p>
<p><a href="part6.html">Part 6: Hello World!</a></p>
<ul>
<li><a href="index.html">Part 1: Introduction</a></li>
<li><a href="part2.html">Part 2: Installing a web server</a></li>
<li><a href="part3.html">Part 3: Run in the Cloud</a></li>
<li><a href="part4.html">Part 4: Choosing an Editor</a></li>
<li><a href="part5.html">Part 5: Downloading Phaser</a></li>
<li><a href="part6.html">Part 6: Hello World!</a></li>
<li><a href="part7.html">Part 7: The Phaser Examples</a></li>
<li><a href="part8.html">Part 8: Next Steps</a></li>
</ul>
</body>
</html>

36
tutorials/01 Getting Started/part6.html Normal file
View file

@ -0,0 +1,36 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Phaser Tutorial 01 - Getting Started</title>
<script src="build/phaser.js" type="text/javascript"></script>
<style>
body {
font-family: Arial;
font-size: 14px;
}
</style>
</head>
<body>
<h1>Getting started with Phaser</h1>
<h2>Part 6 - Hello World!</h2>
<p></p>
<p><a href="part7.html">Part 7: The Phaser Examples</a></p>
<ul>
<li><a href="index.html">Part 1: Introduction</a></li>
<li><a href="part2.html">Part 2: Installing a web server</a></li>
<li><a href="part3.html">Part 3: Run in the Cloud</a></li>
<li><a href="part4.html">Part 4: Choosing an Editor</a></li>
<li><a href="part5.html">Part 5: Downloading Phaser</a></li>
<li><a href="part6.html">Part 6: Hello World!</a></li>
<li><a href="part7.html">Part 7: The Phaser Examples</a></li>
<li><a href="part8.html">Part 8: Next Steps</a></li>
</ul>
</body>
</html>

36
tutorials/01 Getting Started/part7.html Normal file
View file

@ -0,0 +1,36 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Phaser Tutorial 01 - Getting Started</title>
<script src="build/phaser.js" type="text/javascript"></script>
<style>
body {
font-family: Arial;
font-size: 14px;
}
</style>
</head>
<body>
<h1>Getting started with Phaser</h1>
<h2>Part 7 - The Phaser Examples</h2>
<p></p>
<p><a href="part8.html">Part 8: Next Steps</a></p>
<ul>
<li><a href="index.html">Part 1: Introduction</a></li>
<li><a href="part2.html">Part 2: Installing a web server</a></li>
<li><a href="part3.html">Part 3: Run in the Cloud</a></li>
<li><a href="part4.html">Part 4: Choosing an Editor</a></li>
<li><a href="part5.html">Part 5: Downloading Phaser</a></li>
<li><a href="part6.html">Part 6: Hello World!</a></li>
<li><a href="part7.html">Part 7: The Phaser Examples</a></li>
<li><a href="part8.html">Part 8: Next Steps</a></li>
</ul>
</body>
</html>

34
tutorials/01 Getting Started/part8.html Normal file
View file

@ -0,0 +1,34 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Phaser Tutorial 01 - Getting Started</title>
<script src="build/phaser.js" type="text/javascript"></script>
<style>
body {
font-family: Arial;
font-size: 14px;
}
</style>
</head>
<body>
<h1>Getting started with Phaser</h1>
<h2>Part 8 - Next Steps</h2>
<p></p>
<ul>
<li><a href="index.html">Part 1: Introduction</a></li>
<li><a href="part2.html">Part 2: Installing a web server</a></li>
<li><a href="part3.html">Part 3: Run in the Cloud</a></li>
<li><a href="part4.html">Part 4: Choosing an Editor</a></li>
<li><a href="part5.html">Part 5: Downloading Phaser</a></li>
<li><a href="part6.html">Part 6: Hello World!</a></li>
<li><a href="part7.html">Part 7: The Phaser Examples</a></li>
<li><a href="part8.html">Part 8: Next Steps</a></li>
</ul>
</body>
</html>