5 Buenas Prácticas Para El Desarrollo De Juegos En HTML5
HTML5 es un poderoso estándar para la web, el cual no solo ha llegado para mejorar la interactividad de los usuarios con el contenido que comúnmente se puede encontrar en la internet, sino también, para mejorar el desarrollo de juegos.
Las ventajas de usar HTML5 para el desarrollo de juegos, es impresionante, es posible usarlo para cualquier finalidad, en cualquier dispositivo, por lo cual ya no se tendrá la restricción que tenían los juegos desarrollados en Flash. En la web se puede encontrar una variedad de Juegos de zombies vs plantas, como un ejemplo del desarrollo de estos en HTML5.
1. Use Un FrameWork
Existe un montón de código repetitivo que cada juego necesita para poder funcionar correctamente. Afortunadamente, usted no tienes que escribir todo el código desde cero. Actualmente hay una gran variedad de Framework que te permite enfocarte en la lógica del juego sin tener que preocuparse por todos los pequeños detalles que son necesarios para que el juego funcione.
Existe una variedad de Framework para el desarrollo de juegos en HTML5, por ejemplo ImpactJS, está diseñado para ayudar con casi todos los aspectos del proceso de desarrollo de juegos, mientras que framework, como EaselJS se centran principalmente en el lado de los gráficos. Finalmente, eres el encargado de elegir el mejor framework para el desarrollo, el cual se adapte mejor a tus necesidades.
A continuación puedes ver un ejemplo del código de ImpactJS:
[js]ig.module(
‘monster’
)
.requires(
‘impact.game’,
)
.defines(function(){
Monster = ig.Entity.extend({
eyes: 42
});
});[/js]
2. Primero Los Dispositivos Y Pantallas Táctil De Tamaño Pequeño
Una de las ventajas de usar HTML5, es que no existe gran problema en la compatibilidad de dispositivos y navegadores, mucho menos en la resolución del tamaño de las pantallas. Este uso entre navegadores, puede ser tan sencillo como el uso del Viewport en el código del HTML:
[html]<meta name="Viewport"
content="width=device-width; user-scaleable=no; initial-scale=1.0" />[/html]
3. Guarde Automáticamente El Progreso Del Jugador
El desarrollo de juegos en HTML5 tiende a brindar las mismas características de un juego de escritorio. La mayoría de datos que manejan, se almacenan en la memoria RAM, por lo que si no programas correctamente el almacenamiento de los datos en el dispositivo, los avances que haya realizado el usuario se pierden!
Afortunadamente, puedes encontrar APIs o funciones de Javascript que te pueden ser de gran utilidad al momento de almacenar los avances de los jugadores. A continuacion puedes encontrar un breve ejemplo de como hacerlo en formato JSON:
[js]
function saveState(state) {
window.localStorage.setItem("gameState", JSON.stringify(state));
}
function restoreState() {
var state = window.localStorage.getItem("gameState");
if (state) {
return JSON.parse(state);
} else {
return null;
}
}[/js]
4. Utilice Un Perfilador
El uso de imagenes y de la velocidad en las animaciones ya no es un problema. Actualmente, los navegadores son potentes, y han evolucionado para aguantar la carga fps de los juegos.
Por suerte, existe una herramienta de análisis en Internet Explorer 9 (o 10 para el caso) que te puede ser de gran ayuda, presione la tecla F12 para abrir las herramientas de desarrollo. Seleccione la pestaña «Profiler» y pulsa «Start profiling».
No confíes ciegamente en sus instintos, aunque pueda parecer algo lento, en realidad podría ejecutar bastante rápido con los motores de JavaScript de hoy. El mejor enfoque para la optimización es volver a perfil a menudo y siempre medir si los cambios realizados en el código en realidad tienen un impacto positivo en el rendimiento.
5. Sea Creativo!
HTML5 te da una gran ventaja para el desarrollo de juegos. Puedes recrear aquellos interesante juegos de escritorio en HTML5, y así brindar la posibilidad de integrar características como tabla de puntuaciones en linea, competencia entre jugadores, etc.
Puedes desarrollar otros juegos, y dar rienda suelta a tu creatividad.