andrew/moonlight-skulk
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added phaser build and hellophaser sample

Browse Source
This commit is contained in:
Andrew Kesterson
2014-06-09 21:32:48 -07:00
parent 49f23abbe8
commit 48b5c5714a
856 changed files with 954584 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/tutorials/01 Getting Started/hellophaser.zip Normal file
View File

Binary file not shown.

34
resources/tutorials/01 Getting Started/hellophaser/index.html Normal file
View File

@@ -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
View File

File diff suppressed because one or more lines are too long

BIN
resources/tutorials/01 Getting Started/hellophaser/phaser.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 176 KiB

BIN
resources/tutorials/01 Getting Started/images/cloneFrom.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
resources/tutorials/01 Getting Started/images/dashboard.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
resources/tutorials/01 Getting Started/images/editor.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

BIN
resources/tutorials/01 Getting Started/images/start.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

46
resources/tutorials/01 Getting Started/index.html Normal file
View 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
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>

64
resources/tutorials/01 Getting Started/part3.html Normal file
View 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
View 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
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>

46
resources/tutorials/01 Getting Started/part6.html Normal file
View 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
View 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
View 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>

BIN
resources/tutorials/02 Making your first game/assets/baddie.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
resources/tutorials/02 Making your first game/assets/diamond.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 508 B

BIN
resources/tutorials/02 Making your first game/assets/dude.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
resources/tutorials/02 Making your first game/assets/firstaid.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 554 B

BIN
resources/tutorials/02 Making your first game/assets/platform.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
resources/tutorials/02 Making your first game/assets/sky.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
resources/tutorials/02 Making your first game/assets/star.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 443 B

22
resources/tutorials/02 Making your first game/js/phaser.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

31
resources/tutorials/02 Making your first game/part1.html Normal file
View File

@@ -0,0 +1,31 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 1</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
}
function create() {
}
function update() {
}
</script>
</body>
</html>

37
resources/tutorials/02 Making your first game/part2.html Normal file
View File

@@ -0,0 +1,37 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 2</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
function create() {
}
function update() {
}
</script>
</body>
</html>

40
resources/tutorials/02 Making your first game/part3.html Normal file
View File

@@ -0,0 +1,40 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 3</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
function create() {
game.add.sprite(0, 0, 'star');
}
function update() {
}
</script>
</body>
</html>

70
resources/tutorials/02 Making your first game/part4.html Normal file
View File

@@ -0,0 +1,70 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 4</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var platforms;
function create() {
// We're going to be using physics, so enable the Arcade Physics system
game.physics.startSystem(Phaser.Physics.ARCADE);
// A simple background for our game
game.add.sprite(0, 0, 'sky');
// The platforms group contains the ground and the 2 ledges we can jump on
platforms = game.add.group();
// We will enable physics for any object that is created in this group
platforms.enableBody = true;
// Here we create the ground.
var ground = platforms.create(0, game.world.height - 64, 'ground');
// Scale it to fit the width of the game (the original sprite is 400x32 in size)
ground.scale.setTo(2, 2);
// This stops it from falling away when you jump on it
ground.body.immovable = true;
// Now let's create two ledges
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
}
function update() {
}
</script>
</body>
</html>

83
resources/tutorials/02 Making your first game/part5.html Normal file
View File

@@ -0,0 +1,83 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 5</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var platforms;
function create() {
// We're going to be using physics, so enable the Arcade Physics system
game.physics.startSystem(Phaser.Physics.ARCADE);
// A simple background for our game
game.add.sprite(0, 0, 'sky');
// The platforms group contains the ground and the 2 ledges we can jump on
platforms = game.add.group();
// We will enable physics for any object that is created in this group
platforms.enableBody = true;
// Here we create the ground.
var ground = platforms.create(0, game.world.height - 64, 'ground');
// Scale it to fit the width of the game (the original sprite is 400x32 in size)
ground.scale.setTo(2, 2);
// This stops it from falling away when you jump on it
ground.body.immovable = true;
// Now let's create two ledges
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
// The player and its settings
player = game.add.sprite(32, game.world.height - 150, 'dude');
// We need to enable physics on the player
game.physics.arcade.enable(player);
// Player physics properties. Give the little guy a slight bounce.
player.body.bounce.y = 0.2;
player.body.gravity.y = 300;
player.body.collideWorldBounds = true;
// Our two animations, walking left and right.
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
}
function update() {
}
</script>
</body>
</html>

88
resources/tutorials/02 Making your first game/part6.html Normal file
View File

@@ -0,0 +1,88 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 6</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var player;
var platforms;
function create() {
// We're going to be using physics, so enable the Arcade Physics system
game.physics.startSystem(Phaser.Physics.ARCADE);
// A simple background for our game
game.add.sprite(0, 0, 'sky');
// The platforms group contains the ground and the 2 ledges we can jump on
platforms = game.add.group();
// We will enable physics for any object that is created in this group
platforms.enableBody = true;
// Here we create the ground.
var ground = platforms.create(0, game.world.height - 64, 'ground');
// Scale it to fit the width of the game (the original sprite is 400x32 in size)
ground.scale.setTo(2, 2);
// This stops it from falling away when you jump on it
ground.body.immovable = true;
// Now let's create two ledges
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
// The player and its settings
player = game.add.sprite(32, game.world.height - 150, 'dude');
// We need to enable physics on the player
game.physics.arcade.enable(player);
// Player physics properties. Give the little guy a slight bounce.
player.body.bounce.y = 0.2;
player.body.gravity.y = 300;
player.body.collideWorldBounds = true;
// Our two animations, walking left and right.
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
}
function update() {
// Collide the player and the stars with the platforms
game.physics.arcade.collide(player, platforms);
}
</script>
</body>
</html>

122
resources/tutorials/02 Making your first game/part7.html Normal file
View File

@@ -0,0 +1,122 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 7</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var player;
var platforms;
var cursors;
function create() {
// We're going to be using physics, so enable the Arcade Physics system
game.physics.startSystem(Phaser.Physics.ARCADE);
// A simple background for our game
game.add.sprite(0, 0, 'sky');
// The platforms group contains the ground and the 2 ledges we can jump on
platforms = game.add.group();
// We will enable physics for any object that is created in this group
platforms.enableBody = true;
// Here we create the ground.
var ground = platforms.create(0, game.world.height - 64, 'ground');
// Scale it to fit the width of the game (the original sprite is 400x32 in size)
ground.scale.setTo(2, 2);
// This stops it from falling away when you jump on it
ground.body.immovable = true;
// Now let's create two ledges
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
// The player and its settings
player = game.add.sprite(32, game.world.height - 150, 'dude');
// We need to enable physics on the player
game.physics.arcade.enable(player);
// Player physics properties. Give the little guy a slight bounce.
player.body.bounce.y = 0.2;
player.body.gravity.y = 300;
player.body.collideWorldBounds = true;
// Our two animations, walking left and right.
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
// Our controls.
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
// Collide the player and the stars with the platforms
game.physics.arcade.collide(player, platforms);
// Reset the players velocity (movement)
player.body.velocity.x = 0;
if (cursors.left.isDown)
{
// Move to the left
player.body.velocity.x = -150;
player.animations.play('left');
}
else if (cursors.right.isDown)
{
// Move to the right
player.body.velocity.x = 150;
player.animations.play('right');
}
else
{
// Stand still
player.animations.stop();
player.frame = 4;
}
// Allow the player to jump if they are touching the ground.
if (cursors.up.isDown && player.body.touching.down)
{
player.body.velocity.y = -350;
}
}
</script>
</body>
</html>

155
resources/tutorials/02 Making your first game/part8.html Normal file
View File

@@ -0,0 +1,155 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 8</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var player;
var platforms;
var cursors;
var stars;
function create() {
// We're going to be using physics, so enable the Arcade Physics system
game.physics.startSystem(Phaser.Physics.ARCADE);
// A simple background for our game
game.add.sprite(0, 0, 'sky');
// The platforms group contains the ground and the 2 ledges we can jump on
platforms = game.add.group();
// We will enable physics for any object that is created in this group
platforms.enableBody = true;
// Here we create the ground.
var ground = platforms.create(0, game.world.height - 64, 'ground');
// Scale it to fit the width of the game (the original sprite is 400x32 in size)
ground.scale.setTo(2, 2);
// This stops it from falling away when you jump on it
ground.body.immovable = true;
// Now let's create two ledges
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
// The player and its settings
player = game.add.sprite(32, game.world.height - 150, 'dude');
// We need to enable physics on the player
game.physics.arcade.enable(player);
// Player physics properties. Give the little guy a slight bounce.
player.body.bounce.y = 0.2;
player.body.gravity.y = 300;
player.body.collideWorldBounds = true;
// Our two animations, walking left and right.
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
// Finally some stars to collect
stars = game.add.group();
// We will enable physics for any star that is created in this group
stars.enableBody = true;
// Here we'll create 12 of them evenly spaced apart
for (var i = 0; i < 12; i++)
{
// Create a star inside of the 'stars' group
var star = stars.create(i * 70, 0, 'star');
// Let gravity do its thing
star.body.gravity.y = 300;
// This just gives each star a slightly random bounce value
star.body.bounce.y = 0.7 + Math.random() * 0.2;
}
// Our controls.
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
// Collide the player and the stars with the platforms
game.physics.arcade.collide(player, platforms);
game.physics.arcade.collide(stars, platforms);
// Checks to see if the player overlaps with any of the stars, if he does call the collectStar function
game.physics.arcade.overlap(player, stars, collectStar, null, this);
// Reset the players velocity (movement)
player.body.velocity.x = 0;
if (cursors.left.isDown)
{
// Move to the left
player.body.velocity.x = -150;
player.animations.play('left');
}
else if (cursors.right.isDown)
{
// Move to the right
player.body.velocity.x = 150;
player.animations.play('right');
}
else
{
// Stand still
player.animations.stop();
player.frame = 4;
}
// Allow the player to jump if they are touching the ground.
if (cursors.up.isDown && player.body.touching.down)
{
player.body.velocity.y = -350;
}
}
function collectStar (player, star) {
// Removes the star from the screen
star.kill();
}
</script>
</body>
</html>

164
resources/tutorials/02 Making your first game/part9.html Normal file
View File

