Bueno muchachos, esta ya es la segunda navidad que pasamos desde la creacion del blog. Es mi deseo decirles Excelentes Navidades y un muy excitante año nuevo (para variar lo que se suele decir).

Decirle gracias a todos los que me leen y postean, y pues este proyecto sigue mas vivo que nunca. Ya tenemos 10 usuarios y tan solo es e primer Alpha. El siguiente paso es hacer un poquito mas famoso el proyecto para tener mas Alpha Testers. Saludos

Para los que quieran saborear el juego, sin necesidad de registrarse,les he creado el modo medieval (insertar iconito de nube con rayo aqui). Es un modo donde eliges a uno de 2 jugadores, al mitico Omario o al azulado Zero-Sub (vamos que salvo la imagen, tienen los mismos Stats).


Ingresando
Si estan en la pagina web de Xeno entren por medio de la imagen de abajo o mejor aun entren por aqui

Una ves dentro seleccionen uno de los dos jugadores. Pueden llamar a sus amigos y jugar en VS, eso seria lo mejor.

Una vez dentro veran una interfase parecida a esto:


Esta imagen representa un mapa de batalla donde pueden ver sus unidades en verde y las del enemigo con un borde rojo. El objetivo del juego es eliminar al enemigo.

Unidades
Cada lado tiene las siguientes unidades:

Soldado: Una unidad regular. Buen ataque y defensa. Aunque la caballeria lo gana. Es el unico que puede pasar por el terreno rocoso. Tiene los siguientes movimientos

• Mover: Cuesta 50 de energia y posibilita al arquero moverse a un cuadrado adyacente
• Ataque: Cuesta 100 de energia. Ataca a alguna unidad que este a 1 cuadrado de distancia.

Caballeria: La mejor unidad del juego. Aunque no puede pasar por terreno rocoso es la mas veloz de todas las unidades. Tiene los siguientes movimientos

• Trotar: Cuesta 60 de energia, mueve a la caballeria hasta 2 cuadrados de distancia. Definit¡vamenet lo hace recontra veloz
• Ataque: Cuesta 100 de energia. Ataca a alguna unidad que este a 1 cuadrado de distancia.
• Arrollar: Cuesta 400 de energia. Ademas de hacer daño, deja a la unidad enemiga aturdida, eliminando cualquier movimiento que estuviese ejecutando o vaya a ejecutar. Util para parar cualquier ataque de rango.

Arquero: Es una unidad con poca vida pero la unica que puede atacar de lejos. Tiene 2 movimientos:

• Mover: Cuesta 50 de energia y posibilita al arquero moverse a un cuadrado adyacente
• Ataque de Rango: Cuesta 250 de energia y posibilita al arquero atacar de 2 a 3 cuadrados de distancia.

NOTA: Acerca del Rango. Las acciones de una unidad tiene cierto rango de movimientos. En este caso estamos viendo la habilidad Ataque de Rango del arquero. Como ven la parte verde es la parte donde se pueden realizar acciones. No puedes atacar unidades adyacentes pero si puedes atacar a las unidades de 2 a 3 cuadrados de distancia.


Y bien si tiene algunas dudan no duden en comentar la pagina. Gracias

La version 0.7.1 ya esta OUT. Y como lo prometido es deuda, ya incorpore el registro de usuarios a Xeno. Ahora ya pueden crear a su jugador!. Solo hay que llenar 4 datos para estar totalmente registrado.

Posiblemente hoy o mañana ya estoy activando la opcion de registro de Usuarios del juego!.

Aunque por ahora los usuarios registrados podran solo ver estadisticas simples y crear un ejercito propio, es el primer paso para que Xeno pase de ser solo un simple modulo para batallas a un juego de verdad!.

Esten atentos a este blog o en la pagina web del juego

En el mundo de la web todo evoluciona rapidamente. Ciertamente uno de estos aspectos es la creacion de imagenes dinamicamente con puro Javascript. Entre los mejores metodos para hacer esto (ademas de usar tecnolgias de terceros como Flash o Silverlight) tenemos a dos grandes ganadores SVG y Canvas.

