Un pequeño update del juego, he terminado de desarrollar la creación de equipos en Xhelos. Esto permite agrupar a tus unidades en un equipo y mandarlas a la region que desees.

Esto permitira ordenar un poco mas el juego en lo referente a movimiento de unidades.

¿Y Que sigue en Xhelos?
He decidido que para llegar a la fase beta del juego, es necesario definir las ultimas partes necesarias para que el juego este completo. Son 5 puntos a tener en cuenta:

a) Actualizacion de Recursos por region: Cada region genera recursos conforme pase el tiempo como todo juego web de estrategia. Esto requiere tambien definir algunas construcciones basicas para la obtencion de recursos lo que nos lleva al punto b:

b) Construcciones del juego: Aparte de las construcciones para la obtencion de recursos necesitamos lo basico para diseñar y generar unidades, que nos lleva al punto c:

c) Diseño y Generacion de Unidades: Mi objetivo siempre fue que puedas mezclar diferentes piezas para crear una nueva unidad, util para tus necesidades, para esto necesitamos una interfaz facil de usar donde puedas diseñar unidades, realmente este es el punto que me va a llegar mas tiempo, pero es necesario para el bien del juego.

d) Mover equipos de un planeta a otro, inclusive de una estrella a otra: Tengo algunas ideas al respecto, esto sera basado en el control de portales o que te lleven de un lugar a otro, aunque posiblemente para simplificancion del juego, podras mandar tus unidades donde quieras.

e) Puntajes en el juego: Es lo principal en un juego, si no coloco puntajes, no vendra ningun jugador, a futuro se planean otras opciones aparte del puntaje general, pero esto es lo basico.

Y asi amigos, una ves completado todos estos items, empezare a hacerle publicidad al juego, para atraer una cuota interesante de jugadores y hacer las respectivas pruebas en la fase Beta del juego. Por supuesto tendre en cuenta a aquellos valientes que crearon sus cuentas antes del Beta!

Ustedes lo pidieron, aqui lo tienen, Xhelos en toda su (bien) colorida gloria.
Esta nueva actualizacion solo trata de pura, dulce y sexy mejora de interface, solo denle una mirada a esta imagen y diganme que no se les hace agua a la boca:

Ademas jugarlo es un placer. No solo se ve bien, jugarlo te hace sentirte bien. Prueba seleccionando alguna unidad y deja que el mapa se centre automaticamente en la unidad con un suave movimiento de camara.

Y bueno resumamos las mejoras

• Visor de turnos, ahora podras darte cuenta a que unidad le toca el turno actual y quienes siguen en la cola de espera. En la imagen de ejemplo tenemos a nuestra artilleria con el turno actual, seguido de la artilleria enemiga acechandonos.

• El mapa se mueve suavemente al seleccionar una unidad. Asi es la camara se centra en la unidad con el turno actual, ya sea amiga o enemiga, tan solo de ver esta transicion ya me da ganas de jugarlo de nuevo.

• Ayudas en todo el sitio, pon el puntero del mouse donde tengas dudas y aparecera una ayuda en fondo negro explicandote de que trata la cosa, todas las acciones tienen estas ayudas, los estatus de la unidad, hasta los botones de cheats tiene ayuda!

Y ahora que sigue?
Bueno ahora que esta mas amigable al usuario, nos enfocaremos en la parte de recursos para darle mas forma de juego de estrategia a Xhelos. Asi es, a futuro tendremos construcciones regionales que nos permitiran sacar recursos y asi conquistar los diferentes mundos.

Una mirada al pasado
Bueno para los que recien llegaron a Xhelos, aqui les dejo una imagen de lo que fue en antaño la antigua interfaz de batalla:

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:

UPDATE 02 dic 2012: Pongo el link del poderoso plugin de firefox colorzilla :)

A pasado algo de tiempo desde el primer tutorial, pero continuaremos con los mismos :).