Cuando empece a desarrollar Xhelos, lo hice manejando una cierta estructura con aun mas ciertos estandares. Es muy importante definir una cierta forma de trabajo al comienzo, aunque duela escribir un poco de mas. Esta profecia la veran cumplida cuando ya esten trabajando en su codigo unos 3 meses y sepan donde dejaron ese objeto en PHP que andan buscando.

Manos a la obra
Lo que voy a enseñar ahora no esta grabado en piedra. Pueden relizar las variaciones que deseen pero siempre, por amor a todo lo que es sano y puro en este mundo (ja), tengan una estructura en su juego. Lo que vamos a hacer a continuacion es definir como sera la estructura de los archivos de su juego. Primero algunos estandares en general, luego la estructura propia de los archivos.

Estandares en General
No, no se asusten, son solo unas cuantas reglas que tendremos que seguir para vivir en paz con nuestro codigo. Las cuales son:

• Todos los archivos son escritos en minuscula
• El tamaño del nombre de los directorios deben de ser maximo de 3 letras. Por ejemplo imagenes se convierte en img (o ima como deseen)
• Si programamos con orientacion a objetos entonces cada clase debera de estar en un archivo diferente, que empezara con su nombre en minuscula, seguido de un. class. Por ejemplo la clase player estara almacenada en el archivo player.class.php
  

Estructura del Directorio del Juego
Cualquier juego web que deseen hacer, ya sea un RPG, uno de estrategia o algo mas depravado, van a necesitar almacenar archivos de imagenes, codigo de javascript y hojas de estilo, muy aparte del codigo del juego mismo. Por lo que aqui les brindo una posible estructura del juego.



De nuevo, esto es no esta grabado en piedra pero puede darle una base de como deberia de estar su codigo. Ahora les explico cada una de las carpeta

• ajx: Aqui almacenamos todas los puntos de acceso de Ajax (si es que usamos ajax por supuesto). Si no sabes lo que es Ajax, no te preocupes ya lo veremos con ejemplo, pero tengan por seguro que no hay aplicacion web moderna que no use Ajax de alguna manera u otra. En aplicaciones mas aburridas esto se conoce como web service, pero ese nombre me da letargo.
• css: Nada magico por aqui, esta carpeta almacenara todas nuestras hojas de estilo. Un punto muy interesante es que hay ciertos framework de css como jquery-ui que vienen con sus propias imagenes, o que tu misma hoja de estilo tenga imagenes. En este caso solo creo una subcarpeta dentro de css, tratando de no modificar nada de lo que el propio framework maneja.
• img: Aqui almaceno todas las imagenes del juego. Generalmente creo un monton de subcarpetas referentes a las imagenes como uni que viene a ser units o ter que viene a ser terreno. Ojo aqui no guardaremos imagenes que sean necesarias para la hoja de estilo, eso va en la carpeta css como ya lo explique.
• lib: En esta carpeta almaceno todas las librerias de codigo que necesite. Ademas aqui es donde estara mi propio codigo que desarrolle. Como ven la dividi en las subcarpetas js y php. En js pondre todo mi codigo javascript y en php todo mi codigo php (si, si esto fue demasiado obvio :P ) . Como nota aparte yo trabajo con la libreria jquery, la cual viene con sus propias extensiones. Yo prefiero separar de js lo que es de jquery (que es una libreria de javascript) pero para el juego lo meteremos todo dentro de la misma carpeta
  
• vis: Esta carpeta contendra lo que yo llamo vistas, que vienen a ser mezclas de PHP y HTML que son reusadas en todo el juego, por lo cual conviene almacenar esto en un solo lugar e insertarlo con un include(), en lugar de estar copiando y pegando en todas nuestras paginas webs. Un caso muy obvio de vistas viene a ser los menus del juego.

La estructura esta lista pero, y ahora que sigue?
Bueno ya con nuestra estructura lista nos toca crear un poco del codigo para probar nuestra estructura. Lo que haremos sera facil, crearemos una pagina inicial y le pondremos un menu y un formulario de registro/login. Veamos

Crear la pagina inicial
Para hacerlo entramos al Netbeans y hacemos click derecho en el nombre de nuestro proyecto, les saldra un menu donde seleccionamos nuevo->Pagina Web de PHP (ojo he dicho Pagina Web de PHP, no Archivo de PHP o Clase de PHP). Les saldra un panel como este:


Le ponemos de nombre index y aceptamos. Listo ya tenemos nuestra pagina inicial creada. Ahora hay que llenarla. Por ahora solo le colocaremos un titulo y un subtitulo, para esto utilizaremos el lenguaje HTML para crear estos items.

NOTA: Si no saben de que trata HTML les sugiero leer este tutorial. Pero basicamente HTML se trata de poner contenido dentro de unos items llamados etiquetas o tags.

Si eligieron la opcion correcta de Netbeans les aparecera algo parecido a esto:


Como ven, NetBeans nos ha creado la estructura normal de un archivo HTML. Ademas en el BODY nos ha insertado las etiquetas de PHP donde podremos escribir codigo PHP que por ahora no lo haremos. Escriban lo siguiente antes de los tags de PHP:

