Hikk1u's Blog

DESARROLLANDO JUEGOS DESDE N00B LEVEL

jueves, febrero 12

Comenzando con FlashPunk (HelloWorld)

Pronto ya no tendré mucho tiempo para seguir actualizando este blog como me gustaría, sí lo sé, es un poco triste porque apenas lo voy comenzando y es la primera vez que les voy a "enseñar" algo, El próximo mes tengo mi primer examen de ingreso a la uni y tengo que pasarlo porque lo paso. Pero bueno, dejemos eso para más tarde.

Si quieres ver el resultado da clic aquí.

En mis posts anteriores les comentaba que me había decidido a hacer mi primer juego con FlashPunk... y estoy en eso. Lo primero que tenemos que saber para empezar es el famoso "Hello World!". No, no es ningún juego, sólo es una ventana con la palabra Hello World dibujada. Pero aún así es muy guay. Les pido disculpas si mi forma de explicar no es la correcta pues como ya he comentado aún soy N00b y este blog sólo es para ir compartiendo mis avances con ustedes.

Muy bien ya fue demasiada charla, pasemos a lo interesante.

Para poder seguirme en este relajo necesitarás dos cosas:

  1. FlashDevelop (IDE)
  2. FlashPunk

Para IDE también podrían usar Flash Builder, pero justo ahora mis bolsillos no se encuentran en la mejor situación para comprar licencias de programas que aún no sé utilizar. Además, FlashDevelop se defiende muy bien para ser gratuito, no creo que le deba nada al builder.

1. FlashDevelop (IDE)

Vale, digamos que aún no tienes FlashDevelop en tu computadora, para descargarlo sólo ve al sitio oficial y descarga la versión que más te apetezca. En este caso yo lo tengo instalado y no el portable. La instalación es muy sencilla, como cualquier programa normal, así que no la explicaré.

Una vez que lo hayas instalado o descargado lo ejecutas y te diriges al menú "Tools" → "Install Software...".

Al instante una nueva ventana se abrirá llamada "AppMan" en ella selecciona "Flex SDK" y "Flash Player (SA)", presiona "Install 2 items". Ahora espera un buen rato (a menos que tengas una excelente conexión a internet) y una vez finalizado reinicia FlashDevelop. Genial ya estamos a medio camino.

2. FlashPunk (Hello World!)

Ahora sí comienza lo bueno, ve a la página oficial de FlashPunk y descárgalo. Presiona el botón "Get FlashPunk! (1.7.2)" → "Downloads" → Source code (zip). Tendrás un archivo llamado "FlashPunk-1.7.2.zip", descomprímelo y tendrás una carpeta llamada igual "FlashPunk-1.7.2", cámbiale el nombre a "src" y recuerda dónde está guardada porque necesitarás saber la ubicación después.

​{Crear un nuevo proyecto}

Antes de empezar un nuevo juego, aplicación o lo que sea que se te venga a la mente tendrás que empezar un nuevo proyecto en FlashDevelop, esto es muy sencillo. sólo ve al menú y da clic sobre la opción "Project" → "New Project", en la sección de "ActionScript 3" selecciona "AS3 Project", el campo "Name" renómbralo a "HelloWorld".

Bien, creo que estoy explicando un poco lento, pero no sé, soy muy detallista, quizás demasiado. Bueno, mejor sigo o este "tutorial" no terminará nunca. En el menú nos dirigimos de nuevo a "Project" → "Properties..." y se abrirá una nueva ventana. En ella cambia los siguientes valores.

[Output] General → Dimensions: (320 x 480 px); Framerate: 60 fps.

[SDK] Installed SDKs → Use a SDK configured globally → Flex 4.6.0.

[Classpaths] Project Classpaths → Add Classpaths → Busca la carpeta de FlashPunk (La que renombramos a src).

Una vez que esto esté listo presiona aceptar. Excelente ahora falta lo mejor, empezar a escribir algo de código, Esto no es nada complicado, sólo es decirle a la computadora lo que queremos que suceda. pero antes haremos algunos cambios. Actualmente solamente tenemos un archivo en la carpeta "src" de nuestro proyecto llamado Main.as, vamos a cambiarle el nombre a HelloWorld.as y creamos otro llamado Game.as. Por ahora eso es todo lo que necesitamos, por lo que nuestro proyecto quedaría de la siguiente manera:

