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.

1. Como el Desarrollo de
Videojuegos puede ayudarnos
a volvernos mejores
Desarrolladores Web
M. Andrés Pagella (@mapagella) - http://www.andrespagella.com

3. < 2003

4. < 2003

5. < 2003

6. < 2003

7. ~2000

8. 2004

9. 2005

10. Mac OSX 10.4 Tiger
2005

11. 2007

12. 2007

19. APUNTAR AL ‘MINIMO COMUN DENOMINADOR’ (?)

20. APUNTAR AL ‘MINIMO COMUN DENOMINADOR’ (?)
Si anda bien en este, anda bien en todos.

21. PARA TENER EN CUENTA...

22. PARA TENER EN CUENTA...
Tiempo de Carga

23. PARA TENER EN CUENTA...
Tiempo de Carga
Velocidad de Rendering

24. PARA TENER EN CUENTA...
Tiempo de Carga
Velocidad de Rendering
Responsividad de la UI

25. Video Juegos

26. Video Juegos

27. OPTIMIZACIÓN DE TIEMPOS DE CARGA

28. OPTIMIZACIÓN DE TIEMPOS DE CARGA
Buen download bandwidth, pésima latencia

29. OPTIMIZACIÓN DE TIEMPOS DE CARGA
Buen download bandwidth, pésima latencia
Acomodar la mayor cantidad de información
en el menor espacio posible

30. LAZY LOAD

31. Spritesheets / Atlas & Soundsheets (AKA Audio Sprites)

32. Spritesheets / Atlas & Soundsheets (AKA Audio Sprites)

33. Spritesheets / Atlas & Soundsheets (AKA Audio Sprites)

34. Spritesheets / Atlas & Soundsheets (AKA Audio Sprites)
+

35. Spritesheets / Soundsheets (AKA Audio Sprites)
Sound Manager 2 (Legacy support con fallbacks)
http://www.schillmania.com/projects/soundmanager2/
Zynga Jukebox (Optimizado para Mobile)
https://github.com/zynga/jukebox

36. Heightmaps

37. Heightmaps

38. Heightmaps

39. Heightmaps

40. Heightmaps
map.gif (150 bytes)

41. Heightmaps
map.gif (150 bytes)

42. Heightmaps

43. Heightmaps
var Tile = {
! WALL: {
! ! index: 0,
! ! identifier: 'ffffff'
! },
! RED: {
! ! index: 1,
! ! identifier: '00ff'
! },
! BLUE: {
! ! index: 2,
! ! identifier: 'ff00'
! }
}

44. Heightmaps
Level.prototype.loadMap = function (map) {
// Create an HTML5 Canvas object, define the 2D Context and create an empty array to store the tileData
var c = this.c,
cnv = document.createElement("canvas"),
ctx = cnv.getContext("2d"),
idata = null,
tileData = [];
// Set the size of the map
this.mapData.size = {
x: map.width,
y: map.height
}
var Tile = { // Adjust the size of the canvas to match the size of the image
! WALL: { cnv.width = map.width;
cnv.height = map.height;
! ! index: 0, // Paint the map on the new canvas
! ! identifier: 'ffffff' ctx.drawImage(map, 0, 0);
! }, // Read the pixel data array
idata = ctx.getImageData(0, 0, cnv.width, cnv.height);
! RED: { // Start cycling through all the pixels of the image
! ! index: 1, for (var i = 0, my = map.height; i < my; ++i) {
for (var j = 0, mx = map.width; j < mx; ++j) {
! ! identifier: '00ff' // Convert the RGB values to hex
var r = (idata.data[((mx * i) + j) * 4]).toString(16),
! }, g = (idata.data[((mx * i) + j) * 4 + 1]).toString(16),
b = (idata.data[((mx * i) + j) * 4 + 2]).toString(16),
! BLUE: { hex = r + g + b;
! ! index: 2, tileData[j] = tileData[j] || [];
! ! identifier: 'ff00' switch(hex) {
case Tile.WALL.identifier:
! } tileData[j][i] = Tile.WALL.index;
break;
} case Tile.BLUE.identifier:
tileData[j][i] = Tile.BLUE.index;
this.mapData.base.blue = {x: j, y: i};
break;
case Tile.RED.identifier:
tileData[j][i] = Tile.RED.index;
this.mapData.base.red = {x: j, y: i};
break;
}
}
}
// Replace the level data with the values of the tileData matrix.
this.mapData.data = tileData;
};

