Una charla explicativa de como podemos transladar ténicas y patrones de diseño utilizado en el desarrollo de videojuegos en el ámbito del desarrollo web apuntado a dispositivos móviles.
JSConf Argentina 2012 - Como el Desarrollo de Videojuegos puede ayudarnos a volvernos mejores Desarrolladores Web por Andres Pagella
1. Como el Desarrollo de
Videojuegos puede ayudarnos
a volvernos mejores
Desarrolladores Web
M. Andrés Pagella (@mapagella) - http://www.andrespagella.com
81. Usar HTML/CSS para dibujar la GUI
Autodesk Scaleform GFX (UDK) - Adobe Flash/AS2
82. Object Pooling
// Maximum number of sound objects allowed in the pool
var MAX_PLAYBACKS = 3;
var globalVolume = 0.3;
function SoundUtil()
{
! this.maxPlaybacks = MAX_PLAYBACKS;
! this.audioObjects = []; // Pool of audio objects available for reutilization
}
SoundUtil.prototype.play = function(file, startTime, duration, volume, loop)
{
! // Get an audio object from pool
! var audioObject = this.getAudioObject(),
! ! suObj = this;
! /**
! * No audio objects are available on the pool. Don't play anything.
! * NOTE: This is the approach taken by toy organs, alternatively you
! * could also add objects into a queue to be played later on
! */
! if (audioObject !== null) {
! ! audioObject.obj.loop = loop;
! ! audioObject.obj.volume = volume;
! ! for (var i = 0, l = file.length; i < l; ++i) {
! ! ! if (audioObject.obj.canPlayType(file[i][1]) === "probably" ||
! ! ! ! audioObject.obj.canPlayType(file[i][1]) === "maybe") {
! ! ! ! audioObject.obj.src = file[i][0];
! ! ! ! audioObject.obj.type = file[i][1];
! ! ! ! break;
! ! ! }
! ! }
! ! var playBack = function()
! ! {
! ! ! // Remove the event listener, otherwise it will keep getting called over and over agian
! ! ! audioObject.obj.removeEventListener('canplaythrough', playBack, false);
! ! ! audioObject.obj.currentTime = startTime;
! ! ! audioObject.obj.play();
! ! ! // There's no need to listen if the object has finished playing if it's playing in loop mode
! ! ! if (!loop) {
! ! ! ! setTimeout(function() {
! ! ! ! ! audioObject.obj.pause();
! ! ! ! ! suObj.freeAudioObject(audioObject);
! ! ! ! }, duration);
! ! ! }
! ! }
! ! audioObject.obj.addEventListener('canplaythrough', playBack, false);
! }
}
83. Object Pooling
SoundUtil.prototype.getAudioObject = function()
{
! if (this.audioObjects.length === 0) {
! ! var a = new Audio();
! ! var audioObject = {
! ! ! id: 0,
! ! ! obj: a,
! ! ! busy: true
! ! }
! ! this.audioObjects.push (audioObject);
! ! return audioObject;
! } else {
! ! for (var i = 0, l = this.audioObjects.length; i < l; ++i) {
! ! ! if (!this.audioObjects[i].busy) {
! ! ! ! this.audioObjects[i].busy = true;
! ! ! ! return this.audioObjects[i];
! ! ! }
! ! }
! ! // No audio objects are free. Can we create a new one?
! ! if (this.audioObjects.length <= this.maxPlaybacks) {
! ! ! var a = new Audio();
! ! ! var audioObject = {
! ! ! ! id: this.audioObjects.length,
! ! ! ! obj: a,
! ! ! ! busy: true
! ! ! }
! ! ! this.audioObjects.push (audioObject);
! ! ! return audioObject;
! ! } else {
! ! ! return null;
! ! }
! }
}
SoundUtil.prototype.freeAudioObject = function(audioObject) {
! for (var i = 0, l = this.audioObjects.length; i < l; ++i) {
! ! if (this.audioObjects[i].id === audioObject.id) {
! ! ! this.audioObjects[i].currentTime = 0;
! ! ! this.audioObjects[i].busy = false;
! ! }
! }
}
84. Evitar instanciaciones en loops
// Pseudocódigo
while (activo()) {
! var obj = new Ejemplo(); // Ouch
! obj.configurar();
! obj.hacerAlgo();
}
Casos de uso: Emisión de Partículas, Update loops
85. Mantener la lógica separada de la rutina de pintado
// Pseudocodigo
function actualizarVista()
{
! if (pasaAlgo()) {
! ! for (var i = 0, l = objetosEnLista.length; i < l; ++i) {
! ! ! hacerAlgo();
! ! }
! } else {
! ! for (var i = 0, l = elementos.length; i < l; ++i) {
! ! ! hacerOtraCosa();
! ! }
! }
!
! pintarEnPantalla();
}
86. Mantener la lógica separada de la rutina de pintado
// Pseudocodigo
function ejecutarLogica()
{
! if (pasaAlgo()) {
! ! for (var i = 0, l = objetosEnLista.length; i < l; ++i) {
! ! ! hacerAlgo();
! ! }
! } else {
! ! for (var i = 0, l = objetosEnLista.length; i < l; ++i) {
! ! ! hacerOtraCosa();
! ! }
! }
}
function actualizarVista()
{
! pintarEnPantalla();
}
87. Tablas de Valores
Math.sqrt(<número>)
Math.pow(<número>, <potencia>)
91. Ser conciente de la memoria utilizada por un objeto
grilla[114422, 1233] = new ObjetoEjemplo();
92. Ser conciente de la memoria utilizada por un objeto
grilla[114422, 1233] = new ObjetoEjemplo();
https://github.com/andrespagella/Making-Isometric-Real-time-Games/
blob/master/examples/astar.js