Added phaser build and hellophaser sample
This commit is contained in:
BIN
resources/tutorials/Spanish/01 Comenzando/images/cloneFrom.jpg
Normal file
BIN
resources/tutorials/Spanish/01 Comenzando/images/cloneFrom.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
resources/tutorials/Spanish/01 Comenzando/images/dashboard.jpg
Normal file
BIN
resources/tutorials/Spanish/01 Comenzando/images/dashboard.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
resources/tutorials/Spanish/01 Comenzando/images/editor.jpg
Normal file
BIN
resources/tutorials/Spanish/01 Comenzando/images/editor.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
resources/tutorials/Spanish/01 Comenzando/images/start.jpg
Normal file
BIN
resources/tutorials/Spanish/01 Comenzando/images/start.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
49
resources/tutorials/Spanish/01 Comenzando/index.html
Normal file
49
resources/tutorials/Spanish/01 Comenzando/index.html
Normal 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
81
resources/tutorials/Spanish/01 Comenzando/part2.html
Normal 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
64
resources/tutorials/Spanish/01 Comenzando/part3.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Phaser Tutorial 01 - Getting Started</title>
|
||||
<script src="build/phaser.js" type="text/javascript"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>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
71
resources/tutorials/Spanish/01 Comenzando/part4.html
Normal 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
49
resources/tutorials/Spanish/01 Comenzando/part5.html
Normal 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
48
resources/tutorials/Spanish/01 Comenzando/part6.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Phaser Tutorial 01 - Getting Started</title>
|
||||
<script src="build/phaser.js" type="text/javascript"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>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
49
resources/tutorials/Spanish/01 Comenzando/part7.html
Normal 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
57
resources/tutorials/Spanish/01 Comenzando/part8.html
Normal 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>
|
||||
Reference in New Issue
Block a user