Asi es, el nuevo juego lo llamaremos Insectoides y el titulo esta dentro de un tag H1. El Subtitulo muy sugerente de "Battle Insectos de Batalla Redundantes" lo ponemos dentro de un H2. Ahora presionen F5 (gracias anonimo) y veran su obra de arte en un navegador:



Pondremos nuestro menu en un tag del tipo UL, este se utiliza para cuando usemos listas de cualquier cosa, en nuestro caso una lista de menus. Cada item del menu se coloca dentro de un tag o etiquieta LI. Hemos creado 4 tags LI, veamos que tal se ve!:

Porque se llama Index.php?
Regenial! Ya tenemos la estructura basica ( muy basica ) de nuestro archivo de inicio. Si te preguntas porque lo llamamos index a nuestra pagina web inicial la respuesta es facil. Por defecto nuestro WAMP (Que es realmente un servidor web Apache con PHP) va a ir a la pagina llamada index.php o index.html cuando ingresemos el nombre de nuestra carpeta. Eso significa simplemente que localhost/insectoide/ es igual a localhost/insectoide/index.php, como en la imagen:

Tratando de buscar noticias para un post sobre porque algunos juegos online estan perdiendo "traccion", me encontre con Effects Games. Una Aplicacion para crear juegos web, desde tu Browser!.

Lo interesante de este servicio es que trabaja solo con Javascript por lo que tu juego funcionara hasta en el tan amado IE6. Tiene ademas capacidad de sonido y video.

Basicamente empiezas un proyecto eligiendo el tamaño que tendra tu pantalla de juego subes tiles y sprites de imagenes, musica, dialogos en archivos xml (de preferencia).

Y despues empiezas la programacion. Basicamente tienes un gran loop gigante donde van todas las acciones de tu juego. algunos sprites lo puedes programar para que hagan algo en cada loop del juego. Se programa usando Javascript.


Se usa la especial programacion orientada a objetos de javascript para programar tu mundo.

Ademas tiene un "Editor de Mapas" que te permite colocar los tiles que deseen en el orden que te apetezca.

Realmente me parece un proyecto estupendo. Lo unico malo es que todavia no tiene capacidad para almacenar resultados. Osea por ahora un PBBG, no resultaria en este juego.

Este proyecto recien a empezado por lo que seria todo un boom moverse por estos lares.Teniendo en cuenta que Iphone soporta javascript, asi como diversas clases de celulares moviles. Esta plataforma de creacion de juegos es realmente una mina de oro.

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.

Estaba pensando en como hacer un demo de mi juego y se me ocurrio que quizas con un poco de inteligencia artificial se ponga divertida la cosa. Divertida pero un poco dificil de implementar:
Generalmente la inteligencia artificial en juegos de video es un proceso en paralelo que consume recursos computacionales (memoria ram, ciclos de reloj, el hamster que le da potencia a tu cpu,etc) de forma moderada en el mejor de los casos.

IA Desde el Servidor
La primera idea que paso fugazmente por mi mente fue que los calculos los haga el servidor como en el siguiente esquema:

La Solucion seria regular a buena, con pocos usuarios funcionaria bien, pero conforme aumente el numero de jugadores, el sistema no escalaria bien. Y aun asi se comprara un servidor mejor, no existiria una solucion mejor?, ademas no hay que olvidarnos de la usabilidad y el tiempo de espera para el usuario, tengan en cuenta que los usuarios web en general son desesperados. Me pregunte entonces ¿El cliente podra correr la IA?

Inteligencia Artificial desde el cliente
Asi que me decidi a investigar un poco que se necesitaria para correr la IA en el cliente. Estamos hablando por supuesto de usar javascript para los calculos de IA. Seria quizas mas facil usar algun plugin como javafx, flash o hasta silverlight, pero hay algo en esas tecnologias que no me gustan, el tiempo de espera quizas, que se yo.

Asi que investigando un poco encontre a los fabulosos Web Workers, que me podrian ayudar a pasar el calculo de IA del servidor al cliente. Chequen el siguiente esquema:


Web Workers y Tu
WebWorkers es una tecnologia que te permite ejecutar codigo Javascript en forma paralela al codigo javascript de la pagina web. Recordemos que el codigo Javascript se corre en un solo hilo. John Resig habla un poco de como funciona este hilo principal con ejemplos del timers. La situacion se vuelve mas compleja en la mayoria de los navegadores ya que actualmente, con excepcion de Chrome y su sandboxing, no solo el javascript de la pagina se corre en un solo hilo, si no el javascript de todas las paginas abiertas se corre en un solo hilo.


Si no usaramos ese hilo especial del webworker, nuestra pagina detendria todas sus acciones hasta que haya terminado de computar el codigo fuerte. Imaginate 10 segundos sin poder usar tu pagina web, ¿Nada usable verdad?

Ahora no todo es color de rosa ya que por ahora esta en la etapa de Draft por la WHATWG la comunidad que dicta los estandares sobre HTML, CSS, Javascript y esas cosillas web.

¿Que que significa Draft? Pues que pueda que esta en proceso de ser estandar. Lo bueno es que hay navegadores como Firefox3, Safari 4 y por ahi dicen que una version de pruebas de Chrome, ya tienen funcional el uso de WebWorkers.

