Creacion de Equipos en Xhelos

Publicadas por Jose Carlos Tamayo


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!

¿Te gusta la pagina?, socializame haciendole click a tu color preferido:

Add to Technorati Favorites Digg! del.icio.us.me

Super Actualizacion de Xhelos!

Publicadas por Jose Carlos Tamayo

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:

Sexy, sexy interface.

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:

Not so sexy verdad?,

A comparacion de ahora creo que hemos mejorado bastante!. Lo increible es que la antigua interfaz me demoro mas de lo que me demore en crear esta nueva interfaz. En fin uno aprende cosas nuevas cada dia. Espero lo disfruten!

Y sobre el tutorial...
Gracias por los comentarios, yo pensaba dedicarle los siguientes tutoriales a ver Hojas de Estilo y Javascript pero me estan pidiendo que explique como realizar las batallas, vamos a ver como cuadramos todo esto para complacer al publico. Hasta entonces!

¿Te gusta la pagina?, socializame haciendole click a tu color preferido:

Add to Technorati Favorites Digg! del.icio.us.me

Crea tu Juego Web 4: Ordenando el (futuro) Codigo

Publicadas por Jose Carlos Tamayo

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:


Genial!, ya crearon una pagina inicial de su juego. Ahora le pondremos un menu tan solo para no perder el momento:


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:

El mismo mono con el mismo traje de seda

Hoy hemos aprendido lo basico de la estructura de nuestro archivos y ademas hemos creado nuestra primera pagina inicial del juego con HTML!. Um pero no se ve muy bonito verdad? En blanco y negro no vamos a cautivar a muchos usuarios, ademas yo no llamaria a eso un menu del juego.

Pero no os preocupeis, en el proximo capitulo hablaremos un poco sobre HTML con Hojas de Estilo o CSS como para poner mas decente el juego.

PD: Para los que ya saben PHP y HTML, empezaremos a tocar temas de programacion Hardcore en alrededor de 3 entradas mas. Recuerden que este tutorial empieza desde un nivel muy basico para llegar hasta un intermedio/avanzado, mientras tanto pueden ir haciendo sus preguntas de lo que quisieran ver a futuro, por ahora creo que hare una especie de Ogame pero con insectos. Hasta entonces!

¿Te gusta la pagina?, socializame haciendole click a tu color preferido:

Add to Technorati Favorites Digg! del.icio.us.me

Crea tu Juego Web 3: Herramientas a Usar

Publicadas por Jose Carlos Tamayo

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 :).


Hoy nos toca hablar un poco sobre las herramientas basicas a usar para programar el juego. Les pondre el minimo necesario de herramientas como para trabajar felices de la vida programando nuestro juego

Que tenemos hasta ahora
En el anterior tutorial hemos quedado en que usaremos PHP con Javascript y CSS para armar el juego, todo esto contenido dentro de un servidor Apache (para facilitarnos la vida usamos la aplicacion WAMP, que nos instala todo sin necesidad de muchos lios).

Ahora viene lo divertido. Programar. Hacerlo en puro notepad es algo epico y heroico, pero por supuesto no somos heroes, y queremos crear el juego lo mas rapido posible. Ademas necesitamos probar todo el codigo que escribamos y aceptemoslo, hay formas faciles y dificiles de hacer las cosas.

NetBeans 7.0: Herramienta para escribir mi codigo
Netbeans es una aplicacion que nos permite escribir nuestro codigo ayudandonos en varios aspectos del mismo. Piensen en el como un Block de Notas con Esteroides y 6 latas de Redbull.
Aunque Netbeans fue pensado para desarrollar aplicaciones en Java, "he descubierto" que sirve fantasticamente para desarrollar aplicaciones en PHP, Javascript y creanlo o no, CSS.

Simplemente vayan a su pagina web y hagan click en el enorme boton amarillo de download now.

Creacion de un Proyecto PHP
Una vez que el Netbeans este instalado, vamos a proceder a crear un proyecto PHP.
  • Primero que nada creen una carpeta dentro de su carpeta www que creo Wamp , o Apache si andan en linux, posiblemente este en /var/www. Llamemosla juego por el momento.
  • Abran su Netbeans y presionen Ctrl + Mayuscula + N. Les saldra una ventana parecida a esta de aqui.

  • Seleccionen PHP y despues PHP Application with Existing Sources. Busquen la carpeta que creamos llamada juego y seleccionenla. No se preocupen por ahora, va a ser una carpeta vacia, despues la iremos llenando.
  • Listo ya estamos listos para programar :)

Firefox 5 con Firebug:
Es recomendable usar un navegador (a.k.a. browser) que sea rapido y potente, osea Firefox5. Bajenlo, instalenlo y sean felices forever an ever.

Este navegador aunque no el mas rapido, ni mas estandar, es uno de los mas usados y tiene un pro que ningun otro navegador tiene. Sus extensiones. Especialmente las extensiones que tiene para el desarrollo web. Es por eso que una ves instalado Firefox5, es necesario, no que digo, es vital que se instalen esta poderosa extension: Firebug, si no instalas esta extension por favor, deja este tutorial ahora.

Hice un pequeño tutorial del manejo de Firebug hace mas de un año pero permanece aun vigente, asi que denle una chequeada. Una ves instalado reinicien su navegador (cierrenlo y vuelvanlo a abrir) y presionen F12. Listo!

Colorzilla y sus herramientas:
Colorzilla es una herramienta que te permite capturar cualquier color que aparezca en Firefox con un solo click. Ademas de que te brinda un rapido acceso a la pagina de CSS Gradient Generator, no puedo vivir sin esta herramienta y tu tampoco podras.



Extras: FirePHP
FirePHP es una herramienta que nos permite mandar el contenido de nuestras variales y los mensajes que queramos desde PHP a la consola de Firefox. Es muy util pero tiene el pequeño inconveniente que dejo de funcionar para Firefox5. Pero no todo esta perdido, el creador de Firephp ah creado otra aplicacion que es el reemplazo de Firephp. Es el FirePHP Companion LITE que aunque un poquito menos facil de usar, tiene un mogollon de novedades. Bueno sigue haciendo lo mismo asi que instalenlo igual.

Ya casi estamos listos
Y con esto ya tenemos casi toda la arquitectura externa armada. En el siguiente tutorial vamos a hablar un poco sobre la forma como ordenaremos nuestro codigo e imagenes y por fin, nuestra primera pagina inicial.

¿Te gusta la pagina?, socializame haciendole click a tu color preferido:

Add to Technorati Favorites Digg! del.icio.us.me