Vamos a empezar con HelloWorld.as, aquí irá todo lo que necesitamos para iniciar FlashPunk, borra todo el código por defecto que haya aparecido y copia/pega lo siguiente:

package
{
 import net.flashpunk.Engine;
 
 [SWF(width="320", height="480", frameRate="60", backgroundColor="#FEFDFC")]
 public class HelloWorld extends Engine
 {
  public function HelloWorld() 
  {
      super(320, 480, 60, false);
  }
 }
}

Con eso es suficiente para poder correr nuestro proyecto, si quieres da clic sobre la flecha azul justo al la izquierda de donde dice "Debug" y aparecerá en un pop up una pantalla negra. Claro, aún no hemos puesto nada por eso no hay nada porque la nada nada es, no existe. Vale, ya fue demasiado. Agregaremos una nueva función abajo de HelloWorld justo así para cambiar el color de fondo:

package
{
 import net.flashpunk.Engine;
 
 [SWF(width="320", height="480", frameRate="60", backgroundColor="#FEFDFC")]
 public class HelloWorld extends Engine 
 {
  public function HelloWorld() 
  {
   super(320, 480, 60, false);
  }
 
  override public function init():void
  {
   FP.screen.color = 0xFEFDFC; // Cambiamos el color de fondo
  }
 }
}

Woooo, que guay verdad!? Pero es demasiado pronto para cantar victoria. Lo que necesitamos es cambiar a Game.as pues allí es donde estará en verdad nuestro HelloWorld, sólo agregamos FP.world = new Game(); debajo de FP.screen.color = 0xFEFDFC;​, quedaría de la siguiente forma:

package
{
 import net.flashpunk.Engine;
 
 [SWF(width="320",height="480",frameRate="60",backgroundColor="#FEFDFC")]
 
 public class HelloWorld extends Engine
 {
  public function HelloWorld()
  {
   super(320, 480, 60, false);
  }
  
  override public function init():void
  {
   FP.screen.color = 0xFEFDFC; // Cambiamos el color de fondo
   FP.world = new Game(); // Nos mudamos de mundo
  }
 }
}

¡Oh, espera! Si presionas el botón de "test" te dará un error porque faltó un pequeño detalle, importar la librería FP de FlashPunk, hmm por lo que entiendo esa librería sirve para cambiar algunas cosas como la cámara, ángulos, colores y por allí, con el tiempo sabré más y ya les diré. Agrega import net.flashpunk.FP; debajo del otro import net.flashpunk.Engine; Ahora sí presiona el botón de test... Hermoso, pero aún falta lo mejor. Dejemos por ahora el archivo HelloWorld.as y abramos Game.as.

{La magia del HelloWorld}

Ok, el archivo Game.as debe estar así, si no está así borra todo lo que tengas y pega esto:

package
{
 import net.flashpunk.World;
 
 public class Game extends World
 {
  public function Game()
  {
  
  }
 }
}

¡Aburridoooo! Buuu, sí lo sé no hay nada, pero eso cambiará justo ahora. Importamos las siguientes clases a nuestro archivo import net.flashpunk.graphics.Text; y import net.flashpunk.Entity; esto es necesario para que podramos escribir el famosísimo HelloWorld. La clase Entity es necesaria porque FlashPunk toma el texto como si fuera una imagen y para mostrar imágenes en pantalla se necesita de esta clase. Alright! Debajo de.. oh, espera, se me olvidaba, también necesitaremos importar la clase FP import net.flashpunk.FP; Ahora sí!! Debajo de public class Game extends World agrega las siguientes variables:

public var helloWorld:Text;
public var helloWorldE:Entity;

Estas variables almacenarán nuestro texto y la imagen de nuestro texto, respectivamente. Ahora dentro de public function Game() agrega lo siguiente:

helloWorld = new Text("Hello World!"); // Inicializamos el texto
helloWorld.color = 0x000000; // El color por defecto es blanco(0xffffff) así que lo cambiamos a negro
// Aquí centramos el texto horizontal y verticalmente
// FP.width = 320 (el ancho de nuestro juego y se le resta
// helloWorld.width/2 la mitad de la frase para centrarlo
// De la misma manera es FP.height pero verticalmente
helloWorldE = new Entity((FP.width/2) - (helloWorld.width/2), (FP.height/2) - (helloWorld.height/2), helloWorld);
add(helloWorldE);