¿Y con los demas navegadores que hariamos? Pues no todo esta perdido, Google Gear ofrece WebWorkers, con el nombre de WorkersPool, solo que tendriamos que instalar el plugin primero. Nada mal, si lo pensamos bien podriamos hacer un wrapper para usar Webworkers Nativos si existiesen o en su defecto usar GoogleGear.

¿Que les parece esta idea?. webworkers puede llegar a convertirse en una tecnologia muy poderosa, no solo para juegos si no para paginas web en general. Imaginen una pagina muy visitada, con un webworker calculando secuencias de ADN o codigo para desencriptar un password. El poder de muchas computadoras en un solo sitio.

Un juego de estrategia involucra siempre un terreno donde se realizaran las acciones del juego. Para un diseñador de juegos, el terreno no es un simple fondo secundario, puede ejercer un factor de decision para el jugador, lo que se traduce en: mas diversion para el usuario.

Mi objetivo con esta entrada es brindar una cabeza de playa al diseñador de juegos , que le permita conocer los diferentes tipos de mapas en 2D existentes. Aunque en la actualidad en los juegos Desktop normales alguna de estas tecnicas ya no son usadas, con el nacimiento de la industria de los Juegos Web, estas tecnicas han tenido un renacimiento.


Previos acerca del terreno
Todo mapa se divide en unidades minimas que podriamos definir como una celda. Estas celdas pueden servir basicamente para "pintar" el terreno. Ademas de servir de grafico, podemos dar cierto sabor a nuestro mapa con:

• Dificultad de Movimiento: Por ejemplo que cruzar por un terreno demore mas tiempo que otros terrenos, o quizas tambien hacerlo impasable, como por ejemplo rios o el mar.
  
• Addons al Terreno: Como recursos o construcciones que permitan añadir mas decisiones al jugador. Las construcciones podrian ser por ejemplo destructibles. Imagina una unidad que pueda lanzar fuego quemando un bosque (se salio el instinto piromano). No es muy ecologista pero le añade un toque de interaccion asombroso.
  

Las celdas ademas pueden tener diferente formas, siendo las mas comunes, la rectangular y la forma hexagonal, muy popular en juegos de tableros.

Tipos de Vistas: Ademas de las celdas existen diferentes tipos de vistas del mapa.
XXs Hay 2 tipos de vistas basicos:

Vista Top Down:Conocida tambien como vista de aguila es la mas facil de desarrollar. Un array de 2 dimensiones se transforma en un mapa visto desde arriba. El mayhor problema de este tipo de vista es que no aporta mucho "Eye Candy" al jugador, es decir, se podria ver mucho mejor.

Vista Axonometrica: La vista axonometrica es dicho de forma simple, poner un angulo a una vista topdown. Es mas dificil de desarrollar si no se cuenta con un engine grafico de 3D, pero los graficos tienden a ser mas realistas generalmente. Hay 3 tipos de vistas axonometricas, la isometrica, la trimetrica y la dimetrica tambien conocida como vista 3/4

Las diferencias entre cada, a pesar del nombre, son faciles de diferenciar. En la vista isometrica, sus 3 dimensiones tienen el mismo tamaño, en la dimetrica, 2 dimensiones tienen el mismo tamaño mientras que la tercera dimension puede dibujarse mas grande o mas chico.


La Trimetrica no es muy usada en juegos de estrategia. Trata basicamente de que las 3 dimensiones son representadas con una longitud diferente.

Links Interesantes:
Para la creacion de este blog encontre 4 links que pueden ayudarles a crear sus mapas

• Tile Based Games por Tonya (ingles): Es un tutorial mas tecnico acerca de como crear mapas con tiles, esta bueno y completisimo, aunque los ejemplos son hechos en flash.
• Reiners Tileset (ingles, aleman): Pero que importa el idioma, aqui hay bastantes recursos graficos de tiles. Para vistas isometricas y topdown, imperdible.
• Accidental Intricasy (ingles): Aqui enseñan una forma interesante de crear mapas de forma aleatoria usando la teoria del caos. Para gente hardcore!
• Danc's Miraculously Flexible Game Prototyping Graphics for Small Worlds: Aparte de que su pagina madre, Lost garden, es una pagina que trata sobre desarrollo de juegos web, esta web esta regalando unas imagenes que se ensamblan como legos. Ademas contiene una lectura interesante para otro punto de vista acerca de los tiles.

Disfruten el post y hasta nuevo aviso.

Asi como lo oyen, despues de pasar la base de datos de Postgres a Mysql y cambiar el codigo para que no se queje, y ademas de conseguir algun bizarro hosting, Xeno ya tiene hogar y pueden visitar el super pre alpha en la siguiente aqui. Prometo actualizar cada semana algun nuevo avance. Por ahora solo esta activo el creador de mapas dinamico. Pero bueno... esto es elcomienzo de algo grande . Enjoy!!!

PD: No duden en mandar comments asi sea para decirme que me piratee vilmente la imagen de un hidralisk jeje. Posteen posteen XD