Buenas, hoy les vengo a publicar la tercera versión de la saga de este script que vengo desarrollando desde el inicio de IsoMap.
Como siempre, este aporte surge tras novedades en IsoMap y como ya sabrán en el otro tema, he querido empezar a trabajar usando Canvas, ¿Por que?, para hacer mas optimo el desempeño de IsoMap y por optimo en este caso me refiero a velocidad y soporte ya que en versiones pasadas no he podido lograr tras ejecutar un mapa de mas de 20x20 sin que tarde unos segundos en cargarlo por la simple razón de que son elementos separados, en cambio con canvas seria únicamente un solo elemento.
A continuación les presento el código de ejemplo que quise crear en canvas para ver que tan rápido podía ejecutar un mapa, en este caso lo probé con una dimensión de 100x100 y cargo mas rápido que si hubieras puesto a cargar un mapa de 5x5 en versiones pasadas.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
/*!
* Build de Baldosas en Espacios Isométricos - jQuery - Canvas
*
* Copyright 2012, SoyJoaquin. (-Null-)
* Todos los derechos reservados.
* http://phperos.net
*
* Contacto:
* Email: hgcproductions@hotmail.com
* Skype: SoyJoaquin.
*/
var piso;
var emX = 0; var emY = 0;
var baldosa = new Image();
var balH = 32; var balW = 64;
$(document).ready(function (){
baldosa.src = "baldosa.png";
piso = document.getElementById('base').getContext('2d');
loadBaldosa(30, 30);
});
function loadBaldosa(Cx, Cy) {
for(x=0;x<Cx;x++) {
for(y=0;y<Cy;y++) {
resultadoX = (x * (balW / 2)) - (y * (balW / 2)) + emX;
resultadoY = (x * (balH / 2)) + (y * (balH / 2)) + emY;
piso.drawImage(baldosa, resultadoX, resultadoY);
}
}
}
</script>
</head>
<body>
<canvas id="base" width="800" height="600"></canvas>
</body>
</html>
Espero que les sea de utilidad.
Saludos.