Algo Sobre SVG:
Acronimo de Scaleable Vector Graphic, es simplemente nuevas etiquetas html etiquetas XML que definen rectas, circulos y demas cosas graficas. Como es codigo HTML XML, en teoria podrias usar una libreria como jquery para darle programabilidad a cada objeto por medio de funciones DOM. En castellano, si haces click en un circulo que has creado en svg, que tiene el id = 'circulo123', haces que desaparezca con un simple hide() en jquery.

Yo no he trabajado directamente con SVG, pero si he usado la libreria Raphael, que me permitio hacer los graficos en movimiento del Metacañon en mi juego Xeno. La curva de aprendizaje es relamente facil si conoces que es un cuadrado y un circulo ^^.

El soporte en Browser pues casi todos los navegadores soportan SVG salvo como de costumbre el escandaloso IE en todas sus versiones. Pero si usas la libreria Raphael, puedes rendear sin problemas en IE, ya que usa VML que es como el SVG de microsoft. Gracias Microsoft por ahcernos la vida tan facil.

UPDATE: Tal parece que IE se sube al carro del SVG. Parece que su version 9 traera soporte nativo para SVG, algo es algo.

Resumiendo SVG es codigo html que te permite hacer dibujos. les aconsejo cheken la pagina de Raphael para que se den cuenta del poder que tiene esta libreria.

Y Algo Sobre Canvas:
Canvas es codigo interpretado Javascript para hacer bitmaps, no es html como SVG no es un lenguaje de marcacion como SVG, si no que tienes que crear y llamar funciones de javascript para crear imagenes. En teoria es mas rapido que SVG para graficos en movimiento. Ahora de Canvas he tocado poco pero tambien tiene su libreria estrella Processing.js, creada por el popular John Resig, autor de Jquery.

Canvas funciona en una etiqueta Xhtml5 del mismo nombre, es ahi donde se aplican todas las funciones en javascript para aplicarle.

Ahora Canvas a pesar de ser un estandar de HTML5 no esta completamente definida en todos los navegadores. Ya ni quiero mencionar al IE, simplemente apesta en cualquier cosa referente a Html5. En este caso Processing.js no puede hacer mucho al respecto. Por supuesto hay un emulador de Canvas en IE, pero es recontra lento. Microsoft por supuesto apunta a que usen su silverlight.

Y Ahora que hacemos?
Bueno, lo mejor no es competir, si no complementar, mientras SVG sirve perfecto para graficos vectoriales, Canvas es mejor para trabajar en bitmaps.

Aunque si yo creara un juego de estrategia o un rpg, usaria extra SVG debido a que me es mas facil programar el mouse para trabajr con imagenes y sus subsecciones. Ahora he visto juegos de accion creados con Canvas, que seria lo ideal ya que Canvas es de hecho, mas rapido.

Pero recuerden que Canvas no funciona en IE, SVG tampoco pero la libreria Raphael si, asi que entre Canvas y SVG, por ahora me quedo con Raphael :P


Y para termiar les dejo este excelente Paper sobre un programa de dibujo grafico que usa estos dos metodos. Las comparaciones simplemente los dejaran atonitos.

Ademas de Desarrollador de Videojuegos Casual, soy tambien desarrollador de Sistemas webs, y en mis recorridos por buscar herramientas que faciliten el trabajo, encontre un Sistema de Control de Contenidos (CMS por sus siglas en gringo) o quizas seria mejor decir, un MetaSistema de Control de Contenido llamado Drupal.

Un Content Management System (CMS otra ves) es un sistema que te permite ingresar contenido a algun sistema de una forma sencilla. Piensen en Blogger, donde creas entradas de Blogs que es en si "contenido", o tambien Wikipedia donde cada entrada es "contenido", wiki tambien es un CMS.