@@ -0,0 +1,164 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Making your first game, part 9</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var player;
var platforms;
var cursors;
var stars;
var score = 0;
var scoreText;
function create() {
// We're going to be using physics, so enable the Arcade Physics system
game.physics.startSystem(Phaser.Physics.ARCADE);
// A simple background for our game
game.add.sprite(0, 0, 'sky');
// The platforms group contains the ground and the 2 ledges we can jump on
platforms = game.add.group();
// We will enable physics for any object that is created in this group
platforms.enableBody = true;
// Here we create the ground.
var ground = platforms.create(0, game.world.height - 64, 'ground');
// Scale it to fit the width of the game (the original sprite is 400x32 in size)
ground.scale.setTo(2, 2);
// This stops it from falling away when you jump on it
ground.body.immovable = true;
// Now let's create two ledges
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
// The player and its settings
player = game.add.sprite(32, game.world.height - 150, 'dude');
// We need to enable physics on the player
game.physics.arcade.enable(player);
// Player physics properties. Give the little guy a slight bounce.
player.body.bounce.y = 0.2;
player.body.gravity.y = 300;
player.body.collideWorldBounds = true;
// Our two animations, walking left and right.
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
// Finally some stars to collect
stars = game.add.group();
// We will enable physics for any star that is created in this group
stars.enableBody = true;
// Here we'll create 12 of them evenly spaced apart
for (var i = 0; i < 12; i++)
{
// Create a star inside of the 'stars' group
var star = stars.create(i * 70, 0, 'star');
// Let gravity do its thing
star.body.gravity.y = 300;
// This just gives each star a slightly random bounce value
star.body.bounce.y = 0.7 + Math.random() * 0.2;
}
// The score
scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
// Our controls.
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
// Collide the player and the stars with the platforms
game.physics.arcade.collide(player, platforms);
game.physics.arcade.collide(stars, platforms);
// Checks to see if the player overlaps with any of the stars, if he does call the collectStar function
game.physics.arcade.overlap(player, stars, collectStar, null, this);
// Reset the players velocity (movement)
player.body.velocity.x = 0;
if (cursors.left.isDown)
{
// Move to the left
player.body.velocity.x = -150;
player.animations.play('left');
}
else if (cursors.right.isDown)
{
// Move to the right
player.body.velocity.x = 150;
player.animations.play('right');
}
else
{
// Stand still
player.animations.stop();
player.frame = 4;
}
// Allow the player to jump if they are touching the ground.
if (cursors.up.isDown && player.body.touching.down)
{
player.body.velocity.y = -350;
}
}
function collectStar (player, star) {
// Removes the star from the screen
star.kill();
// Add and update the score
score += 10;
scoreText.text = 'Score: ' + score;
}
</script>
</body>
</html>

BIN
resources/tutorials/02 Making your first game/phaser_1x_tutorial_02.zip Normal file
View File

Binary file not shown.

BIN
resources/tutorials/02 Making your first game/phaser_tutorial_02.zip Normal file
View File

Binary file not shown.

BIN
resources/tutorials/02 Making your first game/screen shots/part3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
resources/tutorials/02 Making your first game/screen shots/part4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
resources/tutorials/02 Making your first game/screen shots/part5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
resources/tutorials/02 Making your first game/screen shots/part6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
resources/tutorials/02 Making your first game/screen shots/part7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
resources/tutorials/02 Making your first game/screen shots/part8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
resources/tutorials/02 Making your first game/screen shots/part9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
resources/tutorials/02 Making your first game/screen shots/tutorial_header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

317
resources/tutorials/02 Making your first game/tutorial.html Normal file
View File

