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/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

BIN
resources/tutorials/Spanish/02 Creando tu primer juego/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/Spanish/02 Creando tu primer juego/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/Spanish/02 Creando tu primer juego/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/Spanish/02 Creando tu primer juego/screen shots/part8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

313
resources/tutorials/Spanish/02 Creando tu primer juego/tutorial.html Normal file
View File

@@ -0,0 +1,313 @@
Este artículo fue escrito por <a href="https://twitter.com/alvinsight">Alvin Ourrad</a> y Richard Davey.
Bienvenido a nuestro primer tutorial sobre Crear un Juego con Phaser. Aquí aprenderemos cómo crear un juego pequeño con un jugador corriendo y saltando por unas plataformas y recogiendo estrellas. Durante el proceso, explicaremos algunas de las características internas del framework.
<h3>¿Qué es Phaser?</h3>
<a href="http://phaser.io">Phaser</a> es un framework de juegos HTML5 cuyo propósito es ayudar a los desarrolladores a hacer juegos HTML5 potentes y portables. El único requisito del navegador es que soporte la etiqueta canvas. Además, toma muchas cosas prestadas de Flixel.
<h3>Requisitos</h3>
<ul>
<li>Necesitas tener un conocimiento muy muy básico de JavaScript.</li>
<li>Además asegúrate de que sigues la <a href="http://phaser.io/getting-started-js.php">Guía de Iniciación</a>, te mostrará cómo descargar el framework, configurar un entorno de desarrollo, y un poco por encima la estructura de un proyecto de Phaser y sus funciones básicas.</li>
</ul>
Si ya has finalizado la Guía de Iniciación tendrás Phaser bajado y todo listo para programar. Descarga los recursos de este tutorial aquí y descomprímelos en un directorio de tu servidor web.
Abre la página part1.html en tu editor favorito y echémosle un vistazo al código. Después de un poco de texto estándar HTML que incluye Phaser, la estructura del código tiene esta pinta:
<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>
En la línea 1 es donde le das vida a Phaser creando una instancia del objeto Phaser.Game y asignándola a una variable local llamada 'game'. Llamarla 'game' es una práctica común pero no obligatorio, pero es lo que encontrarás en los ejemplos de Phaser.
Los dos primeros parámetros son el ancho y el alto del elemento canvas que Phaser va a crear. En este caso 800 x 600 pixels. El mundo de tu juego puede ser del tamaño que quieras, esto es simplemente la resolución a la que se va a mostrar la pantalla del juego. El tercer parámetro puede ser Phaser.CANVAS, Phaser.WEBGL, o Phaser.AUTO. Esto es el contexto de renderizado que quieres usar. El parámetro recomendable es Phaser.AUTO que automáticamente intenta usar WEBGL, pero si el navegador o el dispositivo no lo soporta se usará Canvas.
El cuarto parámetro es una cadena de texto vacía, que es el id del elemento DOM en el que te gustaría insertar el elemento canvas que Phaser crea para el juego. Como lo dejamos en blanco simplemente será añadida al final del body de la página. El parámetro final es un objeto conteniendo cuatro referencias a las funciones esenciales de Phaser. Su uso está <a href="http://www.html5gamedevs.com/topic/1372-phaser-function-order-reserved-names-and-special-uses/">ampliamente explicado aquí</a>. Ten en cuenta que este objeto no es obligatorio - Phaser soporta un Sistema de Estados completo que te permite dividir tu código en objetos individuales de una manera más limpia. Pero para una guía de iniciación como esta usaremos este método pues permite un prototipado más rápido.
<h3>Cargar Recursos</h3>
Vamos a cargar los recursos que necesitamos para nuestro juego. Haces esto añadiendo llamadas game.load() dentro de una función llamada preload. Phaser automáticamente buscará esta función cuando arranca y cargará todo lo que en ella se indique.
Ahora mismo la función preload está vacía. Cámbiala por:
<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>
Esto cargará 4 recursos: 3 imágenes y un sprite sheet. Puede que para algunos les resulte obvio, pero me gustaría señalar el primer parámetro, la identificador del recurso. Esta cadena de texto es un enlace al recurso cargado y es lo que usarás en tu código cuando crees sprites. Eres libre de usar cualquier cadena de texto de JavaScript válida como identificador.
<h3>Crear un Sprite</h3>
Para añadir un sprite a nuestro juego escribe el siguiente código en la funcion create:
<pre class="lang:js decode:true ">game.add.sprite(0, 0, 'star');</pre>
Si abres la página en un navegador podrás ver la pantalla de juego en negro con una estrella en la esquina superior izquierda:
<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" />
El orden en el cual se dibujan los sprites en pantalla coincide con el orden en el que los creas. Así que si quieres colocar un fondo detrás del sprite de la estrella deberías asegurarte de que lo añades antes de ella.
<h3>Construcción del Mundo</h3>
Internamente game.add.sprite está creando un objeto <a href="http://gametest.mobi/phaser/docs/Phaser.Sprite.html">Phaser.Sprite</a> nuevo y añadiéndo el sprite al mundo del juego. Este mundo es donde todos tus objetos viven, podría compararse al Stage de ActionScript3
<strong>Nota:</strong> El mundo del juego no tiene tamaño fijo y se extiende infinitamente en todas direcciones, siendo 0,0 su centro. Por comodidad Phaser te coloca 0,0 en la esquina superior izquierda del juego, pero puedes moverte alrededor usando la clase Camera que incorpora Phaser.
Puedes acceder al objeto mundo mediante game.world, que viene con montón de métodos y propiedades útiles para ayudarte a distribuir tus objetos dentro del mundo. Incluye algunas propiedades simples como game.world.height, pero también algunas más avanzadas que usaremos en otro tutorial.
Por ahora vamos a construir la escena añadiendo un fondo y unas plataformas. Aquí está la función create actualizada:
<pre class="lang:js decode:true " >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 repisas 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;
}
</pre>
Si ejecutas esto (fichero part4.html en el zip del tutorial) deberías ver una escena más propia de un juego:
<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" />
La primera parte es lo mismo que hicimos antes con el sprite de la estrella, solo que en su lugar cambiamos el identificador a 'sky' ('cielo') y nos ha mostrado nuestro fondo de cielo, que es un PNG de 800x600 que llena la pantalla del juego.
<h3>Grupos</h3>
Los grupos son muy potentes. Como su nombre implica te permiten agrupar objetos similares juntos y controlarlos como si fueran una unidad individual. También puedes comprobar colisiones entre Grupos, y para este juego usaremos dos grupos diferentes, uno de los cuales lo creamos en el código anterior para las plataformas:
<pre class="lang:js decode:true">platforms = game.add.group();</pre>
Como con los sprites, game.add crea nuestro objeto Group. Se lo asignamos a una nueva variable local llamada platforms. Ahora que está creado podemos añadir objetos en él. Primero el suelo, que se posiciona en la parte inferior del juego y usa la image 'ground' que hemos cargado antes. El suelo se escala para cubrir todo el ancho del juego. Finalmente ponemos a true su propiedad 'immovable'. Si no hubiésemos hecho esto el suelo se movería cuando el jugador choque con él (más sobre esto en la sección 'Físicas').
Una vez colocado el suelo creamos dos plataformas pequeñas para saltar encima usando exáctamente la misma técnica que para el suelo.
<h3>El Jugador</h3>
Crea una nueva variable local llamada 'player' y añade el siguiente código en la función create. Puedes ver cómo queda en part5.html:
<pre class="lang:js decode: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);
</pre>
Esto crea un nuevo sprite llamdo 'player', colocado a 32 pixels del borde izquierdo y 150px del borde inferior del juego. Le diremos que use el recurso 'dude' anteriormente cargado. Si echas un ojo a la función preload verás que 'dude' fue cargado como un sprite sheet, no una imagen. Esto es así porque contiene frames de animación. El sprite sheet completo es así:
<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" />
Puedes ver 9 frames en total, 4 para correr a la izquierda, 1 para mirar a cámara y 4 para correr a la derecha. (Nota: Phaser puede invertir los sprites para ahorrar frames de animación, pero para este tutorial lo haremos a la vieja usanza). Definimos dos animaciones llamadas 'left' ('izquierda') y 'right' ('derecha'). La animación 'left' usa los frames 0, 1, 2 y 3 y se reproduce a 10 frames por segundo. El parámetro 'true' hace que la animación se repita. Este es nuestro ciclo de correr estándar y lo mismo para la dirección opuesta. Con las animaciones configuradas creamos un par de propiedades físicas.
<h3>El Cuerpo y la Velocidad: Un Mundo de Físicas</h3>
En Phaser todos los sprites tienen una propiedad body, que es una instancia de <a href="http://gametest.mobi/phaser/docs/Phaser.Physics.Arcade.Body.html">ArcadePhysics.Body</a>. Esto interpreta el sprite como un cuerpo físico en el motor de físicas integrado en Phaser. El objeto body tiene a su vez un montón de propiedades con el que podemos jugar. Para simular los efectos de la gravedad en un sprite, es tan simple como escribir esto:
<pre class="lang:js decode:true">player.body.gravity.y = 6;</pre>
Este es un valor arbitrario, pero lógicamente, cuanto más alto sea el valor, más pesado será tu objeto y más rápido caerá. Si añades esto a tu código o abres part5.html verás que el jugador cae sin parar, ignorando completamente el suelo que creamos antes:
<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" />
La razón de esto es que no estamos testeando las colisiones entre el suelo y el jugador. Ya le dijimos a Phaser que nuestro suelo y plataformas deberían ser inmóviles ('immovable'). Si no lo hubiésemos hecho entonces el jugador colisionaría con ellos, se pararía un momento y luego todo se colapsaría. Esto es porque a menos que se lo digamos, el sprite del suelo es un objeto físico movible (también conocido como cuerpo dinámico, o 'dynamic body') y cuando el jugador choca con él, la fuerza resultante de la colisión se aplica al suelo, los dos cuerpos intercambian sus velocidades y el suelo comienza a caer también.
Así que para hacer que el jugador colisione y aproveche las propiedades físicas necesitamos introducir una comprobación de las colisiones en la función update:
<pre class="lang:js decode:true " >function update() {
// Hacer que el jugador colisione con las plataformas
game.physics.collide(player, platforms);
}
</pre>
La función update se llama desde el bucle interno del juego con cada frame. La función <a href="http://gametest.mobi/phaser/docs/Phaser.Physics.Arcade.html#toc22">Physics.collide</a> es la que hace la magia. Recibe dos objetos, checkea sus colisiones y los separa en caso necesario. En este caso estamos pasándole el sprite del jugador y el grupo de las plataformas. La función es suficientemente inteligente como para comprobar la colisión en todos los miembros del grupo, así que esta llamada comprobará la colisión del jugador con el suelo y las plataformas. El resultado es una plataforma firme:
<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>Controlando el jugador con el teclado</h3>
Las colisiones van bien, pero realmente necesitamos que el jugador se mueva. Probablemente pensarías en ir a la documentación y buscar cómo añadir un detector de eventos ('event listener'), pero no es necesario. Phaser tiene un gestor de teclado integrado y uno de los beneficios de usarlo es esta pequeña y útil función:
<pre class="lang:js decode:true " >cursors = game.input.keyboard.createCursorKeys();</pre>
Esto rellena el objeto cursors con cuatro propiedades: up, down, left, right ('arriba', 'abajo', 'izda', y 'derecha', resp.), que son todas instancias de objetos <a href="http://gametest.mobi/phaser/docs/Phaser.Key.html">Phaser.Key</a>. Después de esto todo lo que tenemos que hacer es consultarlas en nuestro bucle update:
<pre class="lang:js decode:true " > // 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 &amp;&amp; player.body.touching.down)
{
player.body.velocity.y = -350;
}
</pre>
Aunque hemos añadido un montón de código, debería ser bastante legible. Lo primero que hacemos es resetear la velocidad horizontal del sprite. Luego comprobamos si el cursor izquierdo está presionado. Si es así le aplicamos una velocidad negativa horizontal (-150) e iniciamos la animación de correr 'left'. Si en cambio está presionado el cursor derecho hacemos exactamente lo opuesto. Inicializando la velocidad a 0 y haciendo todo esto, cada frame, conseguimos un estilo de movimiento del tipo 'parar-andar'.
El sprite del jugador se moverá solamente cuando una tecla esté presionada y parará inmediatamente cuando no. Phaser te permite también crear movimientos más complejos, con momentum y aceleración, pero de momento ya tenemos el efecto que necesitamos para este juego. La parte final de la comprobación de teclas cambia al frame 4 si no hay ninguna tecla presionada. El frame 4 en el sprite sheet es el del jugador mirando hacia tí, quieto.
<h3>Salta!</h3>
La parte final del código añade la habilidad de saltar. El cursor arriba es nuestra tecla de salto y testeamos si está presionada. Sin embargo, también tenemos que testear si el jugador está tocando el suelo, sino podría saltar mientras está en el aire. Si ambas condiciones se cumplen aplicamos una velocidad vertical de 350px por segundo. El jugador caerá automáticamente al suelo por la gravedad que tiene aplicada. Con los controles listos ahora sí que tenemos un mundo que podemos explorar. Carga part7.html y juega un poco. Intenta ajustar valores (como el 350 del salto) para ver el efecto que tienen.
<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>Brillo de estrellas</h3>
Es hora de darle a nuestro jueguillo un propósito. Salpiquemos la escena con estrellas y dejemos que el jugador pueda recolectarlas. Para conseguirlo crearemos un nuevo grupo llamado 'stars' y lo llenaremos. En nuestra función create añadiremos el siguiente código (puedes verlo en part8.html):
<pre class="lang:js decode: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 &lt; 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;
}
</pre>
El proceso es similar a cuando creamos el grupo de las plataformas. Usando un bucle 'for' de JavaScript creamos 12 estrellas. Tienen una coordenada x de i * 70, que significa que estarán uniformemente separadas en la escena de 70 en 70 pixels. Como con el jugador les damos un valor de gravedad para que caigan, y un valor de rebote ('bounce') para que reboten un poco cuando chocan con las plataformas. Bounce es un valor entre 0 (sin rebote) y 1 (rebote completo). Nuestras estrellas rebotarán un valor aleatorio entre 0.7 y 0.9. Si ejecutásemos el código tal cual está ahora las estrellas caerían al borde inferior del juego. Para pararlas necesitamos que se comprueben sus colisiones contra las plataformas en nuestro bucle update:
<pre class="lang:js decode:true ">game.physics.collide(stars, platforms);</pre>
Además de hacer esto comprobaremos también si el jugador se superpone a una estrella o no:
<pre class="lang:js decode:true ">game.physics.overlap(player, stars, collectStar, null, this);</pre>
Esto le dice a Phaser que compruebe si el jugador se solapa con cualquier estrella del grupo de estrellas. Si es así se llama a la función 'collectStar' con ambos como parámetros:
<pre class="lang:js decode:true">function collectStar (player, star) {
// Elimina la estrella del juego
star.kill();
}
</pre>
De manera fácil la estrella se mata ('kill'), lo que la elimina de la pantalla. Si ejecutas el juego ahora tenemos un jugador que puede andar, saltar, rebotar por las plataformas y recoger estrellas que caen desde arriba. No está mal para unas pocas líneas de código -espero- bastante legible :)
<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>Retoques finales</h3>
El último retoque que haremos será añadir un marcador. Para ello haremos uso de un objeto <a href="http://gametest.mobi/phaser/docs/Phaser.Text.html">Phaser.Text</a>. Aquí creamos dos variables nuevas, una para guardar el marcador real y otra para el propio objeto de texto:
<pre class="lang:js decode:true">var score = 0;
var scoreText;</pre>
scoreText se inicializa en la función create:
<pre class="lang:js decode:true">scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });</pre>
16,16 son las coordenadas en las que mostrar el texto. 'score: 0' es el texto a mostrar por defecto y el objeto siguiente contiene el tamaño de fuente y el color de relleno. Si no especificamos la fuente a utilizar usaremos la que use el navegador por defecto, así que en Windows será Arial. A continuación necesitamos modificar la función collectStar para que cuando el jugador coja una estrella su puntuación se incremente y el texto se actualice para reflejarlo:
<pre class="lang:js decode:true">function collectStar (player, star) {
// Elimina la estrella del juego
star.kill();
// E incrementa y actualiza la puntuación
score += 10;
scoreText.content = 'Score: ' + score;
}
</pre>
De esta manera se añaden 10 puntos por cada estrella y scoreText se actualiza para mostrar el nuevo total. Si abres part9.html verás el juego final.
<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>Conclusión</h2>
Has aprendido cómo crear un sprite con propiedades físicas, para controlar su movimiento y hacer que interaccione con otros objetos, en un pequeño juego. Hay muchas más cosas que puedes hacer para mejorarlo: por ejemplo, no hay sensación de final o de riesgo. ¿Por qué no añadir algunos pinchos que debes evitar? Podrías crear un nuevo grupo 'pinchos' y comprobar su colisión contra el jugador, y en lugar de eliminar el sprite del pincho eliminarías al jugador. O para un estilo de juego no violento podrías hacer un juego de correr y desafiar al jugador a recolectar las estrellas tan rápido como pueda. Hemos incluído unos cuantos gráficos extra en el archivo zip para que te ayuden a inspirarte.
Con la ayuda de lo que has aprendido en este tutorial y los <a href="http://www.gametest.mobi/phaser/examples">más de 160 ejemplos</a> que tienes disponibles, deberías tener una base sólida para un proyecto futuro. Pero como siempre si tienes preguntas, necesitas consejo o quieres compartir lo que has estado haciendo, no dudes en pedir ayuda y contactar en el <a href="http://www.html5gamedevs.com/">foro de Phaser</a>.
Estad atentos, vendrán más tutoriales :)