Lo genial de Drupal es que no es en si un CMS, mas bien piensenlo como piezas de lego que te permiten crear un CMS. Estas piezas son llamadas Modulos y con los modulos adecuados tu podrias crear desde un carrito de compras a un blog. La variedad de Modulos es increible y lo mejor es que cada modulo esta interconectado con los otros Modulos, dandote lo que llamaria Supercombos de Modulos, ademas cada modulo tiene submodulos que te permiten ampliar el modulo. Y todo perfectamente calculado para que no haya problemas con instalar muchos modulos, es mas instalar muchos modulos es lo que tienes que hacer para que funcione Drupal

Ok podemos crear un nodo Unidad,pero, ¿ y como lo usamos? bueno es ahi donde uno debe de hacer un poco de research. Por ahi vi un modulo llamado Trigger que realiza una accion cuando le pasa algo especifico a un modulo.

Otra de las joyas que vi por ahi es el modulo Openlayers que en resumen te permite crear mapas ala GoogleMaps, imaginate Tiles de tu mapa creado con la facilidad de Openlayers, esto en combo con tus nodo tipo unidad. Como nota especial ese modulo es en si un port a la libreria en javascript llamada tambien Openlayer que ya de por si esta interesante.

Cheken tambien el proyecto RPG en Drupal, son un conjunto de modulos que te podria ayudar a crear un juego RPG,aunque no lo he probado aun, y derrepente esta un poco desactualizado, pero sin duda te puede dar una idea de que hacer.

Mencione tambien que Drupal viene integrado con un sistema de control de usuarios demasiado bueno para ser real?. Manejo de Roles y creacion de usuarios de todo tipo. Cada rol puede ser definido tan finamente que haria sonrojar a un perfeccionista. Y eso que no he mencionado la seguridad en Drupal, Oh!! la Seguridad....

Drupal ES Seguridad, hell, tienen un grupo de vigilantes de codigo llamado Drupal Security Team que se encargan de descubrir problemas de seguridad en Drupal, modulos varios,y hasta los temas (digamos el skin de un Sistema Drupal )!!!, ellos tienen el poder de eliminar Modulos de Drupal si consideran que el modulo tiene graves defectos de seguridad!!!. Esto es Madness, muy buen madness =).



Ahora viene los puntos en contra
Drupal por supuesto tiene sus contra respecto a la creacion de juegos. El primer contra es que su curva de aprendizaje es bien inclinada, con tantos modulos por concoer, ademas de la posibilidad de crear tu propio modulo, no es para impacientes definitivamente. Claro que si lo aprendes no solo podras crear juegos sino sistemas Webs completos. Alguien dijo ERP?

Lo otro es la menor velocidad y los recursos extra que tendra que consumir tu Host. Es simple de verlo. Para que todos los modulos puedan hablar entre ellos es necesario una especie de Middleware (que seria el Core de Drupal) que permita a los modulos conversar en forma segura entre ellos. Esta capa extra da a los sistemas Drupal ( y bueno cualquier framework de cualqueir lenguaje de programacion, asi que Drupal no es el unico pecador en esto) mas tiempo de procesamiento. No esto seguro que tan lento se volvera el sistema comparandolo con una programacion mas directa, quien sabe hasta quizas sea mas rapido pero si he leido historias sobre como mezclar modulos puede llevar a ciertos bugs de eficiencia.

En fin...¿ quien se anima a desarrollar un juego en Drupal?

En el desarrollo de juegos PBBG, el combo Javascript + PHP es un ejemplo clasico de como crear tu juego. En el lado Javascript tienes al poderoso Firebug que te ayuda excesivamente a debugear tu fabuloso y egocentrico codigo. ¿Pero que hay de PHP?

¿Hay vida despues de hacer echo en cada variable que quieras conocer su contenido ? Pues la forma general de debugear es mediante alguna extension a tu servidor apache como Xdebug, o quizas torturarte un poco tratando de instalar todos los requisitos para el Zend Debugger, que aunque es una excelente herramienta, seamos sinceros, no es nada sencillo de instalar y usar.