@@ -0,0 +1,317 @@
This article was written by <a href="https://twitter.com/alvinsight">Alvin Ourrad</a> and Richard Davey.
Freshly updated for Phaser 2.0!
Welcome to the our first tutorial on Making a Game with Phaser. Here we will learn how to create a small game involving a player running and jumping around platforms collecting stars. While going through this process we'll explain some of the core features of the framework.
<h3>What is Phaser?</h3>
<a href="http://phaser.io">Phaser</a> is an HTML5 game framework which aims to help developers make powerful, cross-browser HTML5 games really quickly and, unlike some others, has solely been built to work with the mobile browsers. The only browser requirement is the support of the canvas tag. It also borrows a lot from Flixel.
<h3>Requirements</h3>
<ul>
<li><a href="http://gametest.mobi/phaser/tutorials/02%20Making%20your%20first%20game/phaser_tutorial_02.zip">Download the source files and assets</a> that go with this tutorial.</li>
<li>You need to have a very, very basic knowledge of JavaScript.</li>
<li>Also make sure you go through the <a href="http://phaser.io/getting-started-js.php">Getting Started Guide</a>, it will show you how to download the framework, set up a local development environment, and give you a glimpse of the structure of a Phaser project and its core functions.</li>
</ul>
If you've gone through the Getting Started Guide you will have downloaded Phaser and got everything set-up and ready to code. Download the resources for this tutorial from here and unzip it into your web root.
Open the part1.html page in your editor of choice and let's have a closer look at the code. After a little boilerplate HTML that includes Phaser the code structure looks like this:
<pre class="lang:js decode:true " >
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
}
function create() {
}
function update() {
}
</pre>
Line 1 is where you bring Phaser to life by creating an instance of a Phaser.Game object and assigning it to a local variable called 'game'. Calling it 'game' is a common practice, but not a requirement, and this is what you will find in the Phaser examples.
The first two parameters are the width and the height of the canvas element that Phaser will create. In this case 800 x 600 pixels. Your game world can be any size you like, but this is the resolution the game will display in. The third parameter can be either Phaser.CANVAS, Phaser.WEBGL, or Phaser.AUTO. This is the rendering context that you want to use. The recommended parameter is Phaser.AUTO which automatically tries to use WebGL, but if the browser or device doesn't support it it'll fall back to Canvas.
The fourth parameter is an empty string, this is the id of the DOM element in which you would like to insert the canvas element that Phaser creates. As we've left it blank it will simply be appended to the body. The final parameter is an object containing four references to Phasers essential functions. Their use is <a href="http://www.html5gamedevs.com/topic/1372-phaser-function-order-reserved-names-and-special-uses/">thoroughly explained here</a>. Note that this object isn't required - Phaser supports a full State system allowing you to break your code into much cleaner single objects. But for a simple Getting Started guide such as this we'll use this approach as it allows for faster prototyping.
<h3>Load Assets</h3>
Let's load the assets we need for our game. You do this by putting calls to game.load inside of a function called preload. Phaser will automatically look for this function when it starts and load anything defined within it.
Currently the preload function is empty. Change it to:
<pre class="lang:js decode:true " >function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
</pre>
This will load in 4 assets: 3 images and a sprite sheet. It may appear obvious to some of you, but I would like to point out the first parameter, also known as the asset key. This string is a link to the loaded asset and is what you'll use in your code when creating sprites. You're free to use any valid JavaScript string as the key.
<h3>Create a Sprite</h3>
In order to add a sprite to our game place the following code in the create function:
<pre class="lang:js decode:true ">game.add.sprite(0, 0, 'star');</pre>
If you bring up the page in a browser you should now see a black game screen with a single star sprite in the top left corner:
<img src="http://www.photonstorm.com/wp-content/uploads/2013/12/part3.png" alt="part3" width="800" height="600" class="alignnone size-full wp-image-13605" />
The order in which items are rendered in the display matches the order in which you create them. So if you wish to place a background behind the star sprite you would need to ensure that it was added as a sprite first, before the star.
<h3>World Building</h3>
Under the hood game.add.sprite is creating a new <a href="http://docs.phaser.io/Phaser.Sprite.html">Phaser.Sprite</a> object and adding the sprite to the “game world”. This world is where all your objects live, it can be compared to the Stage in Actionscript3.
<strong>Note:</strong> The game world has no fixed size and extends infinitely in all directions, with 0,0 being the center of it. For convenience Phaser places 0,0 at the top left of your game for you, but by using the built-in Camera you can move around as needed.
The world class can be accessed via game.world and comes with a lot of handy methods and properties to help you distribute your objects inside the world. It includes some simple properties like game.world.height, but also some more advanced ones that we will use in another tutorial.
For now let's build up the scene by adding a background and platforms. Here is the updated create function:
<pre class="lang:js decode:true " >var platforms;
function create() {
// We're going to be using physics, so enable the Arcade Physics system
game.physics.startSystem(Phaser.Physics.ARCADE);
// A simple background for our game
game.add.sprite(0, 0, 'sky');
// The platforms group contains the ground and the 2 ledges we can jump on
platforms = game.add.group();
// We will enable physics for any object that is created in this group
platforms.enableBody = true;
// Here we create the ground.
var ground = platforms.create(0, game.world.height - 64, 'ground');
// Scale it to fit the width of the game (the original sprite is 400x32 in size)
ground.scale.setTo(2, 2);
// This stops it from falling away when you jump on it
ground.body.immovable = true;
// Now let's create two ledges
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
}
</pre>
If you run this, which you'll find as part4.html in the tutorial zip file, you should see a much more game-like scene:
<img src="http://www.photonstorm.com/wp-content/uploads/2013/12/part4.png" alt="part4" width="800" height="600" class="alignnone size-full wp-image-13606" />
The first part is the same as the star sprite we had before, only instead we changed the key to 'sky' and it has displayed our sky background instead. This is an 800x600 PNG that fills the game screen.
<h3>Groups</h3>
Groups are really powerful. As their name implies they allow you to group together similar objects and control them all as one single unit. You can also check for collision between Groups, and for this game we'll be using two different Groups, one of which is created in the code above for the platforms.
<pre class="lang:js decode:true">platforms = game.add.group();</pre>
As with sprites game.add creates our Group object. We assign it to a new local variable called platforms. Now created we can add objects to it. First up is the ground. This is positioned at the bottom of the game and uses the 'ground' image loaded earlier. The ground is scaled to fill the width of the game. Finally we set its 'immovable' property to true. Had we not done this the ground would move when the player collides with it (more on this in the Physics section).
With the ground in place we create two smaller ledges to jump on to using the exact same technique as for the ground.
<h3>Ready Player One</h3>
Create a new local variable called 'player' and add the following code to the create function. You can see this in part5.html:
<pre class="lang:js decode:true " > // The player and its settings
player = game.add.sprite(32, game.world.height - 150, 'dude');
// We need to enable physics on the player
game.physics.arcade.enable(player);
// Player physics properties. Give the little guy a slight bounce.
player.body.bounce.y = 0.2;
player.body.gravity.y = 300;
player.body.collideWorldBounds = true;
// Our two animations, walking left and right.
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
</pre>
This creates a new sprite called 'player', positioned at 32 pixels by 150 pixels from the bottom of the game. We're telling it to use the 'dude' asset previously loaded. If you glance back to the preload function you'll see that 'dude' was loaded as a sprite sheet, not an image. That is because it contains animation frames. This is what the full sprite sheet looks like:
<img src="http://www.photonstorm.com/wp-content/uploads/2013/12/dude.png" alt="dude" width="288" height="48" class="alignnone size-full wp-image-13607" />
You can see 9 frames in total, 4 for running left, 1 for facing the camera and 4 for running right. Note: Phaser supports flipping sprites to save on animation frames, but for the sake of this tutorial we'll keep it old school. We define two animations called 'left' and 'right'. The 'left' animation uses frames 0, 1, 2 and 3 and runs at 10 frames per second. The 'true' parameter tells the animation to loop. This is our standard run-cycle and we repeat it for running in the opposite direction. With the animations set we create a few physics properties.
<h3>The Body and Velocity: A world of physics</h3>
Phaser has support for a variety of different physics systems. It ships with Arcade Physics, Ninja Physics and P2.JS Full-Body Physics. For the sake of this tutorial we will be using the Arcade Physics system, which is simple and light-weight, perfect for mobile browsers. You'll notice in the code that we have to start the physics system running, and then for every sprite or Group that we wish to use physics on we enable them.
Once done the sprites gain a new body property, which is an instance of <a href="http://docs.phaser.io/Phaser.Physics.Arcade.Body.html">ArcadePhysics.Body</a>. This represents the sprite as a physical body in Phasers Arcade Physics engine. The body object has itself a lot of properties that we can play with. To simulate the effects of gravity on a sprite, it's as simple as writing this:
<pre class="lang:js decode:true">player.body.gravity.y = 300;</pre>
This is an arbitrary value, but logically, the higher the value, the heavier your object feels and the quicker it falls. If you add this to your code or run part5.html you will see that the player falls down without stopping, completely ignoring the ground we created earlier:
<img src="http://www.photonstorm.com/wp-content/uploads/2013/12/part5.png" alt="part5" width="800" height="600" class="alignnone size-full wp-image-13608" />
The reason for this is that we're not yet testing for collision between the ground and the player. We already told Phaser that our ground and ledges would be immovable. Had we not done that when the player collided with them it would stop for a moment and then everything would have collapsed. This is because unless told otherwise, the ground sprite is a moving physical object (also known as a dynamic body) and when the player hits it, the resulting force of the collision is applied to the ground, therefore, the two bodies exchange their velocities and ground starts falling as well.
So to allow the player to collide and take advantage of the physics properties we need to introduce a collision check in the update function:
<pre class="lang:js decode:true " >function update() {
// Collide the player and the stars with the platforms
game.physics.arcade.collide(player, platforms);
}
</pre>
The update function is called by the core game loop every frame. The <a href="http://docs.phaser.io/Phaser.Physics.Arcade.html#toc22">Physics.collide</a> function is the one that performs the magic. It takes two objects and tests for collision and performs separation against them. In this case we're giving it the player sprite and the platforms Group. It's clever enough to run collision against all Group members, so this one call will collide against the ground and both ledges. The result is a firm platform:
<img src="http://www.photonstorm.com/wp-content/uploads/2013/12/part6.png" alt="part6" width="800" height="600" class="alignnone size-full wp-image-13609" />
<h3>Controlling the player with the keyboard</h3>
Colliding is all good and well, but we really need the player to move. You would probably think of heading to the documentation and searching about how to add an event listener, but that is not necessary here. Phaser has a built-in Keyboard manager and one of the benefits of using that is this handy little function:
<pre class="lang:js decode:true " >cursors = game.input.keyboard.createCursorKeys();</pre>
This populates the cursors object with four properties: up, down, left, right, that are all instances of <a href="http://docs.phaser.io/Phaser.Key.html">Phaser.Key</a> objects. Then all we need to do is poll these in our update loop:
<pre class="lang:js decode:true " > // Reset the players velocity (movement)
player.body.velocity.x = 0;
if (cursors.left.isDown)
{
// Move to the left
player.body.velocity.x = -150;
player.animations.play('left');
}
else if (cursors.right.isDown)
{
// Move to the right
player.body.velocity.x = 150;
player.animations.play('right');
}
else
{
// Stand still
player.animations.stop();
player.frame = 4;
}
// Allow the player to jump if they are touching the ground.
if (cursors.up.isDown &amp;&amp; player.body.touching.down)
{
player.body.velocity.y = -350;
}
</pre>
Although we've added a lot of code it should all be pretty readable. The first thing we do is reset the horizontal velocity on the sprite. Then we check to see if the left cursor key is held down. If it is we apply a negative horizontal velocity and start the 'left' running animation. If they are holding down 'right' instead we literally do the opposite. By clearing the velocity and setting it in this manner, every frame, it creates a 'stop-start' style of movement.
The player sprite will move only when a key is held down and stop immediately they are not. Phaser also allows you to create more complex motions, with momentum and acceleration, but this gives us the effect we need for this game. The final part of the key check sets the frame to 4 if no keyis held down. Frame 4 in the sprite sheet is the one of the player looking at you, idle.
<h3>Jump to it</h3>
The final part of the code adds the ability to jump. The up cursor is our jump key and we test if that is down. However we also test if the player is touching the floor, otherwise they could jump while in mid-air. If both of these conditions are met we apply a vertical velocity of 350 px/sec sq. The player will fall to the ground automatically because of the gravity value we applied to it. With the controls in place we now have a game world we can explore. Load up part7.html and have a play. Try tweaking values like the 350 for the jump to lower and higher values to see the effect it will have.
<img src="http://www.photonstorm.com/wp-content/uploads/2013/12/part7.png" alt="part7" width="800" height="600" class="alignnone size-full wp-image-13611" />
<h3>Starshine</h3>
It's time to give our little game a purpose. Let's drop a sprinkling of stars into the scene and allow the player to collect them. To achieve this we'll create a new Group called 'stars' and populate it. In our create function we add the following code (this can be seen in part8.html):
<pre class="lang:js decode:true"> stars = game.add.group();
// Here we'll create 12 of them evenly spaced apart
for (var i = 0; i &lt; 12; i++)
{
// Create a star inside of the 'stars' group
var star = stars.create(i * 70, 0, 'star');
// Let gravity do its thing
star.body.gravity.y = 6;
// This just gives each star a slightly random bounce value
star.body.bounce.y = 0.7 + Math.random() * 0.2;
}
</pre>
The process is similar to when we created the platforms Group. Using a JavaScript 'for' loop we tell it to create 12 stars in our game. They have an x coordinate of i * 70, which means they will be evenly spaced out in the scene 70 pixels apart. As with the player we give them a gravity value so they'll fall down, and a bounce value so they'll bounce a little when they hit the platforms. Bounce is a value between 0 (no bounce at all) and 1 (a full bounce). Ours will bounce somewhere between 0.7 and 0.9. If we were to run the code like this the stars would fall through the bottom of the game. To stop that we need to check for their collision against the platforms in our update loop:
<pre class="lang:js decode:true ">game.physics.arcade.collide(stars, platforms);</pre>
As well as doing this we will also check to see if the player overlaps with a star or not:
<pre class="lang:js decode:true ">game.physics.arcade.overlap(player, stars, collectStar, null, this);</pre>
This tells Phaser to check for an overlap between the player and any star in the stars Group. If found then pass them to the 'collectStar' function:
<pre class="lang:js decode:true">function collectStar (player, star) {
// Removes the star from the screen
star.kill();
}
</pre>
Quite simply the star is killed, which removes it from display. Running the game now gives us a player that can dash about, jumping, bouncing off the platforms and collecting the stars that fall from above. Not bad for a few lines of hopefully mostly quite readable code :)
<img src="http://www.photonstorm.com/wp-content/uploads/2013/12/part8.png" alt="part8" width="800" height="600" class="alignnone size-full wp-image-13615" />
<h3>Finishing touches</h3>
The final tweak we'll make is to add a score. To do this we'll make use of a <a href="http://docs.phaser.io/Phaser.Text.html">Phaser.Text</a> object. Here we create two new variables, one to hold the actual score and the text object itself:
<pre class="lang:js decode:true">var score = 0;
var scoreText;</pre>
The scoreText is set-up in the create function:
<pre class="lang:js decode:true">scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });</pre>
16x16 is the coordinate to display the text at. 'score: 0' is the default string to display and the object that follows contains a font size and fill colour. By not specifying which font we'll actually use the browser will default, so on Windows it will be Arial. Next we need to modify the collectStar function so that when the player picks-up a star their score increases and the text is updated to reflect this:
<pre class="lang:js decode:true">function collectStar (player, star) {
// Removes the star from the screen
star.kill();
// Add and update the score
score += 10;
scoreText.content = 'Score: ' + score;
}
</pre>
So 10 points are added for every star and the scoreText is updated to show this new total. If you run part9.html you will see the final game.
<img src="http://www.photonstorm.com/wp-content/uploads/2013/12/part9.png" alt="part9" width="800" height="600" class="alignnone size-full wp-image-13618" />
<h2>Conclusion</h2>
You have now learnt how to create a sprite with physics properties, to control its motion and to make it interact with other objects in a small game world. There are lots more things you can do to enhance this, for example there is no sense of completion or jeopardy yet. Why not add some spikes you must avoid? You could create a new 'spikes' group and check for collision vs. the player, only instead of killing the spike sprite you kill the player instead. Or for a non-violent style game you could make it a speed-run and simply challenge them to collect the stars as quickly as possible. We've included a few
extra graphics in the zip file to help inspire you.
With the help of what you have learnt in this tutorial and the <a href="http://examples.phaser.io">250+ examples</a> available to you, you should now have a solid foundation for a future project. But as always if you have questions, need advice or want to share what you've been working on then feel free to ask for help in the <a href="http://www.html5gamedevs.com/">Phaser forum</a>.
More tutorials will follow, stay tuned :)

BIN
resources/tutorials/03 Using Phaser with TypeScript/screen shots/part1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
resources/tutorials/03 Using Phaser with TypeScript/screen shots/part2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
resources/tutorials/03 Using Phaser with TypeScript/screen shots/part3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
resources/tutorials/03 Using Phaser with TypeScript/screen shots/part4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
resources/tutorials/03 Using Phaser with TypeScript/screen shots/part5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 219 KiB

BIN
resources/tutorials/03 Using Phaser with TypeScript/screen shots/part6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
resources/tutorials/03 Using Phaser with TypeScript/screen shots/part7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
resources/tutorials/03 Using Phaser with TypeScript/screen shots/part8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
resources/tutorials/03 Using Phaser with TypeScript/screen shots/part9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
resources/tutorials/04 Advanced TypeScript Projects/assets.zip Normal file
View File

Binary file not shown.

BIN
resources/tutorials/04 Advanced TypeScript Projects/assets/level1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
resources/tutorials/04 Advanced TypeScript Projects/assets/loader.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
resources/tutorials/04 Advanced TypeScript Projects/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
resources/tutorials/04 Advanced TypeScript Projects/assets/simon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
resources/tutorials/04 Advanced TypeScript Projects/assets/title.mp3 Normal file
View File

Binary file not shown.

BIN
resources/tutorials/04 Advanced TypeScript Projects/assets/titlepage.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 KiB

338
resources/tutorials/04 Advanced TypeScript Projects/index.html Normal file
View File

