Added phaser build and hellophaser sample
This commit is contained in:
BIN
resources/tutorials/01 Getting Started/hellophaser.zip
Normal file
BIN
resources/tutorials/01 Getting Started/hellophaser.zip
Normal file
Binary file not shown.
@@ -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>
|
||||
12
resources/tutorials/01 Getting Started/hellophaser/phaser.min.js
vendored
Normal file
12
resources/tutorials/01 Getting Started/hellophaser/phaser.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
resources/tutorials/01 Getting Started/hellophaser/phaser.png
Normal file
BIN
resources/tutorials/01 Getting Started/hellophaser/phaser.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
BIN
resources/tutorials/01 Getting Started/images/cloneFrom.jpg
Normal file
BIN
resources/tutorials/01 Getting Started/images/cloneFrom.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
resources/tutorials/01 Getting Started/images/dashboard.jpg
Normal file
BIN
resources/tutorials/01 Getting Started/images/dashboard.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
resources/tutorials/01 Getting Started/images/editor.jpg
Normal file
BIN
resources/tutorials/01 Getting Started/images/editor.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
resources/tutorials/01 Getting Started/images/start.jpg
Normal file
BIN
resources/tutorials/01 Getting Started/images/start.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
46
resources/tutorials/01 Getting Started/index.html
Normal file
46
resources/tutorials/01 Getting Started/index.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!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>
|
||||
|
||||
<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><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. 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 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" 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
resources/tutorials/01 Getting Started/part2.html
Normal file
70
resources/tutorials/01 Getting Started/part2.html
Normal 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>
|
||||
64
resources/tutorials/01 Getting Started/part3.html
Normal file
64
resources/tutorials/01 Getting Started/part3.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!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>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>
|
||||
|
||||
<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>
|
||||
68
resources/tutorials/01 Getting Started/part4.html
Normal file
68
resources/tutorials/01 Getting Started/part4.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<!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>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 IntelliJ IDEA, a heavily Java based editor, 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 and OS integration is weak, 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>
|
||||
|
||||
<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
resources/tutorials/01 Getting Started/part5.html
Normal file
48
resources/tutorials/01 Getting Started/part5.html
Normal 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>
|
||||
46
resources/tutorials/01 Getting Started/part6.html
Normal file
46
resources/tutorials/01 Getting Started/part6.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!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>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>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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
46
resources/tutorials/01 Getting Started/part7.html
Normal file
46
resources/tutorials/01 Getting Started/part7.html
Normal file
@@ -0,0 +1,46 @@
|
||||
<!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>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 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>
|
||||
|
||||
<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>
|
||||
56
resources/tutorials/01 Getting Started/part8.html
Normal file
56
resources/tutorials/01 Getting Started/part8.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!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>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>
|
||||
<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>
|
||||
Reference in New Issue
Block a user