Pero hay luz al final del camino, hijos mios, y esta luz se llama FirePhp. FirePHP es una extension de Firebug que te permite, entre muchas otras cosas, ver el estado de tu variable/array/objeto en la consola firebug, muy util para debugear llamadas de AJAX, y lo mejor de todo esto es que la instalacion es demasiado sencilla para ser verdad.

Requerimientos de Instalacion

• Mozilla Firefox
• Extension Firebug de Mozilla

Pasos de Instalacion

• Bajarse la extension de Firebug para Firefox. La cosa mas sencilla del mundo

• Bajate la libreria de FirePhp en cualquier parte de tu proyecto. (Basicamente son otros archivos PHP)
  
• Pon este codigo al comienzo del archivo donde quieras probar Fire PHP:

                      require_once('Direccion/de/FirePHPCore/FirePHP.class.php');
                      $firephp = FirePHP::getInstance(true);

• Y Listo comienza a usar Firephp de esta forma:

                     global $firephp;
                     $firephp->log($unArregloXEjemplo);

La funcion log es una de muchas que tiene firebug, recomiendo se lo instalen, ayuda demasiado

Por la excelente lista de correo de Sitepoint, me puse al tanto del nuevo framework javascript de google, Google Closures. Despues de la novedad de su propio lenguaje de desarrollo llamado Go, Google esta con bastantes sorpresas estos ultimos meses.

Google siempre se caracterizo por sus excelentes servicios webs como google docs o gmail, y tambien por sus deficientes interfaces (vamos, quien me puede decir que google docs es user friendly?) . Asi que no sabia que esperar de un framework javascript hecho por google, asi que.. a embarrarnos de google...

Como sabran soy fanatico de la libreria Jquery, simplemente hace las cosas bien y de una forma simple. Asi que usare Jquery para comparar a Closures. Esto a mi parecer, es una justa comparacion.

Empecemos por lo mas obvio: el Hello World de Closures

goog.require('goog.dom');

function sayHi() {
var newDiv = goog.dom.createDom('h1', {'style': 'background-color:#EEE'},
'Hello world!');
goog.dom.appendChild(document.body, newDiv);
}

A) goog.require('goog.dom');
Notaron esa funcion require() ? Es parecida al require de php, solo que inserta el codigo "ala" Ajax, . Esto puede ser bueno, porque tu pagina sera, en el mejor de los casos veloz, ya que tu codigo se inserta despues de que la pagina finalice de cargar, como hacer una llamada Ajax pero a tu codigo. Es parecido a la funcion getScript de Jquery, solo que lo tienes que usar de forma obligatoria. Esa libreria goog.dom carga funciones necesarias para manipular el DOM de tu pagina, pero no es la unica libreria, en total deben de haber mas de 50 archivos js que componen este framework.

Ahora goog es una variable publica, espero que la unica variable publica que tenga.

b) var newDiv = goog.dom.createDom('h1', {'style': 'background-color:#EEE'}, 'Hello world!');

¿What the heck? Aqui es donde todo esto empieza a decaer. quizas porque Jquery me maleduco con la facilidad con la que puedes crear un objeto DOM, e insertarlo donde quieras, pero esto me parece demasiada verbosidad. Serio, en jquery harias algo como esto:

$('body').html("pon un tag h1 con su style background-color:#EEE");

Y eso seria todo, definitivamente esto me lleva a pensar que la curva de aprendizaje de Closures es recontra alta en comparacion de las suaves caricias que te da Jquery al aprenderlo. ¿Sera necesario aprender otra libreria de javascript, realmente Closures brinda algo que las demas librerias no brinden?

Quizas si, chekando su API, me di cuenta de algunas cosas como la implementacion de la Comunicacion bidireccional que usa gmail, cosa que tambien tiene la libreria Dojo y estoy seguro que debe de haber un plugin para jquery de esto. Y aqui es donde Closures gana puntos extras: Tiene bastantes plugins ya creados y principalmente probados y testeados, cosa que en jquery no hay. Aceptemoslo,jquery tiene plugins geniales, pero son pocos en un mar de herrores ( con h de horror).