@@ -0,0 +1,338 @@
This tutorial is a follow-up to the TypeScript with Phaser <a href="http://www.photonstorm.com/phaser/how-to-use-phaser-with-typescript">beginners guide</a>. I will assume you have worked through that tutorial already and have a working set-up in which you can compile Phaser projects. From this base we will expand on the simple approach taken in the beginners guide and show how to structure a more advanced project that benefits from the power of TypeScript.
<h3>Create a new Project</h3>
In the first tutorial everything was hanging off a single <code>app.ts</code> file with one bundled class. This time around we're going to break it up into more individual classes. In Visual Studio create a new empty TypeScript project, then add the phaser TypeScript definition and JS library files to it as outlined in Step 2 in the first tutorial.
<a href="http://gametest.mobi/phaser/tutorials/04%20Advanced%20TypeScript%20Projects/assets.zip">Download this asset pack</a> and unzip it into the project folder. We'll reference these files in our code.
Create a new TypeScript file called <code>Game.ts</code> and add this code to it:
<pre class="lang:js decode:true " >
module Castlevania {
export class Game extends Phaser.Game {
constructor() {
super(800, 600, Phaser.AUTO, 'content', null);
this.state.add('Boot', Boot, false);
this.state.add('Preloader', Preloader, false);
this.state.add('MainMenu', MainMenu, false);
this.state.add('Level1', Level1, false);
this.state.start('Boot');
}
}
}
</pre>
Here we have created a new Module called <code>Castlevania</code> under which all of our game classes will live. Obviously you'd change this to whatever your game is actually called, unless you're genuinely working on a Castlevania game, in which case I'm eternally jealous :)
The <code>Game</code> class is extending <code>Phaser.Game</code>. As a result we need to call super in the constructor and pass in our game settings. Once done we add 4 States to the game: Boot, Preloader, MainMenu and Level1, and then start the Boot state. You don't have to add ALL of the States at this point, but there is no harm in doing so.
<!--more-->
When adding this code in Visual Studio you may notice that Boot, Preload, MainMenu, and Level1 are underlined in red. This is because they don't yet exist within the Project.
<a href="http://www.photonstorm.com/wp-content/uploads/2013/12/part11.png"><img src="http://www.photonstorm.com/wp-content/uploads/2013/12/part11.png" alt="part1" width="1327" height="971" class="alignnone size-full wp-image-13669" /></a>
<h3>Let's Boot</h3>
Create a new TypeScript file called <code>Boot.ts</code> and paste this code in:
<pre class="lang:js decode:true " >
module Castlevania {
export class Boot extends Phaser.State {
preload() {
this.load.image('preloadBar', 'assets/loader.png');
}
create() {
// Unless you specifically need to support multitouch I would recommend setting this to 1
this.input.maxPointers = 1;
// Phaser will automatically pause if the browser tab the game is in loses focus. You can disable that here:
this.stage.disableVisibilityChange = true;
if (this.game.device.desktop) {
// If you have any desktop specific settings, they can go in here
this.stage.scale.pageAlignHorizontally = true;
}
else {
// Same goes for mobile settings.
}
this.game.state.start('Preloader', true, false);
}
}
}
</pre>
Our <code>Boot</code> class is where we define global settings for the game. It's also were we preload the graphics that will be used by the actual Preloader, in this case a simple loading bar image.
The <code>create</code> function is called after the image has loaded. In the code above you can see that we're setting the maximum number of pointers to 1 and disabling the 'pause' checks. This isn't a require of Phaser, it's just a good example of the sort of things that go into a common Boot script. This is also where you would define how the game handles scaling. For example if this was aimed at mobile and needed to run at iPad resolution (1024x672) then we would usually add the following code into the 'mobile settings' part of the class:
<pre class="lang:js decode:true " >// In this case we're saying "scale the game, no lower than 480x260 and no higher than 1024x768"
this.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;
this.stage.scale.minWidth = 480;
this.stage.scale.minHeight = 260;
this.stage.scale.maxWidth = 1024;
this.stage.scale.maxHeight = 768;
this.stage.scale.forceLandscape = true;
this.stage.scale.pageAlignHorizontally = true;
this.stage.scale.setScreenSize(true);
</pre>
The code above isn't needed for this tutorial however.
When all of this has finished Phaser swaps to the <code>Preloader</code> state.
<h3>Creating our Preloader, extending a Phaser.State</h3>
Create a new TypeScript file called <code>Preloader.ts</code> and paste the following code in:
<pre class="lang:js decode:true " >module Castlevania {
export class Preloader extends Phaser.State {
preloadBar: Phaser.Sprite;
preload() {
// Set-up our preloader sprite
this.preloadBar = this.add.sprite(200, 250, 'preloadBar');
this.load.setPreloadSprite(this.preloadBar);
// Load our actual games assets
this.load.image('titlepage', 'assets/titlepage.jpg');
this.load.image('logo', 'assets/logo.png');
this.load.audio('music', 'assets/title.mp3', true);
this.load.spritesheet('simon', 'assets/simon.png', 58, 96, 5);
this.load.image('level1', 'assets/level1.png');
}
create() {
var tween = this.add.tween(this.preloadBar).to({ alpha: 0 }, 1000, Phaser.Easing.Linear.None, true);
tween.onComplete.add(this.startMainMenu, this);
}
startMainMenu() {
this.game.state.start('MainMenu', true, false);
}
}
}
</pre>
This class is extending <a href="http://gametest.mobi/phaser/docs/Phaser.State.html">Phaser.State</a>. This means you've got instant access to all the properties of the State object. Phaser uses a set of specially named functions to perform tasks, one of which is <code>preload</code>. Inside here we can queue calls to Phasers asset loader. As you can see in the code above we're loading a variety of assets: some images, a sprite sheet and an mp3.
We also create a sprite called <code>preloadBar</code> and link it to the asset loader. It will be automatically cropped as the files load in, making the effect of a preloader bar increasing over time as each file completes:
<a href="http://www.photonstorm.com/wp-content/uploads/2013/12/part21.png"><img src="http://www.photonstorm.com/wp-content/uploads/2013/12/part21.png" alt="part2" width="800" height="600" class="alignnone size-full wp-image-13674" /></a>
When the load is finished the <code>create</code> function is called, which is when we fade the preload bar away. On completion of that tween we start the main menu. If you run the game locally you probably won't even see the preload bar fill-up as the assets will load from the local filesystem too fast to be noticed, but once out in the wild this won't be an issue and it'll be important to offer a decent looking preloader screen.
Once everything has finished we start the <code>MainMenu</code>.
<h3>The Main Menu</h3>
For this tutorial our menu is a picture and a game logo with a couple of simple tweens. Obviously you'll want to enhance this for your own games, but it serves our purpose here. Create a new file called <code>MainMenu.ts</code> and paste this code in:
<pre class="lang:js decode:true " >module Castlevania {
export class MainMenu extends Phaser.State {
background: Phaser.Sprite;
logo: Phaser.Sprite;
create() {
this.background = this.add.sprite(0, 0, 'titlepage');
this.background.alpha = 0;
this.logo = this.add.sprite(this.world.centerX, -300, 'logo');
this.logo.anchor.setTo(0.5, 0.5);
this.add.tween(this.background).to({ alpha: 1}, 2000, Phaser.Easing.Bounce.InOut, true);
this.add.tween(this.logo).to({ y: 220 }, 2000, Phaser.Easing.Elastic.Out, true, 2000);
this.input.onDown.addOnce(this.fadeOut, this);
}
fadeOut() {
this.add.tween(this.background).to({ alpha: 0 }, 2000, Phaser.Easing.Linear.None, true);
var tween = this.add.tween(this.logo).to({ y: 800 }, 2000, Phaser.Easing.Linear.None, true);
tween.onComplete.add(this.startGame, this);
}
startGame() {
this.game.state.start('Level1', true, false);
}
}
}</pre>
I won't explain all of it because it should start becoming quite familiar by now. A couple of Sprites, tweens to make them appear. Then the game waits for an input event before fading out and starting the Level1 class. When you run it the menu will look like this:
<a href="http://www.photonstorm.com/wp-content/uploads/2013/12/part3.jpg"><img src="http://www.photonstorm.com/wp-content/uploads/2013/12/part3.jpg" alt="part3" width="800" height="600" class="alignnone size-full wp-image-13675" /></a>
Not too bad :)
<h3>Extending Phaser.Sprite</h3>
Create a new TypeScript file called <code>Level1.ts</code> and add this code to it:
<pre class="lang:js decode:true " >module Castlevania {
export class Level1 extends Phaser.State {
background: Phaser.Sprite;
music: Phaser.Sound;
player: Castlevania.Player;
create() {
this.background = this.add.sprite(0, 0, 'level1');
this.music = this.add.audio('music', 1, false);
this.music.play();
this.player = new Player(this.game, 130, 284);
}
}
} </pre>
We aren't going to cover creating a fully working game here, but I do want to use this file to highlight extending Phaser Sprites. In the code above you'll see a local variable called <code>player</code> that is an instance of Castlevania.Player. Create a new TypeScript file called Player.ts and paste this code in:
<pre class="lang:js decode:true " >module Castlevania {
export class Player extends Phaser.Sprite {
constructor(game: Phaser.Game, x: number, y: number) {
super(game, x, y, 'simon', 0);
this.anchor.setTo(0.5, 0);
this.animations.add('walk', [0, 1, 2, 3, 4], 10, true);
game.add.existing(this);
}
update() {
this.body.velocity.x = 0;
if (this.game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
this.body.velocity.x = -150;
this.animations.play('walk');
if (this.scale.x == 1) {
this.scale.x = -1;
}
}
else if (this.game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
this.body.velocity.x = 150;
this.animations.play('walk');
if (this.scale.x == -1) {
this.scale.x = 1;
}
}
else {
this.animations.frame = 0;
}
}
}
}</pre>
Here our Player object is extending <a href="http://gametest.mobi/phaser/docs/Phaser.Sprite.html">Phaser.Sprite</a>. As a result we have direct access to all Sprite properties from within it, which is why we can set the velocity directly on the body for example. Upon instantiation a few visual properties are set and an animation walk cycle added. Finally the sprite is added to the game world via <code>game.add.existing(this)</code>.
Once the sprite is added to the game world its update function will be called every frame. So to take advantage of this we set the players velocity if the left or right arrow keys are held down. As you'd expect this allows you to make the player walk left or right and animate accordingly. The end result looks like this:
<a href="http://www.photonstorm.com/wp-content/uploads/2013/12/part42.png"><img src="http://www.photonstorm.com/wp-content/uploads/2013/12/part42.png" alt="part4" width="800" height="600" class="alignnone size-full wp-image-13677" /></a>
We didn't have to check for input within the Player class. We could have added an update function to the Level1 class instead and then told the Player to move as a result of that, but it highlighted an important choice: it's up to you how your code is structured. So long as you adhere to a few basic rules and remember the names of the special Phaser functions, you can achieve pretty much any set-up you require or are familiar with.
<h3>Compiling to a single JS file</h3>
I'm sure you are keen to try out the project, but first let's make a couple of small but vital tweaks so we can build it. Enter the Project properties by selecting <code>Properties</code> from the Project menu. Then click the <strong>TypeScript Build</strong> category on the left and change the settings to match this:
<a href="http://www.photonstorm.com/wp-content/uploads/2013/12/part52.png"><img src="http://www.photonstorm.com/wp-content/uploads/2013/12/part52.png" alt="part5" width="831" height="731" class="alignnone size-full wp-image-13678" /></a>
The important things to do are:
<ul>
<li>Make sure the ECMAScript version is set to ECMAScript 5.</li>
<li>Set the Module system to None</li>
<li>Check 'Combine JavaScript output into file' and enter 'game.js' as the filename</li>
</ul>
Save the changes to the Project Properties. What we've done is make sure that the whole project will be compiled into a single JavaScript file called <code>game.js</code>. This won't include Phaser but it will include all of your game code. The last couple of changes we need to make are to the <code>default.htm</code> and <code>app.ts</code> files:
<pre class="lang:xhtml decode:true " >&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8" /&gt;
&lt;title&gt;TypeScript HTML App&lt;/title&gt;
&lt;link rel="stylesheet" href="app.css" type="text/css" /&gt;
&lt;script src="phaser.js"&gt;&lt;/script&gt;
&lt;script src="game.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;TypeScript HTML App&lt;/h1&gt;
&lt;div id="content"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
Here we've included the single output file <code>game.js</code>. And <code>app.ts</code> is reduced to simply this:
<pre class="lang:js decode:true " >
window.onload = () =&gt; {
var game = new Castlevania.Game();
};</pre>
With all of these files in place you should be able to compile and build the project. And with it you should have a pretty good base from which to build out a complete future game. You can also download all of the <a href="http://gametest.mobi/phaser/tutorials/04%20Advanced%20TypeScript%20Projects/visualstudio_project.zip">Visual Studio project files</a>. We've more Phaser tutorials coming, so keep an eye out for them and subscribe to our <a href="https://confirmsubscription.com/h/r/369DE48E3E86AF1E">Phaser newsletter</a> for details.
Castlevania is &copy; Copyright Konami 1988. All rights reserved and is used for illustration purposes only.

