Crea tu Juego Web 7: Diseño Web Parte 2

Publicadas por Jose Carlos Tamayo

Continuando con la parte de diseño, en el anterior tutorial vimos como tomar inspiración de varios recursos para tener una idea del diseño del juego. Hicimos ya nuestra lluvia de ideas y tenemos algunos colores fuentes para trabajar, ademas de eso seleccionamos un tipo de estructura fusión de otros juegos webs, como dark orbit y goblin keeper. Aqui una idea de lo que se va a lograr (claro dentro de nuestro poder en diseño...)



Tareas a Finalizar

En el anterior tutorial nos quedamos en desarrollar la idea del juego y teniamos la siguiente lista, en negrita estan las que desarrollaremos ahora.
  1. Lluvia de Ideas del diseño
  2. Tomar Inspiracion de otras paginas
  3. Ver que contenido tendrá la pagina
  4. Armar la estructura del diseño
  5. Colocarle un Fondo de Pantalla alucinante Ponerle sus  Detalles
Continuemos entonces:

Ver que contenido tendrá la pagina

Facil, sabemos ya masomenos que queremos colocar gracias a las ideas obtenidas en las siguientes paginas, ademas por experiencia les puedo decir que necesitamos:

  1. Barra de Login de Usuario (y selección de idioma en un futuro algo lejano, hay esperanzas :D)
  2. Formulario de Registro, con los campos necesarios nomas, consideren también la opción de usar su usuario de facebook, aunque usaremos un login común y corriente.
  3. Boton de Accion, sobretodo para registrar un usuario nuevo
  4. Imagen de Fondo chevere!
  5. Una Seccion de novedades, mantengan actualizada la pagina con buenas novedades!
  6. Una Seccion de Fotos, pongan bastante fotos en el juego.
Listo, ahora continuemos con la estructura del diseño.


Armar la estructura del diseño

Dark Orbit + Dungeon Keeper + Colores de Insectos y naturaleza, si pongamos esas cosas!, bueno ya tenemos las necesidades de contenido y la inspiración, empezaremos por el maquetado de estructura:



Es simple y es en realidad una copia de la inspiracion que tenemos. Tenemos las siguientes secciones:
  • Cabecera: Donde va el logo del juego y un menu de navegacion Ademas contienen siempre en la parte de arriba una seccion de usuarios
  • Accion: Donde colocaremos un formulario de inscripcion con su boton de accion
  • Show: Colocaremos aqui un video o un slideshow mostrando rapidamente las bondades del juego
  • Infos: Secciones informativas de la pagina web
  • Pie de Pagina: Generalmente va el copyright o copyleft, junto con informacion de contacto. Tambien si el sitio web de la pagina contiene varias secciones, se puede colocar un Mapa del Sitio por aqui.

Muy bien ahora que ya tenemos la estructura el siguiente paso es colorearla y darle sus cosillas extras. Como les comentaba es bueno tener un amigo diseñador pero nosotros podemos hacer algo bonito.

Primero que nada, estoy usando Fireworks para trabajar, es mi herramienta favorita, pero ustedes pueden usar cualquier herramienta que les permita importar imagenes del tipo jpg o png.


Ponerle los Detalles


Para el diseño, yo lo trabajo por iteraciones,me proyecto a una idea general de lo que quiero y voy probando texturas y colores que quizas pueda funcionar. Mi idea ahora es que como va a ser un juego de insectos, pienso armar una vista del suelo teniendo en cuenta parte del cielo y cavando hacia la profundidad, o si nos encanta cavar:

Iteracion 1:  Colores Iniciales

Mi objetivo aqui es generar la primera idea de cielo y empiezo a jugar con los colores de las paletas que hemos elegido. ¿Notan la aparicion de un cielo y un prospecto de menu?
Se acuerdan de Design Seeds?, bueno yo corto estas imagenes y las uso como base para los colores

Iteracion 2: Logos y fuentes

Va tomando forma nuestra maqueta, asi que se me ocurrio ponerle algun par de fuentes que tengan que ver con insectos y encontre A Bugs Life. Las fuentes son algo importante para el juego, definiran de cierta manera su sentido. Con esta fuente logramos que se sienta mas casual el juego. Sobre el logo pues aunque no me lo crean, es la parte mas importante, un logo debe de ser simple y facil de recordar, puedes hacerlo superestilizado, pero si no es facil de recordar, es malo!. El logo lo saque buscando la palabra insectoides y encontre algo sobre aliens insectos, pero bueno servira para nuestros propositos




Iteracion 3: Relleno de las Secciones