Puntos en contra de Closures son ciertos problemas de seguridad y bueno esta version al parecer no es compatible con otros frameworks, ni tampoco es compatible con Dmitry Baranovskiy,(si, pun intented!) el mitico creador de Raphael, solo lean el raje que hizo en la conferencia "Edge of the Web", realmente se puede sentir el odio hacia google closures en las letras.

En fin Google es una marca y como muchos dicen, sera el logo de google el que impulse este nuevo framework, tiene cosas buenas y como todas las cosas nuevas tiene tambien sus enemigos. Espero me den noticas de Aplicaciones creadas con este nuevo framework, que ademas tiene un compilador y una fabrica de templates. La pregunta es: ¿Sera bueno para Juegos Web?

Bueno ya con la version 0.6.6 del modulo de batallas finalizado, he decidido crear ya la primera aproximacion al juego.

Si han probabo lo que hay actualmente en el demo, es solo el modulo de batallas, no es digamos un juego completo con login, manejo de tu imperio y demas cosas como en otros juegos, asi que para ir avanzando creo que es necesario crear estas interfaces, sera la verdadera version 0.1 del Juego.

Version 0.1

• Contiene la version 0.6.6 del modulo de batallas. No pongo imagenes porque ustedes ya lo conocen ;).
  

• Contiene una actualizacion de la pagina principal: Con un login incluido (lo hice full ajax), esto seria la version 0.2. Agradezco a la gente que me dio un buen feedback sobre la interfaz de la pagina web. No se preocupen cambiare las letras a una fuente mas .. interesante.

• Nuevo Modulo de Administracion de Imperio: version 0.1, este modulo tendra varios submodulos en el futuro .Usare bastante Ajax y gadgets web2.0, osea una pagina excesivamente rapida para los gamers. Me enfocare en esta version en crear el submodulo de Administracion de Ejercitos, lo suficiente como para que elijas que unidades mandaras a atacar.

Tambien dare un poquito mas de enfoque al blog ya que es mi principal medio de comunicacion.

Por mientras si les gusto el juego avisen a todos sus amigos para que apoyen en la primera prueba Beta real del juego. Ya tendremos usuarios y otros freebies interesantes. Saludos y les pasare la voz de cuando sale la nueva version. Stay tuned

Bueno ante la pregunta de Eversor sobre como seguir este blog y cualquier otro de blogger. Encontre una forma simple de hacerlo y consta de dos pasos:

a) Obtener una cuenta de google, la pueden obtener creando una cuenta en gmail por ejemplo.

b) Hacer click en SEGUIR en la barra de Blogger:

Lo curiosos es que recien me doy cuenta de que tengo ese boton, medio oculto nomas el condenado ^^.

Estoy investigando alguna manera mas directa al correo de como suscribirse al blog. En fin si alguien conoce alguna manera con blogger , paseme la voz

Uauuu.. despues de mucho tiempo que no saco una nueva version, pero esto cada vez se pone mejor. Estuve probando un poco esto del SVG, que es un tipo de archivo grafico que puedo crear dinamicamente con javascript, cuadrados,redondos, poligonos, y no solo eso, tambien puedo hacer que se muevan y cambien de forma. Lo malo es que hacerlo puro en javascript es algo medio recargado de hacer, lo bueno es que existe una libreria llamada Raphael que facilita enormemente modificar el SVG.

Bueno revisando la version colgada en internet de Xeno me di cuenta de que movieron una unidad en una posicion imposible de poner:

Siguiendo con este minitutorial de uso de Firebug, vamos a revisar unas caracteristicas unicas en Firebug con respecto a Javascript y AJAX

1) Visualiza tus envios Ajax: Cada ves que hagas un pedido Ajax con respuesta puedes visualizar su contenido en la Consola del firebug. No solo eso, puedes ver, los datos enviados, la respuesta del servidor y en la ultima version.