BIN
resources/tutorials/04 Advanced TypeScript Projects/screen shots/part1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
resources/tutorials/04 Advanced TypeScript Projects/screen shots/part2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
resources/tutorials/04 Advanced TypeScript Projects/screen shots/part3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 199 KiB

BIN
resources/tutorials/04 Advanced TypeScript Projects/screen shots/part3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
resources/tutorials/04 Advanced TypeScript Projects/screen shots/part4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
resources/tutorials/04 Advanced TypeScript Projects/screen shots/part5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
resources/tutorials/04 Advanced TypeScript Projects/visualstudio_project.zip Normal file
View File

Binary file not shown.

BIN
resources/tutorials/Spanish/01 Comenzando/images/cloneFrom.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
resources/tutorials/Spanish/01 Comenzando/images/dashboard.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
resources/tutorials/Spanish/01 Comenzando/images/editor.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

BIN
resources/tutorials/Spanish/01 Comenzando/images/start.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

49
resources/tutorials/Spanish/01 Comenzando/index.html Normal file
View File

@@ -0,0 +1,49 @@
<!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>Comenzando con Phaser</h1>
<ul>
<li><a href="index.html">Parte 1: Introducción</a></li>
<li><a href="part2.html">Parte 2: Instalando un nuevo servidor web</a></li>
<li><a href="part3.html">Parte 3: Ejecutar en la nube</a></li>
<li><a href="part4.html">Parte 4: Escogiendo un editor</a></li>
<li><a href="part5.html">Parte 5: Descargando Phaser</a></li>
<li><a href="part6.html">Parte 6: Hola Mundo!</a></li>
<li><a href="part7.html">Parte 7: Los ejemplos de Phaser</a></li>
<li><a href="part8.html">Parte 8: Siguientes pasos</a></li>
</ul>
<h2>Parte 1 - Introducción</h2>
<p>En este tutorial vamos a ver cómo configurar un entorno de desarrollo con el que puedas construir tus juegos en Phaser. Esto incluirá el arrancar un servidor web local, escoger un IDE (un programa para gestionar y escribir el código), obtener la última versión de Phaser y comprobar que todo funciona adecuadamente.
</p>
<p> <strong>"¿Por qué necesito un servidor web local? ¿No puedo simplemente arrastrar los ficheros html a mi navegador?"</strong> </p>
<p>No, hoy en día, no. Entiendo que pueda ser un poco confuso, incluso contradictorio a veces, pero todo es por cuestión de la seguridad del navegador. Si estás haciendo una web html estática, quizás con algunas imágenes en ella, entonces sí puedes arrastrar felizmente ese fichero a tu navegador y ver el resultado final. También puedes "Guardar como" páginas web enteras y reabrirlas, con todo el contenido prácticamente intacto. Si ambas cosas funcionan, ¿por qué no puedes arrastrar un juego HTML5 en un navegador y ejecutarlo?
</p>
<p>Tiene que ver con el protocolo que se usa para acceder a los archivos. Cuando solicitas algo por internet estás usando http, y el nivel de seguridad del servidor es suficiente para asegurarse de que solo puedes acceder a los ficheros que se supone que debes acceder. Pero cuando arrastras un fichero en un navegador se accede por medio del sistema de ficheros local (técnicamente, el protocolo file://) y esto está muy restringido, por razones obvias. Bajo file:// no hay concepto de dominios, no hay seguridad a nivel de servidor, solo un sistema de ficheros a pelo. Pregúntate esto: ¿de verdad quieres que JavaScript tenga la habilidad de abrir ficheros de todo tu sistema de archivos local? Tu respuesta inmediata por supuesto debería ser: "¡ni de coña!". Si un script en JavaScript tuviera total libertad para trabajar en file:// no habría nada que le impidiese abrir prácticamente <em>cualquier</em> fichero que quisiera y enviarlo sabe Dios dónde.</p>
<p>Dado que esto es tan peligroso, los navegadores se blindan más fuerte que Alcatraz cuando se ejecutan en file://. Cada página es tratada como un dominio local único. Por eso "Guardar página web" funciona, hasta cierto punto. Se abre bajo las mismas restricciones cross-site (a través de varios servidores) que si estuvieran en un servidor online. Hay un post más detallado sobre esto en el <a href="http://blog.chromium.org/2008/12/security-in-depth-local-web-pages.html">Chromium blog</a> que bien merece una lectura (en inglés).</p>
<p>Tu juego va a necesitar cargar recursos. Imágenes, ficheros de audio, datos JSON, quizás más ficheros JavaScript. Para hacer esto necesita que se ejecute libre de los grilletes de la seguridad del navegador. Necesita que http:// acceda a los ficheros del juego. Y para esto necesitamos un servidor web.</p>
<p><a href="part2.html">Parte 2: Instalando un nuevo servidor web</a></p>
</body>
</html>

81
resources/tutorials/Spanish/01 Comenzando/part2.html Normal file
View File

@@ -0,0 +1,81 @@
<!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>Comenzando con Phaser</h1>
<h2>Parte 2 - Instalando un servidor web</h2>
<h3>Windows</h3>
<p>En windows hay un montón de paquetes de "instalación única" disponibles. Son fáciles de instalar y contienen tecnologías web populares como Apache, PHP y MySQL, que te los instalan todos a la vez, a menudo con un icono cómodo en la bandeja de sistema para gestionarlos directamente.
</p>
<p>Recomendaríamos <a href="http://www.wampserver.com/en/">WAMP Server</a> o <a href="http://www.apachefriends.org/es/xampp.html">XAMPP</a>. Ambos tienen disponibles guías sencillas de instalación. Concretamente, WAMP instala un icono en tu bandeja de sistema desde el que puedes parar y reiniciar los servicios así como modificar la configuración de Apache, como crear un nuevo acceso directo a la carpeta de un proyecto.</p>
<p>Cesanta proporciona el <a href="http://cesanta.com/downloads.html">servidor web Mongoose</a>. Es una aplicación realmente pequeña que no requiere instalación y se ejecuta con un simple fichero EXE. Sin todos los añadidos como SSI y WebDAV (no necesitas ninguno para un juego HTML5) el EXE pesa solamente 45KB. Incluso la versión completa son solamente 355KB.</p>
<p>En lugar de un paquete 'todo en uno' también podrías bajarte solamente un servidor web. Tanto <a href="http://www.iis.net/">Microsoft IIS</a> como <a href="http://httpd.apache.org/">Apache</a> pueden ser descargados gratuitamente de sus respectivas webs.</p>
<p> <strong>Nota:</strong> A Skype le gusta robar el puerto 80 por defecto. Este es tradicionalmente el puerto sobre el que funciona un servidor web y puede interferir en el funcionamiento de WAMP o similar. Para deshabilitarlo en Skype ve a "Herramientas - Opciones - Avanzadas - Conexión" y desmarca la opción "Usar puerto 80 y 443 como alternativas para las conexiones entrantes".</p>
<h3>OS X</h3>
<p>Teniendo en su interior un entorno Unix hay más opciones disponibles para OS X. Pero si quieres una solución "todo en uno" como WAMP para Windows, con una interfaz limpia y fácil de usar entonces te recomendamos fervientemente <a href="http://www.mamp.info/en/index.html">MAMP</a>. Hay dos versiones: una gratuita y otra de pago.</p>
<p>Naturalmente también hay guías para configurar un servidor web local manualmente, como <a href="https://discussions.apple.com/docs/DOC-3083">esta guía para Mountain Lion</a>. Escoge la alternativa con la que te sientas más a gusto.</p>
<h3>Grunt Connect</h3>
<p><a href="http://gruntjs.com/">Grunt</a> es una herramienta extremadamente potente para tener instalada, independientemente de si la usas como un servidor web o no. En su esencia es un programa que ejecuta tareas JavaScript y te permite automatizar tareas repetitivas y latosas. Lo usamos en Phaser para construir nuestros scripts de distribución, por ejemplo. Pero con Connect puede ser configurado también para servir ficheros locales, actuando como un servidor web, y <a href="https://github.com/gruntjs/grunt-contrib-connect">aquí hay una guía para hacerlo</a>.</p>
<h3>Servidor HTTP simple con Python</h3>
<p>Si necesitas tener un servidor web corriendo rapidamente y no quieres liarte configurando Apache o bajando una aplicación, entonces Python puede ayudarte. Python viene con un servidor HTTP integrado. Con la ayuda de este pequeño servidor HTTP puedes convertir cualquier directorio de tu ordenador en el directorio de tu servidor web. Por supuesto, necesitas tener instalado Python. <a href="http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python">Lee la guía completa aquí</a>
</p>
<h3>http-server para node.js</h3>
<p>http-server es un servidor en la línea de comandos simple, sin configuración, para <a href="http://nodejs.org/">node.js</a>. Es suficientemente potente para su uso en producción, pero es suficientemente simple y hackeable para ser usado en tests, desarrollo local, y para aprender. O como su web dice: "Sirviendo ficheros estáticos como si fueran tortugas atadas en cohetes". Coge el npm y las instrucciones de la <a href="https://npmjs.org/package/http-server">página de http-server</a>.</p>
<h3>Servidor web embebido en PHP 5</h3>
<p>Desde la versión 5.4.0 de PHP, el CLI SAPI incorpora un servidor web. Realmente solo es adecuado para desarrollo y sirve todos los ficheros secuencialmente, pero es suficientemente potente para testear juegos HTML5. Se invoca con un simple comando, y puedes encontrar detalles de cómo hacerlo en <a href="http://php.net/manual/es/features.commandline.webserver.php">el manual de PHP</a>.</p>
<p>Mejor que ejecutar un servidor web local tambien podrías montar tu juego HTML5 completamente en la nube. Exploramos algunas opciones en la Parte 3.</p>
<p><a href="part3.html">Parte 3: Ejecutando en la nube</a></p>
<ul>
<li><a href="index.html">Parte 1: Introducción</a></li>
<li><a href="part2.html">Parte 2: Instalando un nuevo servidor web</a></li>
<li><a href="part3.html">Parte 3: Ejecutando en la nube</a></li>
<li><a href="part4.html">Parte 4: Escogiendo un editor</a></li>
<li><a href="part5.html">Parte 5: Descargando Phaser</a></li>
<li><a href="part6.html">Parte 6: Hola Mundo!</a></li>
<li><a href="part7.html">Parte 7: Los ejemplos de Phaser</a></li>
<li><a href="part8.html">Parte 8: Siguientes pasos</a></li>
</ul>
</body>
</html>

64
resources/tutorials/Spanish/01 Comenzando/part3.html Normal file
View 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>Comenzando con Phaser</h1>
<h2>Parte 3 - Ejecutando en la nube</h2>
<p>Si no estás cómodo con el clonado de github, o configurar un servidor web, o si no quieres liarte con todo eso, puedes ejecutar Phaser en la nube.</p>
<p>Más que una palabra de marketing de moda, los desarrolladores usan la nube como una herramienta que te permite crear, editar y compartir tu contenido sin tener que instalar nada, ni tú ni la gente con la que compartes tu contenido.</p>
<p>Hay varias herramientas JavaScript de colaboración online como JSBin, codepen y JSFiddle, solo por nombrar algunas.</p>
<p>Hay otra herramienta que recomendamos llamada Cloud9 IDE que te permite arrancar y comenzar muy rápidamente.</p>
<img src="https://c9.io/site/wp-content/themes/cloud9/img/logo_cloud9.png"/>
<p>Primero, identifícate en la web usando GitHub, y una vez lo hagas serás redirigido a tu Panel de Control</p>
<img src="images/dashboard.jpg"/>
<p>Desde este panel de control, puedes crear proyectos privados o compartidos, o -lo que nos interesa en nuestro caso- puedes crear un proyecto a partir de un repositorio de GitHub.</p>
<p>Haz clic en el botón "create workspace" y selecciona la opción "clone from URL" del menú desplegable.</p>
<img src="images/cloneFrom.jpg"/>
<p>Una vez que el repositorio está integrado en c9.io, verás esta ventana:</p>
<img src="images/start.jpg"/>
<p>Si haces clic en el botón "start editing" serás redirigido aquí:</p>
<img src="images/editor.jpg"/>
<p>Ahora ya tienes una copia del repositorio de Phaser.</p>
<p><a href="part4.html">Parte 4: Escogiendo un editor</a></p>
<ul>
<li><a href="index.html">Parte 1: Introducción</a></li>
<li><a href="part2.html">Parte 2: Instalando un nuevo servidor web</a></li>
<li><a href="part3.html">Parte 3: Ejecutar en la nube</a></li>
<li><a href="part4.html">Parte 4: Escogiendo un editor</a></li>
<li><a href="part5.html">Parte 5: Descargando Phaser</a></li>
<li><a href="part6.html">Parte 6: Hola Mundo!</a></li>
<li><a href="part7.html">Parte 7: Los ejemplos de Phaser</a></li>
<li><a href="part8.html">Parte 8: Siguientes pasos</a></li>
</ul>
</body>
</html>

71
resources/tutorials/Spanish/01 Comenzando/part4.html Normal file
View File

@@ -0,0 +1,71 @@
<!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>Comenzando con Phaser</h1>
<h2>Parte 4 - Escogiendo un editor</h2>
<p>Vas a necesitar un editor con el que escribir tu código JavaScript. Hay <em>muchos</em> disponibles, cada uno con sus propias fortalezas y debilidades. Si eres un programador con experiencia probablemente ya tienes tu editor preferido, en cuyo caso continúa a la parte 5 de esta guía. En caso contrario, aquí tienes algunas opciones:</p>
<h3>Sublime Text</h3>
<p>Este es el editor que usa el equipo de Phaser para construir el framework y los ejemplos (e incluso en el que se está escribiendo esta guía). Sublime debería ser considerado más como un editor de textos extremadamente potente que como un IDE. Un IDE es un entorno de desarrollo integrado (Integrated Development Environment) que a menudo incorpora características adicionales como servidores web embebidos, control de versiones y completado de código. Sublime se enfoca ante todo en ser un editor increíble, y su cursor múltiple y su minimapa son dos de las opciones más productivas y eficientes que hemos visto en décadas de desarrollo. Usando un enorme sistema de paquetes puedes mejorarlo de múltiples maneras.
</p>
<p>La versión completa cuesta 70 dólares pero vale cada céntimo, y está disponible para Windows y OS X.</p>
<p><a href="http://www.sublimetext.com/">Sublime Text</a></p>
<h3>WebStorm</h3>
<p>JetBrains WebStorm es un entorno de desarrollo completo extremadamente avanzado. Es mucho más que un simple editor de textos y ofrece todas las características de alto nivel que esperarías de un buen IDE, incluyendo introspección de código, npm embebido, informes de estilo/sintaxis, control de versiones y muchas otras características más diseñadas para desarolladores web que para desarrolladores de juegos. Está basado en Eclipse, lo que es a la vez bueno y malo. La sensación de escribir código no es tan suave y libre como con Sublime, pero a menudo sus opciones potentes lo compensa. Que te avise de errores en tu código antes incluso de que lo hayas probado puede ser muy útil. Y el completado de código está genial también, aunque obviamente limitado a la miríada de maneras en que puede escribirse JavaScript</p>
<p>La versión completa cuesta a partir de 49 dólares y esá disponible para Windows y OS X. A menudo en la web de JetBrains salen ofertas.</p>
<p><a href="http://www.jetbrains.com/webstorm/">JetBrains WebStorm</a></p>
<h3>Visual Studio</h3>
<p>Realmente esta opción solo debería ser considerada si quieres escribir tu juego usando <a href="http://www.typescriptlang.org/">TypeScript</a> en lugar de JavaScript. Phaser tiene disponible un fichero de definiciones de TypeScript, que te permite usar el nuevo lenguaje de Microsoft inspirado en ES6 para que programes en él. Es un lenguaje tipado estáticamente, con herencia de clases tradicional, interfaces y gran mayoría de trucos de orientación a objetos que puedes usar en otros lenguajes como AS3 (ActionScript 3).</p>
<p>La versión completa tiene varios costes y Microsoft ofrece buenos descuentos para estudiantes. Naturalmente, solo está disponible para Windows.</p>
<p><a href="http://www.visualstudio.com/">Visual Studio</a></p>
<h3>Brackets</h3>
<p>Aunque desarrollado inicialmente para programar páginas web, Brackets ha ido ganando entidad propia ultimamente. Es un editor de código open-source que corre en Windows, OS X y Linux. Realmente, está escrito en JavaScript y es increíblemente hackeable, con nuevas versiones y extensiones lanzadas cada par de semanas. Tiene un interfaz moderno y oscuro, probablemente familiar a cualquiera que use Adobe CS. Está muy bien considerado, especialmente si lo que buscas es un editor gratuito.</p>
<p>Brackets es multiplataforma, gratuito y open-source.</p>
<p><a href="http://brackets.io/">Brackets</a></p>
<p><a href="part5.html">Parte 5: Descargando Phaser</a></p>
<ul>
<li><a href="index.html">Parte 1: Introducción</a></li>
<li><a href="part2.html">Parte 2: Instalando un nuevo servidor web</a></li>
<li><a href="part3.html">Parte 3: Ejecutar en la nube</a></li>
<li><a href="part4.html">Parte 4: Escogiendo un editor</a></li>
<li><a href="part5.html">Parte 5: Descargando Phaser</a></li>
<li><a href="part6.html">Parte 6: Hola Mundo!</a></li>
<li><a href="part7.html">Parte 7: Los ejemplos de Phaser</a></li>
<li><a href="part8.html">Parte 8: Siguientes pasos</a></li>
</ul>
</body>
</html>

49
resources/tutorials/Spanish/01 Comenzando/part5.html Normal file
View File

@@ -0,0 +1,49 @@
<!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>Comenzando con Phaser</h1>
<h2>Parte 5 - Descargando Phaser</h2>
<p>Phaser es un proyecto open source y disponible para descarga gratuita. Usamos github para gestionar el proyecto y es en github donde encontrarás la última versión:</p>
<p><a href="https://github.com/photonstorm/phaser">https://github.com/photonstorm/phaser</a></p>
<h3>¿No puedo bajarme un zip simplemente?</h3>
<p>Sí. Github proporciona la opción de <a href="https://github.com/photonstorm/phaser/archive/master.zip">descargar el repositorio entero</a> en un zip. Puedes descomprimirlo localmente en tu ordenador para tener todos los ficheros. Sin embargo, te recomendamos que aprendas a usar git. Te permitirá actualizarte fácilmente a las últimas versiones a medida que las lanzamos, y hace que contribuir con el proyecto también sea mucho más fácil. Si no te apetece aprender a usar git mediante la línea de comandos hay algunas aplicaciones que puedes usar en su lugar. Te recomendamos <a href="http://www.syntevo.com/smartgithg/">SmartGIT</a> en Windows o <a href="http://www.git-tower.com/">Git Tower</a> en OS X.</p>
<h3>Estructura del Repositorio</h3>
<p>El repositorio de Phaser está dividido en 2 ramas principales: <a href="https://github.com/photonstorm/phaser">master</a> y <a href="https://github.com/photonstorm/phaser/tree/dev">dev</a>. La rama master contiene la versión estable más reciente y es la que deberías probar primero. La rama dev es donde preparamos las próximas versiones. Aquí encontrarás características experimentales y cambios en el API, algunos de los cuales puede que no funcionen. Pero también es donde verás las características más innovadoras en las que estamos trabajando.</p>
<p>Ahora mismo hay un retraso aproximado de 4 semanas entre dev y master. Esto significa que construimos las nuevas características en dev y dejamos que se 'cocinen' durante un mes antes de que las movamos a master. Así da tiempo para que la gente las pruebe y comente, y mantiene el ritmo de actualizaciones de Phaser en un ciclo mensual manejable.</p>
<p><a href="part6.html">Parte 6: Hola Mundo!</a></p>
<ul>
<li><a href="index.html">Parte 1: Introducción</a></li>
<li><a href="part2.html">Parte 2: Instalando un nuevo servidor web</a></li>
<li><a href="part3.html">Parte 3: Ejecutar en la nube</a></li>
<li><a href="part4.html">Parte 4: Escogiendo un editor</a></li>
<li><a href="part5.html">Parte 5: Descargando Phaser</a></li>
<li><a href="part6.html">Parte 6: Hola Mundo!</a></li>
<li><a href="part7.html">Parte 7: Los ejemplos de Phaser</a></li>
<li><a href="part8.html">Parte 8: Siguientes pasos</a></li>
</ul>
</body>
</html>

48
resources/tutorials/Spanish/01 Comenzando/part6.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>Comenzando con Phaser</h1>
<h2>Parte 6 - Hola Mundo!</h2>
<p>Con tu editor configurado, el servidor web instalado y Phaser descargado, es hora de crear algo y verificar que todo funciona.</p>
<p>Necesitas descubrir dónde está tu 'web root' en tu ordenador. Es la carpeta donde el servidor web busca los ficheros. Si estás usando WAMP en Windows puedes localizarlo haciendo clic en el icono de WAMP de la bandeja de sistema y seleccionar 'www directory' en el menú desplegable. Otros servidores tendrán otros métodos para determinar su localización, pero a partir de ahora nos referiremos a él como 'webroot'.
</p>
<p>Descarga <a href="https://github.com/photonstorm/phaser/blob/master/tutorials/01%20Getting%20Started/hellophaser.zip">este archivo zip</a>. Dentro contiene una carpeta llamada 'hellophaser' en la que encontrarás un fichero JavaScript, un index.html y un PNG. Copia la carpeta 'hellophaser' en tu webroot.</p>
<h3>Testear, testear ...</h3>
<p>Abre tu navegador web y ve a tu servidor local. Esto puede ser tan sencillo como teclear en la barra de dirección 'localhost' o '127.0.0.1', o quizás también necesites especificar un número de puerto, depende totalmente de cómo esté configurado el servidor. Si el servidor está correctamente instalado y funcionando verás en tu navegador la página de instalación por defecto. Esto varía de servidor en servidor, pero mientras el navegador no se quede colgado cargando la página o no te de un error de permisos, estás listo para avanzar.</p>
<p>Ahora añade <em>/hellophaser</em> al final de la dirección y el ejemplo de Hola Mundo (Hello World) debería cargar. Si es así aparecerá un rectángulo negro con el logotipo de Phaser en el centro. Si por cualquier razón no lo hace necesitarás abrir la consola de depuración y ver qué errores muestra. En la mayoría de navegadores puedes abrirla presionando F12. Esto funciona en Chrome, Firefox e Internet Explorer. Comprueba qué error es. Con suerte será algo simple, como ficheros que faltan, en cuyo caso comprueba los nombres de tus carpetas y recarga la página. Si es algo más complejo no dudes en preguntar acerca de ello <a href="http://www.html5gamedevs.com/forum/14-phaser/">en el foro</a> y te ayudaremos.</p>
<p><a href="part7.html">Parte 7: Los ejemplos de Phaser</a></p>
<ul>
<li><a href="index.html">Parte 1: Introducción</a></li>
<li><a href="part2.html">Parte 2: Instalando un nuevo servidor web</a></li>
<li><a href="part3.html">Parte 3: Ejecutar en la nube</a></li>
<li><a href="part4.html">Parte 4: Escogiendo un editor</a></li>
<li><a href="part5.html">Parte 5: Descargando Phaser</a></li>
<li><a href="part6.html">Parte 6: Hola Mundo!</a></li>
<li><a href="part7.html">Parte 7: Los ejemplos de Phaser</a></li>
<li><a href="part8.html">Parte 8: Siguientes pasos</a></li>
</ul>
</body>
</html>

49
resources/tutorials/Spanish/01 Comenzando/part7.html Normal file
View File

@@ -0,0 +1,49 @@
<!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>Comenzando con Phaser</h1>
<h2>Parte 7 - Los ejemplos de Phaser</h2>
<p>Phaser viene con una extensa galería de ejemplos. La cifra actual es más de 160. Son trozos de código autocontenidos que se centran en solamente un par de elementos y nada más, y por eso son realmente útiles para aprender de ellos! Cada vez que añadimos una nueva característica en Phaser creamos un ejemplo para demostrar cómo se usa, así que hay todo tipo de ejemplos desde cosas simples como cargar sonido, animación de sprites o la gestión de los controles.</p>
<p>Aunque hemos subido los ejemplos a nuestra página te recomendamos que copies la carpeta de Phaser completa (el repositorio entero) a tu webroot (el directorio raíz de tu servidor web), para que puedas ejecutar los ejemplos localmente de manera fácil. Si has copiado la carpeta de Phaser en tu webroot entonces puedes acceder a los ejemplos en:</p>
<code>http://localhost/phaser/examples</code>
<p>Nota: La URL anterior puede diferir dependiendo de la configuración de tu servidor web.</p>
<h3>Vistas</h3>
<p>Hay dos maneras de explorar los ejemplos. La vista por defecto es una lista larga y cada ejemplo abre en una página nueva. Pero también hay un enlace en la parte superior de la página que pone 'Side View' ('vista lateral'), que lista todos los ejemplos a la izquierda y el contenido y el código se carga en un frame a la derecha. Cada vista tiene sus ventajas, juega y explora!</p>
<p><a href="part8.html">Parte 8: Siguientes pasos</a></p>
<ul>
<li><a href="index.html">Parte 1: Introducción</a></li>
<li><a href="part2.html">Parte 2: Instalando un nuevo servidor web</a></li>
<li><a href="part3.html">Parte 3: Ejecutar en la nube</a></li>
<li><a href="part4.html">Parte 4: Escogiendo un editor</a></li>
<li><a href="part5.html">Parte 5: Descargando Phaser</a></li>
<li><a href="part6.html">Parte 6: Hola Mundo!</a></li>
<li><a href="part7.html">Parte 7: Los ejemplos de Phaser</a></li>
<li><a href="part8.html">Parte 8: Siguientes pasos</a></li>
</ul>
</body>
</html>

57
resources/tutorials/Spanish/01 Comenzando/part8.html Normal file
View File

@@ -0,0 +1,57 @@
<!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>Comenzando con Phaser</h1>
<h2>Parte 8 - Siguientes pasos</h2>
<p>Tu experiencia desarrollando juegos con Phaser comienza aquí! Aunque solo hemos tocado lo básico tienes un entorno de desarrollo en funcionamiento, acceso a los documentos del API y cientos de ejemplos. Aún así siempre es mejor formar parte de una comunidad - y para esto te recomendamos nuestro foro. Durante estos últimos meses ha mejorado más y más, y fijo que encuentras ayuda y apoyo cuando más los necesites.</p>
<p>Propón y escucha ideas, date una vuelta por el chat, explora la galería de juegos e involúcrate!</p>
<p><a href="http://www.html5gamedevs.com/forum/14-phaser/">Únete al Foro</a></p>
<h3>Boletín de noticias de Phaser</h3>
<p>Mensualmente publicamos un boletín de noticias de Phaser. Además de detalles sobre las nuevas versiones también contiene tutoriales pequeños y demás contenido. Anótate gratis para recibirlo en tu correo durante la primera semana de cada mes.</p>
<p><a href="https://confirmsubscription.com/h/r/369DE48E3E86AF1E">Suscribirse al boletín de noticias</a></p>
<h3>Contribuye</h3>
<p>Puedes ayudar a moldear el crecimiento de Phaser. Si encuentras un bug, por favor infórmanos de ello. No te llevará mucho, y hasta la fecha hemos arreglado el 91% de todos los problemas recibidos (y estamos trabajando en el otro 9%). Puedes también hacer Pull Requests de la rama de desarrollo, o publicar tus propios plugins o filtros.</p>
<p><a href="https://github.com/photonstorm/phaser/issues/new">Informar de problemas en GitHub</a></p>
<h3>Muéstranos tus juegos!</h3>
<p>Pasamos incansables horas trabajando con Phaser porque queremos que sea el mejor entorno de desarrollo de juegos en HTML5 posible. Entendemos que no será perfecto para todo el mundo, y no pasa nada. Pero si lo usas y haces algo, no importa lo pequeño que creas que es, por favor enséñanoslo. No te creerías el subidón de motivación que nos da cuando la gente nos enseña los juegos en los que han estado trabajando! Nos puedes encontrar en el foro, vía twitter (<a href="https://twitter.com/photonstorm">@photonstorm</a>) o por <a href="mailto:rdavey@gmail.com">email</a>.</p>
<p>Pero sobre todo, sinceramente esperamos que te diviertas haciendo tu juego.</p>
<ul>
<li><a href="index.html">Parte 1: Introducción</a></li>
<li><a href="part2.html">Parte 2: Instalando un nuevo servidor web</a></li>
<li><a href="part3.html">Parte 3: Ejecutar en la nube</a></li>
<li><a href="part4.html">Parte 4: Escogiendo un editor</a></li>
<li><a href="part5.html">Parte 5: Descargando Phaser</a></li>
<li><a href="part6.html">Parte 6: Hola Mundo!</a></li>
<li><a href="part7.html">Parte 7: Los ejemplos de Phaser</a></li>
<li><a href="part8.html">Parte 8: Siguientes pasos</a></li>
</ul>
</body>
</html>

BIN
resources/tutorials/Spanish/02 Creando tu primer juego/assets/baddie.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
resources/tutorials/Spanish/02 Creando tu primer juego/assets/diamond.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 508 B

BIN
resources/tutorials/Spanish/02 Creando tu primer juego/assets/dude.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
resources/tutorials/Spanish/02 Creando tu primer juego/assets/firstaid.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 554 B

BIN
resources/tutorials/Spanish/02 Creando tu primer juego/assets/platform.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
resources/tutorials/Spanish/02 Creando tu primer juego/assets/sky.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
resources/tutorials/Spanish/02 Creando tu primer juego/assets/star.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 443 B

12
resources/tutorials/Spanish/02 Creando tu primer juego/js/phaser.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

35
resources/tutorials/Spanish/02 Creando tu primer juego/part1.html Normal file
View File

@@ -0,0 +1,35 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Creando tu primer juego, parte 1</title>
<script type="text/javascript" src="js/phaser.min.js"></script> <!-- incluimos la librería de Phaser -->
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
//creamos el objeto Phaser y lo guardamos en la variable 'game'
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
//función de precarga
function preload() {
}
//función de inicio de creación del juego
function create() {
}
//función llamada durante el juego, en cada frame
function update() {
}
</script>
</body>
</html>

39
resources/tutorials/Spanish/02 Creando tu primer juego/part2.html Normal file
View File

@@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Creando tu primer juego, parte 2</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
// Indicamos a Phaser los recursos (imágenes png) que hay que cargar
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
function create() {
}
function update() {
}
</script>
</body>
</html>

41
resources/tutorials/Spanish/02 Creando tu primer juego/part3.html Normal file
View File

@@ -0,0 +1,41 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Creando tu primer juego, parte 3</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
function create() {
//añadimos un sprite estrella en las coordenadas 0,0
game.add.sprite(0, 0, 'star');
}
function update() {
}
</script>
</body>
</html>

62
resources/tutorials/Spanish/02 Creando tu primer juego/part4.html Normal file
View File

@@ -0,0 +1,62 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Creando tu primer juego, parte 4</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var platforms;
function create() {
// Un fondo simple para nuestro juego
game.add.sprite(0, 0, 'sky');
// El grupo 'platforms' contiene el suelo y las dos plataformas sobre las que podemos saltar
platforms = game.add.group();
// Aquí creamos el suelo
var ground = platforms.create(0, game.world.height - 64, 'ground');
// Lo escalamos para que se ajuste al ancho del juego (el sprite original es 400x32)
ground.scale.setTo(2, 2);
// Esto hace que el suelo no se caiga cuando saltas en él. Lo hace inmóvil
ground.body.immovable = true;
// Creamos las dos plataformas
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
}
function update() {
}
</script>
</body>
</html>

74
resources/tutorials/Spanish/02 Creando tu primer juego/part5.html Normal file
View File

@@ -0,0 +1,74 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Creando tu primer juego, parte 5</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var platforms;
function create() {
// Un fondo simple para nuestro juego
game.add.sprite(0, 0, 'sky');
// El grupo 'platforms' contiene el suelo y las dos plataformas sobre las que podemos saltar
platforms = game.add.group();
// Aquí creamos el suelo
var ground = platforms.create(0, game.world.height - 64, 'ground');
// Lo escalamos para que se ajuste al ancho del juego (el sprite original es 400x32)
ground.scale.setTo(2, 2);
// Esto hace que el suelo no se caiga cuando saltas en él. Lo hace inmóvil
ground.body.immovable = true;
// Creamos las dos plataformas
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
// El jugador y su configuración
player = game.add.sprite(32, game.world.height - 150, 'dude');
// Las propiedades físicas del jugador. Le damos al chaval un pequeño rebote al caer (bounce)
player.body.bounce.y = 0.2;
player.body.gravity.y = 6; //gravedad
player.body.collideWorldBounds = true; //choque con los bordes del juego
// Las dos animaciones del jugador, andar izquierda y derecha ('left' y 'right', resp.)
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
}
function update() {
}
</script>
</body>
</html>

79
resources/tutorials/Spanish/02 Creando tu primer juego/part6.html Normal file
View File

@@ -0,0 +1,79 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Creando tu primer juego, parte 6</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var player;
var platforms;
function create() {
// Un fondo simple para nuestro juego
game.add.sprite(0, 0, 'sky');
// El grupo 'platforms' contiene el suelo y las dos plataformas sobre las que podemos saltar
platforms = game.add.group();
// Aquí creamos el suelo
var ground = platforms.create(0, game.world.height - 64, 'ground');
// Lo escalamos para que se ajuste al ancho del juego (el sprite original es 400x32)
ground.scale.setTo(2, 2);
// Esto hace que el suelo no se caiga cuando saltas en él. Lo hace inmóvil
ground.body.immovable = true;
// Creamos las dos plataformas
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
// El jugador y su configuración
player = game.add.sprite(32, game.world.height - 150, 'dude');
// Las propiedades físicas del jugador. Le damos al chaval un pequeño rebote al caer (bounce)
player.body.bounce.y = 0.2;
player.body.gravity.y = 6; //gravedad
player.body.collideWorldBounds = true; //choque con los bordes del juego
// Las dos animaciones del jugador, andar izquierda y derecha ('left' y 'right', resp.)
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
}
function update() {
// Hacer que el jugador colisione con las plataformas
game.physics.collide(player, platforms);
}
</script>
</body>
</html>

113
resources/tutorials/Spanish/02 Creando tu primer juego/part7.html Normal file
View File

@@ -0,0 +1,113 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Creando tu primer juego, parte 7</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var player;
var platforms;
var cursors;
function create() {
// Un fondo simple para nuestro juego
game.add.sprite(0, 0, 'sky');
// El grupo 'platforms' contiene el suelo y las dos plataformas sobre las que podemos saltar
platforms = game.add.group();
// Aquí creamos el suelo
var ground = platforms.create(0, game.world.height - 64, 'ground');
// Lo escalamos para que se ajuste al ancho del juego (el sprite original es 400x32)
ground.scale.setTo(2, 2);
// Esto hace que el suelo no se caiga cuando saltas en él. Lo hace inmóvil
ground.body.immovable = true;
// Creamos las dos plataformas
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
// El jugador y su configuración
player = game.add.sprite(32, game.world.height - 150, 'dude');
// Las propiedades físicas del jugador. Le damos al chaval un pequeño rebote al caer (bounce)
player.body.bounce.y = 0.2;
player.body.gravity.y = 6; //gravedad
player.body.collideWorldBounds = true; //choque con los bordes del juego
// Las dos animaciones del jugador, andar izquierda y derecha ('left' y 'right', resp.)
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
// Los controles del jugador con teclado
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
// Hacer que el jugador colisione con las plataformas
game.physics.collide(player, platforms);
// Resetear la velocidad del jugador (movimiento)
player.body.velocity.x = 0;
if (cursors.left.isDown) //si se presiona la tecla izda..
{
// Mover a la izquierda
player.body.velocity.x = -150;
player.animations.play('left');
}
else if (cursors.right.isDown) //si se presiona derecha..
{
// Mover a la derecha
player.body.velocity.x = 150;
player.animations.play('right');
}
else
{
// sino, quedarse quieto
player.animations.stop();
player.frame = 4;
}
// Si se presiona la tecla arriba y el jugador está tocando el suelo, que salte
if (cursors.up.isDown && player.body.touching.down)
{
player.body.velocity.y = -350;
}
}
</script>
</body>
</html>

142
resources/tutorials/Spanish/02 Creando tu primer juego/part8.html Normal file
View File

@@ -0,0 +1,142 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Creando tu primer juego, parte 8</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var player;
var platforms;
var cursors;
var stars;
function create() {
// Un fondo simple para nuestro juego
game.add.sprite(0, 0, 'sky');
// El grupo 'platforms' contiene el suelo y las dos plataformas sobre las que podemos saltar
platforms = game.add.group();
// Aquí creamos el suelo
var ground = platforms.create(0, game.world.height - 64, 'ground');
// Lo escalamos para que se ajuste al ancho del juego (el sprite original es 400x32)
ground.scale.setTo(2, 2);
// Esto hace que el suelo no se caiga cuando saltas en él. Lo hace inmóvil
ground.body.immovable = true;
// Creamos las dos plataformas
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
// El jugador y su configuración
player = game.add.sprite(32, game.world.height - 150, 'dude');
// Las propiedades físicas del jugador. Le damos al chaval un pequeño rebote al caer (bounce)
player.body.bounce.y = 0.2;
player.body.gravity.y = 6; //gravedad
player.body.collideWorldBounds = true; //choque con los bordes del juego
// Las dos animaciones del jugador, andar izquierda y derecha ('left' y 'right', resp.)
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
// Añadimos un grupo para meter las estrellas
stars = game.add.group();
// Creamos 12 estrellas y las esparcimos por el escenario
for (var i = 0; i < 12; i++)
{
// Creamos una estrella dentro del grupo 'stars'
var star = stars.create(i * 70, 0, 'star');
// Le aplicamos gravedad
star.body.gravity.y = 6;
// ..y un cierto valor de rebote
star.body.bounce.y = 0.7 + Math.random() * 0.2;
}
// Los controles del jugador con teclado
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
// Hacer que el jugador y las estrellas colisionen con las plataformas
game.physics.collide(player, platforms);
game.physics.collide(stars, platforms);
// Comprobar si el jugador se solapa con alguna estrella. Si es así, llamamos a la función 'collectStar'
game.physics.overlap(player, stars, collectStar, null, this);
// Resetear la velocidad del jugador (movimiento)
player.body.velocity.x = 0;
if (cursors.left.isDown) //si se presiona la tecla izda..
{
// Mover a la izquierda
player.body.velocity.x = -150;
player.animations.play('left');
}
else if (cursors.right.isDown) //si se presiona derecha..
{
// Mover a la derecha
player.body.velocity.x = 150;
player.animations.play('right');
}
else
{
// sino, quedarse quieto
player.animations.stop();
player.frame = 4;
}
// Si se presiona la tecla arriba y el jugador está tocando el suelo, que salte
if (cursors.up.isDown && player.body.touching.down)
{
player.body.velocity.y = -350;
}
}
function collectStar (player, star) {
// Elimina la estrella del juego
star.kill();
}
</script>
</body>
</html>

151
resources/tutorials/Spanish/02 Creando tu primer juego/part9.html Normal file
View File

@@ -0,0 +1,151 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Phaser - Creando tu primer juego, parte 9</title>
<script type="text/javascript" src="js/phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var player;
var platforms;
var cursors;
var stars;
var score = 0;
var scoreText;
function create() {
// Un fondo simple para nuestro juego
game.add.sprite(0, 0, 'sky');
// El grupo 'platforms' contiene el suelo y las dos plataformas sobre las que podemos saltar
platforms = game.add.group();
// Aquí creamos el suelo
var ground = platforms.create(0, game.world.height - 64, 'ground');
// Lo escalamos para que se ajuste al ancho del juego (el sprite original es 400x32)
ground.scale.setTo(2, 2);
// Esto hace que el suelo no se caiga cuando saltas en él. Lo hace inmóvil
ground.body.immovable = true;
// Creamos las dos plataformas
var ledge = platforms.create(400, 400, 'ground');
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
// El jugador y su configuración
player = game.add.sprite(32, game.world.height - 150, 'dude');
// Las propiedades físicas del jugador. Le damos al chaval un pequeño rebote al caer (bounce)
player.body.bounce.y = 0.2;
player.body.gravity.y = 6; //gravedad
player.body.collideWorldBounds = true; //choque con los bordes del juego
// Las dos animaciones del jugador, andar izquierda y derecha ('left' y 'right', resp.)
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
// Añadimos un grupo para meter las estrellas
stars = game.add.group();
// Creamos 12 estrellas y las esparcimos por el escenario
for (var i = 0; i < 12; i++)
{
// Creamos una estrella dentro del grupo 'stars'
var star = stars.create(i * 70, 0, 'star');
// Le aplicamos gravedad
star.body.gravity.y = 6;
// ..y un cierto valor de rebote
star.body.bounce.y = 0.7 + Math.random() * 0.2;
}
// Añadimos el marcador de la puntuación
scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
// Los controles del jugador con teclado
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
// Hacer que el jugador y las estrellas colisionen con las plataformas
game.physics.collide(player, platforms);
game.physics.collide(stars, platforms);
// Comprobar si el jugador se solapa con alguna estrella. Si es así, llamamos a la función 'collectStar'
game.physics.overlap(player, stars, collectStar, null, this);
// Resetear la velocidad del jugador (movimiento)
player.body.velocity.x = 0;
if (cursors.left.isDown) //si se presiona la tecla izda..
{
// Mover a la izquierda
player.body.velocity.x = -150;
player.animations.play('left');
}
else if (cursors.right.isDown) //si se presiona derecha..
{
// Mover a la derecha
player.body.velocity.x = 150;
player.animations.play('right');
}
else
{
// sino, quedarse quieto
player.animations.stop();
player.frame = 4;
}
// Si se presiona la tecla arriba y el jugador está tocando el suelo, que salte
if (cursors.up.isDown && player.body.touching.down)
{
player.body.velocity.y = -350;
}
}
function collectStar (player, star) {
// Elimina la estrella del juego
star.kill();
// E incrementa y actualiza la puntuación
score += 10;
scoreText.content = 'Score: ' + score;
}
</script>
</body>
</html>

BIN
resources/tutorials/Spanish/02 Creando tu primer juego/phaser_tutorial_02.zip Normal file
View File

Binary file not shown.

BIN
resources/tutorials/Spanish/02 Creando tu primer juego/screen shots/part3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
resources/tutorials/Spanish/02 Creando tu primer juego/screen shots/part4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

Some files were not shown because too many files have changed in this diff Show More