Y bueno hemos avanzado alguito, pero aun la interfaz se ve simple (simple es bueno :P), pero tranquilos pronto llegaremos al final. Por ahora rellenamos los bloques de la pagina con algunas cosa extras y cambiare los colores de algunas cosas. ¿Que color elegir? pues jugando con nuestra paleta podremos hacer algunas cosas interesantes:


Iteracion 4: Usando algunas Tiles

Como ven ya tenemos armado la estructura basica, pero como que falta algo, algo que indique que esto es un juego. Asi que una rapida busqueda en google de las palabras vertical grass tiles, y encontramos un tileset genial que vamos a usar!

Añadimos unos tiles por ahi...

El mencionado TileSet, lo encontre en fantendo.wikia.com

Iteracion 5: Algunos trucos finales, texturas

Uno puede seguir y seguir refinando la interface, pero para efectos del tutorial voy a mostrarles un truco mas que les servira hasta que consigan a su diseñador. Se trata de colocar texturas a tus diseños y este truco lo aprendi desarrollando algunas interfaces para mi juego Xhelos.com.

Bien se trata de lo siguiente, busquen una imagen con alguna textura interesante, apliquenle una transparencia y ponganlo encima de algun contenido solido, por ejemplo nuestro terreno:


Obtienes una textura y despues le añades transparencia. Magico!
Otras ideas a tener en cuenta son los bordes redondeados. Piensen en un rectangulo, sus esquinas son medias puntiagudas, es lo normal y generalmente demuestran seriedad. En un juego necesitamos lo contrario, necesitamos usar border redondos.



Aplicando la transparencia y los bordes redondos, obtenemos lo siguiente:


Toda una labor titanica para llegar hasta esta interfaz! Espero lo disfruten. Con esto ya finalizamos nuestro tuto acerca de diseño y nos enfocaremos ahora en programacion de HTML5.

Enjoy!

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

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

Dándole cariño al Tauren :D

Publicadas por Jose Carlos Tamayo

Retomando el blog señores. Gracias por sus comentarios, sobretodo del tutorial de desarrollos de juegos PBBG que aun falta terminar. Bueno para comentarles los siguientes planes en la agenda:

Acerca de Xhelos:

Como saben, también estoy desarrollando un juego que quiero que sea genial. Este ultimo año lo he avanzado bastante y ya tengo el camino definido para finalizar el juego. Aunque no tengo fechas calculo que me demorare unos 6 meses mas en dejar el juego en Beta, pero quisiera aumentar la velocidad de desarrollo, no se si contratando desarrolladores o haciendo el juego open source para que gente con interés me ayude.

Mas bien, no puedo creer que vaya ya mas de 6 años desarrollando el juego, pero puedo decir concientemente que este año es el año donde he avanzado mas, ya sea porque agarre mas experiencia o porque se me hace mas fácil programar mis ideas que al comienzo.

Acerca del Tutorial:

Bueno he recibido varios comentarios para continuar el tutorial, lo deje, debo de ser sincero, a medio camino para enfocarme en Xhelos y en actividades del mundo real, y ademas de Lol, muchas dosis de Lol, ese juego es un vicio pero aprendí a balancear las horas de juego. Voy a continuar algunos capítulos mas del tutorial para no dejarlos colgados, sobretodo finalizar la parte de diseño. Su feedback es muy importante ya que nos guiara hacia donde deberiamos de trabajar el juego.

Acerca de Tauren Create:

Continuare posteando algo mas seguido, aparte de los tutoriales y otras cosas, aqui en mi pais se esta dando inicio a una movida de desarrollo de videojuegos de todo tipo, asi que hay buen material para continuar desarrollando, tengo en la mente algunas ideas de nuevos post interesantes, asi que a continuar :D


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

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

Controlando Spammers en tus juegos!

Publicadas por Jose Carlos Tamayo

Este es un pequeño post que haré para hablar de un tema algo interesante pero que tienes que tener en cuenta al momento de pensar en crear un juego web.

Ahhhh Spam

Como sabrán recién hace 1 mes aproximadamente continué con el desarrollo de Xhelos, que debo decir lo deje abandonado por algo de un año. En todo ese año entraba de vez en cuando para ver como crecían la cantidad de jugadores ( buee... crecer es un termino bien relativo hehe) y me daba con la sorpresa de que la cantidad de usuarios crecía cada mes.

Yo feliz de la vida diciendo que chevere, no actualizo el game pero aun asi siguen creciendo los jugadores!. Ahh hazte fama y échate a la cama como dicen. El problema fue que curioseando un poco en los nombres de los jugadores me di cuenta de que tenian nombres curiosos como "Buy Viagra super extra frikitamente Cheap" o nombres como xyz123yourmominmybedyeah.