Si tu dato fue enviado como JSON firebug lo comprende bien y te lo muestra , miren este poder:


2) Magia en Javascript: Una cosa que me facilita el Firebug es que puedo ejecutar codigo javascript cuando yo quiera, digamos un overwhelming alert:


Ahora ya que estan trabajando con firebug, les dejo una funcion truco, la console.log(). Esta funcion te permite mandar mensajes a la consola.

Si, se que no sirve de mucho mandar una cadena "Hola Firebug", pero lo que no pensaron ustedes es que puedes tambien mandar variables a la consola, con toda la funcionalidad que esto amerita ;)


Y asi termino con lo basico del Firebug. Les sigo aconsejandolo, instalenlo en su Firefox. ¿Que no estas usando Firefox?, no hay problema instalate tambien el Firefox.

Y para coronar mi regreso aqui un pequeño tutorial sobre esta gran herramienta. Este Plugin de Firefox es vital para cualquier chango que quiera desarrollar Paginas Web, incluyendo por supuesto Juegos Web. ¿Y que es lo que hace esta magica herramienta?, Que es lo que no hace deberian de preguntarse. Empezare por lo mas basico:

1) Modificacion de tu HTML
A veces te pasa lo siguiente: Tienes tu HTML generado de forma dinamica y para ver el resultado tienes que ver el codigo tal como te bota en blanco y negro y posiblemente muchos TAG aglomerados en una sola linea, simplemente brutal.

Con Firebug no solo puedo pasearme por el codigo HTML como si fuera un dia de campo y verlo todo coloreado resaltando los datos de los atributos, tambien puedo modificarlo, cambiandole el texto, añadir nuevos atributos, es mas puedo eliminar Tags completos solo por el gusto de ver que pasaria si elimino esa molestosa ventana flotante o ese quisquilloso DIV que me esta tapando la informacion.


3) Cambia tu CSS al vuelo
Ok ya tienes seleccionado tu etiqueta, haz probado eliminarla y se ve bien. ¿Que sigue despues?. Manipula tu CSS on the Fly!!!. ASi es con firebug puedes cambiar tu CSS y ver los cambios al instante, sin necesidad de estar entrando una que otra vez a tu archivo CSS y presionando F5. Tan solo seleccionas tu propiedad y empeizas a manipularlo. Y si eres de gustos exigentes puedes crear nuevas propiedades a cualquier elemento.


Destilado de Awesomeness en este debugeador web. La siguiente entrada hablaremos un poco sobre javascript y ajax asi que stay tune .


PD: Obviamente este plugin solo funciona para Firefox, aunque hay varios debugers que tratan de funcionar asi de bien en otros navegadores.

Bueno de vuelta al ruedo, a seguir dandole duro al juego. Justo ahora ya es casi un año de desarrollo del juego y bueno tenemos la parte basica del modulo de Batallas. No lo he avanzado tanto como hubiera podido pensar en un año, pero tampoco le di su debido tiempo/espacio en mi abultada agenda (siempre salen pelis nuevas, algun que otro trabajo). Eso si ahora con mas ganas de escribir en mi blog ademas de poner la parte de IA en el juego, que es un obetivo primordial.

Y bueno para los curiosos, estuvo en Abancay, en la region de Apurimac,Peru, dictando un interesante taller sobre Desarrollo web 2.0.

Me quede con ganas de regresar a Apurimac. De verdad y aunque suene trillado, las palabras no bastan para describir la felicidad que uno siente al despertarse todos los dias viendo el verde de los cerros cercanos. El aire es limpio, la ciudad aunque pequeña es recontra segura y aunque no muy movida, tiene lo justo y necesario como para pasar unas vacaciones de 15 dias sin haberlo visto todo.


Otra cosa que me encanto de Abancay es el clima templado/caluroso, justo el toque perfecto de calor como para no sentirte un alimento andante en una sarten de pavimento.