45. Otras consideraciones...

46. Otras consideraciones...
Background Loading
Optimizaciones del lado del Servidor
Optimizaciones de Imágenes
Templates
etc.

47. OPTIMIZACIÓN DE OPERACIONES DE PINTADO EN PANTALLA

48. OPTIMIZACIÓN DE OPERACIONES DE PINTADO EN PANTALLA
Extremadamente “caras” en dispositivos móviles

49. OPTIMIZACIÓN DE OPERACIONES DE PINTADO EN PANTALLA
Extremadamente “caras” en dispositivos móviles
Consejo: Pensar “masivamente”

51. VIEWPORT

52. VIEWPORT

53. for (var i = 0; i < 3; ++i) {
for (var j = 0; j < 3; ++j) {
VIEWPORT pintarCelda();
}
}

54. VIEWPORT

55. for (var i = 0; i < 3; ++i) {
for (var j = 0; j < 3; ++j) {
if (dentro_de_viewport()) {
VIEWPORT pintarCelda();
}
}
}

56. VIEWPORT

57. 1.000.000 Filas
VIEWPORT x
1.000.000 Columnas

58. var scroll = { x: 0, y: 0 },
! tile = { width: 32, height: 32 },
! tileMap = inicializarTileMap();
function pintar(c, canvas) {
! c.fillStyle = '#FFFFFF';
! c.fillRect (0, 0, canvas.width, canvas.height);
! c.fillStyle = '#000000';
! var startRow = Math.floor(scroll.x / tile.width),
! ! startCol = Math.floor(scroll.y / tile.height),
! ! rowCount = startRow + Math.floor(canvas.width / tile.width) + 1,
! ! colCount = startCol + Math.floor(canvas.height / tile.height) + 1;
! for (var row = startRow; row < rowCount; ++row) {
! ! for (var col = startCol; col < colCount; ++col) {
! ! ! var tilePositionX = tile.width * row,
tilePositionY = tile.height * col;
! ! ! tilePositionX -= scroll.x;
! ! ! tilePositionY -= scroll.y;
! ! ! if (dentro_de_viewport()) {
! ! ! ! pintarCelda();
! ! ! }
! ! }
! }
}

62. Dirty Rectangles / ATR (Adaptive Tile Refresh)

63. Dirty Rectangles / ATR (Adaptive Tile Refresh)

64. Layering, Compositing, etc...

65. Layering, Compositing, etc...
Static Layer

66. Layering, Compositing, etc...
Static Layer Animated Layer

67. Layering, Compositing, etc...

68. Layering, Compositing, etc...

69. Layering, Compositing, etc...

70. Layering, Compositing, etc...

71. Layering, Compositing, etc...

72. Layering, Compositing, etc...

73. Layering, Compositing, etc...

74. Layering, Compositing, etc...

75. Responsividad de la UI

76. Usar HTML/CSS para dibujar la GUI

77. Usar HTML/CSS para dibujar la GUI
Rovio/Google (Angry Birds GWT port), I’m looking at you...

78. Usar HTML/CSS para dibujar la GUI

79. Usar HTML/CSS para dibujar la GUI
ZeptoLabs/Microsoft (Cut the Rope), yay!

80. Usar HTML/CSS para dibujar la GUI

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>)

88. Tablas de Valores

89. Tablas de Valores

90. Tablas de Valores
var raizCuadrada = arrayRaices[<numero>];

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

93. "Es divertido hacer lo imposible."
Walt Disney

94. ¡Gracias!
@mapagella - https://github.com/andrespagella/ - http://www.andrespagella.com