Oh dios me invadieron los spammers!. Y debo decir que fue leve ya que eran unos 50 usuarios falsos al mes masomenos, conozco casos especialmente de foros online donde los spammers van por 1000 al dia. Y bueno acciones tenian que ser tomadas

¿Como diablos controlo a los spammers?

Bueno debo decir que tengo algo a favor, Drupal, que me permite instalar modulos para controlar spammers. Asi que lo primero que probe fue colocar un Captcha al juego.  Como saben Captcha es un plugin que instalas en tu web ( no solo drupal) que hace esas preguntas de escribe lo que dice aqui, en estas letras tan horriblemente deformadas o no entras.


Este Captcha siquiera ayuda a digitalizar libros, pero hay verdaderas troleadas que nos juegan estos plugins


No funciono.

Es decir al comienzo bajo un poco el control de los spammers pero al mes siguiente vinieron con fuerza, redoblaron esfuerzos y se comieron al captcha en el desayuno. No me lo creeran pero la tecnología de reconocimiento de caracteres es maravillosa y creo que los spammers apoyan bastante este tipo de tecnologias. En fin, busque muchas maneras en Drupal de controlar el spam, desde inputs ocultos hasta captchas matematicos.

Pero encontré mi piedra filosofal en control antispam, se llama spambot y quiere ser tu amigo.


Como hace su magia el Modulo Spambot?

Bueno antes que nada, a pesar de que es un modulo para drupal, no dudes que te puede servir usando php puro.  Spambot es un modulo que se conecta con la base de datos del foro www.stopforumspam.com. Cada ves que un usuario es creado, Drupal chekea que el mail, el ip y el nombre no estén registrados en ese foro. Si esta registrado entonces impide que el usuario Drupal se cree, impidiendo también la creación del usuario en Xhelos!

Ahora ustedes que estan programando PHP puro, JAVA o con ayuda de algún framework, no os preocupeis ya que stopforumspam cuenta con un API en protocolo REST, osea pueden usarlo desde cualquier tipo de lenguaje con soporte web.

Daños Colaterales

Bueno esta batalla contra los spammers fue ganada pero supongo que la guerra continua. He estado creando ademas un administrador que me ayude a descubrir usuarios huerfanos, usuarios que existen en Xhelos pero que no existen en Drupal, ya que por un momento se crearon un monton de este tipo de jugadores debido a que en mi codigo creaba a los usuarios antes de que Spambot impidiera la creación del usuario en Drupal.  Aunque claro ya esta arreglado.

  Mientras tanto, ¿Que voy a hacer con tantos planetas vacios?


Cantidades navegables de planetas vacíos

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

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

Nueva Web en Xhelos

Publicadas por Jose Carlos Tamayo

Aprovechando el time libre, hice unas mejoras a la Pagina Web de Xhelos. Ahora con un nuevo background y unos colores mas utiles para mis oscuros propositos :D.



Aprovechando el ultimo tutorial y todo lo que hable acerca de botones de acción que debería tener tu juegos, pues hora de ponerlo en acción!. Que les parece las mejoras?

Antes y el Después de Xhelos 2013


Estoy bastante animado con el desarrollo del juego. Espero llegar a una parte recontra estable del juego para empezar a lanzar ahora si las pruebas Beta. Como saben las pruebas beta son pruebas que se hacen con usuarios normales, pruebas alpha son pruebas realizadas por el personal (en este caso yo) y algun que otro interesado. Asi que con fe en el Proyecto :D

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

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

Novedades en Xhelo!

Publicadas por Jose Carlos Tamayo

Como ya muchos sabrán, a Xhelos lo he dejado por mucho tiempo empolvado, pero ahora, después de un año de no tocar código, he regresado para finalizar este juego.

Por ahora me he enfocado bastante en pulir todo lo que necesite para dejar listo el juego en la farmeada de recursos. En un futuro no muy lejano podremos crear colonias en las regiones de los planetas que nos permitan obtener recursos.

Por ahora mi objetivo a sido que estas colonias interactuen correctamente con la interfaz de batalla del juego.

No se imaginan las sorpresas que me deje en mi codigo despues de un año de no tocarlo para nada. Nota mental: poner un montón mas de comentarios al codigo.

Si desean saber mas detalles, visiten la sección de ultimas noticias de Xhelos. Ahora continuare con el tutorial donde lo deje. Gracias por leerme!.

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

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