martes, noviembre 10

[Solucionado] Error al instalar Krita en ubuntu

Hoy quise instalar Krita en xubuntu 14.04 (pero esto debería funcionar para cualquier *buntu) y me topé con la desagradable sorpresa que me saltaba el siguiente error:

Krita: Critical error
Essential application components could not be found.
This might be an installation issue.
Try restarting, running kbuildsycoca4.exe or reinstalling.

Después de estar un rato googleando una solución dí con ello, (si estás queriendo instalar una versión de krita inferior a la 2.9 (en mi caso es la 2.8.5) sólo tienes que hacer lo siguiente.

1. Abre la terminal (CTRL + ALT + T) e instala las kbuildsycoca4

   sudo apt-get install kdelibs-bin

2. Una vez instalado copia y pega lo siguiente de nuevo en la terminal

    kbuildsycoca4 --noincremental

Listo!! Después de eso Krita debería abrir perfectamente, pero... NO HAY ICONOS!!??? Si te pasa eso no te preocupes, sólo sigue el paso tres de aquí abajo para instalar los iconos necesarios del programa.

3. Si no has cerrado la terminal sólo copia lo de abajo, si la cerraste sólo vuélvela a abrir no seas flojo/a ;)

    sudo apt-get install oxygen-icon-theme
y por si las dudas también esta linea que cerrará krita
    pkill krita

Con eso debería bastar, sólo vuelve a abrir Krita y Ta-dan todo está funcionando a la perfección.

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;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.

miércoles, febrero 4

Mi primer juego con Flixel ¡Un fracaso!

Jejeje, sí como ya había contado en mi anterior post tengo un pequeño juego extremadamente bugueado y defectuoso. Fue mi intento de una copia del clásico Pong. Sí, ese de las paletas en la pantalla que van golpeando una pelotita. Hmmmm el desarrollo fue muy interesante y algo frustrante porque yo era muy ambicioso y poco talentoso. Y lo sigo siendo, pero ahora creo que lo mejor es empezar poco a poco y sobre todo ser constante.

Si quieres jugarlo puedes dar clic aquí, te llevaré a mi juego alojado en Newgrounds.

Les pido disculpas porque no guardé los archivos .as del juego y pues ¡Rayos! En verdad me hubiera gustado mostrarles cómo lo hice, aunque mi código no era muy complicado quizás hubiera ayudado a alguno que estuviera comenzando con juegos flash.

Fue toda una aventura, desarrollar A.I. (Artificial Intelligence) es más difícil de lo que parece para alguien que tiene muy pocos conocimientos en programación, pero espero que con dedicación todo pueda ir mejorando poco a poco.

Espero en los próximos días publicar cómo realizar el famoso "Hello World" con Starling Framework, de hecho estoy muy ansioso.

No pierdas el tiempo y comienza a hacer juegos

Hola, Nano por aquí, hasta el momento no soy ningún programador habilidoso o desarrollador de juegos con experiencia, es más, de hecho hasta hace unos días no tenía experiencia programando nada. Había hecho algunos pininos en JavaScript pero nada importante, sólo eran cosas muy sencillas como formularios aburridos y jQuery algo rígido.

Siempre tuve ganas de hacer juegos sencillos y casuales pero la desidia me mataba el ánimo. Anteriormente siempre que iba a comenzar a aprender algún lenguaje de programación para juegos ponía frente a mí la siguiente idea.

Quiero aprender lo más pronto posible para GANAR MUCHO DINERO con mis juegos RÁPIDO.

¡Pum! La respuesta llegó sola: “GANAR MUCHO DINERO RÁPIDO”. A menos que sea un genio con gran conocimiento en matemáticas, física, y demás temas aplicados a la programación, eso no iba a pasar.

En el último año y medio estuve probando diferentes motores de videojuegos o game engines o frameworks o chorizo con papas. Ok eso ya estuvo muy fuera de lugar. Pero no me pude decidir por ninguno, empecé a aprender ActionScript + Flixel(me aburrí y lo dejé), luego probé HTML5 con Phaser(terminé algunos tutoriales pero al final lo dejé), de ahí caí en las garras de Cocos2d-X (¡Darn! para un N00b como yo eso fue el infierno y no te lo recomiendo a menos que sepas c++), también le di un vistazo a unity 3d y construct 2, unity es bueno pero es más una herramienta para juegos en 3D y yo sólo buscaba algo sencillo para hacer un juego de plataformas y construct… hmm me pareció algo limitado(supongamos que lo aprendo y comienzo a desarrollar juegos cada vez más complejos, para lograrlo tendría que comprar una licencia que cuesta unos $100 USD). Así que decidí regresar a ActionScript 3… pero sin Flixel (chan chan chaaaan).

Decidí regresar al principio porque era el lenguaje que se me hacía más divertido (ya sé soy raro). Muchos dirían ahora ¡Pero FLASH ESTÁ MUERTO por eso Mochimedia cerró!. HTML5 está avanzando cada vez más pero aún le falta bastante para lograr superar a flash. Además en la parte de arriba dije que hago esto por el gusto de hacer juegos. Bueno no comenzaré a hablar de esto porque como dije aún soy N00b y probablemente sólo diría cosas sin sentido.

Sobre lo de Flash está muerto ¿Cuándo has escuchado decir a algún usuario decir que el juego tal estuvo más divertido porque lo hicieron en C++ en vez de HTML5? Duhh, Bueno, por ahora sólo busco divertirme y no dinero. Esa fue la razón de que publiqué mi primer juego… sí un juego y la verdad fue una copia barata y defectuosa del Pong. Lo hice con Flixel, muy fácil de usar por cierto pero lo malo es que no puedes aspirar a dispositivos móviles y además no me quedará mucho tiempo para aprender programación, por eso decidí moverme a Construct 2 de Scirra.

Ya al final un poco sobre mí. Soy un chico mexicano introvertido/extrovertido, una mezcla rara. No diré mi edad exacta pero digamos que estoy entre mis tempranos 20’s, y me veo como quinceañero. Con este blog planeo dejar la flojera y comenzar a aprender a desarrollar juegos mientras les enseño lo poco que yo voy aprendiendo.

Espero mis palabras les sirvan a alguno para que no pierda el tiempo buscando el mejor framework o engine para “hacer juegos”, sino que es tiempo de agarrar tu hoodie favorita, colocarte la capucha (Siéntete cómodo, yo me pongo un hoodie para estudiar porque me hace sentir pro), apagar la luz de la habitación y comenzar a teclear a media noche lo que se te venga a la mente con ayuda de eBooks, tutoriales, wiki’s y foros de desarrollo de videojuegos. No va a ser fácil.

miércoles, enero 1

Nuevo Año... Nuevos Proyectos Online

p { color: red }
.bode {
    background: red;
    color: #fff;
    width: 500px;
}

12:02

Dejaré esto escrito mientras.