Retrodebugging: Ikariam, ahorrando ancho de banda

Publicadas por Jose Carlos Tamayo

Seguimos con Ikariam, esta vez hare un analisis detallado del juego Ikariam posteando toda la informacion tecnica que sea humanamente posible de obtener. Es decir abrire el juego con el buen firebug y nos pondremos a ver las entrañas de este juego.

ADVERTENCIA: El siguiente contenido es de caracter tecnico y es necesario tener minimo algo de nocion sobre Javascript, CSS, Servidores Web y demas cosas 2.0.Si a pesar de esto decides seguir leyendo y no tienes idea de que es AJAX por ejemplo, pues advertido estas de que la lectura no sera facil .

Empecemos por el cliente. Ikariam usa Javascript en la mayoria de los menus del juego, prncipalmente para mostrar informacion en forma de tooltips, lo que mejora la usabilidad


Para lograr los Tooltips, Ikariam utiliza la libreria wz_tooltips, parece sere una libreria de origen aleman.no la conozco muy bien pero este tipo delibreira hay por todo lado.

Ademas Ikariam hace uso re-extensivo de la libreria Yahoo User Interface (YUI), por ejemplo para ingresar recursos usas unos sliders, tipico de la libreria Yahoo. Parece ser que usan una version optimizada de la misma ya que por experiencia propia la YUI tarda en cargar en el navegador, pero en el juego no se siente para nada.

Un ejemplo de Slider

Por supuesto Ikariam hace uso de AJAX pero no de una forma extensiva. Por ejemplo en la Vista Mundo, donde uno puede navegar por todas las islas, carga datos del mapa de la misma forma como lo hace GoogleMaps. Retorna un XML llamado WorldMap_iso, el contenido del mismo es un poco abstracto, pero parecen ser coordenadas y acciones.

POST hecho al servidor con Ajax cuando se navega por el mundo

Ahora el formato de datos es UTF-8, lo que es un pro, basicamente UTF8 es el estandar a seguir si uno quiere internacionalizar su juego, Los de Gameforge sacan un 20 en esto.

Del lado del servidor tenemos que presumiblemente esta escrito en PHP (Las paginas tienen extension PHP, y a veces se escapan cadenas del tipo $var). No se que base de datos manejara el sistema. Si alguien tiene idea seria de gran ayuda.

Utilizan bastante CSS para las imagenes y usan tecnicas como el Sprite CSS para el juego. Obviamente la gente de Gameforge sabe hacia donde apunta y disminuir el ancho de banda del juego es uno de sus metas.

Usando firebug para escudriñar dentro del juego. Con ustedes un sprite

EL DOM del juego es completamente tableless, lo que influye en la velocidad del juego. Por ejemnplo el mapa de la isla esta hecho a base de una imagen gigante y varios tags li conteniendo cada una de ellas un objeto como puede ser una Ciudad o alguna mina.

Esto repercutira en eficiencia? Porque no usaron una tabla grande y a punta de CSS con imagenes en background armar un mapa?. La razon mas obvia que se me viene a la mente es porque deben de estar usando cacheo de imagenes en el servidor para hacerlo mas rapido. Es conocido que mientras menos cosas mandes al cliente ( asi sean pequeñas) mas rapido es la comunicacion entre el servidor y el navegador.Entonces mandar un mapa grande y peasdo, en lugar de pequeñas secciones de mapa, agilizan la carga del juego. Es por esta razon tambien que por ejemplo ponen la mayoria del codigo javascript en un solo archivo en lugar de tenerlos todos separados en varios archivos.

En Resumen Ikariam es un juego web que lo pondria a medio camino entre Web Dinamica circa los 90 y las Web2.0. Su uso de javascript y ajax no son excesivos , pero tampoco el javascript usado es no obstrusivo, osea sin javascript la aplicacion no funciona. Quizas la aplicacion no necesite aferrarse tanto a tecnicas Web2.0 como el Drag&Drop, ni la hace menos divertida no tenerlo.

Los graficos y el uso de CSS son excelentes, la diagramacion y estructura de la pagina web es casi perfecta, y es una de las cosas que me impresiono mas del juego.

Ahora, el juego, como lo comentabamos en el Post anterior, no esta terminado, existen varios errores y bug que estan documentados por ejemplo en los foros de sus respectivos servidores. Pero el juego es estable y jugable, aunque lo que es servicio tecnico, al menos para el server donde juego, deja mucho que desear.

Esto seria todo y esten atentos a mas reseñas y mi palabra inventada Retrodebugging ;). A falta de mas asi voy a clasificar los juegos donde haga esto. Saludos

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

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

8 comentarios:

  1. Eversor dijo...

    Hola , primero , me ha gustado mucho tu blog , yo soy programador (ahora todo el mundo que sabe algo se cree programador XD) , y estoy pensando en desarrollar un juego que en algo se parecerá al ikariam , pero en esta entrada hay una cosa que no entiendo , cuando dices que es mejor enviar una cosa grande y pesada que muchas y ligeritas porque va mas rápido , eso no me cuadra , lo podrías explicar un poco mejor?

    gracias

  2. Jose Carlos Tamayo dijo...

    Que tal Eversor. Ikariam es una buena eleccion para hacer un juego parecido. Sobre lo de envio de un solo objeto es masomenos simple. Cada peticion de datos (imagenes,html,videos)tiene adjunto datos extras como la cabecera que son pocos pero se van acumulando. Ademas cada peticion es un nuevo hilo que se abre en el servidor, por lo que es mas proceso en el lado servidor.

    Entonces en teoria es mejor mandar una sola peticion para que tu server procese menos cabeceras y se abran menos hilos.

    Ahora como en todo tipo de programacion, solo mejora la performance si realmente lo necesitas. Paginas como Google o Yahoo utilizan tecnicas como CSS sprites para tener menos peticiones en sus servers porque tienen una tremenda cantidad de usuarios. Al comienzo es mejor enfocarse en que funcione el juego y despues empezar a mejorar su velocidad. Saludos

  3. Eversor dijo...

    ok , muchas gracias ;)

    seguire preguntando por otros sitios del blog que me esta resultando muy interesante , ademas de que respondes muy rapido (te has ganado a un pesado xD)

  4. Jose Carlos Tamayo dijo...

    Jeje pesados son justo los que faltan por aqui, asi que bienvenido tus comentarios, bien interesantes aunque me hacen revisar mi teoria ^^

  5. eversor dijo...

    ya que estamos , dos cositas , como se hace para ver las peticiones xml , porque yo por mucho que intento , lo unico que he conseguido es engancharme al ikariam XD

    y lo segundo , si te creaste una cuenta en dexgame , intente retrodebuggearla , ya veras :b

  6. Jose Carlos Tamayo dijo...

    Dos respuestillas entonces^^. Weno para chekear lo que devuelve un AJAX uso al Firebug en modo consola por supuesto solo funciona en modo consola. Umm creo que Firebug va a estar para el menu de mi proximo Post.

    Lo otro jeje creo que le hare un retrodebuggin tambien aprovechando el time

  7. Anónimo dijo...

    ola puedes dejar el html como un video imajen de ikariam para tener un juego ke publicar en mi web plz te lo agradeceria

  8. Jose Carlos Tamayo dijo...

    Hola Anonimo, graciosamente no te entendi nada ( o no se a que te refieres con un video 'imajen' ) , y tampoco has dejado tu Pagina Web ni forma de cotacto.

    Weeeeno si deseas ver el HTML de ikariam, te sugiero te instales el Firebug. Aqui tengo un tutorial de eso .

    Saludos

Publicar un comentario