En el código se explica para qué sirve cada parte, ahora probemos el código... increíble apareció el HelloWorld escrito en la pantalla, creo que eso es un gran avance para alguien como yo que está empezando con esto. Aún así sigue siendo algo aburrido. Sólo agregaremos una imagen y lo haremos más bonito. Dentro de la carpeta src crea otra carpeta llamada Assets y dentro de ella guarda esta imagen.

Por lo que ahora tu proyecto debería estar de la siguiente manera:

Borra todo Game.as y pega el siguiente código:

package
{
 import net.flashpunk.World;
 import net.flashpunk.FP;
 import net.flashpunk.graphics.Image;
 import net.flashpunk.graphics.Text;
 import net.flashpunk.Entity;
 
 public class Game extends World
 {
  // Algunas variables que almacenarán nuestro texto
  public var hello:Text;
  public var helloE:Entity;
  public var world:Text;
  public var worldE:Entity;
  
  public function Game()
  {
   hello = new Text("Hello");
   hello.size = 22;
   hello.color = 0x000000;
   helloE = new Entity(0, 0, hello);
   helloE.x = (FP.width / 2) - (hello.width);
   helloE.y = (FP.height / 2) + (hello.height / 2);
   add(helloE);
   
   world = new Text("World!");
   world.size = 22;
   world.color = 0xf0207c;
   worldE = new Entity(0, 0, world);
   worldE.x = helloE.x + hello.width;
   worldE.y = helloE.y;
   add(worldE);
  }
 }
}

Beautiful, isn't it? Qué bello, pero oops faltó nuestro pequeño amigo, primero tenemos que avisarle al programa que usaremos esa imagen colocanado el siguiente código abajo de public class Game extends World

[Embed(source = "Assets/little_guy.png")] private const LittleGuy:Class;

Listo, pero no es suficiente nuestro amigo aún no aparece. Creamos una nueva variable para nuestro amigo:

public var guyEntity:Entity;

y agregamos lo siguiente justo debajo de public function Game() :

guyEntity = new Entity((FP.width/2) - 54, (FP.height/2) - 82, new Image(LittleGuy));
add(guyEntity);

En sí ahora nuestro archivo Game.as debería lucir de esta manera:

package
{
 import net.flashpunk.World;
 import net.flashpunk.FP;
 import net.flashpunk.graphics.Image;
 import net.flashpunk.graphics.Text;
 import net.flashpunk.Entity;
 
 public class Game extends World
 {
  [Embed(source="Assets/little_guy.png")]
  private const LittleGuy:Class;
  
  // Algunas variables que almacenarán nuestro texto
  public var guyEntity:Entity;
  public var hello:Text;
  public var helloE:Entity;
  public var world:Text;
  public var worldE:Entity;
  
  public function Game()
  {
   // A new character added
   guyEntity = new Entity((FP.width / 2) - 54, (FP.height / 2) - 82, new Image(LittleGuy));
   add(guyEntity);
   
   hello = new Text("Hello");
   hello.size = 22;
   hello.color = 0x000000;
   helloE = new Entity(0, 0, hello);
   helloE.x = (FP.width / 2) - (hello.width);
   helloE.y = (FP.height / 2) + (hello.height / 2);
   add(helloE);
   
   world = new Text("World!");
   world.size = 22;
   world.color = 0xf0207c;
   worldE = new Entity(0, 0, world);
   worldE.x = helloE.x + hello.width;
   worldE.y = helloE.y;
   add(worldE);
  }
 }
}

Así que si siguieron bien este "tutorial" (o mejor dicho si lo expliqué bien) el resultado final deberiá ser este:

Quizás es raro pero creo que quedó bien, nada sorprendente pero no se ve tan mal. Espero te haya servido de algo este "tutorial" porque no estaré subiendo nuevos por un rato, el examen de la uni se acerca y tengo que pasarlo. Me gusta comenzar a aprender programación pero mi carrera es primero y tengo que echarle todas las ganas. Ah!! Por cierto, también estoy trabajando en un nuevo diseño más bonito para el blog, pero eso no urge, sólo quería que lo supieran. Hasta la prósima.