Mmorpg Juego Web

Nuevo juego de navegador

Elite-Forces Logo

ELITE-FORCES🎖️

Diseñando un Juego de Navegador

Me encanta diseñar PBBG, allá por 2008 tuve bastante éxito como diseñador de juegos con algunos títulos como: Prison Struggle, Music Battle, Rescreatu, Silent Vendetta y muchos otros juegos de navegador. Desafortunadamente muchos de ellos están muertes, abandonados o los diseños se modificaron y apenas son reconocibles. La buena noticia es que parece que el  retro gaming está de moda! Así que tengo una buena oportunidad para darle un poco de amor a la industria del gaming y aplicar las nuevas tendencias de diseño a los MMORPG de toda la vida. Me contrataron para diseñar un PBBG de guerra llamado Elite-Forces.

1.- Abocetando el Layout del PPBG

Mi trabajo consiste en diseñar 2 plantillas web diferentes: página de inicio y página interna. Usé Google images e imágenes de trabajos previos para componer un boceto que mostrar al cliente. Por supuesto, en el diseño acabado reemplazaré cada imagen con ilustraciones personalizadas.

Página inicio videojuego
Página inicio del juego
Página interna del juego
Página interna del juego

En este paso del proceso, no me dentro demasiado en los detalles, simplemente hago rodar la bola y recabo feedback del cliente. Ni siquiera tengo muy clara la dirección final… lo realmente importante es acercarse cada vez más al resultado final, en la mínima cantidad de tiempo. Invertí 2 horas en este paso. Después de varias rondas de correcciones, pasamos al siguiente paso.

2.- Definiendo el Estilo de los Avatares

Una vez los bocetos de los personajes están aprobados, por fin tengo una composición que funciona tanto para la página de inicio como para las páginas internas. Así que tras sólo 3  horas de trabajo estamos listos para crear la ilustración final.

Boceto Inicial
Boceto Inicial
Correcciones del Cliente
Correcciones del Cliente
Boceto Final
Boceto Final
Diseño de Personaje
Diseño de Personaje

3.- Dibujo Final del Primer Avatar

Invertí unas 7 horas desde el boceto del personaje hasta la línea final… el equipamiento era muy detallado, en el siguiente personaje, dibujaré las formas principales y añadiré detalle directamente con el color, así ahorraré mucho tiempo. Observa que dibujé la máscara y el casco en capas diferentes, así puedo ofrecer al cliente cierto nivel de personalización. Haz click para ver los detalles

Soldado de Asalto
Soldado de Asalto
Casco Táctico
Casco Táctico
Mascara y Casco
Mascara y Casco
Mascara Antigás
Mascara Antigás

4.- Color Final del Primer Avatar

Una vez que el dibujo y el sombreado está abocetado, aplicar el color es bastante sencillo, invertí unas 2 horas. Me decidí por un esquema de color cálido, usé una línea de color marrón para definir el tono, y tener un valor a partir del que elegir el resto de colores. Usé un esquema de iluminación de 2 focos, una luz cálida desde la izquierda y una luz fría desde la derecha. Haz click para ver los detalles.

Soldado táctico
Soldado táctico
Casco Táctico
Casco Táctico
Máscara Antigás
Máscara Antigás
Máscara y Casco
Máscara y Casco

5.- Diseño final del segundo avatar

Invertí unas 7 horas desde el boceto al acabado final, este segundo personaje fue más rápido ya que la paleta de color estaba definida. Como puedes ver en el video también re-usé algunas partes del primer personaje.

Diseño de Personaje Soldado de asalto
Diseño de Personaje Soldado de asalto

6.- Creamos el Fondo Illustrativo del Juego

Las tareas más costosas, y la que añade auténtico valor al juego están completadas, hoy trabajé en el fondo de la ilustración durante unas 3 horas más. Observa como user unas pocas siluetas planas que encajan con el look de los personajes pero no llaman demasiado la atención.

Ilustración video juego
Ilustración video juego

7.- Creamos un logo rompedor

Elite-Forces Logo
Elite-Forces Logo

Me encantan los logos cartoon pero en este caso usé una aproximación más simple ya que no quería sobrecargar el interfaz, invertí unas 4 horas más. 

8.- Diseñamos el layout del PBBG

Y éste es el paso final en mi proceso de diseño web, diseñé un interfaz ligero, estilo táctico. Usé un esquema de color cálido que encaja con la ilustración. Atractivo pero no demasiado duro para los ojos. Invertí unas 8 horas para ambas plantillas, incluyendo las correcciones del cliente. Estimo que invertí unas 40 horas para el proyecto completo. 

Pbbg Página de inicio

Y buenas noticias que me gustaría compartirles! Me contrataron para un segundo juego, esta vez sobre la Mafia en los años 20. Saludos! Sergio

Sergio Ordoñez Suanez
[email protected]

Hi there, I'm webmaster, designer and digital content creator of everything you see at SOSFactory. I love sharing my limited knowledge as more experienced designers did when I was a newbie.

2 Comments
  • Fabián Ramírez
    Posted at 08:30h, 17 August Reply

    Sergio, impresionante tu creatividad y dominio de las suites de diseño, soy fiel seguidor de tus proyectos

    • sergio ordonez
      Posted at 08:50h, 17 August Reply

      Muchas gracias Fabián, me alegro de que te guste mi trabajo 🙂

Post A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares