tag:blogger.com,1999:blog-72893132348845685912024-03-21T12:50:54.146-03:00Haxe en EspañolInformación sobre esta herramienta en nuestro idioma.Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.comBlogger35125tag:blogger.com,1999:blog-7289313234884568591.post-85607956412690666872015-06-22T10:11:00.000-03:002015-06-22T10:11:36.300-03:00Eventos Personalizados<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi162vAYO3UtxHylyTa1CJXrmLR9A4sELIupyZGGgaT8oRqqAblVu9lgj4_D95XYP0vgHOM-chlP3HOt3U4gOLss3tGmQXe09bfr0PzTEp1I8pbrnHwruVdHkicmUPQKC9JTDYO-iq9T4M/s1600/bigIcon-online.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi162vAYO3UtxHylyTa1CJXrmLR9A4sELIupyZGGgaT8oRqqAblVu9lgj4_D95XYP0vgHOM-chlP3HOt3U4gOLss3tGmQXe09bfr0PzTEp1I8pbrnHwruVdHkicmUPQKC9JTDYO-iq9T4M/s200/bigIcon-online.png" width="200" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Ya hemos visto en varias oportunidades como se manejan eventos definidos bajo ciertos parámetros que se activan o “disparan” en determinadas situaciones (sonidos, presión de teclas, cargas, mouse, frames, etc).</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Pero qué pasa si necesito extender la funcionalidad de los eventos o crear eventos propios? Veamos:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b id="docs-internal-guid-2adf1f5c-1b43-0ee0-90c3-86a5e020b959" style="font-weight: normal;"></b><br />
<a name='more'></a><b id="docs-internal-guid-2adf1f5c-1b43-0ee0-90c3-86a5e020b959" style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">En esta primera parte vamos a ver como crear nuestros propios eventos y llamarlos desde varios puntos de un programa. Al mismo tiempo, veremos como la librería Actuate manipula un archivo de sonido. En la próxima entrega veremos un ejemplo de cómo extender la funcionalidad de los eventos.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTtz1B9Du77IesyRqDDVeLxCtCGN0KZNAUze_1j7pMcpV1LNVYUtV9capfkTJQx-_l43TIENXgGeHNHaNq4b2TiZeNgmMAhOuuIwqIohGQEXb8-P5QcoZkyPnjiFZFfeHuMdkbM3Tlye4/s1600/ejemplo1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTtz1B9Du77IesyRqDDVeLxCtCGN0KZNAUze_1j7pMcpV1LNVYUtV9capfkTJQx-_l43TIENXgGeHNHaNq4b2TiZeNgmMAhOuuIwqIohGQEXb8-P5QcoZkyPnjiFZFfeHuMdkbM3Tlye4/s320/ejemplo1.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Nuestro ejemplo en acción</span></td></tr>
</tbody></table>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Estructura del Ejemplo:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLXdidxE9Gtagn_O92-uxYlWRS_32qFzTj-n4cFfwtf5GY4HQQeMw5aSmllWGhiKjSvc-KQfyh5E6HFhVuAY8REuIbG6hYaBLbuCUQnieLQgK-akx322wkfpJqecvDvv1yptkvPZaRxAM/s1600/estructura.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLXdidxE9Gtagn_O92-uxYlWRS_32qFzTj-n4cFfwtf5GY4HQQeMw5aSmllWGhiKjSvc-KQfyh5E6HFhVuAY8REuIbG6hYaBLbuCUQnieLQgK-akx322wkfpJqecvDvv1yptkvPZaRxAM/s320/estructura.png" width="226" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Estructura del Ejemplo</span></td></tr>
</tbody></table>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Para que se entienda mejor veamos primero cómo es su estructura:</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Una clase principal o Main, donde declararemos nuestros eventos y que va a alojar el código necesario para que todo funcione.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tendremos una clase llamada Cargador que se va a ocupar de cargar nuestros recursos (audio e imàgenes).</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Por último, una clase menu para contener en ella todo lo relacionado a la interface del menú (recuadros, botones, etc).</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Al iniciar el programa se cargarán los archivos: La imágen por un lado y el archivo de audio por el otro. </span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Luego está el contenedor que proporciona los límites de la pantalla y a su vez carga la imágen proporcionada por Cargador.</span><span style="font-family: Arial; font-size: 14.6666666666667px; line-height: 1.38; white-space: pre-wrap;"> </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Un poco más abajo tenemos la declaración de la nueva instancia de la clase menu y la ubicamos en la pantalla (centro).</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDp8lrvRCkZA4__p1qJBQYv_LBYZGAFIEmvH_8WOUJJIfDwUL30FYD-FSCxvYmC4NTK01Ye2plSzW8hWIt-etSbx8MOsBtGf2_ENz16ivww8zdTRJIasbhYMilEC5r0s77ngxBhcrsaG4/s1600/codigo1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDp8lrvRCkZA4__p1qJBQYv_LBYZGAFIEmvH_8WOUJJIfDwUL30FYD-FSCxvYmC4NTK01Ye2plSzW8hWIt-etSbx8MOsBtGf2_ENz16ivww8zdTRJIasbhYMilEC5r0s77ngxBhcrsaG4/s320/codigo1.png" width="320" /></a></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Por último, están nuestros cuatro eventos propios:</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5tf38t4Yxedj1_4LlFNfZkFv5vw8Mv2pHjVgws73uUs-z5P_aaPKqxUz6nfcZxgutQgTYuLgaKGRE2NHjoE6GahwNng2Sz0ZudRoD7nSyHtDh5lRSFYYIZIbkkwQfiYHkweXucHMxYZc/s1600/codigo2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5tf38t4Yxedj1_4LlFNfZkFv5vw8Mv2pHjVgws73uUs-z5P_aaPKqxUz6nfcZxgutQgTYuLgaKGRE2NHjoE6GahwNng2Sz0ZudRoD7nSyHtDh5lRSFYYIZIbkkwQfiYHkweXucHMxYZc/s1600/codigo2.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">La adición de estos eventos no difiere de los más "comunes"</span></td></tr>
</tbody></table>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">En este caso (y con fines didácticos digamos) dos de ellos son declarados en la clase Main, pero “viven” o su código se encuentra alojado en la clase menu. Lo ideal no es cruzar declaraciones y código con otras clases en nuestros proyectos, pero quería dejar en claro que puede hacerse aunque en lo personal creo que es engorroso. En la próxima entrada veremos cómo deberían de tratarse. Aquí lo importante es conocer cómo se declaran y su sintaxis básica.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">La clase menu es simplemente un contenedor para nuestros dos botones y en este caso particular las dos funciones de los eventos “Remover” y “Activar”.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Funcionamiento:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Bastante simple. El primer botón activa y desactiva la música de fondo, pero lo hace de una forma especial, dada por Actuate en este caso que crea el efecto de “desvanecer” (fade out) en un lapso de 3 segundos. Si se oprime nuevamente, la música retorna de la misma forma (fade in).</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4pZL63tcguul9wsIYVZlfCk46rbe-ZYvQstwqw1PeeZ1Cb0BUtNcC0pZiznsm5rg-MlNlzRxxF2cVNd9BiKWZkhZXWbUU5yfgm1aA4p-dS13EgNoRirwsQIOwwXX-z9o6STQIHzATXU4/s1600/esquema.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="164" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4pZL63tcguul9wsIYVZlfCk46rbe-ZYvQstwqw1PeeZ1Cb0BUtNcC0pZiznsm5rg-MlNlzRxxF2cVNd9BiKWZkhZXWbUU5yfgm1aA4p-dS13EgNoRirwsQIOwwXX-z9o6STQIHzATXU4/s320/esquema.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Manejo de eventos</span></td></tr>
</tbody></table>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El segundo botón, mueve el menú de un lado al otro sin más.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Toda la lógica que se encuentra definida para el primer botón es para asegurarnos de que al hacer “click” repetidas veces sobre él, no se disparen múltiples eventos.</span></div>
<b style="font-weight: normal;"><br /></b>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4iI0ZiAgSF1VWULtwQX_Pj3EMeIX6QpV9gAoXc28jnydC9yKRdFDvgRMEsKNjFMEPLioplCglExad4zq8_lAV4u24dY3gHUTI4PHHh2WLnbwrpg-LrSggLid3OWsAJRTG2u9SU5Euaog/s1600/codigo3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4iI0ZiAgSF1VWULtwQX_Pj3EMeIX6QpV9gAoXc28jnydC9yKRdFDvgRMEsKNjFMEPLioplCglExad4zq8_lAV4u24dY3gHUTI4PHHh2WLnbwrpg-LrSggLid3OWsAJRTG2u9SU5Euaog/s320/codigo3.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Un "mute" que no es abrupto..lo mismo que el "continue"</span></td></tr>
</tbody></table>
<b style="font-weight: normal;"><br /></b>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Es un silencio de música “especial” ya que no lo hace de forma abrupta. Además, al volver a activarse no lo hace reiniciando el archivo de música, sino que continúa desde el último punto reproducido.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El boton “Deslizar” no hace mucho, pero puede observarse como Actuate trabaja para mover los objetos. Los dos cuadros de texto se van compensando junto con los recuadros al animarse y ello provoca un efecto no deseado de compensación; Sólo para que lo tengan en cuenta.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilDfmBAr4TBa3cqZ-PaHtofpWFHkqhWt-V-pIKaZs_p3jBArhHtlEN0Q4JbKM4Yzdi8ntWA_g_bsWYlLVtI9b4wn8Nn17zsRllkqi5r5NrAVj2xhTe5mokC7OS7AN1ziLuymbIF1IlYTs/s1600/desliz.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilDfmBAr4TBa3cqZ-PaHtofpWFHkqhWt-V-pIKaZs_p3jBArhHtlEN0Q4JbKM4Yzdi8ntWA_g_bsWYlLVtI9b4wn8Nn17zsRllkqi5r5NrAVj2xhTe5mokC7OS7AN1ziLuymbIF1IlYTs/s400/desliz.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Menu deslizado a la izquierda y sus efectos no deseados en el texto</span></td></tr>
</tbody></table>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 14.666666666666666px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<br />
<span style="font-family: Arial; font-size: 14.6666666666667px; vertical-align: baseline; white-space: pre-wrap;"><a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/Eventos" target="_blank">Código fuente y más aqu</a>í.</span><br />
<span style="font-family: Arial; font-size: 14.6666666666667px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<br />Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-23966328917189161312015-05-30T10:28:00.000-03:002015-05-30T10:28:00.791-03:00Actuate: Segunda Parte<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr47SLysnqUZC8PQ9FzDfln5sFn21E8m9wOwMsuOlQWHY7TQmOeiERJQbIDDK1iGVXi7VdziuKsjljBvLnvg_pAR5ZKpO9focujs97xMyVYh1Dm9QVo1Eh1RmKoV_dWKSnKE_-sUM9y54/s1600/porta.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr47SLysnqUZC8PQ9FzDfln5sFn21E8m9wOwMsuOlQWHY7TQmOeiERJQbIDDK1iGVXi7VdziuKsjljBvLnvg_pAR5ZKpO9focujs97xMyVYh1Dm9QVo1Eh1RmKoV_dWKSnKE_-sUM9y54/s320/porta.jpg" width="320" /></a></div>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">En la entrada anterior comenzamos a ver que son los tweens y el uso de Actuate para crear algunos ejemplos. Vimos la sintaxis y algunas aplicaciones sencillas de esta librería con un solo sprite en pantalla. </span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Esta vez, nos acercamos a un ejemplo un poco más real, con muchos “actores” mostrándose al mismo tiempo. Veremos algunos efectos visuales en conjunto con movimiento y cómo afecta ello al rendimiento de nuestra aplicación.</span></div>
<b id="docs-internal-guid-11e197d2-a4ad-1459-e777-cc915bcbfbc4" style="font-weight: normal;"></b><br />
<a name='more'></a><b id="docs-internal-guid-11e197d2-a4ad-1459-e777-cc915bcbfbc4" style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Antes de entrar en el tema quiero aclarar que lo que van a ver forma parte de una aplicación a la cual le extraje el menú. Es por ello que quizás se vea un poco desordenada, pero en mi opinión sirve como ejemplo.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Bien, tenemos varios tweens dando vuelta aquí y diferentes técnicas de cómo usarlos.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://upload.wikimedia.org/wikipedia/commons/a/ab/Parallax.gif" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="http://upload.wikimedia.org/wikipedia/commons/a/ab/Parallax.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Efecto Parallax en acción</span></td></tr>
</tbody></table>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El fondo de pantalla no es un tween en este caso. Son 3 imágenes (nubes) que se van desplazando para crear un pseudo </span><a href="http://en.wikipedia.org/wiki/Parallax_scrolling" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">efecto Parallax</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">También tenemos que las semillas son manipuladas por este evento.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<b style="font-weight: normal;"><br /></b>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Es una buena técnica la de posicionar cualquier rutina que tenga que ver con renderización (ENTER_FRAME) por encima de las demás.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Una vez que el cielo está en movimiento y las semillas vuelan tenemos al sol:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Comenzamos definiendo un filtro que hará de brillo (glow en inglés) dado por el color 0xEDEB55 (un amarillo medio rabioso :P) Luego tenemos que el tween va a aplicar en un lapso de 5 segundos y en un radio de 40 píxeles alrededor de nuestro sprite (el sol en este caso) nuestro efecto glow.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Ni bien termine de hacer esto, va a comenzar con otro Tween para ir opacando el brillo hasta dejarlo en 1. Similar al método reflect(), pero el segundo tween difiere un poco (la intención no era hacer un “espejo” del primero).</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj494ZKWErgZNjIcL62m-QvkEmTfu_WmukwXonUy6pnOvPOXI0uvQVu6nDippfoYK-w5WF62z8B97iJbdS74Cma1LPE2CzH7fTithIXQPeUBAZivsA0bvth65tCpVgPlFB4_fX3JJpiXIo/s1600/actuate21.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="107" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj494ZKWErgZNjIcL62m-QvkEmTfu_WmukwXonUy6pnOvPOXI0uvQVu6nDippfoYK-w5WF62z8B97iJbdS74Cma1LPE2CzH7fTithIXQPeUBAZivsA0bvth65tCpVgPlFB4_fX3JJpiXIo/s320/actuate21.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Efecto de Glow en el Sol</span></td></tr>
</tbody></table>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Nuestro ejemplo posee además un evento manejado por tiempo (timer) que básicamente va a disparar varios tweens a medida que pasan los segundos:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tenemos al insecto que va a ir dando vueltas de izquierda a derecha con leves movimientos en su trayectoria.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUpPa3aw-6OSTz83e3B4bRJi_Rak8TTtA79iLnpMedMTHC2eX6z9hKTsKPMiQFcP5wKegsKWuy8-WNJ-zH84zo2xHRqqMFTIpR_L0RLngjzJ6O5h2xfzwQkN8ts-6zJDyyEan6zig5yW8/s1600/actuate26.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="139" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUpPa3aw-6OSTz83e3B4bRJi_Rak8TTtA79iLnpMedMTHC2eX6z9hKTsKPMiQFcP5wKegsKWuy8-WNJ-zH84zo2xHRqqMFTIpR_L0RLngjzJ6O5h2xfzwQkN8ts-6zJDyyEan6zig5yW8/s320/actuate26.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Sprites con dimesiones aleatorias (copos de nieve)</span></td></tr>
</tbody></table>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;">Luego tenemos el cartel: Este tween es un ejemplo de algo realmente “pesado” para el render y está basado en un difuminado de la imagen que con el paso del tiempo va tomando forma (efecto Blur inverso).</span><br />
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfvqpfsdqqG6QKy5VpwHTbXVIL_IMXW_eI82do8oJGsjeaL-zwqJTAKAlXOmD5tlmKBvlmDFmPjaZho6TYILPfxcBqZBA3MNQ-sBoR4vNHr2LbxQzeKy_2OYrJNy8BwjZTqZKfvnsbY7w/s1600/actuate22.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfvqpfsdqqG6QKy5VpwHTbXVIL_IMXW_eI82do8oJGsjeaL-zwqJTAKAlXOmD5tlmKBvlmDFmPjaZho6TYILPfxcBqZBA3MNQ-sBoR4vNHr2LbxQzeKy_2OYrJNy8BwjZTqZKfvnsbY7w/s320/actuate22.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Aplicando el Tween al cartel..la caída de los FPS es notable</span></td></tr>
</tbody></table>
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;">La clase BlurFilter permite aplicar un efecto visual de desenfoque al mostrar objetos. Un efecto de desenfoque suaviza los detalles de una imagen. </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Se pueden producir manchas que van desde un ligero efecto a un desenfoque gaussiano, una apariencia de nebulosa es como ver una imagen a través del cristal semi-opaco.</span><br />
<span style="color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Cuando la calidad de este filtro se establece en bajo, el resultado es un ligero efecto, pero cuando la calidad se establece en alto, se aproxima a un filtro de </span><a href="http://es.wikipedia.org/wiki/Desenfoque_gaussiano" style="line-height: 1.38; text-decoration: none;"><span style="color: #1155cc; font-family: Arial; font-size: 15px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">desenfoque gaussiano</span></a><span style="color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
<b style="font-weight: normal;"></b><br /><b style="font-weight: normal;"></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;">El formato es: <span style="color: blue;">BlurFilter (BlurX, BlurY, Calidad)</span></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">BlurX y BlurY son dos Float que pueden adquirir valores desde 0 a 255 y pertenecen a los enfoques horizontal y vertical respectivamente. El valor por defecto es 4. Los valores que son potencia de 2 (como 2, 4, 8, 16 y 32) están optimizados para renderizar más rápido.</span></div>
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;">Luego tenemos el parámetro Calidad (Int) y representa el número de veces que debe realizarse el desenfoque. </span><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Existen tres valores prefefinidos:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; margin-left: 25px; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.6363636363636362; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #002b36; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">BitmapFilterQuality.LOW</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; margin-left: 25px; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.6363636363636362; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #002b36; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">BitmapFilterQuality.MEDIUM</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; margin-left: 25px; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.6363636363636362; margin-bottom: 8pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #002b36; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">BitmapFilterQuality.HIGH</span></div>
</li>
</ul>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Y es lo mismo a establecer la propiedad con números (1, 2 o 3...15) y puede llegar hasta 15.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Según la documentación, un valor de 5 como no debería de traer problemas de rendimiento, pero en la práctica no recomendaría pasarlo de 3 en objetos con un tamaño que supere el 15-20% de la superficie del Stage. En el caso del ejemplo se muestra exagerado a propósito.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUwW6qat91mrGZkfT64XUQ3EQ5NpnejzaWmnuaBf22Zk1Sv5JWIisvmNojvKrPbco5423wLNWfLqyEGuAdykoequqCVB1pQcMsc1jMNgUb9hhZjzFkQMHdVJtmxhrOALrroH63zySehOg/s1600/actuate24.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="109" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUwW6qat91mrGZkfT64XUQ3EQ5NpnejzaWmnuaBf22Zk1Sv5JWIisvmNojvKrPbco5423wLNWfLqyEGuAdykoequqCVB1pQcMsc1jMNgUb9hhZjzFkQMHdVJtmxhrOALrroH63zySehOg/s320/actuate24.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Parámetros del efecto</span></td></tr>
</tbody></table>
<span style="color: black; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Se puede aplicar el filtro a cualquier objeto de visualización (es decir, objetos que</span><span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;"> se heredan de la clase DisplayObject) Algunos métodos como por ejemplo Scale(xy), Rotation, etc no están soportados y el efecto no se aplicará.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El filtro no puede utilizarse en conjunto con el método scala (width y height), o rotaciones y demás atributos. Tampoco funcionará si las dimensiones de la imágen superan las especificaciones del formato (</span><a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/BlurFilter.html#" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">en Flash</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">).</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Luego tenemos que el cielo se nubla y comienza la ventisca.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgOO6u3F3l-xHftgGDXGXsfwzPzCZ6Pb5melhwvVk9e-OwnjNh8pm3yRHJy4nWWAVAxv0D63QMqAu_EajqPWrj04qzqnPWSrcYb7u8MM97v7PAGSNS6O3zm5gJI-y-hNxt5W4J1x3lAlY/s1600/actuate23.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgOO6u3F3l-xHftgGDXGXsfwzPzCZ6Pb5melhwvVk9e-OwnjNh8pm3yRHJy4nWWAVAxv0D63QMqAu_EajqPWrj04qzqnPWSrcYb7u8MM97v7PAGSNS6O3zm5gJI-y-hNxt5W4J1x3lAlY/s320/actuate23.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Nieve cayendo</span></td></tr>
</tbody></table>
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;">Tenemos la nieve dando vueltas entonces, que no son más que unos círculos con diferentes propiedades dando vueltas en forma aleatoria (en la aplicación original, este efecto lo utilizo para mover abejas de diferentes tipos). </span><br />
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Lo importante de esto es la propiedad timer que posee Actuate. </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tenemos que por un lado se genera un número aleatorio para alimentar el evento timer, el cual al terminar crea los copos(80 en total). Una vez creado, lo ponemos en movimiento con la función Mover_Copo.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJX2nnO8d479AaKrqBQTU7Pve6avWtg9tfuFjeFwXv7yEBT7Gw6vGcoqQ1ObzlI7z47UxSzyvy8ZrYuWsklCnwgR4GmWDD4-p85JYVJmVFqJu_Od_6lzAUsAoUhW-lErrCGpoRqWbl-s/s1600/actuate25.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJX2nnO8d479AaKrqBQTU7Pve6avWtg9tfuFjeFwXv7yEBT7Gw6vGcoqQ1ObzlI7z47UxSzyvy8ZrYuWsklCnwgR4GmWDD4-p85JYVJmVFqJu_Od_6lzAUsAoUhW-lErrCGpoRqWbl-s/s320/actuate25.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Funciones para crear la "ventisca"</span></td></tr>
</tbody></table>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Esto es todo por hoy. Jueguen con los valores, los colores, velocidades...hagan que la tarjeta de video se gane el pan :P. </span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Los fuentes <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/Actuate_02" target="_blank">aquí como siempre</a>.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Un saludo.-</span></div>
<div>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-47591482415722087042015-05-30T04:36:00.000-03:002015-05-30T04:36:42.713-03:00Actuate: 10 ejemplos sencillos<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLZn7XSEiTt3pmmq8-cruZWOOP80bjFdtJHE6REWteNOfTM6EFeVyI60p0eV-4h3XlpzSExEctklfpau6TKGil64sLxCzKqWSwrj7TZYdlaLVmqzh6h_h9fZKtynzpDZNA2pfK3HUQbWs/s1600/tile_user.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLZn7XSEiTt3pmmq8-cruZWOOP80bjFdtJHE6REWteNOfTM6EFeVyI60p0eV-4h3XlpzSExEctklfpau6TKGil64sLxCzKqWSwrj7TZYdlaLVmqzh6h_h9fZKtynzpDZNA2pfK3HUQbWs/s200/tile_user.png" width="200" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Actuate es una librería originalmente creada para </span><a href="http://es.wikipedia.org/wiki/ActionScript" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">ActionScript </span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">con el objetivo de facilitar la creación y manejo de Tweens. Luego fue adaptada para su utilización con Haxe.</span></div>
<b id="docs-internal-guid-1bb0f618-82ee-ddb1-f090-ae082e399ee9" style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Fue creada y es mantenida (entre tantas otras) por </span><a href="http://www.joshuagranick.com/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Joshua Granick</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> dentro del proyecto </span><a href="https://github.com/openfl/actuate" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">OpenFL</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. Si bien nos vamos a encontrar muchas similitudes con su versión original (Para AS3), su sintaxis difiere un poco. </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></div>
<a name='more'></a><br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Pero comencemos por el principio:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Por lo general, se instala por defecto al instalar Openfl...pero pueden forzar su instalación como siempre:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">haxelib install actuate</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">e incluirla en el project.xml</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><haxelib name="actuate" /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Actuate nos permite generar y manipular </span><a href="http://es.wikipedia.org/wiki/Tweening" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Tweens</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. Un tween no solo se aplica a un gráfico o sprite en particular, también permite manipular efectos como ruidos, distorsiones, incluso sonido, pero lo veremos más adelante).</span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKr5kDLTs5MzVww6dX8sBu83cCwYZJe7IISYcNyUqzYM_CENfvLEctfYcIdAuTraZ7YmA585598YOPqyJQp1YJTe3KR_Me0Hnui1_ptWbQDGTBxOqUesRMsWijl4qu8kQHxFayyVtPl_Y/s1600/tween6.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="139" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKr5kDLTs5MzVww6dX8sBu83cCwYZJe7IISYcNyUqzYM_CENfvLEctfYcIdAuTraZ7YmA585598YOPqyJQp1YJTe3KR_Me0Hnui1_ptWbQDGTBxOqUesRMsWijl4qu8kQHxFayyVtPl_Y/s320/tween6.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Típica animación Tween</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Estas transiciones, pueden ser de dos tipos (cuando son gráficas): Espaciales o Morfológicas (o ambas al mismo tiempo).</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijD-vBVl4ONmna4DedKKsUdJLDo7TAHCEZzyTfJHKiwISL_663Yay8bXvEg4CZK5lZSFfmXozLUWHHjpQHgfqWrHXE-C5szC_sJDn0ELz5coXn9VycMLplHbqXSD24Qh18mwHANPDpPTw/s1600/tween7.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijD-vBVl4ONmna4DedKKsUdJLDo7TAHCEZzyTfJHKiwISL_663Yay8bXvEg4CZK5lZSFfmXozLUWHHjpQHgfqWrHXE-C5szC_sJDn0ELz5coXn9VycMLplHbqXSD24Qh18mwHANPDpPTw/s320/tween7.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Modificando color y aplicando filtros</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Espaciales son aquellas que mueven el objeto en el espacio (en este caso nuestra ventana) desde un punto de origen hacia un punto de destino.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Morfológicas o de forma, son aquellas que muestran transformaciones del objeto, pero sin cambiar su posición.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFW05-ZA9-HH3KikKy-XTwXbGAEvYbIVKpzRVD5OV7nCnnzy6WD_FplCbLD8PH-KH85aerbx90rDZ24103tfk2bn4rRwKKzbijNRyCkTDe4gLOyDxwy_JTAmFlObfCYh5xqBFaoOQ2Obg/s1600/tween8.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFW05-ZA9-HH3KikKy-XTwXbGAEvYbIVKpzRVD5OV7nCnnzy6WD_FplCbLD8PH-KH85aerbx90rDZ24103tfk2bn4rRwKKzbijNRyCkTDe4gLOyDxwy_JTAmFlObfCYh5xqBFaoOQ2Obg/s320/tween8.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Muchos Tweens al mismo tiempo</td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Los tweens (al menos con Actuate), son manipulados siempre siguiendo una línea de tiempo. Ello hace que sean fáciles de poner en práctica, pero en ciertas circunstancias pueden crear algún que otro problema (como veremos en la próxima entrada). Ello le permite a la librería, generar pilas o stacks de tweens para mantener el control de los mismos y que no “compitan” entre sí al momento de renderizar.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">La documentación es escasa (como siempre) y la mejor forma de aprender como se utiliza es jugando con ella un poco, así que veamos:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Ya vimos cómo instalarla y agregarla a nuestro proyecto, solo nos queda importarla:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">import motion.Actuate;</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">En el ejemplo vamos a ver 10 formas básicas de manejo de tweens y todo arranca con la creación de un simple sprite:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFqGiVe2NdebHDNjH1-NfW_ptIJRcN-0RXhte0m7FSZua3qawhb8_PwSD_9K34VpZzQYXoN-LVeKd37XV4hmrFaYh9QumRKQS0fxLnYAhCdP2Barp1j7JPgwEC2Oq0zDgdBi7MqNiqcI/s1600/tween1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFqGiVe2NdebHDNjH1-NfW_ptIJRcN-0RXhte0m7FSZua3qawhb8_PwSD_9K34VpZzQYXoN-LVeKd37XV4hmrFaYh9QumRKQS0fxLnYAhCdP2Barp1j7JPgwEC2Oq0zDgdBi7MqNiqcI/s1600/tween1.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Cualquier tipo de forma que les guste servirá de todas formas.</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Para hacerlo más fácil, los 10 ejemplos se pueden visualizar presionando las teclas del 0 al 9.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">La sintaxis general de la función es la siguiente:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Actuate.tween (</span><span style="background-color: transparent; color: red; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">MiObjeto</span><span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, </span><span style="background-color: transparent; color: #bf9000; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">tiempo</span><span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, {</span><span style="background-color: transparent; color: #6aa84f; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">accion</span><span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">: </span><span style="background-color: transparent; color: #6aa84f; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">valor </span><span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">}, </span><span style="background-color: transparent; color: #9900ff; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">overwrite</span><span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">:Bool ).</span><span style="background-color: transparent; color: #980000; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">actuador (accion1)</span><span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. </span><span style="background-color: transparent; color: magenta; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">actuador2(accion2)</span><span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">..n;</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Entonces tenemos el primer ejemplo:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdnNQ9W45SJLb49-EEXc72KXlehAmvRjncHT_EwqtI1gp49r5lnHcF6NU-CX6T5pkXmP2xFNaveAKMWAAMw2GCwuiquUJZ8Zcy814_AIaZq7LVqfKCgrqBpNIcl_xdw2pqfmLNqDwTzc/s1600/tween2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvdnNQ9W45SJLb49-EEXc72KXlehAmvRjncHT_EwqtI1gp49r5lnHcF6NU-CX6T5pkXmP2xFNaveAKMWAAMw2GCwuiquUJZ8Zcy814_AIaZq7LVqfKCgrqBpNIcl_xdw2pqfmLNqDwTzc/s320/tween2.png" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Donde objeto claro está, en este caso es nuestro Sprite (un insulso rectángulo verde).</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Luego tenemos tiempo (expresado en segundos) que puede tomar valores float (0.4..1.3..etc)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Por último las propiedades “objetivo” digamos, o acción que debería tomar Actuate.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El resultado en este caso, será nuestro objeto cambiando de tamaño (largo) en 10 segundos.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVXaDW7WDhOGkqCkMVC3sFa1e0CaxO5xk7CI6xZ2PATtoGy6nmz7vgaS_tn_EuJV1hQ2cENLrCRuvsDkivYQAINBuPz9mBgy_0XmgICsjPy1nntyP5p41aL36ajWjg_l362VYdWLCYpVc/s1600/tween3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVXaDW7WDhOGkqCkMVC3sFa1e0CaxO5xk7CI6xZ2PATtoGy6nmz7vgaS_tn_EuJV1hQ2cENLrCRuvsDkivYQAINBuPz9mBgy_0XmgICsjPy1nntyP5p41aL36ajWjg_l362VYdWLCYpVc/s320/tween3.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Nuestro Tween trabajando</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;">Lo de “en 10 segundos” tómenlo como absoluto hasta la próxima entrada del blog.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tenemos una idea básica de lo que es un Tween con Actuate. Dentro de las acciones, podemos incluir varias cosas. incluso funciones enteras ,pero los más sencillos son los parámetros de la clase (en este caso un objeto sprite tenemos tamaño, posición, alpha, rotación, etc).</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></div>
<b style="font-weight: normal;"></b><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Luego tenemos el parámetro overwrite (Bool) que va a especificar si un nuevo Tween aplicado al mismo objeto, va a sobreescribir las propiedades anteriores del objeto. Por defecto es Verdadero (true) y no hace falta pasarlo a la función como parámetro.</span></div>
<b style="font-weight: normal;"></b><br />
<b style="font-weight: normal;"></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Por último están los actuadores o modificadores:</span></div>
<b style="font-weight: normal;"></b><br />
<b style="font-weight: normal;"></b>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNQr8BE4ceEAARBaO9NVJne4DKTaEuzmHeSsjD65CM1Dap0y0DsTovU7EXxZywwS7HQVhT6iz0H2aJttENzxtmQU_avKPMfe39hfJhmfkFBJQYtRcsgd3vO_KU3HIg5jm9UrqJ2cPgUE/s1600/tween4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNQr8BE4ceEAARBaO9NVJne4DKTaEuzmHeSsjD65CM1Dap0y0DsTovU7EXxZywwS7HQVhT6iz0H2aJttENzxtmQU_avKPMfe39hfJhmfkFBJQYtRcsgd3vO_KU3HIg5jm9UrqJ2cPgUE/s320/tween4.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Diferentes tweens</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Que pueden ser varios, incluso podemos modificarlos o llamar a funciones. dentro de los más comunes o sencillos tenemos:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #4a86e8; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">delay (tiempo)</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">: Va a producir una espera (tiempo) antes de comenzar con el tween.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">reverse()</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">: Produce el efecto inverso.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">snaping()</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">: redondea todos los valores que le pasemos a la función</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">repeat(valor)</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">: vuelve a repetir el tween (x veces), si se deja en blanco es un loop constante.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">reflect()</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">: Produce un nuevo tween al finalizar con el efecto inverso, debe ser utilizado juntamente con repeat().</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">No podían faltar los modificadores ease:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Que son distintas ecuaciones aplicadas para modificar comportamientos. Se le atribuyen a </span><a href="http://robertpenner.com/easing/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Robert Penner</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> y son muy utilizadas en el campo de la animación.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwI3_Qrr0x5Qx4Un99hll9ro_rh3oJnqPMCUzAB48Pyza35fgUs4loDrD-tw6A9voDNE6U7E_9KQ4jjjJtf2igxJ4Zz8taXzSArGROT88zv-uFp4LkFwB9XO3KedaQ3eP_86PW8-RanBk/s1600/esae1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwI3_Qrr0x5Qx4Un99hll9ro_rh3oJnqPMCUzAB48Pyza35fgUs4loDrD-tw6A9voDNE6U7E_9KQ4jjjJtf2igxJ4Zz8taXzSArGROT88zv-uFp4LkFwB9XO3KedaQ3eP_86PW8-RanBk/s320/esae1.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">Diferentes ecuaciones dan como resultado diferentes curvas</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">No están todas soportadas por Actuate, pero sí las más usuales:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Para terminar, tenemos diferentes funciones para controlar nuestros tweens:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZLp9vx9Kp7H7gJsxC44QV1z7tXKSfHTqnJtsD9rpZaW_CgFoM_2b-xDlEEDc9bHcAMInfkoTxU1hyphenhyphenoRjcZvyxOMBCyHeH9qt9JV7O-e5eKYa_NDqb8i0tdcRNynezR4PCnAi0qOLAWPs/s1600/atom2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZLp9vx9Kp7H7gJsxC44QV1z7tXKSfHTqnJtsD9rpZaW_CgFoM_2b-xDlEEDc9bHcAMInfkoTxU1hyphenhyphenoRjcZvyxOMBCyHeH9qt9JV7O-e5eKYa_NDqb8i0tdcRNynezR4PCnAi0qOLAWPs/s320/atom2.png" width="320" /></a><span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Actuate.stop (MySprite);</span><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span class="Apple-tab-span" style="white-space: pre;"> </span> </span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Detendrá el tween</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Actuate.pauseAll ();</span><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Pondrá en pausa todos los tweens.</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;"><br /></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;">Actuate.pause (MySprite);</span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Pondrá en pausa el tween especificado</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;"><br /></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;">Actuate.pause (MySprite, MyOtherSprite);</span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> Lo mismo, pero especificando más de uno</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Actuate.resumeAll ();</span><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Resume todos los tweens</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;"><br /></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;">Actuate.resume (MySprite);</span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Resume el tween especificado</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;"><br /></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;">Actuate.resume (MySprite, MyOtherSprite); </span>Lo mismo con varios.</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br class="kix-line-break" /></span><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;"><br /></span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;">Actuate.reset ();</span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span class="Apple-tab-span" style="white-space: pre;"> </span> </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Vuelve a inicializar.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Hasta aquí llegamos por hoy. Es una librería muy extensa y creo que es conveniente ir de a poco con ella. Nos vemos en la próxima con ejemplos un poco más elaborados.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Pueden descargar los archivos desde el repo de </span><a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/Actuate_01" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">GitHub</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEr7-euqLZ1zZVqxnGAEZx6hyphenhyphen_tCwEmvPmOzKcg7DJCgfVcWTNrn2gfk96sDtfV7XszNCvh5YnI3Q9GlvawtuOiRV4OKQdVaQB96lVc-dl625qJK94MqCRuaQ7pUF0kcelEZvIXBnPNgE/s1600/atom1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEr7-euqLZ1zZVqxnGAEZx6hyphenhyphen_tCwEmvPmOzKcg7DJCgfVcWTNrn2gfk96sDtfV7XszNCvh5YnI3Q9GlvawtuOiRV4OKQdVaQB96lVc-dl625qJK94MqCRuaQ7pUF0kcelEZvIXBnPNgE/s320/atom1.png" width="223" /></a></div>
<br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Antes que me olvide, si alguno le dio curiosidad el Ide que estoy usando, es </span><a href="https://atom.io/" style="text-decoration: none;"><span style="color: #1155cc; font-family: Arial; font-size: 15px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Atom</span></a><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">. Un proyecto de la gente de GitHub basado en </span><a href="https://www.chromium.org/" style="text-decoration: none;"><span style="color: #1155cc; font-family: Arial; font-size: 15px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Chromiun</span></a><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">. Tomaron los fuentes de un Navegador y salió un Editor muy configurable.</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; white-space: pre-wrap;">La primer versión estable “oficial” estará disponible a principios de Junio, pero hace tiempo que anda dando vueltas. Pueden encontrar algunos PlugIns para Haxe. </span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Tengan en cuenta que si bien el proyecto hace un tiempo que anda dando vueltas, es medio inestable todavía.</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial;"><span style="font-size: 15px; white-space: pre-wrap;">Pueden descargarlo de la página oficial y probarlo. Total no cuesta nada.</span></span><br />
<span style="font-family: Arial;"><span style="font-size: 15px; white-space: pre-wrap;"><br /></span></span>
<span style="font-family: Arial;"><span style="font-size: 15px; white-space: pre-wrap;">Un saludo.-</span></span>Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-65520793903214350102015-05-16T05:53:00.003-03:002015-05-16T05:54:12.804-03:00Manipulación de gráficos SVG<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgMM1WcbmKKtMzjDGEgZYy8frvrc876FE77A49UpyShCFH6iQ0imyr_1MPdfjbj9abwhdKMwc2uk_IDlOH11m74lo_nJQCRIJXs1uXaPuSwBAfjJbQspshemjzQs0STfzBkxgOTAyKkmc/s1600/SVG_logo.svg.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgMM1WcbmKKtMzjDGEgZYy8frvrc876FE77A49UpyShCFH6iQ0imyr_1MPdfjbj9abwhdKMwc2uk_IDlOH11m74lo_nJQCRIJXs1uXaPuSwBAfjJbQspshemjzQs0STfzBkxgOTAyKkmc/s200/SVG_logo.svg.png" width="200" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;">Siempre que se trabaja con un formato de imagen tradicional (archivos bmp, jpeg, gif, png, etc..) se debe tener en cuenta sus limitaciones. </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;">En nuestro caso, y me refiero a la programación de juegos, es su escalabilidad o la propiedad que tiene una imagen para cambiar de tamaño sin perder resolución la que por lo general nos puede dar problemas..</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
</div>
<a name='more'></a><br /><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">De qué cuernos está hablando este tipo quizás alguno se pregunte...bien, veamos un ejemplo:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSo_zKGLRCsC9jrZquGMbSefM17DE_M8IQ4uc3pV5dZVh0RgZ0pRK6ngaEkSpWvrO9X10CQ48N1Pxz6ECCXB_uT8yNUAamUed5C6euf1lJP6jRIYJnLzwpooPyVYZvbqgwOHTTXoxYw-Q/s1600/logo30.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSo_zKGLRCsC9jrZquGMbSefM17DE_M8IQ4uc3pV5dZVh0RgZ0pRK6ngaEkSpWvrO9X10CQ48N1Pxz6ECCXB_uT8yNUAamUed5C6euf1lJP6jRIYJnLzwpooPyVYZvbqgwOHTTXoxYw-Q/s1600/logo30.png" /></a></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tenemos un sprite que muestra el logo de haxe, con un tamaño de digamos 30x30 píxeles el cual, por algún motivo debemos agrandar (zoom) en cierto punto de nuestra aplicación.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El método o propiedad que se utiliza en estos casos se llama </span><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;">scale(x,y o z)</span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">digamos: haxelogo.scaleX = </span><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: orange;">1.1 </span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">….haxelogo.scaleY = </span><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: orange;">2.3</span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">...y así.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El valor (</span><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: orange;">float</span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">) que le asignamos va a establecer la proporción en la cual el sprite va a ser agrandado o disminuido..similar al zoom de un editor de imágenes (partiendo que el tamaño original es igual a 1 o 100%, un valor de 1.5 representaría la imagen agrandada en un 50% más (150%)).</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Pero, vemos que a medida que subimos la escala (o cambiamos el </span><a href="http://es.wikipedia.org/wiki/Relaci%C3%B3n_de_aspecto" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">aspecto de la pantalla</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">), nuestro logo comienza a verse cada vez más </span><a href="http://es.wikipedia.org/wiki/Pixelado" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">pixelado</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, o estirado...deformado.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiImosPj6V3MTKMQ90qfVuI75TVOC0HaeMLrvqcTXWN2Qa4eJVrRv_t01orgrjhiYhvtU0WYOfsbE-2JNx-T2CLUYSN17FSKQPZpfWHkp0KrT_m_U8ha0g4MH09AWJV6YYqGaey4jE_NZ4/s1600/scalexy.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiImosPj6V3MTKMQ90qfVuI75TVOC0HaeMLrvqcTXWN2Qa4eJVrRv_t01orgrjhiYhvtU0WYOfsbE-2JNx-T2CLUYSN17FSKQPZpfWHkp0KrT_m_U8ha0g4MH09AWJV6YYqGaey4jE_NZ4/s320/scalexy.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Verdana, sans-serif;">Típico efecto serrucho</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Esto se debe a muchos factores, como por ejemplo (y tratándose especialmente de haxe):</span></div>
<b style="font-weight: normal;"><br /></b>
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">La plataforma en la cual corra nuestro juego (no es lo mismo móviles que escritorio).</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">La densidad en la cual muestra el sistema los gráficos o la configuración de los </span><a href="http://es.wikipedia.org/wiki/Puntos_por_pulgada" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">DPI</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El motor de </span><a href="http://es.wikipedia.org/wiki/Renderizaci%C3%B3n" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">renderización</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, la placa de vídeo..drivers,etc.</span></div>
</li>
</ul>
<b style="font-weight: normal;"><br /></b>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9P-2KGbI5NleWgJK7In8mzMJhCK3epxhUSshqoXI-m4iaRSTtYpLckVCBzFx2evbm8pHOhiu8AatNnFOjDGhmqvxWES5ZOt71W0azH0AhUgJi2Y-t3hc-hnl2dViISS3vj_4Qb1-7OdE/s1600/IconLarge.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9P-2KGbI5NleWgJK7In8mzMJhCK3epxhUSshqoXI-m4iaRSTtYpLckVCBzFx2evbm8pHOhiu8AatNnFOjDGhmqvxWES5ZOt71W0azH0AhUgJi2Y-t3hc-hnl2dViISS3vj_4Qb1-7OdE/s200/IconLarge.png" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Verdana, sans-serif;">Misma imagen, pero pesa <br />10 veces más.</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Si bien, el problema puede solucionarse con solo generar imágenes de mayor calidad (o diversos conjuntos dependiendo de la resolución o tamaños de pantalla, etc), ello trae aparejado otro problema, que es el rendimiento.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Mayor calidad de imágenes o mayor cantidad de colecciones equivale a más cantidad de memoria a utilizar, más espacio de almacenamiento, más tiempo de carga..etc.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Entonces, debemos encontrar un punto de equilibrio entre calidad gráfica o visual y rendimiento.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Los formatos</span><a href="http://es.wikipedia.org/wiki/Imagen_de_mapa_de_bits" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;"> clásicos de imágenes </span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">(como para dar una referencia muy corta) son creados a base de un sistema de coordenadas donde cada una de ellas representa un punto y un color. Cada uno de estos puntos (pixel digamos) está íntimamente ligado a los otros pixels que lo rodean y así forman un todo (imagen completa).</span></div>
<b style="font-weight: normal;"><br /></b>
<b style="font-weight: normal;"><br /></b>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://agulev.com/wp-content/uploads/2015/02/haxe-logo.svg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="http://agulev.com/wp-content/uploads/2015/02/haxe-logo.svg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Verdana, sans-serif;">Lo mismo pero en <br />formato SVG pesa solo 4kb</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Existe </span><a href="http://es.wikipedia.org/wiki/Gr%C3%A1fico_vectorial" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">otro tipo de formato</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> para manipular imágenes que tiene la particularidad de que guarda vectores o formas geométricas independientes, que al combinarse forman la imagen.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Dentro del conjunto de gráficos vectoriales, se encuentra un standard que tiene la particularidad de poder cambiar de tamaño sin los efectos del típico serrucho (son escalables).</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Me refiero a los archivos </span><a href="http://es.wikipedia.org/wiki/Scalable_Vector_Graphics" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">SVG o Scalable Vector Graphics en inglés</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Si ven el esqueleto de una archivo SVG, reconocerán su estructura de inmediato</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirBfPRT_-0W6D3CXq_zuK46bmwWeBZICHjIPbe_4RERL1f7ui2ReqpYkLEkuYMGAHjLGpzniYLQ4Y98Eo2pmS196CUdmovpC5QSI9Yp2MESkYFhvTW4QbiPMj-IiDlgToNUJLlPuv9XXk/s1600/logosvg.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirBfPRT_-0W6D3CXq_zuK46bmwWeBZICHjIPbe_4RERL1f7ui2ReqpYkLEkuYMGAHjLGpzniYLQ4Y98Eo2pmS196CUdmovpC5QSI9Yp2MESkYFhvTW4QbiPMj-IiDlgToNUJLlPuv9XXk/s320/logosvg.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Verdana, sans-serif;">El código del ejemplo para el logo de Haxe</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">...sep, acertaron...es otro de los tantos “dialectos” que existen con XML.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">No quiero entrar en detalles (los cuales se encuentran en el enlace a wikipedia), simplemente hacer referencia a que el uso de este tipo de gráficos tiene sus ventajas (y desventajas).</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Ventajas:</span></div>
<b style="font-weight: normal;"><br /></b>
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Como ya dije, son escalables. No importa la escala aquí, lucirán bien.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Soportado por la mayoría de los navegadores de forma nativa.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Su tamaño en disco, por lo general es menor a que su homónimo en formato Bitmap.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Modificable en tiempo real sin mucho procesamiento algorítmico o filtros.</span></div>
</li>
</ul>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Desventajas:</span></div>
<b style="font-weight: normal;"><br /></b>
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Quizás la mayor de todas es la falta de documentación.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Por lo dicho arriba, la implementación puede complicarse un poco.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Pocas herramientas (Libres o incluso pagas) para trabajar con ellos.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">No es soportado por todas las plataformas.</span></div>
</li>
</ul>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Una de las pocas herramientas (de uso gratuito) que conozco para manipularlos es </span><a href="https://inkscape.org/es/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Inkscape</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh24K50kmiHd8SwsqSaf8BCxeq-E5C-3sVbxG2tNQ502DeUb9mo0DDi8OgAip0ka4harr5KgE0eGaXKeynhCrmFakmQmFpT_F_g3LlUSmAIiryLKVCRdp2ktaGl7um7u2xigk6Pld-YWO4/s1600/inkscape1.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh24K50kmiHd8SwsqSaf8BCxeq-E5C-3sVbxG2tNQ502DeUb9mo0DDi8OgAip0ka4harr5KgE0eGaXKeynhCrmFakmQmFpT_F_g3LlUSmAIiryLKVCRdp2ktaGl7um7u2xigk6Pld-YWO4/s320/inkscape1.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Verdana, sans-serif;">Inkscape es el clásico (Gratis)</span></td></tr>
</tbody></table>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Soporta una gran variedad de formatos y dentro del tipo “SVG” muchos más (Algunos no están muy estandarizados y pueden dar problemas. Mi recomendación es probar).</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Sinceramente lo he utilizado muy poco con este tipo de archivos y siempre fue para crear interfaces para aplicaciones (Botones, Checkboxes, etc).</span></div>
<b style="font-weight: normal;"><br /></b>
<b style="font-weight: normal;"><br /></b>
<b style="font-weight: normal;"><br /></b>
<b style="font-weight: normal;"><br /></b>
<b style="font-weight: normal;"><br /></b>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Pueden encontrar más recursos en : </span><a href="http://wiki.inkscape.org/wiki/index.php/Galleries" style="line-height: 1.38; text-decoration: none;"><span style="color: #1155cc; font-family: Arial; font-size: 15px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">http://wiki.inkscape.org/wiki/index.php/Galleries</span></a><br />
<b style="font-weight: normal;"><br /></b>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Otro muy básico, pero online puede utilizarse desde </span><a href="http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html" style="line-height: 1.38; text-decoration: none;"><span style="color: #1155cc; font-family: Arial; font-size: 15px; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Aquí</span></a><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">. (Para guardar el archivo, simplemente aben un editor de texto y copian lo generado).</span><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHnlCF-eET2UvEVPMFCFvpLAd8yoHCh6HVlNxynwDoNWxGZIU_PWWO8g5KLx4VqKMTNLepsdFQsqm-Woq7zhtoxfFAygw3rYh0EaTnu7ms8ffYd6qc3R-Hvg_HJem82s4YTlWqm8SJsdg/s1600/svgedit.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHnlCF-eET2UvEVPMFCFvpLAd8yoHCh6HVlNxynwDoNWxGZIU_PWWO8g5KLx4VqKMTNLepsdFQsqm-Woq7zhtoxfFAygw3rYh0EaTnu7ms8ffYd6qc3R-Hvg_HJem82s4YTlWqm8SJsdg/s320/svgedit.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Verdana, sans-serif;">svg-edit se puede utilizar desde cualquier navegador</span></td></tr>
</tbody></table>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Antes de pasar al ejemplo, quiero aclarar que la librería utilizada es muy básica y no está documentada. Tengan en cuenta que es un formato de imágenes que no se utiliza a menudo en la creación de juegos (personajes, objetos que deben moverse rápidamente, etc.), sólo para crear interfaces que puedan ser modificadas rápidamente y sobretodo livianas.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Bien, tenemos una imagen con formato SVG, pero cómo la utilizamos con Haxe?</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Sencillo. En primer lugar, debemos bajar una librería nueva, que en mi caso ya está instalada.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAzOcnkxQxHKuQ8_YhnAiTIDrFc3iDAB4LD1AHFzeEp0s2BBC-SoS2jnP3hd0T14NwFcuAvQ2r5d_hjM8fcuOXubLcCtnOLZPBjpg00iJl2_pthwBV_N6xo3Bq_FkSeFaVKJuRcA5_paI/s1600/svginstall.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAzOcnkxQxHKuQ8_YhnAiTIDrFc3iDAB4LD1AHFzeEp0s2BBC-SoS2jnP3hd0T14NwFcuAvQ2r5d_hjM8fcuOXubLcCtnOLZPBjpg00iJl2_pthwBV_N6xo3Bq_FkSeFaVKJuRcA5_paI/s320/svginstall.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Verdana, sans-serif;">Instalando SVG</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Luego, debemos agregarla a project.xml para poder acceder a ella:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj59PVsJcPWMyY239blBAbqW_R4BK7jOn1DI-Ufhj86xoNvBjo-UfqULGZEPSySqM0_D8UCm5HnNFp8_-J1g5ci43kgalqZ4kKhs6FkTJgGkAz_zHrS7H9c3Z5gS7oX5zC-W-xTEVmeFks/s1600/svginstall2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj59PVsJcPWMyY239blBAbqW_R4BK7jOn1DI-Ufhj86xoNvBjo-UfqULGZEPSySqM0_D8UCm5HnNFp8_-J1g5ci43kgalqZ4kKhs6FkTJgGkAz_zHrS7H9c3Z5gS7oX5zC-W-xTEVmeFks/s1600/svginstall2.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Verdana, sans-serif;">project.xml debe incluirla</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">y ya se encuentra lista para importarla en el proyecto:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzRHMk0GqWjEDMQUc5IxrANbdoU6ftslySSzq1s0Ds8B6kQpmp_lAynfcGkrqWp8giv3sobLq0rJg4d1-RfuyyX0aBAqoQO1QtSZ9YwqE24wcH8QpcyOsX5U3p5qSTFBhnl6uqnc5e5V0/s1600/svginstall3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzRHMk0GqWjEDMQUc5IxrANbdoU6ftslySSzq1s0Ds8B6kQpmp_lAynfcGkrqWp8giv3sobLq0rJg4d1-RfuyyX0aBAqoQO1QtSZ9YwqE24wcH8QpcyOsX5U3p5qSTFBhnl6uqnc5e5V0/s1600/svginstall3.png" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Primero es cargado como un asset para ser analizado por la librería.</span></div>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Creamos un objeto contenedor (Objeto shape en este caso) y luego es asociado a dicho objeto:</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4h0W4vewcvg2tv-Al-99Ose_0dfifQYQ4kwYj3410u3U8Nwd9HHlKdMs3VU0cM_NGKUO9aE3OxSchMf7_UpyOzkje7dxHDkg6cRFFW-BKfBrdhHBz1-dddXMh4n7MaWC8KUriQGJVE-k/s1600/svginstall4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4h0W4vewcvg2tv-Al-99Ose_0dfifQYQ4kwYj3410u3U8Nwd9HHlKdMs3VU0cM_NGKUO9aE3OxSchMf7_UpyOzkje7dxHDkg6cRFFW-BKfBrdhHBz1-dddXMh4n7MaWC8KUriQGJVE-k/s320/svginstall4.png" width="320" /></a></div>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial;"><span style="font-size: 15px; white-space: pre-wrap;">El método render debe incluir el contenedor (boton_svg), coordenadas(x,y) y tamaño(x,y)</span></span><br />
<span style="font-family: Arial;"><span style="font-size: 15px; white-space: pre-wrap;"><br /></span></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Básicamente eso es todo. A partir de aquí se trabaja con el objeto como siempre.</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_8z8Zhk5rk0NFt8ZBAbMkmSymI9mk4mL0AcJKjieom6E2fsw_rC8AP-6cySo1Xc2NsEB06QGIUZFsg9MZE6Sl-r_4XyZNlwgRPfmgd4TsnriXwAkUd323n6uc4EED1FdAiAbo02okxcg/s1600/anima1.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_8z8Zhk5rk0NFt8ZBAbMkmSymI9mk4mL0AcJKjieom6E2fsw_rC8AP-6cySo1Xc2NsEB06QGIUZFsg9MZE6Sl-r_4XyZNlwgRPfmgd4TsnriXwAkUd323n6uc4EED1FdAiAbo02okxcg/s320/anima1.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Verdana, sans-serif;">El ejemplo funcionando...<br />mostrando el ejemplo :P</span></td></tr>
</tbody></table>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">En el <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/AnimaV3" target="_blank">ejemplo que van a encontrar en Git</a>, se muestra la comparación entre los dos tipos de imágenes. Simplemente son dos sprites con con diferentes texturas (uno es PNG, el otro SVG) que toman diferente tamaño de forma aleatoria cada segundo.</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Luego tenemos un botón (también SVG) que pasa de pantalla normal a completa y viceversa.</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-m51Mc-fplBk8WcC4x7LxtwEY2hM_0TzB00QQJbmtPE4Xc-1goJVADxJerC0s65h71DWYRF_kGZu-RX-wFp3YtmUWMr3K1DB9LHLqreWu-A7C-h-e3nuEsk_prSqwKH6xeeshTKhiG-Q/s1600/inkscape2.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-m51Mc-fplBk8WcC4x7LxtwEY2hM_0TzB00QQJbmtPE4Xc-1goJVADxJerC0s65h71DWYRF_kGZu-RX-wFp3YtmUWMr3K1DB9LHLqreWu-A7C-h-e3nuEsk_prSqwKH6xeeshTKhiG-Q/s320/inkscape2.png" width="313" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Verdana, sans-serif;">Si no se hace así, el texto no se mostrará</span></td></tr>
</tbody></table>
<br />
<span style="color: red; font-family: Arial; font-size: 15px; white-space: pre-wrap;">Les dejo un tip</span><span style="font-family: Arial; font-size: 15px; white-space: pre-wrap;">. La librería SVG no soporta el manejo de cuadros de texto dentro de la imagen. Si </span><span style="font-family: Arial; font-size: 15px; white-space: pre-wrap;">desean mostrar un texto dentro del archivo svg (como la estrella que es en realidad un botón), deberán pasar el objeto (texto) a trayecto dentro de Inkscape, de lo contrario el texto no se mostrará.</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Eso es todo por ahora sobre el formato SVG y Haxe. Fue solo una introducción y queda muchísimo por ver (por ejemplo como manipular las figuras geométricas por separado).</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Descarguen el ejemplo desde <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/AnimaV3" target="_blank">Aqu</a>í y experimenten. En la próxima entrada juntamos algunas cosas aprendidas hasta ahora para dar le forma a un ejemplo completo.</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Diviértanse, un saludo.-</span>Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-16034844311372799742015-05-01T23:31:00.000-03:002015-05-01T23:31:52.757-03:00Testeando proyectos y experimentos<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz-6UhauLJ_RYzz6jnWin5DkJIeOp7WLlUm4B1_PIJfo4ZG_vxL00TGDMnz73ygTb7Mq8M2RFjIqbWovEEIYBGnVl_2Rw1b521Q7jK03fXBxkbg1IW2nFKPgBPjAJWbvgmFaQYivtatyw/s1600/share.fb.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz-6UhauLJ_RYzz6jnWin5DkJIeOp7WLlUm4B1_PIJfo4ZG_vxL00TGDMnz73ygTb7Mq8M2RFjIqbWovEEIYBGnVl_2Rw1b521Q7jK03fXBxkbg1IW2nFKPgBPjAJWbvgmFaQYivtatyw/s1600/share.fb.jpg" height="165" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Hoy quería hacer mención de una herramienta muy interesante para el desarrollo de aplicaciones (más allá de la programación con Haxe). Sirve para desarrollar y sobretodo probar aplicaciones en un entorno remoto y virtual. Quizás ya hayan utilizado entornos de este tipo anteriormente (Existen muchos paquetes de </span><a href="http://es.wikipedia.org/wiki/M%C3%A1quina_virtual" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">máquinas virtuales</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">, en lo particular tengo experiencia con </span><a href="http://www.vmware.com/ar" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">VMware </span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">y últimamente he jugado un poco con </span><a href="https://www.virtualbox.org/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">VirtualBox</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> + </span><a href="https://www.vagrantup.com/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Vagrant</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">). Pero fue </span><a href="https://koding.com/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Koding</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> el que ha llamado mi atención estos días.</span></div>
<b id="docs-internal-guid-6fa67ca7-1168-b8df-35c8-8c66c1469f84" style="font-weight: normal;"></b><br />
<a name='more'></a><b id="docs-internal-guid-6fa67ca7-1168-b8df-35c8-8c66c1469f84" style="font-weight: normal;"><br /></b>
<span style="font-family: Arial;"><span style="font-size: 15px; line-height: 1.38; white-space: pre-wrap;"><br /></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt6jpvtV3LNx9VCElWiTsJqOkIC7GQM52waIXhYe7R8XsEqetovwrkF6BOFYioxaSomXY2pkxDiYEGzMytyJem0D2KWW78U54bpjn7mYHupYbJx_DKGqch5YAyBQFjEKVkYODjNtPxKeo/s1600/koding-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt6jpvtV3LNx9VCElWiTsJqOkIC7GQM52waIXhYe7R8XsEqetovwrkF6BOFYioxaSomXY2pkxDiYEGzMytyJem0D2KWW78U54bpjn7mYHupYbJx_DKGqch5YAyBQFjEKVkYODjNtPxKeo/s1600/koding-logo.png" height="102" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-family: Arial;"><span style="font-size: 15px; line-height: 1.38; white-space: pre-wrap;">Koding es un un entorno de desarrollo basado en arquitectura de nube. No solamente nos permite “testear” una aplicación, sino también desarrollarla (incluso en conjunto con otras personas). Si conoces de que estoy hablando, puedes omitir el </span><span style="font-size: 15px; line-height: 23.0000019073486px; white-space: pre-wrap;">párrafo</span><span style="font-size: 15px; line-height: 1.38; white-space: pre-wrap;"> siguiente. </span></span><br />
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Para los que siguen sin saber de qué hablo, veamos un poco más en detalle:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El entorno de desarrollo típico de un programador consta de varias “capas” digamos a saber:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El hardware (soporte físico)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El sistema operativo (Windows, Linux, etc.)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El lenguaje de programación (C++, Php, Haxe, Java, etc.)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El editor de código (Flashdevelop, Eclipse, Intellij Idea, etc.).</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Bien. Hasta aquí es lo que conocemos la mayoría de los que venimos escribiendo código desde hace tiempo como un entorno “Local” de desarrollo, es decir, nuestra computadora con todas esas cosas instaladas y listas para programar.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizwidLJR33gg4ddFajqN_uyfMqEnTwaD7-IXOKpOCDCujNTjjJzcF3acAT7usc6kPHzZJ1Q8ZBlm_MSAKAG_edVJgwa7T8l8xFEx_lt9K9Qn0HM4n2TSFknGPe-CHVMYCE_0cneRNox5E/s1600/programming_oop_wallpaper_by_hexeno.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizwidLJR33gg4ddFajqN_uyfMqEnTwaD7-IXOKpOCDCujNTjjJzcF3acAT7usc6kPHzZJ1Q8ZBlm_MSAKAG_edVJgwa7T8l8xFEx_lt9K9Qn0HM4n2TSFknGPe-CHVMYCE_0cneRNox5E/s1600/programming_oop_wallpaper_by_hexeno.png" height="178" width="320" /></a></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Al momento de iniciar nuestro proyecto y testearlo , el entorno de desarrollo se convierte en uno de “prueba”...pero no ha cambiado (misma cpu, mismo sistema operativo, etc). </span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Ello, en ciertas circunstancias, puede ocasionar que nuestras pruebas sobre la aplicación no sean del todo fidedignas o reales digamos ya que su comportamiento esta siendo puesto a prueba en una situación muy específica (Nuestro entorno solamente, comparado con los millones distintos que hay afuera).</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUkZLBron_os6NLFixBXIKzGmHufVkZU7Y1uGZE61fUYJODRmJHSYPEokuv-9e2GacxRPeHa8I82acF67Q5pTaOUu49GJ2FkgocMwsQ-dwdnhKHGSQap2VFp704gY-5yQVkeHX4J7y6E/s1600/virtual1.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUkZLBron_os6NLFixBXIKzGmHufVkZU7Y1uGZE61fUYJODRmJHSYPEokuv-9e2GacxRPeHa8I82acF67Q5pTaOUu49GJ2FkgocMwsQ-dwdnhKHGSQap2VFp704gY-5yQVkeHX4J7y6E/s1600/virtual1.png" height="238" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Courier New, Courier, monospace;">Virtual Box</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Obviamente ahí es donde los desarrolladores comienzan con los dolores de cabeza porque su aplicación “funciona bien” (dentro de su pc, su entorno) y “se cuelga” en la pc del cliente. Incluso en un grupo de trabajo con varios desarrolladores que están trabajando en el mismo proyecto se pueden dar condiciones en las que para mí un cierto segmento de código funcione y para otro no.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Ni que hablar cuando nuestro proyecto debe de funcionar en muchas plataformas distintas (Pc, Teléfonos, Tv, etc). Deberíamos tener un modelo de cada uno de ellos para verificar que todo funcione bien? Imposible.</span></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa3RD_8pARKYYAieH74ZfiFsUkrr7jDLnfPtG2-rdLzexvNMu-EWbQmiHwK7V08Q7_gQ07-m-hlspHHXAz7NJmhN-k1Ewkd09zlABO0aXyL_aff1Nb3Phw9lUWp4Mbal5x6i2xwFZVYU/s1600/virtual2.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSa3RD_8pARKYYAieH74ZfiFsUkrr7jDLnfPtG2-rdLzexvNMu-EWbQmiHwK7V08Q7_gQ07-m-hlspHHXAz7NJmhN-k1Ewkd09zlABO0aXyL_aff1Nb3Phw9lUWp4Mbal5x6i2xwFZVYU/s1600/virtual2.png" height="212" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Courier New, Courier, monospace;">DOSBox</span></td></tr>
</tbody></table>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">De ese concepto, nació la idea de una Máquina Virtual, que no es otra cosa que simular el comportamiento de una determinada cpu, sistema operativo o entorno de aplicación, dentro del nuestro en un ambiente “aislado” o encapsulado.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Pero no todo es ideal, incluso en el mundo de las máquinas virtuales. Existen varias cosas a tener en cuenta cuando se utiliza una VM.</span></div>
<b style="font-weight: normal;"><br /></b>
<b style="font-weight: normal;"><br /></b>
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghwsL8UUciHmpGOeg3IxZqOM6CycWOoBVEuW54Go_8ZX-qBeB3A5hSJLJuvVWutr1wu80_og3kaUSs5Sm8r7-wB0Dpu9yOOE_dZK3JQmBnSwQv6kLmzTRX51DoQ2g1DRfDgTXKZjpzBkg/s1600/Screenshot-Fedora_VM135+-+VMware+Player-6.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghwsL8UUciHmpGOeg3IxZqOM6CycWOoBVEuW54Go_8ZX-qBeB3A5hSJLJuvVWutr1wu80_og3kaUSs5Sm8r7-wB0Dpu9yOOE_dZK3JQmBnSwQv6kLmzTRX51DoQ2g1DRfDgTXKZjpzBkg/s1600/Screenshot-Fedora_VM135+-+VMware+Player-6.png" height="228" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Courier New, Courier, monospace;">Fedora dentro de una caja con VMware</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Sin entrar en detalles, solo diré que dependiendo de la arquitectura y sistema operativo que queramos emular, puede ser una verdadera devoradora de recursos. Debemos estar conscientes en todo momento que para emular un determinado entorno, vamos a “restarle” recursos a nuestra propia computadora para que la “virtual” los utilice. Si nuestra PC ya tiene algunos años, puede que le “cueste” emular otra máquina con características similares dentro suyo. Obviamente nos vamos a dar cuenta de ello en un principio, ya que el rendimiento global de nuestro sistema se verá afectado en mayor o menor medida (No tanto en capacidad de almacenamiento o memoria, ya que son emulados físicamente con accesos reiterados al disco, pero sí en la capacidad de proceso).</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Una lista de "Cajas" listas para usar con Vagrant: <a href="http://www.vagrantbox.es/">http://www.vagrantbox.es/</a></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuCEYvE-ZcypVBGUjgNB6i0XI1hrVOYepBBzeArvlZq8xWFLe2Z16fo105jVx4Oixch_wF-KG5wUnQSCLL3OwDVAs-yAJbGixYIroQVkphnwaNNj3qdeP-PrL53_H9GOrCNlAdNSPstuc/s1600/virtual3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuCEYvE-ZcypVBGUjgNB6i0XI1hrVOYepBBzeArvlZq8xWFLe2Z16fo105jVx4Oixch_wF-KG5wUnQSCLL3OwDVAs-yAJbGixYIroQVkphnwaNNj3qdeP-PrL53_H9GOrCNlAdNSPstuc/s1600/virtual3.png" height="102" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Courier New, Courier, monospace;">Instalando una Caja windowsXP con Vagrant</span></td></tr>
</tbody></table>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Otro problema son los desarrollos cliente/servidor que deben funcionar a través de internet </span><a href="http://es.wikipedia.org/wiki/Computaci%C3%B3n_en_la_nube" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">(cloud o nube)</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. En la mayoría de los casos tenemos pocas opciones para probar que todo funcione:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Instalando de forma Local un conjunto de Servidores (Web, Php, Sql, etc).</span></div>
</li>
</ul>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Es una solución poco realista y muy traicionera. Puede que para proyectos pequeños funcione bien, pero va a estar muy ligada a nuestro sistema operativo y arquitectura de hardware. Los servidores locales comparten procesos y memoria con nuestra aplicación y ello dificulta por ejemplo conocer el rendimiento o los potenciales problemas de seguridad que puedan surgir. También es complicado (pero no imposible) para el programador hacer demostraciones del proyecto al usuario final (un cliente digamos).</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Otro inconveniente es el manejo de versiones, opciones de configuración, o simplemente comenzar desde cero nuevamente. Llevaría tiempo volver a instalar de a uno los paquetes y configurar los servidores para dejarlos listos.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Instalar un pseudo entorno de servidores como por ejemplo <a href="https://www.apachefriends.org/es/index.html" target="_blank">xampp</a>.</span></div>
</li>
</ul>
<b style="font-weight: normal;"><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJudY2UM6FiMjrOy7mqLrzJYlpBEPjpYcVtYqVu0SjdrrdO8tVS7JjmnZigppQXNp0lGhG_kV61I72N5fuqRmtPaQpY1lBubeFOsgfU9eLipdPpjSSK8Ljnp5EsvmUDnT2ggk5O5GgETA/s1600/virtual4.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJudY2UM6FiMjrOy7mqLrzJYlpBEPjpYcVtYqVu0SjdrrdO8tVS7JjmnZigppQXNp0lGhG_kV61I72N5fuqRmtPaQpY1lBubeFOsgfU9eLipdPpjSSK8Ljnp5EsvmUDnT2ggk5O5GgETA/s1600/virtual4.png" height="157" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Más viable que la anterior ya que nos ahorra mucho tiempo al tener todo empaquetado listo para funcionar. Se configura de manera sencilla y en poco tiempo. Muy eficaz a la hora de instalar complementos como Joomla! o Magneto. Como el anterior, muy limitado (por nuestro propio entorno) a realizar pruebas de rendimiento o demostraciones.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Rentar un servicio hosting o utilizar uno gratis.</span></div>
</li>
</ul>
<b style="font-weight: normal;"><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mqG91GIdgem-cC8CVPDIi4NSHFqDCFzv0byCiChEqVgrqAExHd5A5fJGWWZBW_g7fVqvl8eTNuX7K9vleqI8BlmOO0vD1fdtuFjmJ1ZgFqVYRsHWeVj59npN2G3ZZ7mTVxYJAW3S4tw/s1600/virtual5.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mqG91GIdgem-cC8CVPDIi4NSHFqDCFzv0byCiChEqVgrqAExHd5A5fJGWWZBW_g7fVqvl8eTNuX7K9vleqI8BlmOO0vD1fdtuFjmJ1ZgFqVYRsHWeVj59npN2G3ZZ7mTVxYJAW3S4tw/s1600/virtual5.png" height="194" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Mucho mejor que las opciones anteriores, pero con algunos inconvenientes también. Puede que para muchos no lo sea, pero si estamos comenzando a programar, pagar un servicio mensualmente para solo dedicarle unas horas por día...Bueno, están los gratis! Pero, dependiendo de qué tipo de servicio necesitemos, quizás no encontremos uno gratuito.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Más allá de lo económico, modificar ciertos parámetros con servicios de hosting puede ser una pesadilla (hay que comunicarse con los administradores, deben de aprobarlo, etc..) ni que hablar si del lado del servidor se necesita ejecutar un servicio que no viene incluido al rentar el hosting. Por otro lado, las pruebas de rendimiento o demostraciones serán algo sencillo de implementar y analizar.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<b style="font-weight: normal;"><br /></b>
<a href="https://www.blogger.com/blogger.g?blogID=7289313234884568591#Abajo"></a>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Hemos repasado los conceptos básicos de trabajar con Máquinas Virtuales y Servidores. Ahora bien, qué hace a Koding tan especial pensarán ustedes.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Bueno, en principio como ya adelanté es entorno de desarrollo basado en </span><a href="http://es.wikipedia.org/wiki/Almacenamiento_en_nube" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">arquitectura de nube</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. Tenemos que:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Por un lado da soporte a Máquinas virtuales (Linux).</span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxzryJ6JZtJ4N7EOFKsvqZ5tk0BpMwON3zQTUfJlvJmlQV94bM9S4-cgUCcU-V4Pp6mCY6Qz9pDpiMsoXp3tn6vwvDtUep3Gkv6dldnDL6_XvpVZlNqGAyHkpqhvWZi-Vvwg7L9fC6X4E/s1600/virtual7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxzryJ6JZtJ4N7EOFKsvqZ5tk0BpMwON3zQTUfJlvJmlQV94bM9S4-cgUCcU-V4Pp6mCY6Qz9pDpiMsoXp3tn6vwvDtUep3Gkv6dldnDL6_XvpVZlNqGAyHkpqhvWZi-Vvwg7L9fC6X4E/s1600/virtual7.png" height="170" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Un Ide para desarrollar en varios lenguajes como Ruby, Go, Java, NodeJS, PHP, C, C++, Perl, Python..Haxe. y Soporte para Ides externos (Intellij Idea, PhpStorm, Sublime, etc)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1xyjiVfJgWixYl8iid0fRpHEDu0lOGHhT0p6boXJUS9rRo7JFtiTKxt_OuCycWoFKGdNE91GndydC80bJ6_3xy2JbrpLRPzbvqgmLXFYYD4rAl_5b77cBfwDzctNDTZ-5kndkhQZfIdo/s1600/php.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1xyjiVfJgWixYl8iid0fRpHEDu0lOGHhT0p6boXJUS9rRo7JFtiTKxt_OuCycWoFKGdNE91GndydC80bJ6_3xy2JbrpLRPzbvqgmLXFYYD4rAl_5b77cBfwDzctNDTZ-5kndkhQZfIdo/s1600/php.png" height="215" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Courier New, Courier, monospace;">Mc en una terminal + Editor de Php</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Algunas herramientas de colaboración como chat, mensajes, pizarrones (whiteboards), y la posibilidad de compartir todo el entorno en tiempo real.</span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia05aul9qE1XJoNhOg7rbgrwiLiuKOHezbq_veYku36D7YQtWolJEO9KTVLghnWF45y63XAYOsDn_y0Oq4llZDfh0fEnUJpNNjV7ZYo_JrEfuXvSY52kC1bXVaMzqDdKdiD-gnbbF8E74/s1600/virtual9.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia05aul9qE1XJoNhOg7rbgrwiLiuKOHezbq_veYku36D7YQtWolJEO9KTVLghnWF45y63XAYOsDn_y0Oq4llZDfh0fEnUJpNNjV7ZYo_JrEfuXvSY52kC1bXVaMzqDdKdiD-gnbbF8E74/s1600/virtual9.png" height="192" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Courier New, Courier, monospace;">Establecer permisos en forma gráfica (obviamente chmod funciona)</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Todo ello dentro de una sola ventana del Navegador. </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4lY3li_J-lyoSEJHFq6QZhHYvoIElP_Lmk8hly2358a2QCT2NeEWide-N5bQkW9Dk94pUXoa03rImwsBAOyOjA3AQeTUAw_caXF9JObaZyS8Zx8IwSQt7U4j0bl1HGWNvDIQgmFFk8w/s1600/koding1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4lY3li_J-lyoSEJHFq6QZhHYvoIElP_Lmk8hly2358a2QCT2NeEWide-N5bQkW9Dk94pUXoa03rImwsBAOyOjA3AQeTUAw_caXF9JObaZyS8Zx8IwSQt7U4j0bl1HGWNvDIQgmFFk8w/s1600/koding1.png" height="200" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Podemos tener nuestro trabajo alojado en GiT por ejemplo o cualquier otro tipo de Repositorio e integrarlo sin problemas.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Podemos destruir nuestra VM y crear una nueva en minutos con toda la configuración necesaria y lista para comenzar a trabajar nuevamente. Hacer experimentos y volver a cero..etc.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDAclAN_RL63V5UD771M5rwQ6vCjsvT8RWdyWtOuIe7Wzc8zpXydH0Ye7tkXJkOKMdCyzANBpNtKlMzV_Ht2G8W-msqnRFKtlNPnN20RdWITlTXUBSdRtUhTWQm2qThA1tzi1oPJjAP-8/s1600/webserver.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDAclAN_RL63V5UD771M5rwQ6vCjsvT8RWdyWtOuIe7Wzc8zpXydH0Ye7tkXJkOKMdCyzANBpNtKlMzV_Ht2G8W-msqnRFKtlNPnN20RdWITlTXUBSdRtUhTWQm2qThA1tzi1oPJjAP-8/s1600/webserver.png" height="217" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Courier New, Courier, monospace;">Apache, Php, Phyton y Ruby ya vienen instalados</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Llevándolo más allá, al ser una máquina virtual con Linux pre instalado, cualquier aplicación/herramienta o comando que estemos acostumbrados a utilizar con este sistema operativo, funcionará dentro de nuestra VM sin problemas (excepto por las que dependen de una la interfaz gráfica obviamente).</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Vim, Mc, htop, emacs..la lista es demasiado larga.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Incluso tienen su propio manager de paquetes llamado Kpm (Koding Package Manager) que nos facilita enormemente la tarea de instalar servidores, frameworks, etc.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Desde la consola podemos ver los paquetes soportados invocando: kpm list</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjYKHbDNVwt-n4s3-ROMVSBBK0e1evzFmIp3saM1msU6-u2PcO0Aj4_rb8CCynJJEDWRmBmz94-MhbDq1HarDeYRtB4i3CuM9l650Kxm9F_T9rfoQyQyAgA_xQLN_XdJunC6p_VtW9lg/s1600/virtual8.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjYKHbDNVwt-n4s3-ROMVSBBK0e1evzFmIp3saM1msU6-u2PcO0Aj4_rb8CCynJJEDWRmBmz94-MhbDq1HarDeYRtB4i3CuM9l650Kxm9F_T9rfoQyQyAgA_xQLN_XdJunC6p_VtW9lg/s1600/virtual8.png" height="320" width="264" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Courier New, Courier, monospace;">kpm nos va a ahorrar mucho tiempo</span></td></tr>
</tbody></table>
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;">No hay soporte para Haxe todavía..pero eso no es un problema como verán más abajo.</span><br />
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Claro está que esta gente no come aserrín y el servicio que brindan es pago para algunas de las funcionalidades más avanzadas (como compartir nuestro entorno o tener una VM un poco mas potente, o más espacio en disco, etc).</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKKCKaJ9kp16BG0QrQwrHdzQuAhulMNjxzvBdFkfN57pVPcEt61446lEWsIgpF54PMJgwcoUz3Lr9VwL3wN5-DX3tRC6AiiylpTrBKRaFfi3BPy4H2pkYws5DOA8toxQNOfQnc1dbW2hc/s1600/virtual10.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKKCKaJ9kp16BG0QrQwrHdzQuAhulMNjxzvBdFkfN57pVPcEt61446lEWsIgpF54PMJgwcoUz3Lr9VwL3wN5-DX3tRC6AiiylpTrBKRaFfi3BPy4H2pkYws5DOA8toxQNOfQnc1dbW2hc/s1600/virtual10.png" height="174" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Courier New, Courier, monospace;">Espacio en Disco. Puede Agrandarse hasta 6Gb <br />gratuitamente haciendo un poco de spam :D</span></td></tr>
</tbody></table>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Cosas a tener en cuenta utilizando el servicio gratis:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Solamente podemos utilizar una VM por cuenta.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El espacio así como la capacidad de procesamiento están limitadas.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">No se puede dejar la VM encendida constantemente (Luego de 60 minutos de inactividad se apagará)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">No podemos compartir el trabajo.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Pero mucho puede hacerse con la versión gratis (y espero que siga así). Veamos cómo se comporta haxe ahí dentro:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Primer paso: Instalación</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSEllGIXFUgeefFNCVlao9WJXqO8IfFwqMrNs7ulrAX7Mtn-TnybxlYnMIHzy1-AKvHMo-smYIl7Jfc2TPTVNj88Uace1kOou7cZJ_1kSV3rHu9HcqeO4JthyphenhyphenkzRJMb20yERkVIokFebk/s1600/virtual11.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSEllGIXFUgeefFNCVlao9WJXqO8IfFwqMrNs7ulrAX7Mtn-TnybxlYnMIHzy1-AKvHMo-smYIl7Jfc2TPTVNj88Uace1kOou7cZJ_1kSV3rHu9HcqeO4JthyphenhyphenkzRJMb20yERkVIokFebk/s1600/virtual11.png" height="152" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Desde la consola: sudo apt-get install haxe</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">La otra opción es con el instalador que se encuentra en la página de OpenFL y seguir los pasos.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Instalará el compilador, librerías básicas, las herramientas (haxelib) y neko.</span></div>
<b style="font-weight: normal;"><br /></b>
<b style="font-weight: normal;"><br /></b>
<b style="font-weight: normal;"><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFA349TCj2pdxYXVQ8fy8hRlwyI-rnkGd2TyvIxjPXvpkzlM0l9qjwzpgAwUtGYitaUYn7Yh5_rrnKiuRWrsVXxmOnzBJhJCa89vD8M80zOa5NadEo3fBkuhf8s4x4kkKI9cy2-ILS0BM/s1600/virtual12.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFA349TCj2pdxYXVQ8fy8hRlwyI-rnkGd2TyvIxjPXvpkzlM0l9qjwzpgAwUtGYitaUYn7Yh5_rrnKiuRWrsVXxmOnzBJhJCa89vD8M80zOa5NadEo3fBkuhf8s4x4kkKI9cy2-ILS0BM/s1600/virtual12.png" height="320" width="290" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Luego sudo haxelib setup, c</span><span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;">reamos las variables de entorno para nuestro usuario</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;"><br /></span></div>
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;">Una vez hecho esto, los pasos para instalar las librerias externas (openfl, lime, etc) es similar a lo que ya hemos visto con la diferencia de que al estar corriendo bajo linux, debemos tener permisos de escritura en el directorio /usr/lib, que se logra anteponiendo el comando sudo a cualquier instrucción (o loguearse como root).</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Por ejemplo : “sudo haxelib run openfl setup”</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Si utilizamos el paquete de instalación que se encuentra en la página de openfl, la cosa va mucho mas rápido, aunque los resultados son los mismos.</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Testeamos que todo vaya bien..</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYfqiVYgGOr1pBdLtS3cJtyFsT46Qw_ju-1WpzLk4kx_lXkwTVSHGUbSPQ5lcLhmSLAN_cJTXAcAb8LTu8ZfoOiT1K1nVkSvfWsKMaFZIE_uX0iqU1kS7mQ5QeEfwewFAlNVXHjXju9zU/s1600/virtual13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYfqiVYgGOr1pBdLtS3cJtyFsT46Qw_ju-1WpzLk4kx_lXkwTVSHGUbSPQ5lcLhmSLAN_cJTXAcAb8LTu8ZfoOiT1K1nVkSvfWsKMaFZIE_uX0iqU1kS7mQ5QeEfwewFAlNVXHjXju9zU/s1600/virtual13.png" height="312" width="320" /></a></div>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Perfecto! Compilemos algo de prueba: En mi caso, cloné desde GiT el directorio con los ejemplos que hemos visto hasta ahora..</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjatNp1pQKaS-ZTFJrWB8hp-pKonXLP0LzjdSumpU7pmGac95lXEP_wPF5nhL0DAc9dIk2pugqivHQa2-IBonHCnnzJESWEyEM5rOsSG786M7MsfzROz5yGH27g7vvqYjJ9Feza3OfLJdA/s1600/virtual14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjatNp1pQKaS-ZTFJrWB8hp-pKonXLP0LzjdSumpU7pmGac95lXEP_wPF5nhL0DAc9dIk2pugqivHQa2-IBonHCnnzJESWEyEM5rOsSG786M7MsfzROz5yGH27g7vvqYjJ9Feza3OfLJdA/s1600/virtual14.png" height="236" width="320" /></a></div>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Editando en la solapa superior..compilando y ejecutando en la inferior</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhamhAMar7gOpECE2FtWZIIiSao4fafA5syZSIdq-RzMg-MX3QnQJ7RnWhR6yWpkxQiwdRvBWYQuyHtvYt8Qr4WW1rhmPbR0NSDfG3ZW34eFF-_URHV498abOXNtDRdjfMH48I12LvOz7E/s1600/virtual15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhamhAMar7gOpECE2FtWZIIiSao4fafA5syZSIdq-RzMg-MX3QnQJ7RnWhR6yWpkxQiwdRvBWYQuyHtvYt8Qr4WW1rhmPbR0NSDfG3ZW34eFF-_URHV498abOXNtDRdjfMH48I12LvOz7E/s1600/virtual15.png" height="265" width="320" /></a></div>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Todo funciona correctamente, pero veamos un ejemplo un poco más divertido:</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGytF41Px6rWmXnDFZFdfLd8uTzOFz7AaOnuEWWpX_hGlEv_3XezxvZEiE6oxX6F4RsQUGCumm83wOf10Ss_IsVDNcbb3rW8d3SkSzS1wZxa1jMphU0ExBijQmMWgHQYpi4mW6fNDVhbs/s1600/virtual16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGytF41Px6rWmXnDFZFdfLd8uTzOFz7AaOnuEWWpX_hGlEv_3XezxvZEiE6oxX6F4RsQUGCumm83wOf10Ss_IsVDNcbb3rW8d3SkSzS1wZxa1jMphU0ExBijQmMWgHQYpi4mW6fNDVhbs/s1600/virtual16.png" height="320" width="288" /></a></div>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Seguro ya lo conocen..y compiló sin una queja.</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Debajo, simplemente edito el index.html del servidor para que apunte al archivo generado.</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Abro el Navegador y apunto hacia el servidor web..</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkg_SsaRn7_OurBBHKZ-c9TWKqM49LlJJl_jFeig-R15AvyXCj_YdE7n1Nbr5TZb1HAAGwwDajeTKm_JyZcMcQHLVG3YGzxLPCh4jnqUse67xoEX18PV_dVJE4-QABmFd4GPT-xkklNro/s1600/virtual17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkg_SsaRn7_OurBBHKZ-c9TWKqM49LlJJl_jFeig-R15AvyXCj_YdE7n1Nbr5TZb1HAAGwwDajeTKm_JyZcMcQHLVG3YGzxLPCh4jnqUse67xoEX18PV_dVJE4-QABmFd4GPT-xkklNro/s1600/virtual17.png" height="245" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">El Resultado..</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkYGCSdmEufaog66Hu7plMkxbDrXYkjA11nMJdROP4dLXgHjWOqB5_NHp1Sw2iG6ZPPeHXS5BcMpP0VCMBsI5UJ-MIPgXysrvMPfuNUdb5tfRPegdDql9MnQhe7SgVSHq8ZRb4bN7NQ-0/s1600/virtual18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkYGCSdmEufaog66Hu7plMkxbDrXYkjA11nMJdROP4dLXgHjWOqB5_NHp1Sw2iG6ZPPeHXS5BcMpP0VCMBsI5UJ-MIPgXysrvMPfuNUdb5tfRPegdDql9MnQhe7SgVSHq8ZRb4bN7NQ-0/s1600/virtual18.png" height="236" width="320" /></a></div>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Por el momento y en mi opinión, este tipo de estructuras para el trabajo en forma remota son interesantes pero les falta un largo camino todavía. Pueden utilizarse en proyectos chicos de forma autónoma, pero a la hora de analizar (y sobre todo depurar) código quizás no se encuentren a la altura o dependan de otras herramientas (externas al entorno). </span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Ello no quita de que sea una alternativa para tener en cuenta. Como lugar de trabajo experimental es ideal. Vale la pena probar o no?</span>Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-88528519264298791332015-04-23T07:42:00.001-03:002015-04-23T07:43:02.683-03:00Spritesheet y Sparrow(xml) Parte 2<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_c3qSAoCCv_iYxYQwHoKroEkh-uaUrjXVikK5L3_KP5Qv5VXkY4FDFReJJWzGG7I7Dj1b_FsiXuMfFxF3fJFVesHj7uPkM6KZVj5QAh9846qMc9U19gX2eVIpRUxdd-DlqXmz8ZzxHE/s1600/ShoeBox-Importer-Logo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_c3qSAoCCv_iYxYQwHoKroEkh-uaUrjXVikK5L3_KP5Qv5VXkY4FDFReJJWzGG7I7Dj1b_FsiXuMfFxF3fJFVesHj7uPkM6KZVj5QAh9846qMc9U19gX2eVIpRUxdd-DlqXmz8ZzxHE/s1600/ShoeBox-Importer-Logo.png" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">ShoeBox nos da la oportunidad de generar Atlas de imágenes con formato Sparrow que podemos implementar en haxe de forma transparente en cuestión de minutos (entre otras opciones). </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">A continuación veremos como tratar estos archivos para generar sprites. </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span></div>
<a name='more'></a><br /><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Si vienen leyendo del post anterior, sabrán que nos quedamos en las “contras” de utilizar Sparrow como formato para nuestro Atlas.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div>
<b id="docs-internal-guid-f14ce9e5-e5ac-0df7-8014-8c75b47b8267" style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tenemos que: para mostrar un Sprite animado con esta librería hace falta:</span></div>
<b style="font-weight: normal;"><br /></b>
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Un Atlas o secuencia de imágenes.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Un objeto Spritesheet</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Definir el comportamiento que va a tener nuestro sprite.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Un objeto AnimatedSprite.</span></div>
</li>
</ul>
<b style="font-weight: normal;"><br /></b><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">En la entrada anterior importamos las librerías que necesitamos, luego tenemos que alojar nuestro Atlas dentro de la carpeta Assets como ya hemos visto anteriormente para poder utilizarlo.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheTCzg1rc-MbMwtn1norD-w5iqA0Ha3FE98lR18t27oLPwDbJw4WkvqVNDOa1q7sg1EyCvtfgYgoeYJoqxge7vHZCyhBGGsmI2mcj36Q2muy8dgWJ5sPYBSy6GTDYYFA0jmu8SbTeo060/s1600/figu1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheTCzg1rc-MbMwtn1norD-w5iqA0Ha3FE98lR18t27oLPwDbJw4WkvqVNDOa1q7sg1EyCvtfgYgoeYJoqxge7vHZCyhBGGsmI2mcj36Q2muy8dgWJ5sPYBSy6GTDYYFA0jmu8SbTeo060/s1600/figu1.png" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El archivo xml generado por el empaquetador (ShowBox) es tratado como texto, y lo declaramos de esa forma:</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">var datos = Assets.getText("img/mostri.xml");</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Luego inicializamos la instancia de AnimatedSprite que va a alojar a nuestro objeto sprite animado.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">var dino_ani:AnimatedSprite;</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">y comienza la diversión:</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El primer paso es declarar la variable(objeto) que va a llamar a la función encargada de importar el archivo xml. </span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">var dino:Spritesheet = SparrowImporter.parse(datos, "img");</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Simplemente le estamos pasando los valores a la función con la ruta de acceso a nuestro archivo de datos (xml). </span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">SparrowImporter.parse(</span><span style="background-color: transparent; color: #38761d; font-family: Arial; font-size: 15px; font-style: italic; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">archivo, carpeta</span><span style="background-color: transparent; color: blue; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">)</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">La función va a recorrer la imagen del Atlas dependiendo de los valores que encuentre en el archivo xml. </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Como se habrán dado cuenta, no le pasamos el nombre del archivo de la imagen, sólo el nombre del archivo de datos.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">La función toma el nombre del archivo de imágenes que se encuentra declarado en el xml (<TextureAtlas imagePath="archivo.png">)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy_vdUu7Kh1ts_eiSdfVNWsNNH6iFWnGvLO1F-3r1aRR-osMoa7qCyJd52x90V2kDxnsz4vLK7RiJ9nKwPMHFr96YhzqmwQCUs7Evt1cI0KOu2kQki_iDRNS4VseD_31qX06aCjWXkbpw/s1600/figu2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy_vdUu7Kh1ts_eiSdfVNWsNNH6iFWnGvLO1F-3r1aRR-osMoa7qCyJd52x90V2kDxnsz4vLK7RiJ9nKwPMHFr96YhzqmwQCUs7Evt1cI0KOu2kQki_iDRNS4VseD_31qX06aCjWXkbpw/s1600/figu2.png" height="191" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Luego retiene en una matriz (array) los datos que vaya encontrando en el subnodo (SubTexture).</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Se puede notar que es muchísimo más sencillo de implementar que todo lo visto hasta ahora, pero esto no termina acá.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Pasamos luego a inicializar los comportamientos que va a tener nuestro sprite animado.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El formato es:</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;">nuestro_sprite.addBehavior(new BehaviorData("nombre", [n1,n2,....n], repetir, fps));</span></span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Donde tenemos que “nombre” es una declaración abstracta o identificador arbitrario definido por nosotros. Por ejemplo podríamos tener “parado” o “caminando”, “saltando, “muerto”, etc.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">[n1,n2,....n] es la secuencia de imágenes que van a formar nuestra animación y va a depender del orden en cómo la función SparrowImporter las haya tomado del Atlas.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">En realidad el orden dentro del Atlas no importa mucho, sino que la secuencia sea la que nosotros tengamos en mente, ya que muchas veces los programas como ShoeBox o TexturePacker van a intentar empaquetar las imágenes separadas en un solo archivo, pero intentando optimizarlo para que sea lo más pequeño posible.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Por ejemplo, podríamos tener que la secuencia o comportamiento (Behavior en inglés) de nuestro sprite “corriendo” sean las imágenes 4,5,6...o si debe “saltar” sean las imágenes 10,11,18,56...etc.</span></div>
<b style="font-weight: normal;"><br /></b>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX7BqsUiqTbQ6VEMaqEUA1rRszr5Cy2834ZtsUSwjppCVmoZcYZydZY9MAiVKOaE7PwfP-v2UHbmwOdXrUGVnxEpddGGAtva_yGL-ACcytnbM2Gld4CgECBs5c5PrqOTRzPI-XFp7IirE/s1600/dino1.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX7BqsUiqTbQ6VEMaqEUA1rRszr5Cy2834ZtsUSwjppCVmoZcYZydZY9MAiVKOaE7PwfP-v2UHbmwOdXrUGVnxEpddGGAtva_yGL-ACcytnbM2Gld4CgECBs5c5PrqOTRzPI-XFp7IirE/s1600/dino1.gif" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">En el caso de nuestro ejemplo, el dinosaurio se encuentra parado y lo único que hace es parpadear..por eso, la secuencia, para ponerla en un término abstracto, es: ojos cerrados -> ojos poco abiertos -> medianamente abiertos -> totalmente abiertos -> medianamente abiertos -> poco abiertos -> cerrados [0, 1, 2, 3, 2, 1]</span></div>
<b style="font-weight: normal;"><br /></b><br />
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El parámetro repetir (lógico: verdadero o falso), le dice al constructor si queremos que la animación tenga un bucle (loop). Dicho de otro modo, si debe repetir la secuencia al terminar o no.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">FPS, es el valor en cuadros por segundo que va a tomar nuestra animación o secuencia.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Obviamente podemos generar tantos comportamientos como queramos. Divertido no?</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Bien. Tenemos nuestro objeto/sprite animado ya creado, los comportamientos inicializados.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Para el caso de este simple ejemplo, solo vamos a tener un comportamiento (Behavior) que mostrar y lo situamos al inicio.</span></div>
<b style="font-weight: normal;"><br /></b>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;">dino_ani.showBehavior("parado");</span></span></div>
<b style="font-weight: normal;"><br /></b><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Lógicamente, todos estos comportamientos deben de actualizar su secuencia de imágenes de alguna forma. </span></div>
<br /><span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;">Para este caso, se utiliza el Tiempo Delta, que no es otra cosa que la diferencia entre el tiempo actual y la última vez que se actualizó. El “tiempo” en nuestro caso está medido en cuadros por segundo y por ello, toda la subrutina debe ir dentro de un evento que llame a una función en esos términos.</span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGxCJMSc6VR2xycTb9NmhKnuDthjaMpo-iuV7XwQzx0JZaTouebZBtlRSV7lQmrVuRjEFjLMP9R_-vATdmHUKqF2GEzyNxel1kPFRxm5tq1sd4efAmq2oceEtEu2wcSFTRBc_CEttsP90/s1600/figu3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGxCJMSc6VR2xycTb9NmhKnuDthjaMpo-iuV7XwQzx0JZaTouebZBtlRSV7lQmrVuRjEFjLMP9R_-vATdmHUKqF2GEzyNxel1kPFRxm5tq1sd4efAmq2oceEtEu2wcSFTRBc_CEttsP90/s1600/figu3.png" height="218" width="400" /></a></div>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">La funcionalidad que presenta la librería es muy interesante para generar animaciones sin mucho esfuerzo.</span></div>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><b id="docs-internal-guid-f14ce9e5-e5d0-606c-c480-90fa82dd7b4d" style="font-weight: normal;"><br /></b></span>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Pero aquí no termina!.. Al examinar un poco más en profundidad el código nos encontramos con varios métodos que todavía no hemos visto. </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Quizás en las próximas entradas. </span></div>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><br /><span style="vertical-align: baseline;">Jueguen con esta librería que tiene mucho para ofrecer (además es muy entretenido)</span></span><br />
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><span style="vertical-align: baseline;"><br /></span></span>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHqEk7LWJrEM-WGfW62cf8NlmHY_3QV3Hymd94L3dR4vc23k0TbPoSUCuCZC1NOd7njBND16sAh0f9TPq0o0eNnUkvLKZ2tanP5motDAbq9F_TzGGPZPW_XC0XBApEqjdjvd28CIY943o/s1600/figu5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHqEk7LWJrEM-WGfW62cf8NlmHY_3QV3Hymd94L3dR4vc23k0TbPoSUCuCZC1NOd7njBND16sAh0f9TPq0o0eNnUkvLKZ2tanP5motDAbq9F_TzGGPZPW_XC0XBApEqjdjvd28CIY943o/s1600/figu5.png" height="293" width="400" /></a></div>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><span style="vertical-align: baseline;"><br /></span></span>
<span style="font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;"><span style="vertical-align: baseline;">Como siempre, pueden descargar el fuente en <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/AnimaV2" target="_blank">GitHub</a>.</span></span>Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-35494330286953761962015-04-16T05:58:00.002-03:002015-04-18T03:40:50.599-03:00Spritesheet y Sparrow(xml) Parte 1<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFLzkfJZS-2g85vzFbyH_hmiQgpvfzh8sprqK1F7IZsAeZEdkE_RwD-z8f_74UveDIs_4sKxPfuctWwFYhx5HURH-gv6vq3XDNk2u8A4HaXIMAJQftirqog4aJ7y-UXIT64_1W0tTnlKM/s1600/product-feature-rocket-sparrow.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFLzkfJZS-2g85vzFbyH_hmiQgpvfzh8sprqK1F7IZsAeZEdkE_RwD-z8f_74UveDIs_4sKxPfuctWwFYhx5HURH-gv6vq3XDNk2u8A4HaXIMAJQftirqog4aJ7y-UXIT64_1W0tTnlKM/s1600/product-feature-rocket-sparrow.png" /></a></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El ejemplo del la entrada anterior deja en claro como utilizar un atlas, pero con el método Drawtiles no es muy funcional a gran escala. </span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Tenemos en este momento la facilidad de importar datos generados por un Atlas de imagenes, pero estamos atascados al querer implementarlas.</span><br />
<a href="http://www.joshuagranick.com/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Joshua Granick</span></a><span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> al ver esto (presumo yo) creó una librería llamada Spritesheet, la cual vamos a echar un vistazo ahora.</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
</div>
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"></span><br />
<a name='more'></a><span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Necesitamos preparar el terreno antes de estudiar esta librería:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Primero, debemos descargarla del repositorio. Cuando le daba forma a esta entrada, estaban disponibles algunas actualizaciones y nunca viene mal estar al día.</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkzOPhFR71MFRjKfHi0z1xXQHFjB5Bc8cr2yYWhAkChZX9haTyG0f_9cwUdmaiIKquGzoy7vN-LtInAfi8yKfe6vFKgCRF2op6e5jRw30cpD5P3TqrKpRwpeJwRNsxnLiQ_NPi6jrMxcM/s1600/upgrade4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkzOPhFR71MFRjKfHi0z1xXQHFjB5Bc8cr2yYWhAkChZX9haTyG0f_9cwUdmaiIKquGzoy7vN-LtInAfi8yKfe6vFKgCRF2op6e5jRw30cpD5P3TqrKpRwpeJwRNsxnLiQ_NPi6jrMxcM/s1600/upgrade4.png" height="233" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Luego pasamos al código, que si bien es sencillo no está muy documentado que digamos, pero con echar un vistazo nos vamos a encontrar con que es muy intuitiva.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Veamos que hay dentro:</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihgQVSrzm9I33J_h82Ili04aQArf0qLgyX6XViWYBa5K9wSImNTWAHfsyi8WRR15BjkPmD4TKjPQQlpqsXCKyAWTRzUACMm6wqbfSraVedmTA6jcOSPYuQ-cB409yN-vgM99QlTEN0DMM/s1600/import3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihgQVSrzm9I33J_h82Ili04aQArf0qLgyX6XViWYBa5K9wSImNTWAHfsyi8WRR15BjkPmD4TKjPQQlpqsXCKyAWTRzUACMm6wqbfSraVedmTA6jcOSPYuQ-cB409yN-vgM99QlTEN0DMM/s1600/import3.png" height="249" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Típica estructura de una librería externa, está compuesta por los paquetes principales (AnimatedSprite, Spritesheet) y luego encontramos dos carpetas: data e Importers.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Comencemos con Importers ya que es lo primero que vamos a utilizar: 4 clases se encuentran dentro:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">AnimoImporter</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">BitmapImporter</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">SparrowImporter</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">ZoeImporter</span></div>
</li>
</ul>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">AnimoImporter: Permite importar Atlas o imágenes generadas por </span><a href="http://es.wikipedia.org/wiki/GameMaker:_Studio" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Animo</span></a><span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. Ha quedado medio obsoleto (más que nada por la aparición de Flash en sus comienzos).</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">BitmapImporter: No requiere que el Atlas vaya acompañado de un archivo con la información de los sprites (xml, Json, etc) generado por el Packer. Visto de otro modo, funciona de manera similar al bucle de carga en el </span><a href="https://github.com/Cactus-ar/Haxe-Ejemplos/blob/master/FPStest/src/Main.hx" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">ejemplo de FPS</span></a></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Solo debemos pasarle ciertos valores. El formato es:</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;">Spritesheet = BitmapImporter.create(Imagen, Columnas, Filas, Ancho, Alto, Ajuste, Escala)</span></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Con toda esa información, la función nos va a devolver una matriz (o array) con las imágenes asignándoles un número (índice) a cada una de ellas a medida que va recorriendo la imagen.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Ejemplo: </span><span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;">Supongamos que tenemos el Siguiente Atlas:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO6Y87PHw-iARTUhhD9UgFoRGGTy6c4ksGgnLFrGoYG07eLunojVaZhs3yffviWlaMkdPK6Owj0QPrGx2FDLhxS2bJBSr88lYj1yJDvyjoPgEuF02Im-OqRGNF6buW97p3wcDMnwRtSMo/s1600/Starling_animation_CS6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO6Y87PHw-iARTUhhD9UgFoRGGTy6c4ksGgnLFrGoYG07eLunojVaZhs3yffviWlaMkdPK6Owj0QPrGx2FDLhxS2bJBSr88lYj1yJDvyjoPgEuF02Im-OqRGNF6buW97p3wcDMnwRtSMo/s1600/Starling_animation_CS6.png" height="176" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="font-family: Arial; font-size: 15px; line-height: 1.38; white-space: pre-wrap;"><br /></span></div>
<span style="font-family: Arial; font-size: 15px; line-height: 20.7000007629395px; white-space: pre-wrap;">La llamada a la función sería algo como:</span><br />
<span style="font-family: Arial; font-size: 15px; line-height: 20.7000007629395px; white-space: pre-wrap;"><br /></span>
<span style="color: blue; font-family: Arial; font-size: 15px; line-height: 20.7000007629395px; white-space: pre-wrap;">Spritesheet = BitmapImporter.create(Imagen, 5, 3, 180, 180, 0, 0)</span><br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Obviamente tiene un par de inconvenientes el uso de este método. Por un lado, requiere que el Atlas contenga las imágenes del mismo tamaño. Tampoco soporta que las imágenes se encuentren orientadas de forma incorrecta.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">SparrowImporter: Nos deja importar nuestro Atlas generado para </span><a href="http://gamua.com/sparrow/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">Sparrow</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> en nuestro proyecto. No hay mucha ciencia detrás, simplemente unos pocos cambios en la forma en que está estructurado el archivo XML que el packer genera. Este es el que vamos a ver en más detalle con un ejemplo.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">ZoeImporter: Similar al anterior, pero para importar Atlas generados a partir de una animación en Flash con </span><a href="http://www.createjs.com/Zoe" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">ZOË</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> que devuelve archivos en formato </span><a href="http://es.wikipedia.org/wiki/JSON" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">JSON</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">.</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Como con cualquier librería externa, debemos incluirla para que el compilador la encuentre dentro del archivo project.xml</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;"><haxelib name="spritesheet" /></span></span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGr6gaodUDwnvLMi3dXuVsterZYqJsboCi0uXi34T2AiJk1ncVH2h-eF5nqTmJPE7CPfmoPi3LcGvEmQUK6HcGY6za-ipkhoDXf8D99EPKSF_TUvK4Z7pPCYWlwMyp-JVg7MSbPpI5fbY/s1600/import1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGr6gaodUDwnvLMi3dXuVsterZYqJsboCi0uXi34T2AiJk1ncVH2h-eF5nqTmJPE7CPfmoPi3LcGvEmQUK6HcGY6za-ipkhoDXf8D99EPKSF_TUvK4Z7pPCYWlwMyp-JVg7MSbPpI5fbY/s1600/import1.png" /></a></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><span style="color: blue;"><br /></span></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Luego necesitamos importarlas como siempre:</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEjiUDR5DJkjvvvES6tEArfst9_S3NWSd-ia0StVQWlNx9ZF2zHUVVAfeO9auAVO5uQc6t_1FOxuF2qWe50WErxqYrGTD3x00sfJvvQJAjCq8ykFu8Vz1wOt0zy7THT83IIlqqxFJSu0Q/s1600/import2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEjiUDR5DJkjvvvES6tEArfst9_S3NWSd-ia0StVQWlNx9ZF2zHUVVAfeO9auAVO5uQc6t_1FOxuF2qWe50WErxqYrGTD3x00sfJvvQJAjCq8ykFu8Vz1wOt0zy7THT83IIlqqxFJSu0Q/s1600/import2.png" height="177" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Como se ve en la imagen, vamos a utilizar un Atlas generado para Sparrow en nuestro proyecto y hacemos uso de la librería específica para ello (</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">SparrowImporter)</span><span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">. Ello tiene sus pros y sus contras..</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Comencemos con las contras (única por ahora): No podemos utilizar la versión libre de Texturepacker para generar el Atlas. Así que tenemos pocas opciones: generamos un archivo XML con un formato “general” y lo convertimos a formato “Sparrow”, o nos buscamos otro packer.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: #333333; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Podríamos, intentar corregir el formato (con código claro) antes de pasarle los valores a </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">SparrowImporter, pero no es la idea por ahora.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Veamos otro Packer llamado Shoebox</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Pueden descargarlo desde </span><a href="http://renderhjs.net/shoebox/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">aquí</span></a></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Está escrito en Actionscrip y empaquetado con Adobe Air.</span></div>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Se necesita instalar el </span><a href="https://get.adobe.com/es/air/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;">runtime de Adobe</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"> para que funcione. Los usuarios de windows no tienen mucho problema ya que pueden correr la última versión sin inconvenientes..pero para los que usamos Linux la cosa está un poco más difícil. En mi caso, wine hace el trabajo sin problemas.</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_L2WiSTr41x83NR9NeEKk2fmN4N2pS2e2pBSJqqCCkcAIsu5CTedQ2rp7YQ8WB6E2wIqu1ObNVkV-PLXOVnhZjfiEZS6zdTh9GqhToKabBvhtGoxAq8EcUJuIOGa7e3xSe3o7xtRJ3Y/s1600/import4.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_L2WiSTr41x83NR9NeEKk2fmN4N2pS2e2pBSJqqCCkcAIsu5CTedQ2rp7YQ8WB6E2wIqu1ObNVkV-PLXOVnhZjfiEZS6zdTh9GqhToKabBvhtGoxAq8EcUJuIOGa7e3xSe3o7xtRJ3Y/s1600/import4.png" height="270" width="400" /></a></div>
<span style="font-family: Arial; font-size: 15px; line-height: 1.2; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.2; white-space: pre-wrap;"><br /></span>
<span style="font-family: Arial; font-size: 15px; line-height: 1.2; white-space: pre-wrap;">Es muy sencillo de utilizar: Simplemente arrastramos las imágenes para generar el Atlas:</span><br />
<b style="font-weight: normal;"><br /></b>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Que mostrará una ventana con el resultado. Para exportar en formato Sparrow, debemos presionar el boton Settings y buscar la opción adecuada. No es necesario modificar nada, solo guardar todo como está y listo.</span></div>
<b style="font-weight: normal;"><br /></b>
<b style="font-weight: normal;"><br /></b>
<b style="font-weight: normal;"><br /></b>
<b style="font-weight: normal;"><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMX2hMajVZTNzJN23uCASyy1UrCmw9j88sY3JfTE_mPB5MlejSCOw9xUgbmYw5EgiEq8W98j_-rMw2ixYKbbqxAZhAZ9oBd7GaMpO_qy85x6vpmk5xUaLOZLSW3wVhyhPz_b0h4PMGAvk/s1600/import5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMX2hMajVZTNzJN23uCASyy1UrCmw9j88sY3JfTE_mPB5MlejSCOw9xUgbmYw5EgiEq8W98j_-rMw2ixYKbbqxAZhAZ9oBd7GaMpO_qy85x6vpmk5xUaLOZLSW3wVhyhPz_b0h4PMGAvk/s1600/import5.png" height="320" width="223" /></a></div>
<b style="font-weight: normal;"><br /></b>
<b style="font-weight: normal;"><br /></b>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">El resultado del Archivo será algo similar a esto:</span></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCtdYdZMrJAhCuSiYZuyzHtE7zjxOy4-x7JUDDjxZIhsd-uS7Skeh9himiLy_unnwiPgbTUCH4gws8gZchfgMnPFTJvC10lvgISweMSGEbg0zQq0tVDx-GXHeiDxtpbbKpByoKTfQXWEg/s1600/import6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCtdYdZMrJAhCuSiYZuyzHtE7zjxOy4-x7JUDDjxZIhsd-uS7Skeh9himiLy_unnwiPgbTUCH4gws8gZchfgMnPFTJvC10lvgISweMSGEbg0zQq0tVDx-GXHeiDxtpbbKpByoKTfQXWEg/s1600/import6.png" height="246" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><br /></span></div>
<br />
<div dir="ltr" style="line-height: 1.2; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Pueden ir<a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/AnimaV2" target="_blank"> viendo cómo implementar</a> la librería en el ejemplo que terminaremos de ver en la próxima entrada.</span></div>
</div>
Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-33068180472266575402015-04-03T05:25:00.000-03:002015-04-03T05:25:23.126-03:00Atlas, Xml y Packers (Parte 2)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7oSPAqrjXDO2qLxnU9jrdHL-WFTIFT8FLVUPDBECbgMdVpkYIxckgadQQvYYnXwgkPcggYT7M7JIyg4SB3iPEqnovfeKlx3oQcnnolN479eeC5vAKDOfBHDXJMKJdaws09XjAEJyhjyo/s1600/xml-file.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7oSPAqrjXDO2qLxnU9jrdHL-WFTIFT8FLVUPDBECbgMdVpkYIxckgadQQvYYnXwgkPcggYT7M7JIyg4SB3iPEqnovfeKlx3oQcnnolN479eeC5vAKDOfBHDXJMKJdaws09XjAEJyhjyo/s1600/xml-file.png" height="200" width="200" /></a></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-6546-bab1-f079-76cb8d269665" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-6546-bab1-f079-76cb8d269665" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Hemos generado un Atlas y también nuestro archivo de marcadores con toda la información. Veamos cómo implementarlo. Es importante <a href="http://es.wikipedia.org/wiki/Extensible_Markup_Language#Estructura_de_un_documento_XML" target="_blank">conocer como es la estructura</a> de un archivo generado en este lenguaje (xml). Los métodos que utiliza Haxe para manipularlos pueden crear confusión a primera vista si no se entiende bien su arquitectura o como los datos son almacenados.</span></div>
<br />
<br />
<br />
<br />
<br />
<a name='more'></a><br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Con Haxe tenemos dos alternativas para manipular archivos XML:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La primera es la clase XML, que incluye varios métodos de lectura, escritura, formateo, etc. Trabajar con ella es muy sencillo, pero debido a que está pensada para construir o generar y validar documentos de este tipo, necesitaríamos de más código para su uso.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Nosotros por ahora solo vamos a leer archivos generados por otras aplicaciones y no nos interesa modificar absolutamente nada. Más adelante, cuando veamos cómo generar código html dinámicamente veremos algunos ejemplos.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La segunda opción es la llamada Fast (rápido en inglés). Esta clase trabaja con una arquitectura jerárquica más intuitiva y simple. Se la llamó de esa forma (Fast) por su fácil utilización y no porque accede a los métodos más rápidamente o tenga un código más eficiente.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Entonces: Abrimos un proyecto nuevo en OpenFL y alojamos nuestros “Assets” que son el Atlas (imagen) y el código xml. Por lo general, todo lo que no sean estrictamente imágenes, deberían de alojarse en una carpeta distinta, pero bueno..esto es un pequeño ejemplo. De todas formas, es buena práctica hacer que cada cosa esté en su lugar.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDOXNY0EBYdBnO4Qat0J5oqCZW5kH8JEW-SYpNh7Jpxv7N0zf-OnH_y162XovA63aMyh5QQB_xA56rL7RhO4ZtiEqtj7rsI9yPKxIqM1V_3zxWa5SBFaNgrQ3ju8jBUx0cREHrXwBEP0/s1600/assets.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDOXNY0EBYdBnO4Qat0J5oqCZW5kH8JEW-SYpNh7Jpxv7N0zf-OnH_y162XovA63aMyh5QQB_xA56rL7RhO4ZtiEqtj7rsI9yPKxIqM1V_3zxWa5SBFaNgrQ3ju8jBUx0cREHrXwBEP0/s1600/assets.png" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Vamos a utilizar las librerías de xml, así que en un principio deberíamos de importarlas a nuestro proyecto como siempre:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">import haxe.xml.Fast;</span></span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego, y como ya vimos varias veces, asignamos nuestros assets a objetos.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">y comenzamos a trabajar con el archivo xml:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Lo primero que necesitamos es pasar el archivo por el analizador sintáctico que está dado en este caso por la función “parse”.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">var contenido = Xml.parse(archivo);</span></span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego pasamos el contenido analizado a la función Fast:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">var fasta = new Fast(contenido.firstElement());</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Asimismo, posicionamos el puntero en el primer elemento que se encuentre (firstElement). Para nuestro caso, el primer elemento es <TextureAtlas>...</TextureAtlas></span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego y por medio de un bucle, recorremos todos los nodos que se encuentren dentro:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">(k_dato in fasta.elements)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1C5JWQOCUkajLgND04-2ZnGMEEBraLndtFq_Wp9unnMZAMsu5n-ui2o7FcCgkcXRHvv2hjTvgx6-UYFsKU2z2TVdXYnWwOCLsFgRyiwyQ6FVNgTrxNRO1T-7b8sNnN3MvIT40nuNbhLQ/s1600/bucle.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1C5JWQOCUkajLgND04-2ZnGMEEBraLndtFq_Wp9unnMZAMsu5n-ui2o7FcCgkcXRHvv2hjTvgx6-UYFsKU2z2TVdXYnWwOCLsFgRyiwyQ6FVNgTrxNRO1T-7b8sNnN3MvIT40nuNbhLQ/s1600/bucle.png" height="112" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Básicamente eso es todo. Dentro del mismo bucle pasamos esos valores al rectángulo que captura nuestro tile..lo agregamos..ya lo vimos antes.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El archivo XML que TexturePacker genera, guarda a su vez un poco más de información (que no utilizamos aquí) En los comentarios se puede ver una referencia de los mismos:</span></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">pX => Punto de rotación (Pivot) con respecto al ancho de la imagen (x)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">pY => Punto de rotación (Pivot) con respecto al largo de la imagen (y)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">oX => La esquina X del offset (Si la Imagen se ha recortado)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">oY => La esquina Y del offset (Si la Imagen se ha recortado)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">oW => Ancho original (si la imagen ha sido recortada)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">oH => Alto original (si la imagen ha sido recortada)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">r => Es 'y' si la imagen está rotada</span></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Se puede ver que el ejemplo es sencillo, pero no importa el tamaño del atlas va a funcionar de todas formas. Incluso si los Tiles son de diferente tamaño.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Para terminar, veamos el código que muestra la secuencia:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvkw14EdhE7LoTRiN978o8SNOIJ9Ybzm4WthEsUIJGZu8p5BSP-0XONSiC860lra3hV284wSHBDneVjO7yo7TDlp74X5VyKfZW6aYmP5WrAVPJ6YX_d9fT_1-nO8QrSHvU_yqvvXWyuE/s1600/frames.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvkw14EdhE7LoTRiN978o8SNOIJ9Ybzm4WthEsUIJGZu8p5BSP-0XONSiC860lra3hV284wSHBDneVjO7yo7TDlp74X5VyKfZW6aYmP5WrAVPJ6YX_d9fT_1-nO8QrSHvU_yqvvXWyuE/s1600/frames.png" height="191" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">No es lo ideal en una situación real..De hecho, afectaría terriblemente al rendimiento. Vamos a ver como se soluciona en las próximas entradas.</span></div>
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Pueden ver el código completo en <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/AnimaV1" target="_blank">Git</a></span>Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-38738773139582936502015-03-27T11:26:00.001-03:002015-03-27T11:26:53.306-03:00Atlas, Xml y Packers (Parte 1)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGUW5Nq9cmYP76F2qggM3y0BbS4T3Mvjb-rTnIRmyaI4Wya_NMdckttHQiwOSTO3OrGWZ8Q7aObQx4PEezf_S_uaMjQiM3I98vo893H5_GldxIw7Ly1FAoYOB_jNpUgaiRv-OkZvhOYYY/s1600/packer1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGUW5Nq9cmYP76F2qggM3y0BbS4T3Mvjb-rTnIRmyaI4Wya_NMdckttHQiwOSTO3OrGWZ8Q7aObQx4PEezf_S_uaMjQiM3I98vo893H5_GldxIw7Ly1FAoYOB_jNpUgaiRv-OkZvhOYYY/s1600/packer1.png" height="199" width="320" /></a></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-5a98-f03e-94f1-093ab445ba3c" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-5a98-f03e-94f1-093ab445ba3c" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La semana pasada comenzamos con una introducción al tema: Como recortar una imagen en fragmentos para poder utilizarlas de forma separada y así optimizar un poco el rendimiento de nuestra aplicación. </span></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-5a98-f03e-94f1-093ab445ba3c" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-5a98-f03e-94f1-093ab445ba3c" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">También nos ahorrarnos líneas y líneas de código..pero como se generan estas sábanas de gráficos? existe algún método para hacernos las cosas aún más sencillas? Veamos..</span></div>
<br />
<br />
<br />
<a name='more'></a><br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Un Atlas como vimos, es un conjunto de imágenes que se alojan en un archivo en común. Existen varios tipos, pero por lo general se los divide en dos grupos: Los atlas de texturas y los atlas de sprites. Obviamente se pueden combinar ambas cosas. </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3YualIpUYiWh2oXJ-24-hHkUwMNuL1DvZrO3SwT4m41dgvwAbilU5HnJwC4amt2WNv-e28N8Qa_-olVLAjdJDTBJ8CbdF0ntzgc9ZGQ3OqsAxhJ0fGhmBcki47pyDVF4G1-vwpsZlWrM/s1600/FEM-cat-texture-map.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3YualIpUYiWh2oXJ-24-hHkUwMNuL1DvZrO3SwT4m41dgvwAbilU5HnJwC4amt2WNv-e28N8Qa_-olVLAjdJDTBJ8CbdF0ntzgc9ZGQ3OqsAxhJ0fGhmBcki47pyDVF4G1-vwpsZlWrM/s1600/FEM-cat-texture-map.jpg" height="200" width="200" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh15jlFWIxyKi3ytfjlaxHDWYSz-gMIgc8FI_H0mMlMBBiRUtS3C_fDJv921BcxUaZaTPEbvAFO8EPgddo2wu920o1ZyHG60a_eFX9cJjixtfOUc1tbp2NrFSurWpa-w-cu29WV5HZ1sQw/s1600/cat_spritesheet_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh15jlFWIxyKi3ytfjlaxHDWYSz-gMIgc8FI_H0mMlMBBiRUtS3C_fDJv921BcxUaZaTPEbvAFO8EPgddo2wu920o1ZyHG60a_eFX9cJjixtfOUc1tbp2NrFSurWpa-w-cu29WV5HZ1sQw/s1600/cat_spritesheet_1.png" height="200" width="200" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Es muy común también en una aplicación de gran tamaño o que utilice muchos gráficos, dividirlos en secciones para poder optimizar de esta forma el uso de hardware (Una imágen, dependiendo del hardware, sistema operativo o plataforma, incluso el lenguaje utilizado, puede llegar a ocupar en algunos casos casi el doble o más de su tamaño en memoria una vez leída o cargada desde el archivo).</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Supongamos por un momento que terminamos de dibujar estas 4 imágenes con nuestro editor favorito:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7juDqEm4aTqMX07o93MPhtuoNdHOoGmEEG-5M0L0Aux94r1B6pyqVNkZs259dAQ9zK2os89MKjtPajU4X8DT-UDerHSrgC-Sm25Q2_38SUcn6opxIJO7Q6rWEQvdmMpUgqy1F1SdauPQ/s1600/dino1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7juDqEm4aTqMX07o93MPhtuoNdHOoGmEEG-5M0L0Aux94r1B6pyqVNkZs259dAQ9zK2os89MKjtPajU4X8DT-UDerHSrgC-Sm25Q2_38SUcn6opxIJO7Q6rWEQvdmMpUgqy1F1SdauPQ/s1600/dino1.png" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio5hvBTYLiCqdcvDJLpVs-RiZnBX5AXfd_0kYKApetWclPMUjQCosAfE6k3wbbgyZzrY0f9Dkl9MAka6DTdQdqslgFsZGjodhJomFzKoYhhEAsAgcfOGXNVYCblfPntxyu2BUpZN0uvrc/s1600/dino2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio5hvBTYLiCqdcvDJLpVs-RiZnBX5AXfd_0kYKApetWclPMUjQCosAfE6k3wbbgyZzrY0f9Dkl9MAka6DTdQdqslgFsZGjodhJomFzKoYhhEAsAgcfOGXNVYCblfPntxyu2BUpZN0uvrc/s1600/dino2.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkJqv_DalQWSv9Npe_p3EADiXBYPamPGkviz5Tq6VWDaQDV51yY2jWiXnqac01zayccpS28oCfLaJc34xwvS8_Rpf22Z1stgVgEcjEO7yHgAsMYh_jcs07zv_RqsNJdfEXOFhu1-uMrYM/s1600/dino3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkJqv_DalQWSv9Npe_p3EADiXBYPamPGkviz5Tq6VWDaQDV51yY2jWiXnqac01zayccpS28oCfLaJc34xwvS8_Rpf22Z1stgVgEcjEO7yHgAsMYh_jcs07zv_RqsNJdfEXOFhu1-uMrYM/s1600/dino3.png" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJW8B1AFSY-ttnTOE1vC01Z_r2xSvNg31Hviv0vW-Zo_0sXjxaiRd9BWe8FtkbWxdIBJVZb6rCSSJHM_Cj740XSB_tngkTU5Xm8uqNasnNyt_fsDMHuoju-wQyVHnsYMkT_f54IJBKclM/s1600/dino4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJW8B1AFSY-ttnTOE1vC01Z_r2xSvNg31Hviv0vW-Zo_0sXjxaiRd9BWe8FtkbWxdIBJVZb6rCSSJHM_Cj740XSB_tngkTU5Xm8uqNasnNyt_fsDMHuoju-wQyVHnsYMkT_f54IJBKclM/s1600/dino4.png" /></a></div>
<br />
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Por lo que hemos visto hasta ahora, sería lógico de pensar que podemos:</span></div>
<br />
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Calcular las dimensiones (superficie) que necesitamos para alojarlas en un atlas.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Abrir un nuevo archivo con las dimensiones calculadas.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Pegar la secuencia de imágenes.</span></li>
</ul>
<br />
<br />
<div dir="ltr" id="docs-internal-guid-5dc15c9f-5ac5-aa3a-2273-f0089588b715" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">No estaría mal..medio arcaico? y Sí. Pero, históricamente hablando, en algún momento se hizo de esa forma. </span></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-5ac5-aa3a-2273-f0089588b715" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4BXAdg1IYjjC-bbQclpqkcad56I3HSxhoW_JiaRvx5U4Ho_s4jpvVPMjHZ7UmkalpZSR-NcovCdwWZTUNPLurIgz-AWyHl4Tz9NXAxmwRADqF1BCvkJm7dDVtFLzaV29RHOPSwpP8Omg/s1600/sprites.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4BXAdg1IYjjC-bbQclpqkcad56I3HSxhoW_JiaRvx5U4Ho_s4jpvVPMjHZ7UmkalpZSR-NcovCdwWZTUNPLurIgz-AWyHl4Tz9NXAxmwRADqF1BCvkJm7dDVtFLzaV29RHOPSwpP8Omg/s1600/sprites.png" height="200" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Podemos imaginarnos los problemas y complicaciones que este método trae aparejados a gran escala sin mucho esfuerzo. (Ni hablar, cuando en el proyecto intervienen varias personas: programadores por un lado, animadores, diseñadores gráficos y artistas por el otro..etc).</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Además, está el código, que en este caso, al ser las 4 y del mismo tamaño, es relativamente sencillo (como ya vimos anteriormente).</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6mZpx2ZpkblafdHPIQoRZh3DZ1BJ1WGzNFPZ-XGeawGrRQZb3Po65UH5NeifVv_YzNd7YHZty9wRfN_SU2SmffiyGuXgTB-t80Kt4V9Z5Ioyq6O4YQakt_tXPc715vhc2ZwYkiizUzts/s1600/xml2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6mZpx2ZpkblafdHPIQoRZh3DZ1BJ1WGzNFPZ-XGeawGrRQZb3Po65UH5NeifVv_YzNd7YHZty9wRfN_SU2SmffiyGuXgTB-t80Kt4V9Z5Ioyq6O4YQakt_tXPc715vhc2ZwYkiizUzts/s1600/xml2.png" height="176" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br />
<div dir="ltr" id="docs-internal-guid-5dc15c9f-5ae0-fcaa-8048-a0020716b87f" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Ahora bien: Estamos asumiendo que nuestro atlas sólo contempla una secuencia de imágenes que van a ser utilizadas por un solo objeto (y en este caso particular, una determinada condición).</span><br />
<br />
<div dir="ltr" id="docs-internal-guid-5dc15c9f-5b0f-5836-6b57-fab56d974ae1" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Qué pasaría si, por ejemplo, nuestro personaje debe asumir diferentes posturas:</span></div>
<br />
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Esperando una acción (por parte del jugador).</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Caminar a la izquierda</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Caminar a la derecha</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Saltar o comer..o lo que nos imaginemos.</span></div>
</li>
</ul>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En un principio deberíamos dibujar los cuadros que cada acción va a tener en su conjunto y agregarlos al atlas obviamente:</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNooIfkmPT0ywqngBIjxuKkbkvxtlcXREti_x2_NRe2VEx5wSUVOcMYEXjUq33YwGutqIYzGd1aCjrjiu1gCXYdMcVLF4XduZfKAd4ztivUgdro1tCqlktb5hPVH_i_pgI33DbUNBWXTM/s1600/mostro2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNooIfkmPT0ywqngBIjxuKkbkvxtlcXREti_x2_NRe2VEx5wSUVOcMYEXjUq33YwGutqIYzGd1aCjrjiu1gCXYdMcVLF4XduZfKAd4ztivUgdro1tCqlktb5hPVH_i_pgI33DbUNBWXTM/s1600/mostro2.png" height="320" width="256" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego se nos presenta el problema de querer separar esas imágenes en conjuntos mediante el uso de algoritmos:</span></div>
</div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-5ae0-fcaa-8048-a0020716b87f" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Podríamos tener una secuencia de 4 para una acción(idle), otra secuencia de 5 (caminar izquierda), caminar derecha..etc..</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Existen varias formas de encarar el problema:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La primera y más obvia es ver el archivo y escribir el código separando en funciones o secciones dependiendo de las acciones. (en el pasado, los artistas entregaban junto con el o los Atlas, una planilla de referencia o una impresión, detallando cada imagen y algunos atributos como por ejemplo su tamaño para que el programador no tuviera que encargarse de ello).</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX1GK_umIjbHDvJUuHhiHPIbudPnsGqfgdm7FT7nU5GT84TyuVqb6v3e5LfCegHOzpf5ILV7_m7ik30CkIs1g-sUqzqC4VUZF7htz_yRjmomMgqJhShF3HCa8PhMV4oo68plsCjjyCnvQ/s1600/xml4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX1GK_umIjbHDvJUuHhiHPIbudPnsGqfgdm7FT7nU5GT84TyuVqb6v3e5LfCegHOzpf5ILV7_m7ik30CkIs1g-sUqzqC4VUZF7htz_yRjmomMgqJhShF3HCa8PhMV4oo68plsCjjyCnvQ/s1600/xml4.png" height="308" width="320" /></a></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Por otro lado, y con un proyecto más grande podríamos; hipotéticamente hablando, ingresar todos los datos de las imágenes en un archivo de texto e ir extrayendo la información para alojarlas en un array o pasar esos valores a las funciones que se encargan de construir nuestros objetos sprite.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiecK2wO5aO7Tl9PWcFK7f6YZTD2E3n9hc9gTbisQTSmwMQEUNPbKJWFkG1UxdyIzhGpoClTi_NWy_K-F9wVVz67tBOJOoWynaZUcnDlgAP-ziyZaj8cdiWgTyiWH8kZ-3f8_JCO-E5fFk/s1600/xml3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiecK2wO5aO7Tl9PWcFK7f6YZTD2E3n9hc9gTbisQTSmwMQEUNPbKJWFkG1UxdyIzhGpoClTi_NWy_K-F9wVVz67tBOJOoWynaZUcnDlgAP-ziyZaj8cdiWgTyiWH8kZ-3f8_JCO-E5fFk/s1600/xml3.png" height="309" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
</div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-5ae0-fcaa-8048-a0020716b87f" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Sin embargo, seguimos arrastrando el problema de fondo. Si hay que modificar una imagen, hay que modificar el atlas y seguramente nuestro archivo con la información.</span><br />
<br />
<div dir="ltr" id="docs-internal-guid-5dc15c9f-5b97-643c-0bc7-a90307651b64" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Ahí es donde entran en juego ciertas aplicaciones que nos van a ayudar con estos problemas:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Se las denomina Empaquetadores (Packers en inglés) y realizan exactamente lo que nosotros estamos buscando: Generar un Atlas por un lado, y un archivo con la información de cada imagen por el otro.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Existen varios. Dentro de los más populares se encuentran:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">TexturePacker: </span><a href="https://www.codeandweb.com/texturepacker" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline;">https://www.codeandweb.com/texturepacker</span></a></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">ShoeBox: </span><a href="http://renderhjs.net/shoebox/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline;">http://renderhjs.net/shoebox/</span></a></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Zwoptex: </span><a href="http://zwopple.com/zwoptex/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline;">http://zwopple.com/zwoptex/</span></a></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Sprite Sheet Packer: </span><a href="http://spritesheetpacker.codeplex.com/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline;">http://spritesheetpacker.codeplex.com/</span></a></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">y deben de existir cientos más.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Con esta guia voy a utilizar el primero de ellos (TexturePacker). La versión gratuita nos alcanza por el momento como para comenzar a ver de qué se trata. </span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Una vez instalado, nos encontraremos con una pantalla de inicio similar a esta:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmbMpEDGFarNJf0hXMXx0Fp3amiCKV2I7ewmsHyqBkBl9ZSXbd3hxyW0d8dla0liqmIldfthiRGM6GgjCE-VNGoZ0aK9hs7TPXxUVC_JLGId5IIcpvh3gSH3dmWdy8050mmLnEcgI7po/s1600/packer1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmbMpEDGFarNJf0hXMXx0Fp3amiCKV2I7ewmsHyqBkBl9ZSXbd3hxyW0d8dla0liqmIldfthiRGM6GgjCE-VNGoZ0aK9hs7TPXxUVC_JLGId5IIcpvh3gSH3dmWdy8050mmLnEcgI7po/s1600/packer1.png" height="175" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Generamos un nuevo proyecto <XML></span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Aparecerá una ventana similar a esta donde arrastramos nuestras imágenes a la zona gris, o utilizamos el botón Add. Una vez cargadas en el programa, aparecerán en la solapa izquierda.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOuJFILfCfDZA0giye19NP4bTHhUvPEDKR3jXZ2uQOLnMhZu6U8cNqkAEXIm0gmI4JQ3OvMmggKTcfBfjxDIFdiohcAtNiVP0nP0X8T8xjvmkuVO80OWvr7Tvmpj7rEqq4zWQHFYofJXA/s1600/packer2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOuJFILfCfDZA0giye19NP4bTHhUvPEDKR3jXZ2uQOLnMhZu6U8cNqkAEXIm0gmI4JQ3OvMmggKTcfBfjxDIFdiohcAtNiVP0nP0X8T8xjvmkuVO80OWvr7Tvmpj7rEqq4zWQHFYofJXA/s1600/packer2.png" height="235" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego tenemos que ingresar las dos rutas de acceso:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO-gKNdi93wpKBfgG2J4nVlAGdLwaa6gwkez3UVgh9KI-5rBty3XgGiyY1VQ1ldm2YpnbfIafbOWTyZ81BeF8z8w5kfGoO1VRpdKXkKC4LPcY8wPzdrssyyt89PILpWo4OEYyG5W3VYb8/s1600/packer3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO-gKNdi93wpKBfgG2J4nVlAGdLwaa6gwkez3UVgh9KI-5rBty3XgGiyY1VQ1ldm2YpnbfIafbOWTyZ81BeF8z8w5kfGoO1VRpdKXkKC4LPcY8wPzdrssyyt89PILpWo4OEYyG5W3VYb8/s1600/packer3.png" height="237" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La opción en<span style="color: red;"> Rojo</span> es para generar el archivo <XML> (más abajo vemos que es).</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La opción en<span style="color: lime;"> <span style="background-color: black;">Verde</span></span><span style="background-color: white;"> </span>apunta a la carpeta donde se va a generar el Atlas (imagen grande)</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Las demás opciones no hace falta que las toquemos por ahora.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Una vez hecho esto, simplemente presionamos el botón de Publicar y listo.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYBC-BdfOwXcaAODgokqwEYIvK_G11Vrny5SjDRY_ms7tqFftwCNEAOPZvy1Nkgg6dilrEqeLfGdhn17tXoNWOiu_rHkdDtbZFADKVp-fBsJcEIqw-_Z_drP1OJYVGJGBh4jLssHT2HDg/s1600/packer4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYBC-BdfOwXcaAODgokqwEYIvK_G11Vrny5SjDRY_ms7tqFftwCNEAOPZvy1Nkgg6dilrEqeLfGdhn17tXoNWOiu_rHkdDtbZFADKVp-fBsJcEIqw-_Z_drP1OJYVGJGBh4jLssHT2HDg/s1600/packer4.png" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Si todo salió correctamente nos aparecerá una ventana emergente con un resumen de lo hecho por el programa.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfwoV9LOLyjtRtnzh7SsAuWMrFiYbi3VHyJb1mxhCHlsbqRvLc1OP0LamdJLyAmMcT5QleebIUU2sahyphenhyphenKWrMRtyjBiX8haV1YW2-7Pio2jJBidaye9X_PkRF5z0pOKU8vzpS8MWGk_RI0/s1600/packer5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfwoV9LOLyjtRtnzh7SsAuWMrFiYbi3VHyJb1mxhCHlsbqRvLc1OP0LamdJLyAmMcT5QleebIUU2sahyphenhyphenKWrMRtyjBiX8haV1YW2-7Pio2jJBidaye9X_PkRF5z0pOKU8vzpS8MWGk_RI0/s1600/packer5.png" height="109" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Además, veremos que en la carpeta de destino nos encontraremos con 2 archivos nuevos:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El atlas por un lado:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTuSu9mr7ASV-ofjzZoBcjh8_wA4ABVgem660RX4LDV-D5Pro_gUurzCI1znmhwhIzyRdKMuj8kNAlhlq-qFm9WZWJYFl9M6Mif9wNnx7pEAXj-lSsXhRkNftA3SjYUsEu4Gi2jLDEpEw/s1600/sprites.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTuSu9mr7ASV-ofjzZoBcjh8_wA4ABVgem660RX4LDV-D5Pro_gUurzCI1znmhwhIzyRdKMuj8kNAlhlq-qFm9WZWJYFl9M6Mif9wNnx7pEAXj-lSsXhRkNftA3SjYUsEu4Gi2jLDEpEw/s1600/sprites.png" height="83" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El archivos de parámetros por el otro:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSvE_41IiS2fu1N0qzgUmUawygvlN8Al5fHj5Qg3iTkCNHx_syES2OBfJwBt3aTvkAm3RY35teOsBs2Xd7MvTIHKHCDSF6U2L3nVLInU7yh3Jyq8yjaRVOvU2oY_aqnYs_EaAyeV0hrfY/s1600/packer6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSvE_41IiS2fu1N0qzgUmUawygvlN8Al5fHj5Qg3iTkCNHx_syES2OBfJwBt3aTvkAm3RY35teOsBs2Xd7MvTIHKHCDSF6U2L3nVLInU7yh3Jyq8yjaRVOvU2oY_aqnYs_EaAyeV0hrfY/s1600/packer6.png" height="87" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Observando la imagen del archivo xml, podrán ya ir haciéndose una idea de cómo viene la mano para el próximo capítulo..o no?</span></div>
</div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-5ae0-fcaa-8048-a0020716b87f" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span></div>
Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-53436274180773303152015-03-21T04:58:00.002-03:002015-03-21T04:58:42.491-03:00Aplicaciones y Rendmimiento (Segunda Parte)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFJm1J4rXFYsJnfJ9aXXKZVVsv9iVrm8yw3VNhH6fbMLf2YbzTarPUVd4wRk4lb2oBpx8JnND08zWH5zf8dvn4Mjh-E7Niz7pzJ-3pRvB_mMGSKIk-998NYYrUukuVcqTrzymPS8PRUjw/s1600/tilesGame.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFJm1J4rXFYsJnfJ9aXXKZVVsv9iVrm8yw3VNhH6fbMLf2YbzTarPUVd4wRk4lb2oBpx8JnND08zWH5zf8dvn4Mjh-E7Niz7pzJ-3pRvB_mMGSKIk-998NYYrUukuVcqTrzymPS8PRUjw/s1600/tilesGame.jpg" /></a></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-377d-27d7-8b0b-3112e2a75b4b" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-377d-27d7-8b0b-3112e2a75b4b" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Continuando con la serie, veamos de qué se tratan los Tiles o mosaicos. En teoría es un conjunto de imágenes agrupadas en un solo archivo que, mediante una serie de algoritmos, vamos extrayendo una a una para alojarlas en memoria y posteriormente utilizarlas. Presenta ventajas y desventajas este método de manipular imágenes, pero por lo general y a largo plazo se vuelve casi imprescindible.</span></div>
<br />
<br />
<br />
<br />
<br />
<a name='more'></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El programa que arrancamos viendo la semana pasada usa este método para cargar y mostrar las figuras en la pantalla.</span><br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Ahora con un ejemplo sencillo; Supongamos que vamos a utilizar todos los elementos de esta imagen:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja3yNr9biQkmLCBI-7Q1kFRWiOkUOiuk3zVKnUL44xzNvc9iLTxrWiV50GRFqQMbE0hNtIogD70rd_SX5xRYwwwGfAMqtWisCcMwaiJBoZdqZ-0LQhDanuFACYsSEedDbd5kDUYN4j6VI/s1600/SabanaEquipo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja3yNr9biQkmLCBI-7Q1kFRWiOkUOiuk3zVKnUL44xzNvc9iLTxrWiV50GRFqQMbE0hNtIogD70rd_SX5xRYwwwGfAMqtWisCcMwaiJBoZdqZ-0LQhDanuFACYsSEedDbd5kDUYN4j6VI/s1600/SabanaEquipo.png" height="320" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Con los métodos que vimos hasta ahora, deberíamos:</span></div>
<br />
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Abrir un editor de imágenes</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Cortar cada una de ellas</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Guardarlas en archivos de forma individual</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Escribir el código para cargar cada una por separado.</span></div>
</li>
</ul>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Un infierno..y son solamente 256..</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Imaginen que se va complicando un poco más:</span></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw1AvqIq1vCHrVJuC8d-6E4B7Ts2zIjJcsFv9DvSMaaWXnWHp9GOJ3RSjHd-cfhE_NrhEDSzPXH5i55TyxPEaK0tfi2497sOSH5bVt8mzIPszZ_z4b8G0S9Xt-iIQBuHn0On131Fz8IDQ/s1600/DungeonCrawl_ProjectUtumnoTileset.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw1AvqIq1vCHrVJuC8d-6E4B7Ts2zIjJcsFv9DvSMaaWXnWHp9GOJ3RSjHd-cfhE_NrhEDSzPXH5i55TyxPEaK0tfi2497sOSH5bVt8mzIPszZ_z4b8G0S9Xt-iIQBuHn0On131Fz8IDQ/s1600/DungeonCrawl_ProjectUtumnoTileset.png" height="300" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">... :/ </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">OpenFL nos va a dar una mano mediante el uso del método openfl.display.Tilesheet (similar a AS3, pero mejor que éste ya que está optimizado para usar el GPU)</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Consiste en obtener una sección de la imagen (<a href="http://es.wikipedia.org/wiki/Tile" target="_blank">Tile</a>) mediante el uso de coordenadas y guardar esos datos en una arreglo o matriz (array).</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Digamos por ejemplo que tenemos esta imagen:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4WfcuQjjJIuBaypOFSUS1xu4oE6gCBn4RFTbuEZG0tQfEdi0kulxr3UgZVXAKu_jQ9jymTowCHHIKIECZQnjtyYUZanXBes262a1cXLjxgwHGGzffqQ2pymANi9IdkgE8VOK0iN35ckU/s1600/casas1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4WfcuQjjJIuBaypOFSUS1xu4oE6gCBn4RFTbuEZG0tQfEdi0kulxr3UgZVXAKu_jQ9jymTowCHHIKIECZQnjtyYUZanXBes262a1cXLjxgwHGGzffqQ2pymANi9IdkgE8VOK0iN35ckU/s1600/casas1.png" height="96" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Para extraer las 4 casas y convertirlas en Tiles, deberíamos de hacer:</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiJBl1Ray-BRd-Y4qM3J9k7pmwPcqzKdVGuoxzsHAUtmQoSG5V6f71sPhKaHfFl5fbsDIXPU3XebdsGNEKJ7NkvgcfTpo4KpoAy0C3FqC3wFdNf_dByaylNiaLsU_Xnzy4PyuSDLAUYuU/s1600/casas2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiJBl1Ray-BRd-Y4qM3J9k7pmwPcqzKdVGuoxzsHAUtmQoSG5V6f71sPhKaHfFl5fbsDIXPU3XebdsGNEKJ7NkvgcfTpo4KpoAy0C3FqC3wFdNf_dByaylNiaLsU_Xnzy4PyuSDLAUYuU/s1600/casas2.png" height="277" width="400" /></a></div>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> La imagen muestra el código completo, veamos el resultado en pantalla:</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh44FPpprZtcUK1-coWPjCA1nEDuPtmT0y2LbSkAcwxdvbn23ao3hl08cxHOvEyQ8MKP81_bHX_QnzrxdZqcMoVrTseSBJS2PaxSyd8a2xeJE5PJdv1bg1rBCrx4NRTBk-8FT5Hw5vi2Qk/s1600/casas4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh44FPpprZtcUK1-coWPjCA1nEDuPtmT0y2LbSkAcwxdvbn23ao3hl08cxHOvEyQ8MKP81_bHX_QnzrxdZqcMoVrTseSBJS2PaxSyd8a2xeJE5PJdv1bg1rBCrx4NRTBk-8FT5Hw5vi2Qk/s1600/casas4.png" height="320" width="231" /></a></div>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<br />
<div dir="ltr" id="docs-internal-guid-5dc15c9f-378e-183b-d621-0127624584c7" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Desarrollemos un poco el código:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La variable “sabana” es el asset (archivo de imágenes) donde se encuentran las casitas.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego declaramos el objeto:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">var tilesheet = new Tilesheet (sabana);</span></span></div>
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">y comenzamos a recortar en secciones y a guardarlas:</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcMxtCDq-1UVd2L8GtTmdyiJTWzysBrZb5jXPaHeIUZkfYGsUEUHwY3cs78_ELBhJF-x6I7hhvF1WIEWLeCI9_3W6FIkfAg3d-W9sXNYC8UVD8Jk-V6shXyfPIz-TXuDuZBVN7RndbN0/s1600/casas3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFcMxtCDq-1UVd2L8GtTmdyiJTWzysBrZb5jXPaHeIUZkfYGsUEUHwY3cs78_ELBhJF-x6I7hhvF1WIEWLeCI9_3W6FIkfAg3d-W9sXNYC8UVD8Jk-V6shXyfPIz-TXuDuZBVN7RndbN0/s1600/casas3.png" height="156" width="400" /></a></div>
<br />
<br />
<br />
<div dir="ltr" id="docs-internal-guid-5dc15c9f-3794-579f-0aaa-e0cd422e4615" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En el ejemplo, el alto se mantiene constante en 100 pixels (que es el alto de la imagen). El largo varía un poco (88,84,81,88) debido a que los rectangulos de colores los dibujé a mano.</span></div>
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Podríamos haber utilizado un bucle (for..in) pero son pocas las imágenes y en mi opinión queda más descriptivo. En la entrada anterior del blog con el<a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/FPStest" target="_blank"> ejemplo de los FPS</a>, utilizo 2 bucles para rellenar el array con las 256 muestras.</span><br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El indice arranca en cero y se auto incrementa de forma automática.</span> </span><br />
<br />
<div dir="ltr" id="docs-internal-guid-5dc15c9f-3b18-d5e0-dd51-5e623e30626a" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Una vez cargado el arreglo, pasamos a mostrarlas:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La forma más simple de su uso es <span style="color: red;"> [PosX, PosY, Indice]</span></span></div>
<span style="color: blue;"><br /></span><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">tilesheet.drawTiles(graphics, [50, 50, 0], false); </span></span></div>
<br />
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Además, la funcion puede manejar algunos valores extra como por ejemplo:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDa4FpNdB9XBNlGUVWbwMka2zuU8yzGav0TMq2SrVgSguA3LMh5U4FDX3dF1o3JTNdbt9OKEUjGus13PkLyCMySMRaYPhM8dKkYx-Ep6nRg8WCV639BzVZuepM5clHU3hiyktgorvAG18/s1600/casas5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDa4FpNdB9XBNlGUVWbwMka2zuU8yzGav0TMq2SrVgSguA3LMh5U4FDX3dF1o3JTNdbt9OKEUjGus13PkLyCMySMRaYPhM8dKkYx-Ep6nRg8WCV639BzVZuepM5clHU3hiyktgorvAG18/s1600/casas5.png" height="51" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Si se usa el flag de rotación, habrá que agregar un cuarto valor al array (en radianes)</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Lo mismo sucede si se modifica la escala:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9BOd_-bgUrP8XnpAm7Sd6ZeZ3Kkjh15c91L8ManvranDCNtC2dm7ovDEq4KS0ovRJroG6SUrG4-ZkwSpH2NTNYtSGXT9Ff7kPitLsXJ6EsB8jN16Yn1o9gvMIgJguxRlFW4LU2TZGRjk/s1600/casas6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9BOd_-bgUrP8XnpAm7Sd6ZeZ3Kkjh15c91L8ManvranDCNtC2dm7ovDEq4KS0ovRJroG6SUrG4-ZkwSpH2NTNYtSGXT9Ff7kPitLsXJ6EsB8jN16Yn1o9gvMIgJguxRlFW4LU2TZGRjk/s1600/casas6.png" height="48" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Pueden utilizarse conjuntamente varios, siempre que se respete el orden de los valores dentro del arreglo.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El unico modificador que funciona diferente es Tilesheet.TILE_TRANS_2x2:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUb-WZRV0R0K0HHC2ZL5FHwv1YS4LJ20z_rS-oy4cHKLbCTKwXZBEZfBPzmsOCoHy3ydfs_SnXYuvuXkC7HodnUHvseeJ4ABJzCvsydWtElG_vHMgPj0eTow2c7Z2am-QMCanoDinYRZo/s1600/casas7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUb-WZRV0R0K0HHC2ZL5FHwv1YS4LJ20z_rS-oy4cHKLbCTKwXZBEZfBPzmsOCoHy3ydfs_SnXYuvuXkC7HodnUHvseeJ4ABJzCvsydWtElG_vHMgPj0eTow2c7Z2am-QMCanoDinYRZo/s1600/casas7.png" height="46" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Al estar presente dentro de la función se ignoran rotación y escala. Debe tener los 4 valores presentes dentro del arreglo o producirá un error.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Volviendo a</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">l<a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/FPStest" target="_blank"> ejemplo de los FPS</a>, tenemos dentro del evento Tiempo (timer) que existe un bucle para cargar un array con valores aleatorios.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF_OpSMqLq5pqdirf8Pzxi7UXC7MAuYDtTHTtNDLsv3pf1nsR1gYSAbIPjTljhIA39VZryBjCQtJiKqBKKUbp9-cG9Ra_MgRz8ds6vE8JEpUOO2MHeXqkcqZYo6qNXdUbTW93HeRXuiCs/s1600/fps1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF_OpSMqLq5pqdirf8Pzxi7UXC7MAuYDtTHTtNDLsv3pf1nsR1gYSAbIPjTljhIA39VZryBjCQtJiKqBKKUbp9-cG9Ra_MgRz8ds6vE8JEpUOO2MHeXqkcqZYo6qNXdUbTW93HeRXuiCs/s1600/fps1.png" height="216" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-3b46-a768-6e81-6e214632cd18" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Como puede verse es uno de los recursos más versátiles y potentes dentro de las librerías que OpenFL tiene a su disposición. A ello,hay que sumarle la rapidez y eficiencia con la que Haxe maneja los arreglos.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Es la combinación ideal para generar gráficos con un cierto grado de complejidad con pocas líneas de código. Los dos frameworks más usados en la actualidad que se utilizan para juegos en 2D hacen uso de ella.</span></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk79aCEoaUJ_KOHTq8X741dWOreoEHzsmRge5C2_8Iy9UzsHqXw7O16WM2Nt7JQa4wJ5tW70frk1tqMxZErzgxZf7Rbf96Pw8SvWVrapYP1aUrV1lRkQnfmWKnexsjjYYB40W6fFf80Os/s1600/magiscarf_tileset_test_______by_phyromatical-d742rbm.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk79aCEoaUJ_KOHTq8X741dWOreoEHzsmRge5C2_8Iy9UzsHqXw7O16WM2Nt7JQa4wJ5tW70frk1tqMxZErzgxZf7Rbf96Pw8SvWVrapYP1aUrV1lRkQnfmWKnexsjjYYB40W6fFf80Os/s1600/magiscarf_tileset_test_______by_phyromatical-d742rbm.png" height="320" width="320" /></a></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Otro de los ejemplos más conocidos y utilizados es la generación aleatoria de Mapas, Niveles, etc.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Quizás el tema se haya desvirtuado un poco, pero quiero terminar la entrada haciendo referencia a un libro (Lamentablemente en Inglés por ahora) escrito por Bob Nystrom, que es exactamente a dónde apunta esta entrada: código y eficiencia al mismo tiempo.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Página oficial, Web del autor y<a href="http://gameprogrammingpatterns.com/" target="_blank"> su libro aquí</a></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Puede <a href="http://gameprogrammingpatterns.com/contents.html" target="_blank">leerse en línea aquí</a></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">También se puede<a href="https://github.com/munificent/game-programming-patterns" target="_blank"> colaborar con el autor desde aquí </a></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Recomiendo que le den una ojeada, especialmente<a href="http://gameprogrammingpatterns.com/game-loop.html" target="_blank"> éste capítulo</a>.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br />Seguiremos con este tema y un nuevo ejemplo en la próxima.</span></div>
<br />Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-51687768865897629812015-03-13T04:31:00.000-03:002015-03-20T05:39:14.839-03:00Aplicaciones y Rendmimiento (Primera Parte)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWk-dC10iTeNWg4mjQmvySxs-wfCYGbLS4wVUJ3Xd0LrouvefhKFI1aRGYctSnwit_2epSS_aVUJ0QjHeUIop0D5bmCuM10Wsgg4143_TdYHVSNJqmxEysWEARkINENi5CwcelCXFZHKI/s1600/0995d849d2396f7d34c3dbdee842bc73.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWk-dC10iTeNWg4mjQmvySxs-wfCYGbLS4wVUJ3Xd0LrouvefhKFI1aRGYctSnwit_2epSS_aVUJ0QjHeUIop0D5bmCuM10Wsgg4143_TdYHVSNJqmxEysWEARkINENi5CwcelCXFZHKI/s1600/0995d849d2396f7d34c3dbdee842bc73.jpg" height="198" width="320" /></a></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-361a-bb13-1ca4-0bb96e0cabf3" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-361a-bb13-1ca4-0bb96e0cabf3" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Hasta ahora hemos utilizado métodos muy sencillos para mostrar gráficos. Básicamente porque son ejemplos simples que utilizan pocos recursos, pero en una aplicación real, donde se necesita controlar cientos de objetos al mismo tiempo, las cosas pueden ponerse feas muy rápidamente.</span></div>
<br />
<br />
<br />
<br />
<br />
<a name='more'></a><br /><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Sabemos que las aplicaciones generadas para plataformas móviles y de escritorio con OpenFL tiene como máximo una tasa de 60fps (Frames per Second o Cuadros por Segundo).</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Corriendo a esa frecuencia, si tenemos muchos objetos con cada renderización, el tiempo restante (dentro de ese segundo) que el CPU tiene para las demás tareas (Lógica, manejo de eventos, etc) es relativamente escaso.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En ese momento, cuando el CPU (+ el <a href="http://es.wikipedia.org/wiki/Unidad_de_procesamiento_gr%C3%A1fico" target="_blank">GPU</a>) están abarrotados, nuestra aplicación comienza a sufrir un deterioro de la performance.</span></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3-pyhWWwPIu7iZPiW0tSG0ofjwKEbx4UxEqf-vnOrRbxtumfFNo0Ld5CkTSYMwyuM45SogL2tX3dRhEyGijHbMv_Bc1BalgBPAmt__QOJiRgPZrGXfac0ul5xNOBXyBWFpGG6K3fOPTc/s1600/instantiation.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3-pyhWWwPIu7iZPiW0tSG0ofjwKEbx4UxEqf-vnOrRbxtumfFNo0Ld5CkTSYMwyuM45SogL2tX3dRhEyGijHbMv_Bc1BalgBPAmt__QOJiRgPZrGXfac0ul5xNOBXyBWFpGG6K3fOPTc/s1600/instantiation.png" height="107" width="320" /></a></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Las dos imágenes que se encuentran debajo, muestran un ejemplo práctico de lo que estoy hablando: La aplicación genera cada segundo 100 objetos (imágenes) al azar y los pone en pantalla incrementando de esa forma la carga que tiene el procesador (o los procesadores).</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLkJcRu3a_EmEz1uhC119Kw-5cdVaqY8enpd1SXdJ_DHGIxL3pefyZGS7JU6WpKuk_a3vIyB_yavfibU8b_JTvYXyOnLHgcLwSzqhG8a3XpA9DeVsTrR63bhrkD21c8Xk9m8R6ZumsU8s/s1600/render2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLkJcRu3a_EmEz1uhC119Kw-5cdVaqY8enpd1SXdJ_DHGIxL3pefyZGS7JU6WpKuk_a3vIyB_yavfibU8b_JTvYXyOnLHgcLwSzqhG8a3XpA9DeVsTrR63bhrkD21c8Xk9m8R6ZumsU8s/s1600/render2.png" height="206" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En la aplicación, que veremos en detalle a continuación, hay tres eventos:</span></div>
<br /><ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Un temporizador: que se encarga de cargar los datos que van a ser mostrados en pantalla.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Un evento del Mouse (click): que activa y desactiva el temporizador.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El evento de dibujo de objetos al entrar al cuadro.</span></div>
</li>
</ul>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfeqSn22Q9CQMhKQXkKcX_haxicmaQEyv-W4RW7oyEJnuLORqHGPI1k3LRdMd56w5JG_oO16mTTKku9FbA_abvKGnKo6ZjjFj7MhI4Iphvu5xjGfpKNfgIKThYZbRuBE6bYsT9FPoZ3uw/s1600/render1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfeqSn22Q9CQMhKQXkKcX_haxicmaQEyv-W4RW7oyEJnuLORqHGPI1k3LRdMd56w5JG_oO16mTTKku9FbA_abvKGnKo6ZjjFj7MhI4Iphvu5xjGfpKNfgIKThYZbRuBE6bYsT9FPoZ3uw/s1600/render1.png" height="184" width="320" /></a></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Puede verse en el reporte generado por Firefox que el tiempo utilizado por el procesador para la renderización de imágenes (en el caso de firefox el engine encargado de la renderización es <a href="http://es.wikipedia.org/wiki/Gecko_%28motor_de_renderizado%29" target="_blank">Gecko</a>) supera ampliamente a los demás procesos (atender los otros eventos Timer y Mouse)</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Obviamente que la capacidad de procesamiento está íntimamente ligada al hardware, pero eso no debería ser excusa para poder producir código más eficiente.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Para un mejor manejo de gráficos, Openfl cuenta con un par de métodos que nos van a servir de ayuda.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En los ejemplos anteriores, usamos BitmapData - beginBitmapFill como método para cargar imágenes en nuestros sprites. Todo bien, cuando se utilizan pocos.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El problema es que este método tiene varios inconvenientes cuando se utilizan a gran escala:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La primera y quizás ya se habrán dado cuenta es que se necesita un archivo con la imagen por cada uno de los objetos que deseamos pintar con ella. Esto se traduce en código no sólo al inicio del programa, sino cuando removemos los objetos de la escena.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego está el problema de que por cada carga y descarga las rutinas invocadas son llamadas muy frecuentemente, restando tiempo que podría utilizarse en nuestro código.</span></div>
<br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Por último, estos métodos no están optimizados para que OpenFL pueda hacer uso de los coprocesadores gráficos (gpu).</span><br />
<br />
<div dir="ltr" id="docs-internal-guid-5dc15c9f-364c-8a81-a4bb-3785e3fe6e3c" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Existe un método más eficiente para manipular imágenes que es casi un standard en la industria de software dedicada a los juegos que se basa en la técnica de los Tiles (o mosaicos) que veremos en la próxima entrada.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Por el momento, quiero hablar de dos funciones que nos van a ayudar a mejorar (o por lo menos ver el rendimiento) de nuestra aplicación:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La primera es la función FPS que OpenFL tiene incorporada dentro de su conjunto de librerías:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Prácticamente viene lista para usar y comenzamos por importarla:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">import openfl.display.FPS;</span></span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego la declaramos:</span></div>
<span style="color: blue;"><br /></span><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">var fps:FPS = new FPS(10, 10, 0xedf505);</span></span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Los parámetros son simples: Coordenadas X,Y y color</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Por último la agregamos a la escena y listo..va a mostrarnos su valor sin necesidad de hacer uso de otra cosa.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">this.addChild(fps);</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEmuklqVxWAYBoJzJRSp-gnOUM56XpeCXAHjLLd2aQdjIarL4Oz10_p-L4tqYcUoBXmSTkh90DApfB5zCYq9sJggEvo-K3-wwkZ_5ewKFDxf8dlX6Ut5U1s28ibxH_jgTOzic4x5BOLps/s1600/render3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEmuklqVxWAYBoJzJRSp-gnOUM56XpeCXAHjLLd2aQdjIarL4Oz10_p-L4tqYcUoBXmSTkh90DApfB5zCYq9sJggEvo-K3-wwkZ_5ewKFDxf8dlX6Ut5U1s28ibxH_jgTOzic4x5BOLps/s1600/render3.png" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br />
<br />
<br />
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego tenemos una función que es propia de las librerías de Haxe (heredado de NME): System</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">import openfl.system.System;</span></span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Cuenta con varias cosas interesantes para experimentar, aquí solo hago uso de ella para que me muestre la cantidad de memoria utilizada por la aplicación.</span></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-jzqAoqdW9uRHy7rZ_yU1jBAjXktuhV8RAxmv8xqVUgsxYku_37YW-VXxCT8RI-P7AoyH-OcozePqzTFwmVlC38d6nyJFS2sUJtMtAqJaU2m8jmjx2bIldAVQ08SybaiwJIJqXf_2GEc/s1600/render4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-jzqAoqdW9uRHy7rZ_yU1jBAjXktuhV8RAxmv8xqVUgsxYku_37YW-VXxCT8RI-P7AoyH-OcozePqzTFwmVlC38d6nyJFS2sUJtMtAqJaU2m8jmjx2bIldAVQ08SybaiwJIJqXf_2GEc/s1600/render4.png" height="137" width="320" /></a></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Como el valor que trae la función está expresado en bytes y sería muy grande de mostrar, lo pasamos a Mb. Lamentablemente no es soportado en HTML5</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Una introducción a los Tiles en la próxima entrada.</span></div>
<br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Pueden descargar el código desde <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/FPStest" target="_blank">Git</a></span>Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-4896760901680945672015-03-06T07:27:00.000-03:002015-03-18T07:44:23.967-03:00Space Invaders: Final del Tutorial<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTP2mk-2LyMhyphenhyphenOG7ucMrhpUOO4bMzP8m4g7e0Dmzb49guoOGsUFZyjhMauZ4sXVQm3XxhjhIasSXGyrl5PYnKt3dAP6AaXKxHOlsMgMh19Jj__Q0D-_gm8Xei2yQ3OG9QW8t8vH1Zvpos/s1600/spacefini1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTP2mk-2LyMhyphenhyphenOG7ucMrhpUOO4bMzP8m4g7e0Dmzb49guoOGsUFZyjhMauZ4sXVQm3XxhjhIasSXGyrl5PYnKt3dAP6AaXKxHOlsMgMh19Jj__Q0D-_gm8Xei2yQ3OG9QW8t8vH1Zvpos/s1600/spacefini1.png" height="200" width="155" /></a></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-2c6e-c0e6-db86-095a2f47245d" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-2c6e-c0e6-db86-095a2f47245d" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Es curioso que la imagen a la izquierda pese más de la mitad (62Kb) que el proyecto - ejemplo terminado (104Kb).</span></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-2c6e-c0e6-db86-095a2f47245d" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En esta última entrega de Space Invaders, agregamos algo más de control y lógica, sonido y terminamos de construir el juego.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Agreguemos algún efecto de sonido para que no sea taaaan aburrido de jugar :P</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span></div>
<a name='more'></a><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Igual que para el ejemplo del Arkanoid, comenzamos con la declaración de las librerías que vamos a utilizar en Main.hx:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">import openfl.media.Sound;</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">import openfl.Assets;</span></span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego creamos el directorio y le colocamos los sonidos dentro. (Si esta tarea la realizan con el sistema operativo, FlashDevelop los mostrará en su árbol del proyecto al tiempo en que refresque)</span></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheicxARanYO_mM-0IonhzsoeSIXFZNXXDLHlNLs6jE6GdFMAIfWvhVyyeXZIgv4D_JuMeHjEMBhwWmx75hlafoWpc_S5BrUBcQOLN_cYphU0OfCY5-CfWSeyMU8snotVynNQMSRSlBuLA/s1600/spacefini3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheicxARanYO_mM-0IonhzsoeSIXFZNXXDLHlNLs6jE6GdFMAIfWvhVyyeXZIgv4D_JuMeHjEMBhwWmx75hlafoWpc_S5BrUBcQOLN_cYphU0OfCY5-CfWSeyMU8snotVynNQMSRSlBuLA/s1600/spacefini3.png" /></a></div>
<br />
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Agregamos en las opciones del proyecto (project.xml) el lugar donde apuntan los nuevos recursos</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><assets path="assets/Audio" rename="audio" type="audio" /></span></span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Los declaramos en Main.hx:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpjsfkK0wpmPy-w4A4zYX4Wl_hQyMB9bTwdIBbe1gRtgZ2c2hkdCg45mmQJtWuvmmq9xKCrfw1IFLIVp2bU9ec0aDJWSrRRNMIxY-dHZ2yai71pCTFbFbp-4QGC5L4u1cm5U8oW_uWnp4/s1600/spacefini2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpjsfkK0wpmPy-w4A4zYX4Wl_hQyMB9bTwdIBbe1gRtgZ2c2hkdCg45mmQJtWuvmmq9xKCrfw1IFLIVp2bU9ec0aDJWSrRRNMIxY-dHZ2yai71pCTFbFbp-4QGC5L4u1cm5U8oW_uWnp4/s1600/spacefini2.png" height="88" width="400" /></a></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">y los asignamos a cada objeto declarado:</span></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLUwMnKptUw4wfqruzw2_6MvJPFfly4orxKV11u9YBW_3KNd4AdIqAnDAGeUilglRxJtLT3_sH4k1qhRCzAvgX0Zu-RAgpaYBQEqwVjoVm3AejVVpjJrREuMXfBnMWXFwvCv5VM9BpoEY/s1600/spacefini4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLUwMnKptUw4wfqruzw2_6MvJPFfly4orxKV11u9YBW_3KNd4AdIqAnDAGeUilglRxJtLT3_sH4k1qhRCzAvgX0Zu-RAgpaYBQEqwVjoVm3AejVVpjJrREuMXfBnMWXFwvCv5VM9BpoEY/s1600/spacefini4.png" height="90" width="400" /></a></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Por último, mediante el método <span style="color: blue;"> .play()</span> los utilizamos en las diferentes secciones del código.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Quiero detenerme por un minuto en la rutina de impacto.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzjLstnz46koZd6FsMtn9l1WblBZRps9hqxJGH8mkPK1f3FSWYlYxG0wtf80AVMNlBa__SI5zFsH_jeRgZ480HurX-ROSSjRKXzHeSjS6jHQqA2GSC9G-FSmI4Y-TiiBMu11wYkHZi4hY/s1600/spacefini5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzjLstnz46koZd6FsMtn9l1WblBZRps9hqxJGH8mkPK1f3FSWYlYxG0wtf80AVMNlBa__SI5zFsH_jeRgZ480HurX-ROSSjRKXzHeSjS6jHQqA2GSC9G-FSmI4Y-TiiBMu11wYkHZi4hY/s1600/spacefini5.png" height="202" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La lógica detrás de todo el código es muy sencilla, pero para que no queden dudas:</span></div>
<br />
<ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Dentro del bulce (for..loop en línea 241), recorremos el array donde se encuentran alojados todos los objetos (marcianos).</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El primer condicional (if..else en la línea 245) chequea que el array no se encuentre con un valor nulo.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El segundo condicional (línea 247) va mirando si el objeto dentro del array (que va incrementándose por el bucle (i) no ha sido impactado con el misil disparado.</span></div>
</li>
</ol>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Si devuelve Verdadero (True)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span></div>
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Las coordenadas del alien impactado se las pasamos a la explosión. (249-250)</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La mostramos (251).</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Removemos al alien impactado de la escena (252).</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">y del Array (253). (En realidad no lo removemos, sino que creamos una copia del array reordenado sin el objeto removido.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Escondemos el misil que ha impactado (para que no siga subiendo) (254).</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El flag “Disparo” toma como valor False (haciéndole saber a las demás rutinas que no existe otro disparo en escena (255).</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Emitimos el sonido (256).</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El flag de control pasa a verdadero, permitiendo otro disparo (257).</span></div>
</li>
</ul>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La misma lógica se aplica para el Plato volador (264-274), pero más sencilla ya que es un solo objeto.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Por último; Hemos hecho que un alien (elegido aleatoriamente) nos dispare cada 4 segundos y debemos monitorear que si nos impacte el juego termine:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Parte del control, sucede en el evento de En_CadaCuadro (214-217) que va moviendo el misil alienígena por la pantalla.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilkCIe7ZBqP24rTSqLuJRGs6NqYRB9SRRxe5RUincDm0Fu5ywY5ElEyWOcJ0gjgCYGSBknKL26A0HsL93RHHSJfl8C7jfI4Gg-xmOUDSKbEpuoe8jQ3OK13qBhKfJGspA8cGDBwVQMMEc/s1600/spacefini6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilkCIe7ZBqP24rTSqLuJRGs6NqYRB9SRRxe5RUincDm0Fu5ywY5ElEyWOcJ0gjgCYGSBknKL26A0HsL93RHHSJfl8C7jfI4Gg-xmOUDSKbEpuoe8jQ3OK13qBhKfJGspA8cGDBwVQMMEc/s1600/spacefini6.png" height="218" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Pero cada vez que se mueve, llamamos a una rutina para verificar el impacto:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Si el condicional (223.. If) devuelve falso, no pasa nada y el proceso sigue normalmente, pero si es verdadero…</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Las líneas 225..230 se explican por sí solas pero luego tenemos que:</span></div>
<br />
<ul style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Detenemos el evento temporizador (timer)</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Removemos todos los eventos que hasta ese momento se encontraban activos, por lo cual, el juego termina (quedando como en pausa).</span></div>
</li>
</ul>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Como con los demás ejemplos, la idea de estas series es mostrar de forma sencilla la aplicación de estas herramientas. Mi intención no es tener un juego totalmente funcional y libre de errores (cosa que pueden hacer ustedes)</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Espero que las cosas que he explicado en este tutorial se hayan comprendido, no duden en contactarme si tienen problemas con el código.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La versión completa en <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/SpaceInvaders" target="_blank">GitHub</a> </span></div>
<br />Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-39867367670254337832015-02-27T04:33:00.000-03:002015-03-17T05:12:14.349-03:00Generar Movimiento: Que no aterricen!<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivx9bSDh_9c0teHmzEaKZATxDKedWFiM0kb6Vhb9UgU9uQyoMNK0yMuVmEuckcvfCNqTPDb0Fi6XQ-rv2F3DB9cYbcCSq4bvW9afumeIzZNw2mjnSizZnrDS2lzuUCN-57AmzMin1qPdQ/s1600/3547611248_alien_parking_sign_006-61465121043_xlarge.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivx9bSDh_9c0teHmzEaKZATxDKedWFiM0kb6Vhb9UgU9uQyoMNK0yMuVmEuckcvfCNqTPDb0Fi6XQ-rv2F3DB9cYbcCSq4bvW9afumeIzZNw2mjnSizZnrDS2lzuUCN-57AmzMin1qPdQ/s1600/3547611248_alien_parking_sign_006-61465121043_xlarge.jpeg" height="192" width="320" /></a></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-26c0-83d8-3e2c-39b1cb11a08a" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-26c0-83d8-3e2c-39b1cb11a08a" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Existen dos técnicas básicas para controlar movimiento de objetos. La primera (que ya vimos en el pasado) es por medio del manejo de cuadros (frames). Podemos alterar o manipular en tiempo de ejecución cuando ingresamos a un nuevo cuadro, cuando estamos dentro o al salir del mismo.</span></div>
<br />
<br />
<br />
<br />
<br />
<a name='more'></a><br /><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Otra forma muy básica y clásica es mover objetos en función del tiempo utilizando temporizadores (Timers).</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Las funciones que maneja openfl para la manipulación de cuadros son: Event.ENTER_FRAME y Event.EXIT_FRAME</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Desde el punto de vista del programador son iguales. La diferencia es que la carga de procesos en la primera va a estar al inicio de la </span><a href="http://es.wikipedia.org/wiki/Renderizaci%C3%B3n" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline;">renderización</span><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">y la segunda al finalizar la misma.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En lo personal, no le veo mucho sentido a utilizar las dos en una sola rutina.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Event.ENTER_FRAME un poco más en profundidad:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Como ya sabemos, es un evento que llamará a una función al comienzo del proceso de dibujo (</span><a href="http://es.wikipedia.org/wiki/Renderizaci%C3%B3n" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline;">Render</span></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> en inglés) de un cuadro en un lapso de tiempo establecido por el programador.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Este lapso de tiempo, lo definimos al comienzo de un proyecto en las propiedades del mismo dentro del archivo project.xml</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">fps="60"</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Esta constante definida por el programador, no asegura que la aplicación cuando se esté ejecutando, se mantenga . De hecho, los cuadros por segundo (FPS), están muy ligados a que el dispositivo sea capaz de mantener ese poder de proceso.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Cuanto más carga de dibujo tengamos en nuestra aplicación, más trabajo tendrá el dispositivo que la corra, además necesitará del uso de una mayor cantidad de memoria.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Si al trabajo que le toma al dispositivo dibujar cada cosa en la pantalla a un ritmo determinado (en este caso 60 fps), le sumamos tener que lidiar con la lógica (Llamémosle control de colisiones, contadores, flags, etc..) de nuestra aplicación, podemos encontrarnos en muchas ocasiones con que el rendimiento no es el esperado.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Pero dejemos este tipo de problemas para más adelante. Por el momento, tendremos que nuestro juego corre a una tasa de 60 fps y que en cada cuadro vamos a estar monitoreando algo:</span></div>
<br /><ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El movimiento de nuestra nave (derecha o izquierda).</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El disparo del misil que ejecuta nuestra nave.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Si nuestro misil impacta a un enemigo.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Si nos atacan (dibujo del misil enemigo) y su impacto con nuestra nave..</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Movimiento del plato volador superior y si es impactado.</span></div>
</li>
</ol>
<span id="goog_928718869"></span><span id="goog_928718870"></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgocZgNiOaYV2Skb91cHGBdWFoFVATZk_W6uYe6jUz8HxHuBgxE43eeDD585XybLqc4ll9wTgZq6-3VJeaSLItCj-cF2VLrpiqW-Y9wM-HMXy6JO749ZYbzpRzLkogxhHZEQPM-e7tlenI/s1600/space1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgocZgNiOaYV2Skb91cHGBdWFoFVATZk_W6uYe6jUz8HxHuBgxE43eeDD585XybLqc4ll9wTgZq6-3VJeaSLItCj-cF2VLrpiqW-Y9wM-HMXy6JO749ZYbzpRzLkogxhHZEQPM-e7tlenI/s1600/space1.png" height="328" width="400" /></a></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Como se ve, el código es relativamente sencillo. Sólo quiero detenerme a explicar un poco el disparo de nuestra nave:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En el juego original de Space Invaders, estaba permitido un solo disparo hasta que se cumpla una de dos condiciones: o impacte contra un objeto o se haya errado y salga de pantalla.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Yo quise recrear las mismas condiciones aquí: Tengo dos variables que manejan este “efecto” y no permiten que el usuario pueda repetir un disparo hasta que no se hayan cumplido las condiciones mencionadas arriba.</span></div>
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrdQkZk5yN2LuEqUKC8T7VJcvtQN34dOONVEX1knQyTp6gmzjTBC8YNxa9Rh_ldUm6G_N-RUhyjxd5Ye2MtbosF4lUSl1SDattTj3dpGTQvnuML_8dGIAkgBpNJhcBK5mDuCdExFUPjkA/s1600/space2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrdQkZk5yN2LuEqUKC8T7VJcvtQN34dOONVEX1knQyTp6gmzjTBC8YNxa9Rh_ldUm6G_N-RUhyjxd5Ye2MtbosF4lUSl1SDattTj3dpGTQvnuML_8dGIAkgBpNJhcBK5mDuCdExFUPjkA/s1600/space2.png" height="140" width="400" /></a></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego tenemos el segundo método de monitoreo que son los Temporizadores:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Un temporizador ejecutará el código contenido dentro de su función cada X unidades de tiempo (medidas en milisegundos).</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Para utilizarlos, debemos importar las librerías:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">import openfl.events.TimerEvent;</span></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">import openfl.utils.Timer;</span></span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego lo declaramos:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">private var temporizador = new Timer (1000);</span></span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En este caso, tenemos que temporizador va a ejecutar su evento cada 1000 milisegundos (1 segundo).</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> <span style="color: blue;">temporizador.addEventListener (TimerEvent.TIMER, Tiempo);</span></span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Agregamos el evento y la función a la cual llama, por último lo iniciamos:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="color: blue;"><span style="background-color: transparent; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">temporizador.start ();</span></span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Este evento estará encargado de varias cosas:</span></div>
<br /><ol style="margin-bottom: 0pt; margin-top: 0pt;">
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Mover los aliens cada segundo que pasa (moverlos en forma horizontal).</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Mover los aliens cada 5 segundos (en forma vertical)</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Activar el plato volador cada 10 segundos</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Que un Alien (elegido en forma aleatoria) dispare contra nosotros.</span></div>
</li>
<li dir="ltr" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;"><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Si un objeto ha sido impactado, esconde la explosión.</span></div>
</li>
</ol>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Aquí hay tres contadores independientes que controlan la lógica. El código es muy lineal y creo que se entiende por sí solo. </span></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgON5xb1YXQmyVIp1GMuHNQ5An9kgyf_eiznZuPNDc-xH50kvJLQ-WwNuiajbqRraPQyWE3ONPM_2YjM-cgoXRCWxGn_5VZqSObHXgTg_UKibbd_s9cxCJ-Xws1wP9vWd5bOTBtjyK4k1w/s1600/space3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgON5xb1YXQmyVIp1GMuHNQ5An9kgyf_eiznZuPNDc-xH50kvJLQ-WwNuiajbqRraPQyWE3ONPM_2YjM-cgoXRCWxGn_5VZqSObHXgTg_UKibbd_s9cxCJ-Xws1wP9vWd5bOTBtjyK4k1w/s1600/space3.png" height="272" width="400" /></a></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Por una cuestión de mantener el código sin estructuras complicadas, decidí que si existe un impacto entre objetos, se muestre una explosión y al cabo de 1 segundo (mas o menos) la misma se oculte automáticamente. No es lo ideal, ya que vamos a ver que bajo ciertas condiciones la explosión se va a demorar un poco más o menos (deberíamos de usar otro timer para controlarla eficazmente).</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Vamos llegando al fin de esta serie. Sólo nos queda agregar efectos de sonido y mensajes.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Descargar el fuente desde <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/SpaceInvaders" target="_blank">Aquí</a></span></div>
<br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">No duden en contactarme si surgen dudas.</span>Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-59439322590840549662015-02-20T05:28:00.000-03:002015-03-16T05:56:16.243-03:00Pintando Alienígenas<div dir="ltr" id="docs-internal-guid-5dc15c9f-21b1-270c-972b-c38ed6ec2cf0" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDQxt-Fshu-mKQm0-hLwvnJwXLoijoN7lMB3v8VEs_PxNE0ASBZPmK2naruZZiHjxr8HC-IsmteTJBBYIMxrFXfaaC9M5V_W7FaWk5Ou6FTMmVpjCd5toCUPlCTNdJ0cmgl2vmmzGU6b8/s1600/alien-spray-paint.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDQxt-Fshu-mKQm0-hLwvnJwXLoijoN7lMB3v8VEs_PxNE0ASBZPmK2naruZZiHjxr8HC-IsmteTJBBYIMxrFXfaaC9M5V_W7FaWk5Ou6FTMmVpjCd5toCUPlCTNdJ0cmgl2vmmzGU6b8/s1600/alien-spray-paint.jpg" height="212" width="320" /></a></div>
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Como necesitamos poblar de marcianos enemigos, utilizaremos una matriz para situarlos y a su vez tener control sobre cada uno de ellos. Muy similar a lo visto en el “Arkanoid”, pero esta vez con dos tapices distintos. Luego podrán moverse en la pantalla y disparar contra nuestra nave, pero primero deben aparecer en la pantalla.</span><br />
<br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br />
<a name='more'></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Para alternar en el uso de uno u otro, existen muchas formas de hacerlo (más cuando son solamente dos opciones), para el ejemplo hago uso del módulo.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqccIj0QPJwgMBelpwitHmN92Mhi4Xx1J3DCfcjdKsmpH5UVAYyI74i2xouo5S84KIQRgGF7czDMBtOpB3ZW5n1VcuivpJEGkKBi_YRVfTGuwQr4tyKl59l7gCiigFforRJXGX1396488/s1600/alien1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqccIj0QPJwgMBelpwitHmN92Mhi4Xx1J3DCfcjdKsmpH5UVAYyI74i2xouo5S84KIQRgGF7czDMBtOpB3ZW5n1VcuivpJEGkKBi_YRVfTGuwQr4tyKl59l7gCiigFforRJXGX1396488/s1600/alien1.png" height="252" width="400" /></a></div>
</div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Si el <a href="http://es.wikipedia.org/wiki/Resto" target="_blank">resto</a> de la división por 2 es cero, sabemos que el número es par y le asignamos un tapiz, por el contrario (impar), le asignamos el otro. A su vez vamos poblando el array con cada uno de los “hijos” (child) creados.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego tenemos otra nave enemiga que en el juego original, aparece recorriendo de derecha a izquierda el borde superior de la pantalla a la cual llamo Npc_Super.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jUq710fBHDV4VCAl5xZRbZP8MV_snBpQpjmbbDTekg9JfwPly-ezzXTllUsqY0I-n9f-KmAdNNkLzzwLCnUN24ZqO0aUHuGN9kysqw6n6E8bK8IJMxYWthFa9PzhT2brxjAhHJaGQ6w/s1600/alien2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jUq710fBHDV4VCAl5xZRbZP8MV_snBpQpjmbbDTekg9JfwPly-ezzXTllUsqY0I-n9f-KmAdNNkLzzwLCnUN24ZqO0aUHuGN9kysqw6n6E8bK8IJMxYWthFa9PzhT2brxjAhHJaGQ6w/s1600/alien2.png" height="197" width="400" /></a></div>
</div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">También agregamos una explosión que va a mostrarse cuando haya algún impacto debido al intercambio de misilazos..</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgivf4qs7mZNezfcS588xXVMXaI-MgVqY99tOlI4GGF9s-BR48alswsaIJ9VpVYPIw_spcus4QSfA5l6_bCgI1RNYeSSWRJghaP7DPlW1-wvuq8X7dgRga4mMjRJ88L0xh-rDH-6h9vpAc/s1600/alien3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgivf4qs7mZNezfcS588xXVMXaI-MgVqY99tOlI4GGF9s-BR48alswsaIJ9VpVYPIw_spcus4QSfA5l6_bCgI1RNYeSSWRJghaP7DPlW1-wvuq8X7dgRga4mMjRJ88L0xh-rDH-6h9vpAc/s1600/alien3.png" height="165" width="400" /></a></div>
<br />
</div>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Muy repetitivo el proceso hasta aquí.</span><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Otra técnica de dibujo es por medio de vectores. En nuestro caso vamos a tener dos tipos de dibujos vectoriales. El primero es nuestra nave (que comandamos con el teclado) y el segundo es el disparo (nuestro y enemigo).</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En entradas pasadas vimos una especie de introducción a esta técnica. Se basa en el dibujo de formas básicas (rectángulos, círculos, etc). Nuestra nave es un conjunto de esos dibujos que da forma al objeto “Nave”</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Básicamente es una serie de rectangulos superpuestos desde arriba hacia abajo.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4D4shyphenhyphenD5jpqoYE9sWB80pQ2lozBLivhZuZidB4p_uAAYjYgM9j67MdHQ1lLaj4BcmaBiz-Du_BBuALJ8sBr9Hb8LEgHWS0p1SvHvgeJRTUwJnSAnzebPWo45GiaKTHveLO2iB18Q8gXE/s1600/alien4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4D4shyphenhyphenD5jpqoYE9sWB80pQ2lozBLivhZuZidB4p_uAAYjYgM9j67MdHQ1lLaj4BcmaBiz-Du_BBuALJ8sBr9Hb8LEgHWS0p1SvHvgeJRTUwJnSAnzebPWo45GiaKTHveLO2iB18Q8gXE/s1600/alien4.png" height="175" width="320" /></a></div>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La situamos en pantalla.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwTa5OMyFpxKck0Q3PY1wa_Q5iweN2D6yEqoNqB2EHgAqhyQip7GreBwt8L-j-X-lefdQWcQhyphenhyphenUIw72q78QrR1p9pbuhzLWMkKMdMyLKDB9D1gyg3clT8KLLsiIR3meFgzxtDwOLWhqrE/s1600/alien5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwTa5OMyFpxKck0Q3PY1wa_Q5iweN2D6yEqoNqB2EHgAqhyQip7GreBwt8L-j-X-lefdQWcQhyphenhyphenUIw72q78QrR1p9pbuhzLWMkKMdMyLKDB9D1gyg3clT8KLLsiIR3meFgzxtDwOLWhqrE/s1600/alien5.png" height="93" width="320" /></a></div>
</div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Hacemos lo mismo con los misiles..</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqChfaBR2r1i0o49WyBXaCrrJ0-V-95qQ9N7Gccf7vTYCh7vNrF0cN-t_3tzKZZwsFhwaE6fmw1xw29Qb4BENPpeBaobpL5o9JkmOjWD3RAmxveMU52lZ-cVFcSgmED2kXTcgg_rbfD-Y/s1600/alien6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqChfaBR2r1i0o49WyBXaCrrJ0-V-95qQ9N7Gccf7vTYCh7vNrF0cN-t_3tzKZZwsFhwaE6fmw1xw29Qb4BENPpeBaobpL5o9JkmOjWD3RAmxveMU52lZ-cVFcSgmED2kXTcgg_rbfD-Y/s1600/alien6.png" height="117" width="400" /></a></div>
</div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Prácticamente tenemos todo listo para empezar a hacer que las cosas tomen movimiento y para ello vamos a hacer uso de técnicas ya vistas junto con algunas nuevas en la próxima entrada.</span></div>
Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-78889097524443963522015-02-13T05:55:00.000-03:002015-03-15T07:35:39.910-03:00Nos Atacan!!!<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGMAmXrbUHGX4e1-kjctOUUB4OyKwfnXB2dN7LpveBX7sUPkrKor7H1azWrKV1jWwglWheDmtoOa5YThKP0X_xBbSN8D_OVv6M9OBL-tO8x-fz-b3Ox5y970sdhBRzGau7F-5-STtE76g/s1600/alien-invasion.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGMAmXrbUHGX4e1-kjctOUUB4OyKwfnXB2dN7LpveBX7sUPkrKor7H1azWrKV1jWwglWheDmtoOa5YThKP0X_xBbSN8D_OVv6M9OBL-tO8x-fz-b3Ox5y970sdhBRzGau7F-5-STtE76g/s1600/alien-invasion.png" /></a></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-1ce6-34bc-c9de-7b67acc81751" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-1ce6-34bc-c9de-7b67acc81751" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En otras entradas hemos visto cómo dibujar objetos, hoy vamos a ver como hacerlos un poco más complejos. </span></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-1ce6-34bc-c9de-7b67acc81751" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Openfl nos permite importar imágenes para “empapelar” nuestros objetos. Existen varios métodos para llevar a cabo esta tarea. Con este modesto ejemplo de “Space Invaders” que comenzamos la entrada anterior veremos algunos métodos muy sencillos para utilizarlas en nuestros proyectos.</span></div>
<br />
<br />
<br />
<br />
<br />
<a name='more'></a><br /><br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En primer lugar, necesitamos conocer algo sobre las imágenes que vamos a utilizar. Como primer medida, deberíamos ser capaces de saber su tamaño en <a href="http://es.wikipedia.org/wiki/P%C3%ADxel" target="_blank">píxeles</a>. No solamente para ver lo que ocupa en la pantalla (ya que podríamos achicarla en tiempo de ejecución), sino también por su “peso” en la memoria del sistema.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Cuanto mayor sea su tamaño, mayor será la cantidad de bytes que ocupará en memoria y, aunque con el paso del tiempo, las computadoras, celulares, tablets, etc..se vuelven más potentes día a día, el rendimiento de nuestro juego se va a ver afectado (sobre todo en juegos complejos donde se muestran muchísimas imágenes por segundo).</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">No pretendo desvirtuar el tema con un curso sobre cómo usar un editor de imágenes, pero veamos rápidamente un ejemplo sencillo:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Sabemos (porque nosotros lo hemos decidido así) que el área que va a ocupar nuestro juego tiene una superficie de 400x480 píxels. No tendría mucho sentido que cada objeto (llamémosle Alien para el caso) ocupe una superficie de 100x100.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Entonces, para nuestro alien un tamaño de 32x32 sería suficiente.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Obviamente necesitamos un editor de imágenes. De los más populares (y gratis) que conozco están el histórico <a href="http://www.gimp.org/" target="_blank">Gimp </a>para Linux (y windows?) y el<a href="http://www.getpaint.net/index.html" target="_blank"> Paint.net </a>para Windows.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Abrimos nuestro programa de edición y creamos la imagen que va a utilizar de tapiz nuestro alien.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBcdJBhhJJJe4f-N9MeDNKAoc3f2NzecN5HwXxLH0RO9Nel3EyxUS7uJXEv9AHykB4nhz9HU43WPe8205yN41zT3BqCJcMelOevbmbdVIHczaJpw8bKzWe9OXG1NIeWaCljNFl-w_zqMM/s1600/paintnet1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBcdJBhhJJJe4f-N9MeDNKAoc3f2NzecN5HwXxLH0RO9Nel3EyxUS7uJXEv9AHykB4nhz9HU43WPe8205yN41zT3BqCJcMelOevbmbdVIHczaJpw8bKzWe9OXG1NIeWaCljNFl-w_zqMM/s1600/paintnet1.png" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Como primer paso, creamos una imagen del tamaño requerido (32x32) y hacemos que la primer capa (layer) sea transparente. Agregamos una nueva capa y comenzamos a dibujar.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7nNujrHu7Ih_vkjMVE9pvIV-iRmFdS-pUQbaGevz3aeWv2AgoSTumdCLTn5_k-7WkgWztrS1SRNmjoZ2RF5FxtT40Ucslg4y4mvN_Q0JCsb6o4QriU64kxRNVABaPc5I6wQZySacGeJo/s1600/paintnet2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7nNujrHu7Ih_vkjMVE9pvIV-iRmFdS-pUQbaGevz3aeWv2AgoSTumdCLTn5_k-7WkgWztrS1SRNmjoZ2RF5FxtT40Ucslg4y4mvN_Q0JCsb6o4QriU64kxRNVABaPc5I6wQZySacGeJo/s1600/paintnet2.png" height="221" width="320" /></a></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El producto terminado se ve de la siguiente forma:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<span id="goog_2104705539"></span><span id="goog_2104705540"></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ_xSH0CBrv6PsOaOgRBgo5W4AHw_iB7q3hhejcN4cnedABllCgTrYqEVp4jfqppJbvRD9vMK4fquQrnQ-BTQVKG7oYMCUmp_tVxsn2LDCHp62e6PaOBadIMK2HBVcdS7aisW5GUzgIKo/s1600/alien1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ_xSH0CBrv6PsOaOgRBgo5W4AHw_iB7q3hhejcN4cnedABllCgTrYqEVp4jfqppJbvRD9vMK4fquQrnQ-BTQVKG7oYMCUmp_tVxsn2LDCHp62e6PaOBadIMK2HBVcdS7aisW5GUzgIKo/s1600/alien1.png" height="200" width="193" /></a></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Para el caso de nuestra versión de Space Invaders, voy a utilizar 2 imágenes del mismo tamaño, pero que varíen un poco (ya verán más adelante de lo que hablo), así que vuelvo a generar otra imagen con algunos cambios..que va a quedar así:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCllO1ncRlyqOzIejSuUeHZ1z7VsiByWSQUvgc6ZqCsbUfBovxLs5nIRs-f-FJsz4kKHEcoukI7tCiDGBI3E0JjsNWY2tBDkyY9jQq7DHClbQzLzXl2zByVKAhllOsehEMeeFHddtEODg/s1600/alien2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCllO1ncRlyqOzIejSuUeHZ1z7VsiByWSQUvgc6ZqCsbUfBovxLs5nIRs-f-FJsz4kKHEcoukI7tCiDGBI3E0JjsNWY2tBDkyY9jQq7DHClbQzLzXl2zByVKAhllOsehEMeeFHddtEODg/s1600/alien2.png" height="200" width="199" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Bien. Con nuestras dos imágenes de “Aliens”, volvemos ahora a FD y escribimos algo de código:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En primer lugar, agregamos nuestros marcianos a la carpeta assets/img. Pueden copiarse directamente a la carpeta y FlashDevelop las va a encontrar o agregarlas mediante el uso del botón izquierdo del mouse en el explorador de proyecto..</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRIjs5TIgEa2bYgySNCzdUv29PO7A2a-_jtIrxzFZ7dwZ6Ro9tobf60wa-gn8ZJRxIP5keB9-Vv6worPfMDHsxO39NmRF9_B_ljl9HbdrhWEPqNpBMr-YAmR_quoobB_JgWYmiGt4bGpM/s1600/alienxy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRIjs5TIgEa2bYgySNCzdUv29PO7A2a-_jtIrxzFZ7dwZ6Ro9tobf60wa-gn8ZJRxIP5keB9-Vv6worPfMDHsxO39NmRF9_B_ljl9HbdrhWEPqNpBMr-YAmR_quoobB_JgWYmiGt4bGpM/s1600/alienxy.png" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego creamos una nueva variable de nombre mascara en la clase principal (Main) que va a estar encargada de pasarle un valor a la nueva clase que crearemos a continuación.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh42PqwPJEgW0eoyHpyJG7hnlxcwde2NJyKFDNqPBrXkhEzGOlYnBF36sBwnRsEoqgxgt_nrbkCXNgpiiONINqOdjxmtQwCwrWl60NYCd0Vh-SuWk_M4zXzoXCO7Ed5hRttcZ8jerK6-Hg/s1600/alienpr.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh42PqwPJEgW0eoyHpyJG7hnlxcwde2NJyKFDNqPBrXkhEzGOlYnBF36sBwnRsEoqgxgt_nrbkCXNgpiiONINqOdjxmtQwCwrWl60NYCd0Vh-SuWk_M4zXzoXCO7Ed5hRttcZ8jerK6-Hg/s1600/alienpr.png" height="51" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Creamos una nueva Clase a la que yo llamo Npc_Alien</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">y tipeamos el siguiente código en ella:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZ3k0GVmLmcEeWKGq8Msfsy04xA4pY4n2dLP1dObpVLzBdamCzVh2910_6XWP7AW5xbRsNUtNhgYzpEbN-RNie3xV-aIsurydc7joRBDnOcAixvBGfK4iLWVfACZ7Fvq-ZsagaYw3_NE/s1600/aliencode.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZ3k0GVmLmcEeWKGq8Msfsy04xA4pY4n2dLP1dObpVLzBdamCzVh2910_6XWP7AW5xbRsNUtNhgYzpEbN-RNie3xV-aIsurydc7joRBDnOcAixvBGfK4iLWVfACZ7Fvq-ZsagaYw3_NE/s1600/aliencode.png" height="190" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Puede observarse como la función va a esperar que le llegue el valor “mascara” desde otro lado (línea 15)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego con cualquier estructura condicional (podría aquí usarse switch..case también) le asignamos la imagen que el constructor va a utilizar para el objeto.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En la pantalla del juego, nuestro intercambio de imágenes para la creación de los “Aliens” se va a ver reflejado así (una vez que hayamos escrito el código)</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi83Q9H4XSJvNrrU4uqFeQoonetGaeoOxPJKS-YqM4Vy-uORHiBsL_-2At6l6UpNgN3HGoyeZzT0EXRMAPrFQAJGQTJU6krf8Dtf2sdyaskE4mTZOUq5lGahMh1r76QTmhNiQnNhqWceyQ/s1600/alienshow.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi83Q9H4XSJvNrrU4uqFeQoonetGaeoOxPJKS-YqM4Vy-uORHiBsL_-2At6l6UpNgN3HGoyeZzT0EXRMAPrFQAJGQTJU6krf8Dtf2sdyaskE4mTZOUq5lGahMh1r76QTmhNiQnNhqWceyQ/s1600/alienshow.png" height="305" width="320" /></a></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El ejemplo muestra cómo podríamos, en una situación un poco más compleja, dejar que el usuario seleccione que tipo de Alien..nave..héroe o villano desea usar antes de asignarlo al objeto, también es útil en situaciones donde los juegos van incrementando su complejidad a medida que el jugador pasa de niveles, etc..</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En la próxima nos defendemos de su invasión. Pueden obtener el código (quizás un poco más avanzado) desde <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/SpaceInvaders" target="_blank">GiT</a></span></div>
Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-37936724834230031742015-02-06T07:50:00.000-03:002015-03-12T08:06:54.865-03:00El Teclado y los Marcianos(?)<div dir="ltr" id="docs-internal-guid-5dc15c9f-0d91-b058-9b63-5ca4f1696dbe" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1aR5bPkhAw7BMNNBSf44rstKKLKS2BVHR67DaU1mj5TyHhQ3vUTjxDTd5Iogl7l2NupxcJPPXJ4O107_xY4tyZ7ysG5GEbg6JP7jjNIVH7lxLRSpM2hzRoPfn3jWYnUcRr998o1W6jnQ/s1600/teclado.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1aR5bPkhAw7BMNNBSf44rstKKLKS2BVHR67DaU1mj5TyHhQ3vUTjxDTd5Iogl7l2NupxcJPPXJ4O107_xY4tyZ7ysG5GEbg6JP7jjNIVH7lxLRSpM2hzRoPfn3jWYnUcRr998o1W6jnQ/s1600/teclado.jpg" height="200" width="320" /></a></div>
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Existen varias formas de interceptar cuando el usuario presiona una tecla, la más simple en mi opinión es a través de una librería que Openfl dispone específicamente para este objetivo.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Trabaja de forma similar a lo visto en el ejemplo anterior (mouse). Al mismo tiempo, veremos otras formas de crear sprites.</span><br />
<br />
<br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br />
<a name='more'></a></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Vamos a tratar de recrear en esta ocasión un shooter muy clásico: el Space Invaders.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Para ello, vamos a hacer uso del teclado cuando debamos mover nuestra nave, con las flechas y la barra de espacio nos servirá para disparar.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Comenzamos un nuevo proyecto en openfl y en primer lugar importamos la librería de eventos, más específicamente la del teclado:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><span style="color: blue;">import </span>openfl.events.<span style="color: #45818e;">Event</span>;</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><span style="color: blue;">import </span>openfl.events.<span style="color: #45818e;">KeyboardEvent</span>;</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Ello nos permitirá interceptar cuando el usuario presione o suelte una tecla mediante dos eventos específicos, pero antes de ello creamos una matriz o arreglo que va a alojar el código de la tecla presionada:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><span style="color: blue;">private var</span> Tecla_usada:<span style="color: #45818e;">Array</span><<span style="color: #45818e;">Bool</span>>;</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Tecla_usada = <span style="color: blue;">new </span><span style="color: #45818e;">Array</span><<span style="color: #45818e;">Bool</span>>();</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Lo que hacemos aquí es guardar en primer lugar y como índice del array el código de la tecla presionada y al mismo tiempo su estado (verdadero o falso)</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Puede verse una lista de los códigos aquí:</span><br />
</div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="http://www.openfl.org/documentation/api/openfl/ui/Keyboard.html"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">http://www.openfl.org/documentation/api/openfl/ui/Keyboard.html</span></a></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Con estos datos, es muy simple de escribir el código de control para cada una de las acciones que debe tomar el programa según la tecla presionada.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Primero agregamos los eventos:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">stage.addEventListener(<span style="color: #45818e;">KeyboardEvent</span>.KEY_DOWN, Tecla_Presionada);</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">stage.addEventListener(<span style="color: #45818e;">KeyboardEvent</span>.KEY_UP, Tecla_Soltada);</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego las dos rutinas:</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5PadoWr4ExRRmVs-Mav4dDSNR-vovoWKpHMXTEVfJn5EAqtAHPgacN4O0p7E4YH6BxyIKzu3yYhtJ434cmPMZtil2O8ipjkWj6x6GNR5eduI3InGe7p-bI3KyB9j-3_0oAxkAoQpwON8/s1600/teclado2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5PadoWr4ExRRmVs-Mav4dDSNR-vovoWKpHMXTEVfJn5EAqtAHPgacN4O0p7E4YH6BxyIKzu3yYhtJ434cmPMZtil2O8ipjkWj6x6GNR5eduI3InGe7p-bI3KyB9j-3_0oAxkAoQpwON8/s1600/teclado2.jpg" height="79" width="320" /></a></div>
</div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Y por último, qué hacer con ellas:</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZkN-C5qWfSEGkMwMvtsiTjCNiNBC8c-JqaeSuXwQ6pJ0s_usSpI_D8_RzIOEWmJNrSjbHgBbUdzwZfTaJ6klTJKkMGXKo8cAOjr93nZGPvEmU-NQRXPLHrl8og3IQ4M4tM627pOFQbE/s1600/tecla2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZkN-C5qWfSEGkMwMvtsiTjCNiNBC8c-JqaeSuXwQ6pJ0s_usSpI_D8_RzIOEWmJNrSjbHgBbUdzwZfTaJ6klTJKkMGXKo8cAOjr93nZGPvEmU-NQRXPLHrl8og3IQ4M4tM627pOFQbE/s1600/tecla2.png" height="262" width="320" /></a></span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Hasta aquí hemos visto cómo manejar la interceptación de teclas, en la próxima agregamos los objetos a nuestro ejemplo.</span><br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Enlace al código en <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/SpaceInvaders" target="_blank">Git</a> </span><br />
<br /></div>
Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-45270194226933437692015-01-23T06:43:00.000-03:002015-03-04T08:26:01.017-03:00OpenFL y Sprites (Arkanoid Parte 5)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO1KSlHU1eImqpK_1vxDOA5I2GvxPVg_ASU5pSAZViDOkvjCC9aU5zsiVBPSUHWoR31-Zb4bUrOTJm4jN2xvBW7fxcKuOj2E_3-XbyCqS5oTRIKqzzXJ0nNCGz9G5c4sR2urV646q8Ea4/s1600/arka4.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO1KSlHU1eImqpK_1vxDOA5I2GvxPVg_ASU5pSAZViDOkvjCC9aU5zsiVBPSUHWoR31-Zb4bUrOTJm4jN2xvBW7fxcKuOj2E_3-XbyCqS5oTRIKqzzXJ0nNCGz9G5c4sR2urV646q8Ea4/s1600/arka4.png" height="200" width="156" /></a></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-e438-482e-d7a7-a615b230ec6c" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-e438-482e-d7a7-a615b230ec6c" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La versión de nuestro Arkanoid funciona de manera satisfactoria (dentro de ciertos límites ya que es un ejemplo de programación, no un producto terminado), pero quisiera agregar algunos efectos antes de dar por concluido el tutorial.</span></div>
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En primer lugar, me gustaría agregarle dos efectos de sonido: uno al impactar la bola con la plataforma y el otro cuando impacta contra los ladrillos.</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><br />
<br />
<br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br />
<a name='more'></a><br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Como ya hemos visto en el reproductor mp3, esto es muy sencillo de hacer, la única diferencia es que aquí los sonidos van a ir incorporados al programa..incrustados digamos. obviamente cuantos más sonidos agreguemos, (o de mejor calidad..más larga duración, etc..) mayor tamaño irá ocupando el archivo del programa.</span><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG89nXk4xYw_unnQy46euPsp2n3_xoqs_U9DKONoYd0YxwVpsGwBkzqM7lsXWf-iFujswhWnzXyvf1UR45Te7SbVKU3wCbzF0ZxhQV_zgiDS7bsbE5VVbn3tQ3Ssmhvl9n-qnoGP1sqxw/s1600/audio1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG89nXk4xYw_unnQy46euPsp2n3_xoqs_U9DKONoYd0YxwVpsGwBkzqM7lsXWf-iFujswhWnzXyvf1UR45Te7SbVKU3wCbzF0ZxhQV_zgiDS7bsbE5VVbn3tQ3Ssmhvl9n-qnoGP1sqxw/s1600/audio1.png" height="200" width="188" /></a></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-e440-8d49-d0bf-c9c450113ade" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En mi caso, opté por crear la carpeta “audio” dentro de los “assets” del programa y allí alojar dos pequeños archivos:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Esto puede hacerse directamente desde FlashDevelop, o con algun explorador de archivos, etc.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego hay que establecer la nueva ruta y parámetros en el archivo project.xml para que el compilador pueda localizarlos. </span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Puede omitirse y establecerse la ruta desde el código, pero creo que es una buena práctica hacerlo de esta forma ya que aquí estamos trabajando con pocos archivos, pero en un proyecto más complejo, ello puede traer dolores de cabeza o pérdidas de tiempo.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLzLDnVOLDllm1Sd5gpwp8PwnIJyctIHaHCzNhNET5SARiHqktF5a1oKn2vXiK6B9-SuwuyTy_2Aor0DzAYUSkFt9qTpPt9ncAH3eiog3dslDdDKxsYHmVocZTiUguileNvMwFjS1crKs/s1600/audio2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLzLDnVOLDllm1Sd5gpwp8PwnIJyctIHaHCzNhNET5SARiHqktF5a1oKn2vXiK6B9-SuwuyTy_2Aor0DzAYUSkFt9qTpPt9ncAH3eiog3dslDdDKxsYHmVocZTiUguileNvMwFjS1crKs/s1600/audio2.png" height="116" width="320" /></a></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Una vez establecidos estos parámetros, debemos importar las librerias de audio y crear los objetos.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Ya hemos visto esa parte en el reproductor mp3 así que no entraré en detalles salvo por la forma de como declarar los objetos:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfgYmxRpeph4OVbLSyTldJDQWL8wMldOv21KiF0TtbiVcJkSHsurpA142Q3WD5GDgQ8PQt-7ixA4BJKNOfzCPHw6yAeJ9l-ji3AW_BnLlPAQOeR3yyRRujbMGPx9kbXjBfr801BgTwOlg/s1600/audio3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfgYmxRpeph4OVbLSyTldJDQWL8wMldOv21KiF0TtbiVcJkSHsurpA142Q3WD5GDgQ8PQt-7ixA4BJKNOfzCPHw6yAeJ9l-ji3AW_BnLlPAQOeR3yyRRujbMGPx9kbXjBfr801BgTwOlg/s1600/audio3.png" height="187" width="320" /></a></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span></div>
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Como verán es muy sencillo. Luego, con el método .play() los reproducimos.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego agregamos algo de texto informativo.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAfoKn2kh4Fb6c9EB6_NEMaFGSg0gEV3uXbHbLegSYogb8n7d1AvxpkduEj_TrH9lW0Mi8veD7EWSsmOa3BgqGCO2PIobg1zkLlIv8DbGBIMiR3IVstvc_HOZF1ZEc4LbsQMJ95PC2eJY/s1600/textos1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAfoKn2kh4Fb6c9EB6_NEMaFGSg0gEV3uXbHbLegSYogb8n7d1AvxpkduEj_TrH9lW0Mi8veD7EWSsmOa3BgqGCO2PIobg1zkLlIv8DbGBIMiR3IVstvc_HOZF1ZEc4LbsQMJ95PC2eJY/s1600/textos1.png" height="320" width="251" /></a></div>
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Tenemos: La cantidad de vidas (3 por partida), El puntaje (cada impacto suma 1 punto), Un mensaje de Pausa/Continuar y al final un mensaje de finalización del juego (Game Over).</span><br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Agregar texto con openfl es similar a agregar o crear cualqauier objeto.</span><br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><span id="docs-internal-guid-5dc15c9f-e46d-0788-e150-16f2d818ff1c" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Primero, como siempre, se declaran las librerías que vayamos a usar:</span></span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><span id="docs-internal-guid-5dc15c9f-e46d-0788-e150-16f2d818ff1c" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span> </span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Y0L0WmA0GQnlFdKlvEynlKqauzS6bywONyeZIxwQWfxMbr_1RLBW1RvLnhU6oNdRCEmXETc13YS4jg2rngIBkxKajfvJ3H150qKKbjC3GO3kO38q5z37mrJf96PhLV1pMAQW5rsWNo8/s1600/texto1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Y0L0WmA0GQnlFdKlvEynlKqauzS6bywONyeZIxwQWfxMbr_1RLBW1RvLnhU6oNdRCEmXETc13YS4jg2rngIBkxKajfvJ3H150qKKbjC3GO3kO38q5z37mrJf96PhLV1pMAQW5rsWNo8/s1600/texto1.png" height="179" width="320" /></a></div>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Seguimos creandos las variables como campos de texto (TextField).</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">A partir de este punto, solo queda darle formato, posicion y obviamente establecer el mensaje que va a contener.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego podemos manipularlos como cualquier objeto creado con haxe.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Para este caso, utilizo el mismo formato (color, fuente, tamaño, etc) al mostrar el Puntaje, las vidas y el mensaje de Pausa/Continuar. Lo unico que cambia es la posición de los mismos.</span><br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4M-Kx4sV_1ir67uuZ218_E7S4Il34CMyNOPfaVW7oz91i173OjZwbmzRDAYKAVfW8X_SqqSBuNDK08pJ3AMaOZ_LFxHBduSufU-JRmy45W17L_s5FiCxuTaDTnt3vKW2g_U-73jezvd4/s1600/texto2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4M-Kx4sV_1ir67uuZ218_E7S4Il34CMyNOPfaVW7oz91i173OjZwbmzRDAYKAVfW8X_SqqSBuNDK08pJ3AMaOZ_LFxHBduSufU-JRmy45W17L_s5FiCxuTaDTnt3vKW2g_U-73jezvd4/s1600/texto2.png" height="92" width="320" /></a></div>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span><span style="font-family: Arial;">Para terminar, agregamos otro evento que es el encargado de pausar y continuar el juego.</span><br />
<span style="font-family: Arial;">Como estamos utilizando el mouse, me pareció apropiado que el click derecho se encargue de esta tarea.</span><br />
<br />
<span style="font-family: Arial;">stage.addEventListener(<span style="color: #45818e;">MouseEvent.CLICK</span>, Pausado);</span><br />
<br />
<span style="font-family: Arial;">Intercepta los clicks del botón derecho del mouse y llama a la rutina correspondiente:</span><br />
<span style="font-family: Arial;"> </span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXT4lXymuEyUoOvhXeRf5tmdREjPn6L9rKWDn9NiLRGQsToR81qiuhc9ICWqMYPLQPi9-dnDgq54WT29TON92aWDGMg9RjFiVvRsuCfxXRqQc6JK5OvnvkvJI95z0i-xvdlJ1_UZbvaL0/s1600/pausa1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXT4lXymuEyUoOvhXeRf5tmdREjPn6L9rKWDn9NiLRGQsToR81qiuhc9ICWqMYPLQPi9-dnDgq54WT29TON92aWDGMg9RjFiVvRsuCfxXRqQc6JK5OvnvkvJI95z0i-xvdlJ1_UZbvaL0/s1600/pausa1.png" height="272" width="320" /> </a></span></div>
<span style="font-family: Arial;"><div class="separator" style="clear: both; text-align: center;">
</div>
</span><span style="font-family: Arial;"> </span><br />
<div dir="ltr" id="docs-internal-guid-5dc15c9f-e486-3fc1-784a-0c0c7ce29ea1" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Hasta aquí hemos visto diferentes conceptos de como trabajar con openfl. Como crear sprites y moverlos en la pantalla, detectar colisiones, textos, sonidos.</span></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-e486-3fc1-784a-0c0c7ce29ea1" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-e486-3fc1-784a-0c0c7ce29ea1" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El código completo se encuentra <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/Arkanoid" target="_blank">aquí</a>. </span></div>
<br /><span style="color: #660000;"><span style="font-size: small;"><span style="font-family: Verdana,sans-serif;"><i>El juego dista mucho de estar como a mí me gustaría, pero es un ejemplo muy sencillo. Visualmente se puede mejorar y mucho con el uso de imágenes, efectos especiales, etc.<br /><br /><br />Casi todo lo que hemos hecho se puede hacer de forma mucho más simple con el uso de frameworks específicos para crear juegos. Para mantener la simpleza en su comprensión, he recurrido a técnicas que por lo general no suelen utilizarse (como la manipulación de pausa/continuar), pero por ello no deja de ser funcional.<br />Espero que se haya comprendido y si surgen dudas pueden contactarme.</i></span></span></span><br />
<br />
<br />
Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-6675278457957435442015-01-16T07:03:00.000-03:002015-03-03T07:49:21.779-03:00OpenFL y Sprites (Arkanoid Parte 4)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8VFA9rqy11Aqu5XY-VN7KO8WHBLWjowj5IhGgV8iRrMj-MNyNaZvcI9n00Wcg3seo8DTFa2y9QVKlcUYWxyQXlxdcESIchlGyH5XP6jFp6ttdoHVpqGzQESOUJm7xL8-Fh_leTF2zW30/s1600/7apCe.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8VFA9rqy11Aqu5XY-VN7KO8WHBLWjowj5IhGgV8iRrMj-MNyNaZvcI9n00Wcg3seo8DTFa2y9QVKlcUYWxyQXlxdcESIchlGyH5XP6jFp6ttdoHVpqGzQESOUJm7xL8-Fh_leTF2zW30/s1600/7apCe.png" height="133" width="200" /></a></div>
<br />
<br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En la entrega anterior vimos un rudimentario sistema para la detección de bordes. OpenFL nos brinda algunas herramientas que hacen esta tarea un poco más sencilla. Veamos cómo se comporta la bolita al colisionar contra nuestra plataforma:</span><br />
<br />
<br />
<br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br />
<a name='more'></a><br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Tenemos a nuestra disposición el método hitTestObject.</span><br />
<br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Sencillo de utilizar, simplemente comparamos un objeto con otro y si existe una colisión entre ellos devuelve verdadero.</span><br />
<br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><i>Cabe aclarar, que este método es una herencia dierecta de AS3. Si bien se van implementando día a día nuevas funciones para que sean compatibles con otros lenguajes, es muy probable que solo funcione en Flash. </i></span><br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<br />
<div dir="ltr" id="docs-internal-guid-5dc15c9f-df25-fb0e-c430-5e6e60c45ee2" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Para el caso de la plataforma colisionando con la bola, el código sería más o menos así:</span></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-df25-fb0e-c430-5e6e60c45ee2" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq8iyeaWK-iYtlyW9yPycvRdK0x5D8Cj2zf_tqCXcyHvM7pKAZ7TkHR3-mrJjUZJ_IYaE_5NLWh1N_Fme1dY724SOfXX_tv7snS9fR97J1EZsKsug09F0yX7m-H2tS-4ktugWFP756PXw/s1600/plata3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq8iyeaWK-iYtlyW9yPycvRdK0x5D8Cj2zf_tqCXcyHvM7pKAZ7TkHR3-mrJjUZJ_IYaE_5NLWh1N_Fme1dY724SOfXX_tv7snS9fR97J1EZsKsug09F0yX7m-H2tS-4ktugWFP756PXw/s1600/plata3.png" height="187" width="320" /></a></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Primero, verificamos que haya una colisión entre ambos objetos. Ello hará que la trayectoria de la bola cambie de positivo (para abajo) a negativo, pero en el mismo sentido (de ahí la multiplicación con -1)</span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego tenemos que, si la bolita colisiónó con la parte izquierda de la plataforma..cambie su orientación un poco más hacia ese lado, caso contrario, hacia la derecha.</span></div>
<br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Por último tenemos la colisión de la bolita con los ladrillos.</span><br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En este caso, al tener una arreglo de Matriz, debemos comparar la ubicación actual con todas las posiciones conocidas de ladrillos que integran la Pared.</span><br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDaGc1OX2nPak-ZAG_xLEMoiLXDEwmpvyavc6Mtfc9Z_kc2gE84hH6XnS8qvspxMEQAyZy8P6k38myeW_9HdaCmClsReUQyTnZsIS6lsdsVJpwmp7RWAzp5hDJrLx1KNJVlUwj1bh4c-4/s1600/pared2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDaGc1OX2nPak-ZAG_xLEMoiLXDEwmpvyavc6Mtfc9Z_kc2gE84hH6XnS8qvspxMEQAyZy8P6k38myeW_9HdaCmClsReUQyTnZsIS6lsdsVJpwmp7RWAzp5hDJrLx1KNJVlUwj1bh4c-4/s1600/pared2.png" height="194" width="320" /></a></div>
<br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span><br />
<br />
<br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Muy sencillo de hacer con el bucle for como se muestra. Luego simplemente comparamos si la colisión vino desde la izquierda, derecha, arriba, etc.</span><br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Por último, el objeto impactado es removido.</span><br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Hasta aquí tenemos el juego funcionando correctamente como es de esperarse. Se ve bien (en mi opinión), pero puede mejorarse y mucho.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcg3SUc8ywIJCFnv_ByXRtQNCotmvi-Leran1omjoLD3DPcNCjSRywRIC_MfOgyFY1NST3ezL-5VloT_fD1tORVyUhNSqiytAaQSKftnjhyphenhyphenSLCfRLRSVZBqmfl75jqeyRqEfQJ-G3labI/s1600/fini1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcg3SUc8ywIJCFnv_ByXRtQNCotmvi-Leran1omjoLD3DPcNCjSRywRIC_MfOgyFY1NST3ezL-5VloT_fD1tORVyUhNSqiytAaQSKftnjhyphenhyphenSLCfRLRSVZBqmfl75jqeyRqEfQJ-G3labI/s1600/fini1.png" height="320" width="304" /></a></div>
<br />
<br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En la próxima y última entrega de la serie le agregamos algunas cosas más que harán del ejemplo algo un poco más profesional :P</span><br />
<br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span><br />
<span id="docs-internal-guid-5dc15c9f-df1c-8bc8-7de5-a3a3f2beb552" style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Enlace a los fuentes en <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/Arkanoid" target="_blank">GitHub</a></span></span> </span>Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com1tag:blogger.com,1999:blog-7289313234884568591.post-81660720333331047042015-01-09T06:09:00.000-03:002015-03-03T07:01:36.417-03:00OpenFL y Sprites (Arkanoid Parte 3)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJOL-sWFRxv1pylWh02E7O0TN259l4j3jhmKryd_WtPUjkwgkVdRHiFEyJZi-zl4-4bKB8E1RU-5Ncr6V8zKhIGdlW5Mdy4QoUU6vLMi1jC1UiJFGOjpNbOCpXZ4o4Bt0COWTvgfiCnIM/s1600/juego1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJOL-sWFRxv1pylWh02E7O0TN259l4j3jhmKryd_WtPUjkwgkVdRHiFEyJZi-zl4-4bKB8E1RU-5Ncr6V8zKhIGdlW5Mdy4QoUU6vLMi1jC1UiJFGOjpNbOCpXZ4o4Bt0COWTvgfiCnIM/s1600/juego1.png" height="200" width="155" /></a></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-dedf-2db3-ec03-7b6d14fc1a75" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-dedf-2db3-ec03-7b6d14fc1a75" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Tenemos todos los objetos creados y puestos en pantalla. Vamos a darle algo de movimiento: En principio, lo único que debe controlar el usuario es la Plataforma. Simplemente se mueve de derecha a izquierda. </span></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-dedf-2db3-ec03-7b6d14fc1a75" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-dedf-2db3-ec03-7b6d14fc1a75" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Obviamente el juego original tiene muchos más detalles, pero el motivo de este blog es aprender. Quedará en ustedes en agregar complejidad al juego.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span></div>
<a name='more'></a><br />
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Para controlar la plataforma, he decidido hacer uso del mouse en este ejemplo, ya que es la forma menos compleja a la hora de escribir código. En ejemplos posteriores veremos como interceptar cuando el usuario presiona o suelta una tecla.</span></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJ66epIosy2512mOx6sOPXPV427I8ZVYgICU3OOc-xq-EHjf5oBr8-wvmAn6KPk7vVMEeh8_wqrX-yRRUTAoCCiWUuyG-GUBTg3s6yPEpnDsVRd0W-v2I-2aDJPdAKl4ttCI_mVCiUg8/s1600/plata1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJ66epIosy2512mOx6sOPXPV427I8ZVYgICU3OOc-xq-EHjf5oBr8-wvmAn6KPk7vVMEeh8_wqrX-yRRUTAoCCiWUuyG-GUBTg3s6yPEpnDsVRd0W-v2I-2aDJPdAKl4ttCI_mVCiUg8/s1600/plata1.png" height="104" width="320" /></a></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Básicamente, luego de la fase inicial donde creamos y ponemos todos los objetos en la pantalla, el programa entra en un bucle indefinido donde va a chequear con cada cambio de cuadro (no olvidemos que establecimos los cuadros a 60 por segundo (60FPS)), si debe ejecutarse alguna acción (o no).</span></div>
<span id="goog_1503667161"></span><span id="goog_1503667162"></span><br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1WDUbU98jlHzGohDQY6Mk3iu1SesBbsPocfQBrrMu4G9y3Z29SGm9Eo13wbtXaDD1KTjfPHY-uYKgE_aId1rEDyDXHDjF1rwNZASMRWpHrveOXC5of_s19qJv9dhr5R_Rr2JowU2I9m8/s1600/project.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1WDUbU98jlHzGohDQY6Mk3iu1SesBbsPocfQBrrMu4G9y3Z29SGm9Eo13wbtXaDD1KTjfPHY-uYKgE_aId1rEDyDXHDjF1rwNZASMRWpHrveOXC5of_s19qJv9dhr5R_Rr2JowU2I9m8/s1600/project.png" height="39" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Esto se lleva a cabo con la llamada a un evento en particular. Es simplemente decirle al programa que cuando cambie el cuadro, haga determinada cosa. Vamos a tener muchos de estos eventos a lo largo de un programa, pero comencemos con mover la Plataforma:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Como primer medida, necesitamos incorporar la librería de “Eventos” a nuestro programa.</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><span style="color: blue;">import </span>openfl.events.<span style="color: #45818e;">Event</span>;</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego, simplemente declaramos el evento y hacia donde apunta: </span><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><span style="color: blue;">this</span>.addEventListener(<span style="color: #45818e;">Event</span>.ENTER_FRAME, Mover_Plataforma);</span></div>
<br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Al final, escribimos el código que moverá la plataforma:</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjseKZeVdmrf22JQavGho7gwHY7vsdnrXN9gPvwKHNl-FvYy7OLzE3dGL5GoXZ4pt8M4_aJ4ibihWHDWE_UIJrCBe-z92lhipj2_7V8BmP31jLQM7vv71YzSX92c_KykFnQ-qtfrxjHYrI/s1600/plata2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjseKZeVdmrf22JQavGho7gwHY7vsdnrXN9gPvwKHNl-FvYy7OLzE3dGL5GoXZ4pt8M4_aJ4ibihWHDWE_UIJrCBe-z92lhipj2_7V8BmP31jLQM7vv71YzSX92c_KykFnQ-qtfrxjHYrI/s1600/plata2.png" height="109" width="320" /> </a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Como habíamos definido el marco exterior, delimitar los bordes es sencillo. Para el izquierdo preguntamos simplemente si la plataforma ha llegado al píxel establecido (5 o menos) y corregimos a 7. Para el derecho, solamente tenemos que restar el ancho de la plataforma al ancho del recuadro.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Existe una forma mejor de manejar esto? Sí; Detectando colisiones entre los bordes y la plataforma respectivamente, pero quería mostrar que puede hacerse sin ello. Más abajo detectamos colisiones con la bola.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Entonces, a 60 veces por segundo, el programa va a chequear si el usuario ha movido el mouse y ajustará la posicion de la plataforma según el caso.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-df05-3a4b-cea1-a0bf3fb9d70a" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego está la Bola que requerirá de un poco más de trabajo:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En primer lugar, necesitamos declarar dos variables para modificar el rumbo, orientación o vector..como quieran llamarlo y la velocidad.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim2KsfHJbKvDZ76W0e-sA0L5ywiYIEJz3BPIzEfURdwCZZ9SA0gUq8WtJ_pG6UYqxfW8eR9BS3XPL02ncuPTAW7idLG2dYidwf6Rzdi_T8ecsAFuEdT0dyseybi2uQziU1k75Kh9FdEdg/s1600/bola2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim2KsfHJbKvDZ76W0e-sA0L5ywiYIEJz3BPIzEfURdwCZZ9SA0gUq8WtJ_pG6UYqxfW8eR9BS3XPL02ncuPTAW7idLG2dYidwf6Rzdi_T8ecsAFuEdT0dyseybi2uQziU1k75Kh9FdEdg/s1600/bola2.png" height="112" width="320" /></a></div>
<br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En mi caso, 5 es el número inicial (y constante en este ejemplo) de velocidad. Pueden probar con otros valores claro.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzbjv9-dXSxQ84bG3ksgRZPKuZm0afe5FT2WmCHASWbrLD1s5O9OWCvBxKjrUL8oLC3M7CEQJwqk_AAYxM7r4F34J_sIXj1qaeLTwUeIIbXUojmfbIMsbBYt_4jmqGcUG0ZHogDYq7kVE/s1600/bola3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzbjv9-dXSxQ84bG3ksgRZPKuZm0afe5FT2WmCHASWbrLD1s5O9OWCvBxKjrUL8oLC3M7CEQJwqk_AAYxM7r4F34J_sIXj1qaeLTwUeIIbXUojmfbIMsbBYt_4jmqGcUG0ZHogDYq7kVE/s1600/bola3.png" height="98" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El problema aquí (si esto no fuese un simple ejemplo, es que siempre va a iniciar su trayectoria hacia la derecha) Quizás lo arreglemos más adelante.</span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego tenemos otro evento (similar al anterior), pero para darle movimiento:</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><span style="color: blue;">this</span>.addEventListener(<span style="color: #45818e;">Event</span>.ENTER_FRAME, Mover_Bola);</span></div>
<br /><div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Y por último, el código:</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7FULJtD6bbVms_k0-kxPiADCYlh17jEsQQ8BCtzounLsGRuXsfD4OZb9MoxlFAez-HCsgb0gsB6o0ym2C5ry_GGRLqlzuB095LOtu6tO8fuFkxdd3OZgOd85vplqrjtGpBJeX6X4uihw/s1600/bola4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7FULJtD6bbVms_k0-kxPiADCYlh17jEsQQ8BCtzounLsGRuXsfD4OZb9MoxlFAez-HCsgb0gsB6o0ym2C5ry_GGRLqlzuB095LOtu6tO8fuFkxdd3OZgOd85vplqrjtGpBJeX6X4uihw/s1600/bola4.png" height="152" width="320" /></a></div>
<br /><br />
<br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Al ingresar en la función, movemos la bola. Luego comparamos ese movimiento con los límites del Recuadro que tenemos. Si el movimiento supera esos límites, la bola va a rebotar. en dirección opuesta a su trayectoria previa. </span><br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El único borde no detectado hasta ahora es el inferior, el cual si es alcanzado, perderíamos la partida.</span><br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En la próxima controlamos colisiones con la Plataforma y los Ladrillos. </span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<br /><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Enlace a los fuentes en <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/Arkanoid" target="_blank">GitHub</a></span></span><br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com1tag:blogger.com,1999:blog-7289313234884568591.post-32726664921780966832015-01-02T05:38:00.000-03:002015-03-03T05:53:00.167-03:00OpenFL y Sprites (Arkanoid Parte 2)<div class="separator" style="clear: both; text-align: center;">
</div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-dea1-957a-ceb0-63e65c8d4da3" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiias261Zmukv2NZNzVS9-shrq-txpzmC7R1JWmY7VltJ-Kk6fyeTl0t1ZrvfPJLHhnjYABlmN-u3ANCU6GSqCO2_qfdqfsj7sb6q4jWc2LAgmc1A7kqHtx1YlXo4snNokQFsd3zH3ylIw/s1600/random-colors.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiias261Zmukv2NZNzVS9-shrq-txpzmC7R1JWmY7VltJ-Kk6fyeTl0t1ZrvfPJLHhnjYABlmN-u3ANCU6GSqCO2_qfdqfsj7sb6q4jWc2LAgmc1A7kqHtx1YlXo4snNokQFsd3zH3ylIw/s1600/random-colors.jpg" height="150" width="200" /></a><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> </span></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-dea1-957a-ceb0-63e65c8d4da3" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Para crear los Ladrillos y la Bolita, procedemos de la misma forma que con la plataforma. </span></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-dea1-957a-ceb0-63e65c8d4da3" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-dea1-957a-ceb0-63e65c8d4da3" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La única diferencia es que en vamos a pintar los ladrillos con colores elegidos aleatoriamente. La función random es la encargada de hacer el trabajo más fácil.</span></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-dea1-957a-ceb0-63e65c8d4da3" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-dea1-957a-ceb0-63e65c8d4da3" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-dea1-957a-ceb0-63e65c8d4da3" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-dea1-957a-ceb0-63e65c8d4da3" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span></div>
<a name='more'></a><br />
<div dir="ltr" id="docs-internal-guid-5dc15c9f-dea1-957a-ceb0-63e65c8d4da3" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">También podríamos haber usado en este caso figuras con los bordes en angulo recto.</span></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-dea1-957a-ceb0-63e65c8d4da3" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTKWHXHXjHOaXOwcISG61IdKYzimR4Rk5cpu1tbV8oa804PJE-pqPgNh0toIuth-Sbdkg2xTYKMK3OuPXDohh8RwdQMJhthqpZqeusYNawqsXdk3NtUvWlZf37uX1bk1V5CeRAoEZLqCg/s1600/ladrillo1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTKWHXHXjHOaXOwcISG61IdKYzimR4Rk5cpu1tbV8oa804PJE-pqPgNh0toIuth-Sbdkg2xTYKMK3OuPXDohh8RwdQMJhthqpZqeusYNawqsXdk3NtUvWlZf37uX1bk1V5CeRAoEZLqCg/s1600/ladrillo1.png" height="91" width="320" /></a></div>
<div dir="ltr" id="docs-internal-guid-5dc15c9f-dea1-957a-ceb0-63e65c8d4da3" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
</div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La bolita no presenta ninguna complicación adicional.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYTLdFiPshQMz-g-W1QKVyvyZPgOR_7VieWaBlSOYQVsYMDInN-9Vec9MlfuK8G3lRfabXFX1D6hE-IsDsjTua1queyzOJY7JOxkGS0MV8XY9EL5guHayu2m4G7Ot7QAeYxS50w1_xCU/s1600/bola.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYTLdFiPshQMz-g-W1QKVyvyZPgOR_7VieWaBlSOYQVsYMDInN-9Vec9MlfuK8G3lRfabXFX1D6hE-IsDsjTua1queyzOJY7JOxkGS0MV8XY9EL5guHayu2m4G7Ot7QAeYxS50w1_xCU/s1600/bola.png" height="151" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego de crearlos, ubicamos la bolita en la escena junto con la Plataforma. También agregamos un recuadro para delimitar los bordes de la pantalla. Cuando tengamos el programa mas o menos temrinado volveremos a esta sección de código para agregar algunas cosas.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSpCXQT5PbwonjLCl37rpbnMnylLOtP19nee3v2Ww2EMkWJN8a2RQ83bW5aHraIEFEgayi0GO71o-gJIi3NrWhdA9Pvqs66Da7Vp5JiZPbE8tp8Al58snT7W70NgRRE_o8yTSmQugl5uo/s1600/recuadro.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSpCXQT5PbwonjLCl37rpbnMnylLOtP19nee3v2Ww2EMkWJN8a2RQ83bW5aHraIEFEgayi0GO71o-gJIi3NrWhdA9Pvqs66Da7Vp5JiZPbE8tp8Al58snT7W70NgRRE_o8yTSmQugl5uo/s1600/recuadro.png" height="110" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Agregamos la Bolita a la escena...</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVLyJ-XM4n25Gn6H6tJYuo07Bpua47VeOlxZTL6nuPE5puRSbIGuUMYPcPIPH4SPVGNknICE5EM5o3C9de7f4plftXYfBJcAJj2HXDWWkrBnjqOn3K9g2q7bQHWV8nqIZI6n0chIFF8zQ/s1600/bola1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVLyJ-XM4n25Gn6H6tJYuo07Bpua47VeOlxZTL6nuPE5puRSbIGuUMYPcPIPH4SPVGNknICE5EM5o3C9de7f4plftXYfBJcAJj2HXDWWkrBnjqOn3K9g2q7bQHWV8nqIZI6n0chIFF8zQ/s1600/bola1.png" /></a></span></div>
</div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Vamos a utilizar una matriz (array) para crear nuestra pared de ladrillos. Ello nos permitirá luego poder detectarlos y removerlos de la escena cuando colisione la bolita contra alguno.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKYTxlmvvQYnpy7lF-Hg8mDjq3ZKiKXD2aZANdxh8YdX_1zEb37sBbjKjjNT9x5OFjJTez8RSPcNQbeTOHdB3256OSxdAymYYrxaS0MgBO6GvqjfCzc8L9QbLOJG53Zlc37QQVXkdMWfc/s1600/declaracion.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKYTxlmvvQYnpy7lF-Hg8mDjq3ZKiKXD2aZANdxh8YdX_1zEb37sBbjKjjNT9x5OFjJTez8RSPcNQbeTOHdB3256OSxdAymYYrxaS0MgBO6GvqjfCzc8L9QbLOJG53Zlc37QQVXkdMWfc/s1600/declaracion.png" height="63" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">No es necesario declarar que la matriz va a contener Ladrillos, pero es una buena técnica de programación hacerlo, para reservar la memoria específicamente. De lo contrario, al desconocer el objeto o dato que se va a alojar en la matriz, el tamaño asignado es indefinido.</span><br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Para agregarlos a la escena, necesitamos dos bucles: El primero va a encargarse de colocar los ladrillos en las filas, y el segundo de las columnas.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJSu2w5a2LWsZFOd2YPUtDYGXUsbwG35vZCbfv_Ro4UjcIFmCpzMku1ck1tD8BBsj06_cawJpRqPCSRzlaDQXvlLXq5lP_VNj6exehMoUu6TVMNcpYkHFPxhvW7VIeZfA_BFtQuYrG2fk/s1600/pared1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJSu2w5a2LWsZFOd2YPUtDYGXUsbwG35vZCbfv_Ro4UjcIFmCpzMku1ck1tD8BBsj06_cawJpRqPCSRzlaDQXvlLXq5lP_VNj6exehMoUu6TVMNcpYkHFPxhvW7VIeZfA_BFtQuYrG2fk/s1600/pared1.png" /></a></div>
<br />
<br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Hasta aquí hemos creado los tres componentes mínimos y necesarios que el juego necesita para funcionar.</span><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJOL-sWFRxv1pylWh02E7O0TN259l4j3jhmKryd_WtPUjkwgkVdRHiFEyJZi-zl4-4bKB8E1RU-5Ncr6V8zKhIGdlW5Mdy4QoUU6vLMi1jC1UiJFGOjpNbOCpXZ4o4Bt0COWTvgfiCnIM/s1600/juego1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJOL-sWFRxv1pylWh02E7O0TN259l4j3jhmKryd_WtPUjkwgkVdRHiFEyJZi-zl4-4bKB8E1RU-5Ncr6V8zKhIGdlW5Mdy4QoUU6vLMi1jC1UiJFGOjpNbOCpXZ4o4Bt0COWTvgfiCnIM/s1600/juego1.png" height="320" width="249" /></a></span></div>
<br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En la próxima le damos movimiento. </span><br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Enlace a los fuentes en <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/Arkanoid" target="_blank">GitHub</a></span> </span></div>
Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-9439533620864376932014-12-19T18:32:00.000-03:002015-02-28T18:34:09.330-03:00OpenFL y Sprites (Arkanoid Parte 1)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAhywINu-7udmNKjpIclO6JnmF6Dk9hcAlb7RsN2YawDfYXa86CatwcTJ84e0_85A7p1dXmM7XaVsiIISgcNUdI1A6MQRf5qc95V1sdtJBnz2v8qZKeiGqk1x0j1N0cUDqZQNB4LhhjMA/s1600/haxe_intro_header_image-700x350.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAhywINu-7udmNKjpIclO6JnmF6Dk9hcAlb7RsN2YawDfYXa86CatwcTJ84e0_85A7p1dXmM7XaVsiIISgcNUdI1A6MQRf5qc95V1sdtJBnz2v8qZKeiGqk1x0j1N0cUDqZQNB4LhhjMA/s1600/haxe_intro_header_image-700x350.png" height="160" width="320" /></a></div>
<div dir="ltr" id="docs-internal-guid-c405ed78-d012-9812-64aa-35193febb9a9" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-c405ed78-d012-9812-64aa-35193febb9a9" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-c405ed78-d012-9812-64aa-35193febb9a9" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Haxeui nos permitió de forma sencilla incorporar controles para generar una aplicación de forma rápida y sencilla. Veamos cómo se comporta OpenFL con un ejemplo en puro código nativo:</span></div>
<div dir="ltr" id="docs-internal-guid-c405ed78-d012-9812-64aa-35193febb9a9" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-c405ed78-d012-9812-64aa-35193febb9a9" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-c405ed78-d012-9812-64aa-35193febb9a9" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" id="docs-internal-guid-c405ed78-d012-9812-64aa-35193febb9a9" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span></div>
<a name='more'></a><br />
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Intentaremos reproducir una versión simple del juego Arkanoid con este ejemplo.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Creamos un nuevo proyecto con FlashDevelop (OpenFL).</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Nuevamente, comenzamos editando el archivo application.xml para modificar el tamaño de la pantalla y el color de fondo.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: red; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"></span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrHo_L7zDwlCV1x_lPQQh3Ox8KlrUSEbB22vw3U4mssMU1fiVltrmNvXN80HYSG4Ui2hBwuWufilE7HBC3E4DqV8OXORTDIzrO_vELmRjz41I_4iZ8Mgooc6XQsY5JA9jZKdnDrDEde7c/s1600/project.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrHo_L7zDwlCV1x_lPQQh3Ox8KlrUSEbB22vw3U4mssMU1fiVltrmNvXN80HYSG4Ui2hBwuWufilE7HBC3E4DqV8OXORTDIzrO_vELmRjz41I_4iZ8Mgooc6XQsY5JA9jZKdnDrDEde7c/s1600/project.png" height="47" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">El juego consta de varios objetos pero comencemos por lo básico: una plataforma, una bolita y ladrillos:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Cualquier elemento que es representado visualmente en la pantalla se denomina <a href="http://es.wikipedia.org/wiki/Sprite_%28videojuegos%29" target="_blank">Sprite</a>. Vamos a crear diferentes clases para cada uno de ellos.</span></div>
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Comenzamos con la plataforma: en FD, nos posicionamos en el directorio SRC con el puntero del mouse, botón derecho..Add..New Class. </span><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHCWeNOUiq18NzDA1r140LWD7ac7bzs37QQMwndChZj_cLgvqQ5SxQfdDZXFLw8V5AUC60j-qFZntdy1TcjJhWWYdumtZB8Uq_GCph1QsE_BDCDxyUgHCi2E_yXeMNTVP4Tj2Z0X2etRE/s1600/nuevaclase.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHCWeNOUiq18NzDA1r140LWD7ac7bzs37QQMwndChZj_cLgvqQ5SxQfdDZXFLw8V5AUC60j-qFZntdy1TcjJhWWYdumtZB8Uq_GCph1QsE_BDCDxyUgHCi2E_yXeMNTVP4Tj2Z0X2etRE/s1600/nuevaclase.png" height="82" width="320" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"> Ello nos traerá un cuadro de diálogo con algunas opciones. Por el momento dejaremos todo como está salvo por el nombre de la nueva clase, a la que llamaremos Plataforma.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJEMx7DD-edwO5Av3_hX_lARKKSaRzgh949zQXnHBGrwczQXmxmByWN1kf1OLboLPILP_z4lVcLapt8hIYQIUOeYSDl4Ri1VSZpt-vurY_KFdSe-0la0Klv1s5oUVZmTNWhvMn6D1Wvok/s1600/plataforma.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJEMx7DD-edwO5Av3_hX_lARKKSaRzgh949zQXnHBGrwczQXmxmByWN1kf1OLboLPILP_z4lVcLapt8hIYQIUOeYSDl4Ri1VSZpt-vurY_KFdSe-0la0Klv1s5oUVZmTNWhvMn6D1Wvok/s1600/plataforma.png" height="197" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Dentro del archivo, tipeamos el siguiente código comenzando con la declaración de la librería que vamos a usar, en este caso Sprite.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaABkp4NhBQCYGk06IiVUe01AmF2c3WvRLt48BuXWI1BAEEDlwlr6D-Z-i0qQEkc-B0ABkFLTI_hft2fON_IRJlTzkXgg5C6KhRvFH3XjnI_RTaarx9Ii4q-RNNmu5nOp-aNNAfEN9kEQ/s1600/plataforma2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaABkp4NhBQCYGk06IiVUe01AmF2c3WvRLt48BuXWI1BAEEDlwlr6D-Z-i0qQEkc-B0ABkFLTI_hft2fON_IRJlTzkXgg5C6KhRvFH3XjnI_RTaarx9Ii4q-RNNmu5nOp-aNNAfEN9kEQ/s1600/plataforma2.png" height="203" width="400" /></a></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<br /></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego creamos la clase:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La instrucción super es imperativa en este caso, necesitamos invocar al contructor del objeto en cuestión.</span></div>
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego tenemos un par de funciones de dibujo:</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXGP8S3zI15Cf41_3RMtXYjWIcUfT9IEcROxlwT5J3eqq_YOJuKUU_xbh9SxfkhEfXvi-e8bOQh8enjhetDXEDNd-SCZbVHemUGn1wKFRF66mgpa_mrZ7dJ3Ylwrifa_85TtcdcD9m-MA/s1600/dibu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXGP8S3zI15Cf41_3RMtXYjWIcUfT9IEcROxlwT5J3eqq_YOJuKUU_xbh9SxfkhEfXvi-e8bOQh8enjhetDXEDNd-SCZbVHemUGn1wKFRF66mgpa_mrZ7dJ3Ylwrifa_85TtcdcD9m-MA/s1600/dibu.png" height="42" width="400" /></a></div>
</div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La primera es el color de relleno de nuestra plataforma, en mi caso es amarillo. Si no les gusta, pueden elegir el que quieran. Para ver una lista pueden visitar </span><a href="http://www.colorpicker.com/" style="text-decoration: none;"><span style="background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline;">http://www.colorpicker.com/</span></a></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego tenemos la forma y el tamaño. La instrucción específicamente dibuja rectángulos con bordes redondeados (Si no les gustan los bordes pueden utilizar drawRect que es igual pero no permite el redondeo de vértices. por último, terminamos de dibujar.</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Guardamos y volvemos a la clase principal (Main):</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Allí, comenzamos por declarar una nueva instancia del objeto con los atributos de la clase Plataforma:</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><span style="color: blue;"><span style="background-color: white;">private </span></span><span style="color: cyan;">var </span>Plataforma1:<span style="color: blue;">Plataforma</span>;</span></div>
<br />
<div dir="ltr" style="line-height: 1.38; margin-bottom: 0pt; margin-top: 0pt;">
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Luego de esto, lo creamos, posicionamos en la pantalla y lo mostramos:</span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXNXl9wmrTBnThHWmdI0EpL63dvffbPHajYpBpwIfS2Z2bQQsaGNx4ru3tjNgVedOdggKNS5O5SrBbMI7SGQ9MMwBsP5o0UuNI19gUjLA0OO3eg36dZ6u-YC50zdQJEWaNWBLTXoS3ILE/s1600/main1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXNXl9wmrTBnThHWmdI0EpL63dvffbPHajYpBpwIfS2Z2bQQsaGNx4ru3tjNgVedOdggKNS5O5SrBbMI7SGQ9MMwBsP5o0UuNI19gUjLA0OO3eg36dZ6u-YC50zdQJEWaNWBLTXoS3ILE/s1600/main1.png" height="193" width="400" /></a></div>
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Si ejecutamos el código escrito hasta ahora, nos encontraríamos con algo similar a esto:</span><br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpCwvwrC98NMRzjKXr7xY3Tcgbp0p86ip7tC52FhDkdYr_Et3J-cIu2lQ24l4mT6Nx0d_ENaf71Sy4KHU6r6KMRfwgkAiOgspBjJ8fD4Y4ekqofZsBPhVJZOPE9DJyVuAThnzjmhV2aRM/s1600/muestra1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpCwvwrC98NMRzjKXr7xY3Tcgbp0p86ip7tC52FhDkdYr_Et3J-cIu2lQ24l4mT6Nx0d_ENaf71Sy4KHU6r6KMRfwgkAiOgspBjJ8fD4Y4ekqofZsBPhVJZOPE9DJyVuAThnzjmhV2aRM/s1600/muestra1.png" height="320" width="254" /></a></div>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;"><br /></span>
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Nos es mucho por el momento, pero es importante que se entiendan los conceptos. En la próxima agregamos los demás objetos (que es muy similar a lo que hicimos aquí) y les damos algo de moviemiento.</span><br />
<br />
<span style="background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Enlace a los fuentes en <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/Arkanoid" target="_blank">GitHub</a> </span>Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-70792328008363968682014-12-03T05:46:00.000-03:002015-02-27T05:48:26.688-03:00HaxeUI: Reproductor Mp3 (4ta Parte)<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnwvMiGO2Au4806GktonTf_PAS3a8wcwyud9zbTiAwZMGXZ_pfyMebl1lQHg4dNDtgw2RFLCXz66upRKjy9-yXNwOXeEHGQQLjFDmxFJ53VhvUQBSsUXukuKfK6YepLQOWICM6zuZiUXY/s1600/print7big.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnwvMiGO2Au4806GktonTf_PAS3a8wcwyud9zbTiAwZMGXZ_pfyMebl1lQHg4dNDtgw2RFLCXz66upRKjy9-yXNwOXeEHGQQLjFDmxFJ53VhvUQBSsUXukuKfK6YepLQOWICM6zuZiUXY/s1600/print7big.jpg" height="266" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;">Muchos controles, algo de código pero todavía no hace ni mu el programa...solucionemos eso.</span><br />
<br />
<span style="font-family: Verdana, sans-serif;">Los métodos y eventos para reproducir sonidos que vamos a utilizar pertenecen a la librería de OpenFL. Son bastante básicos en lo que se refiere a manipulación de un archivo de audio, ya que toda la biblioteca OpenFL está más orientada a la creación de juegos y por ende, las características que posee para manipular audio son escasas.</span><br />
<br />
<br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<a name='more'></a><span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Posee dos métodos para abrir un archivo que va a depender de si se encuentra incrustado en el programa (cosa que no sucede con nuestro ejemplo) o si va a obtenerlo remotamente (nuestro caso).</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">El primero es sencillo y muy directo, ya que forma parte de los "assets" o recursos. lo vamos a tratar en otro programa de ejemplo, con sonidos que sean mucho más cortos.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">El segundo necesita algo de preparación, pero veamos la lógica que sigue nuestro programa a ver donde nos lleva:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Tenemos entonces que el usuario ingresa una dirección de internet en el cuadro de texto, y al presionar el botón la misma se agrega a la lista de temas (si es válida, sino la omite).</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Como el programa "acorta" la cadena al agregarla como ítem a la lista, a la hora de utilizarla como valor para ir a buscar el archivo, no nos serviría. Por ejemplo el método get() nos devolvería la versión corta y el archivo no sería encontrado.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Entonces, debemos guardar la cadena "original" ingresada por el usuario en algún lado. Para ello creamos una <a href="http://es.wikipedia.org/wiki/Vector_%28inform%C3%A1tica%29" target="_blank">matriz o array</a>.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Con haxe es sencillo de definir una matriz, la sintaxis sería: </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">var </span><i>identificador </i>= <span style="color: blue;">new Array</span><<i>tipo</i>>();</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">En nuestro caso exclusivamente necesitamos solamente guardar un sólo tipo de dato que es una cadena de caracteres, entonces sería:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">var </span>items = <span style="color: blue;">new Array</span><<span style="color: orange;">String</span>>();</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Lo creamos inmediatamente por debajo de la declaración de la función main.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Hay un ejemplo en <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/02-Variables" target="_blank">GitHub</a> de como se utilizan.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Las matrices como la declarada (unidimensional) son muy sencillas de utilizar, es su forma más básica digamos. Poseen un puntero o índice que no es mas que un número de orden y el dato que deseamos guardar.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Como cada entrada que se encuentre en el control ListView posee un identificador numérico único a medida que se van agregando, es muy sencillo asociar ese número con el puntero de la matriz y así ir guardando los datos en ella.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_N3YPr_zT-AknEfLl77qBxNlN8vYppWx4qPRzsXK3u8U0X8cuPmnCnUdArK-yY3kcSN_RvyqKc_FY4DbT08Hl7KPYmIFxT7YtcE6Vl69Va6VOwkIcG4zt4hxNYIROYV0hVHDaOF1AtbY/s1600/push.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_N3YPr_zT-AknEfLl77qBxNlN8vYppWx4qPRzsXK3u8U0X8cuPmnCnUdArK-yY3kcSN_RvyqKc_FY4DbT08Hl7KPYmIFxT7YtcE6Vl69Va6VOwkIcG4zt4hxNYIROYV0hVHDaOF1AtbY/s1600/push.png" height="103" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;">Vamos a agregar una línea al evento click del botón para guardar el dato en la matriz:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">items.push(direccion.text);</span><br />
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"> </span><br />
<span style="font-family: Verdana, sans-serif;">El puntero de nuestra matriz se auto incrementa, el puntero del control lista también, entonces van a coincidir siempre el dato mostrado por el control lista y el dato guardado en la matriz.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">el método .push(dato), lo único que hace es guardar en el último lugar el dato que le asignemos...lo empuja (push en inglés) dentro de la matriz, auto incrementando el puntero.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Casi lista la entrada de direcciones. solo queda manejar un poco el botón "Cargar".</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Cuando se inicia el programa, debería de estar desactivado, ya que no hay una entrada válida al inicio. (el cuadro de texto muestra la leyenda "Agregar").</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxkkkQQZ7IZKNe8t8DkAQDohRR5tPDzK9wi4PkzhjbWT4R8Zte-8nV0IDLHFdyN0bbM_0GvD0i8XmyF_Zv8DcIjzmQBUrZLYDEAa3RmeBN8Bw8huHOUEfj1nFEVVMmwA-RCHU81mmK5bg/s1600/cargarb.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxkkkQQZ7IZKNe8t8DkAQDohRR5tPDzK9wi4PkzhjbWT4R8Zte-8nV0IDLHFdyN0bbM_0GvD0i8XmyF_Zv8DcIjzmQBUrZLYDEAa3RmeBN8Bw8huHOUEfj1nFEVVMmwA-RCHU81mmK5bg/s1600/cargarb.png" /></a></div>
<span style="font-family: Verdana, sans-serif;">En realidad no importa mucho si el usuario ni bien arranca el programa presiona el botón ya que la rutina de control de entrada que escribimos lo interceptaría perfectamente, pero si el botón se muestra desactivado, la interfaz se vuelve un poco mas intuitiva para el usuario ya que visualmente le esta señalando que no puede usarlo sin hacer algo antes.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">En la declaración de propiedades del objeto, insertamos una nueva línea:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">carga.disabled = <span style="color: blue;">true</span>;</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Al inicio del programa cuando el objeto se crea, aparece en pantalla desactivado. Lo único que debemos hacer para activarlo es volver la propiedad disabled a false (falso).</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Lo activaremos cuando la propiedad del control TextInput (direccion) se esté modificando (que nos está diciendo que el usuario esta tipeando algo en él).</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Para ello agregamos un nuevo evento:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDEPHMnoh-oOWYaRN8t69XXVS5gT398bwMsZhzVSRDjFjCxzqRnyNAYwzNuPupaAksz2tgAqQeIIdtws75P1_4LgyGLgld9_YOeQ97fjLuMe0ojTXNWEDYPdpJRIhCfMVid1bftlsQpws/s1600/cargarc.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDEPHMnoh-oOWYaRN8t69XXVS5gT398bwMsZhzVSRDjFjCxzqRnyNAYwzNuPupaAksz2tgAqQeIIdtws75P1_4LgyGLgld9_YOeQ97fjLuMe0ojTXNWEDYPdpJRIhCfMVid1bftlsQpws/s1600/cargarc.png" height="49" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;">Sabemos con este método que ni bien el usuario ingrese algún carácter en el cuadro, de inmediato </span><span style="font-family: Verdana, sans-serif;">el botón</span><span style="font-family: Verdana, sans-serif;"> cambia su estado a activo. (con que solo haga click y se muestre el cursor no basta, el programa va a esperar que el usuario ingrese algo...por eso el método del evento a monitorear se llama CHANGE (cambiar)...el evento espera un "cambio" por parte del usuario y no simplemente un click. </span><span style="font-family: Verdana, sans-serif;">Tenemos lista la interfaz de entrada.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Necesitamos más botones:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpdXJ-qwqUYLvQ5Rzd4kaZuQKlmiko64pH-XL9f0_1mmy-qrniwHioZNvGbb6zDng6YYeYaAte5vBoI5aSADLtqkfi1mGlzPjcNhIC-qSF5LCHqc_Urzmpu_ZWXWhojeHdBAWepj_qn18/s1600/mas+botones.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpdXJ-qwqUYLvQ5Rzd4kaZuQKlmiko64pH-XL9f0_1mmy-qrniwHioZNvGbb6zDng6YYeYaAte5vBoI5aSADLtqkfi1mGlzPjcNhIC-qSF5LCHqc_Urzmpu_ZWXWhojeHdBAWepj_qn18/s1600/mas+botones.png" height="320" width="221" /></a></div>
<span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;">Digamos uno para reproducir, otro para pausa, otro para detener y uno para borrar la lista.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Puede observarse que por ahora, muestran etiquetas de texto los botones. una vez que tengamos el código funcionando como queremos, vamos a reemplazarlas por imágenes (iconos).</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Los botones se muestran al principio desactivados para evitar que el usuario los presione sin haver seleccionado una canción o haber ingresado alguna a la lista. Ello evita errores en la ejecución del programa. Claro que podría solucionarse con algo de código, pero prefiero mantenerlo simple por el momento.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Además sería interesante tener una barra de progreso para saber cuanto de la canción ha sido reproducido, junto con un par de etiquetas más.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmYajVu3xRzFuujwg2yOFRpFYRq6KroTJSVPibSzXW5ZuHtGM9IciV_i7QhIAbZzXo8UgyeOp8KKIz35PgsQEWIXl0nGIE_p7auu5WH_zb8O2j56UKC9bH65GCFRmtDWxDelRmI0toZWg/s1600/prog2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmYajVu3xRzFuujwg2yOFRpFYRq6KroTJSVPibSzXW5ZuHtGM9IciV_i7QhIAbZzXo8UgyeOp8KKIz35PgsQEWIXl0nGIE_p7auu5WH_zb8O2j56UKC9bH65GCFRmtDWxDelRmI0toZWg/s1600/prog2.png" height="146" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;">Es igual que la barra que muestra el progreso de la descarga. De hecho el código es exactamente igual.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Con estos dos objetos terminamos de añadir controles al programa por ahora.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Veamos que hacer con todos ellos y como manipular su comportamiento.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Existen varios eventos que necesitamos monitorear:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">1) Si el usuario presiona un doble click doble en la lista. La descarga comienza.</span><br />
<span style="font-family: Verdana, sans-serif;">2) Si el archivo se descargó, que pueda reproducirlo.</span><br />
<span style="font-family: Verdana, sans-serif;">3) Permitir la pausa del archivo en curso.</span><br />
<span style="font-family: Verdana, sans-serif;">4) Permitir detener la reproducción del archivo en curso.</span><br />
<span style="font-family: Verdana, sans-serif;">5) Permitir Limpiar la lista</span><br />
<br />
<span style="font-family: Verdana, sans-serif;">y uno más que es actualizar las barras de progreso, pero donde no esperamos una intervención directa del usuario.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Vamos a arrancar con el evento de descarga:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSLNcnKgBA0YUVMt81tKYHdFWOrP6SR9Zij9zTsKoinxw3eyxdUJ9JW7lZIlyKHu75JymON9X1csOH8_6hNUANHtsXEWW2mk9kAS-OeqKcj0wV9tzsiCLXSBhhNsYd8L5hwbl_dWqpPg/s1600/urlreq.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSLNcnKgBA0YUVMt81tKYHdFWOrP6SR9Zij9zTsKoinxw3eyxdUJ9JW7lZIlyKHu75JymON9X1csOH8_6hNUANHtsXEWW2mk9kAS-OeqKcj0wV9tzsiCLXSBhhNsYd8L5hwbl_dWqpPg/s1600/urlreq.png" height="44" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;">Un solo click en la lista no significa que el usuario pretenda reproducir el archivo, sino que simplemente navega por los items. El doble click es, para mí, el evento que muestra la intención de hacer algo con ese item en particular.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Al dispararse el evento, suceden varias cosas:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">La primera, crea una instancia de una nueva clase: URLRequest.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Simplemente captura toda la información en una sola petición de http para que puedan utilizarse los métodos de carga (load) de otras clases u objetos.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">El parámetro que le estamos pasando, (items[lista.selectedIndex])</span><span style="font-family: Verdana, sans-serif;"> es el dato alojado en la matriz (items)que tiene el índice proporcionado por el control lista.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Habría que importarla junto con otra:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">import </span>openfl.net.<span style="color: #45818e;">URLRequest</span>;</span><br />
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">import </span>openfl.net.<span style="color: #45818e;">URLLoader</span>;</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Como verán estas dos no pertenecen a HaxeUI sino a OpenFL propiamente dicho.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Ahora agreguemos los controladores de sonido:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Necesitamos importar dos nuevas clases:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">import </span>openfl.media.<span style="color: #45818e;">Sound</span>;</span><br />
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">import </span>openfl.media.<span style="color: #45818e;">SoundChannel</span>;</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Luego, dentro de la función main, vamos a crear dos objetos de estas clases:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">var </span>sonido: <span style="color: #45818e;">Sound </span>= <span style="color: blue;">new </span><span style="color: #45818e;">Sound</span>();</span><br />
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">var </span>canal: <span style="color: #45818e;">SoundChannel </span>= <span style="color: blue;">new </span><span style="color: #45818e;">SoundChannel</span>();</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">La clase sound (sonido) permite el uso de sonidos en una aplicación. Nos habilita para crear objetos, cargar un archivo de sonido y reproducirlo.</span><br />
<span style="font-family: Verdana, sans-serif;">Existen varias políticas de seguridad con respecto al reproductor flash y Adobe Air que no voy a tratar aquí para no extenderme.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">La clase SoundChannel (canal) permite la manipulación un poco más profunda del objeto sonido. Hasta ahora, pueden existir (y reproducirse o manipularse hasta 32 canales al mismo tiempo).</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">y volviendo al evento, como primer medida, detenemos cualquier reproducción que haya en curso para poder cargar una nueva:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">canal.stop();</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGoqC_obirGoEuXZ26rK-a1m9b6incNypaG6vSFxDmUDMLSWaVq5f5wKDzbY4XyW-BsMm4iQ9HuaR3tJnUmp16knMMU3b1LfFxIV63RCVjImToakxPgv3WTKC6WZYfFp-1SvoNLFhLh1I/s1600/buffer.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGoqC_obirGoEuXZ26rK-a1m9b6incNypaG6vSFxDmUDMLSWaVq5f5wKDzbY4XyW-BsMm4iQ9HuaR3tJnUmp16knMMU3b1LfFxIV63RCVjImToakxPgv3WTKC6WZYfFp-1SvoNLFhLh1I/s1600/buffer.png" /></a></div>
<span style="font-family: Verdana, sans-serif;">En este punto, debemos conocer si existe algún archivo descargándose actualmente. La instancia isBuffering nos va a devolver un valor lógico verdadero si el objeto sonido está esperando que más datos se descarguen.</span><br />
<br />
<span style="font-family: Verdana, sans-serif;">Si este es el caso (</span><span style="font-family: Verdana, sans-serif;">isBuffering=true)</span><span style="font-family: Verdana, sans-serif;">, debemos cerrar la conexión actual (que podría ser otro archivo y no justamente el seleccionado por el usuario) para comenzar con una nueva.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Por último, habilitamos el botón de reproducir para que pueda ser presionado.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Al utilizar las librerías URLRequest y URLLoader, sólo basta con crear un nuevo objeto sonido para que OpenFL invoque la instancia Load() automáticamente.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Y por último, al habilitar el bóton de reproducir, creamos el evento que lo maneje:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCVNPk1BPl76EjyUY8fPV5dWfCxGnPtHAlkfUcS6e_rUJHgXRq2he7ZZ5VCmyFw2lxXrkZ6DMmRKYBVMipqeSZvR2B7VQvEH1Os6SyZ9dVFxpFEsbELCdx7MF4UL-ZPputoWAzozZrkFU/s1600/repro.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCVNPk1BPl76EjyUY8fPV5dWfCxGnPtHAlkfUcS6e_rUJHgXRq2he7ZZ5VCmyFw2lxXrkZ6DMmRKYBVMipqeSZvR2B7VQvEH1Os6SyZ9dVFxpFEsbELCdx7MF4UL-ZPputoWAzozZrkFU/s1600/repro.png" height="73" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;">La instancia sonido.play crea un nuevo objeto canal para poder controlarlo.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">posicion, es una variable que guarda la última posición en la que el archivo de sonido se ha reproducido y deberíamos inicializarla al comienzo de la función main.</span><br />
<span style="font-family: Verdana, sans-serif;">Esta variable, va a permitirnos poder realizar una pausa en la reproducción del archivo y volver a continuar desde el ultimo punto.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Por último, puede verse como los botones van tomando diferentes estados: si estamos ejecutando el evento reproducir, quiere decir que el botón debería de desactivarse (ya que existe una reproducción en curso), el botón de pausa debería activarse, para permitir su uso junto con el de detener.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Con todos estos agregados, el reproductor quedaría mas o menos así:</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZk20EW6qgnpF7-Olv53pTK0kzzdqZgrJm-AN-UuSg8Rghggn7T2FONffZTHjeSgONQJZ-BYOQbyX1ecTvD82DJrFjM6K5QunfvulJKfkugLZd9MzKzbfoTSS7fUVUDMRfmWmg7Y48a_U/s1600/repfinish1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZk20EW6qgnpF7-Olv53pTK0kzzdqZgrJm-AN-UuSg8Rghggn7T2FONffZTHjeSgONQJZ-BYOQbyX1ecTvD82DJrFjM6K5QunfvulJKfkugLZd9MzKzbfoTSS7fUVUDMRfmWmg7Y48a_U/s1600/repfinish1.png" height="267" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Visualmente no es la gran cosa, pero cumple con su cometido. Obviamente el programa puede ser mejorado; Controles de volumen, silencio, colores, etc.</span><br />
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;">El código completo puede encontrarse en la <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/Reproductor%20MP3" target="_blank">nube</a></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-86206567964297820752014-11-05T16:45:00.000-03:002014-11-05T16:45:44.881-03:00HaxeUI: Reproductor Mp3 (3ra Parte)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGxpYTlNH6EW09GXTRqJiZWr4iMPG2FA8aPFSqUA5bISToIkCZ2navyO_G6SsEQWbMfFQ2MC1XwmazxiGcb5FjAhwl1UBIxtzA2N78rerIQ5sRDRTK3r4mQWP87LV526vO1Qh7Z3cJyX8/s1600/3D_FrequencyAnalyses.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGxpYTlNH6EW09GXTRqJiZWr4iMPG2FA8aPFSqUA5bISToIkCZ2navyO_G6SsEQWbMfFQ2MC1XwmazxiGcb5FjAhwl1UBIxtzA2N78rerIQ5sRDRTK3r4mQWP87LV526vO1Qh7Z3cJyX8/s1600/3D_FrequencyAnalyses.JPG" height="127" width="200" /></a></div>
<span style="font-family: Verdana, sans-serif;">En la entrada anterior vimos como agregar controles y darles forma. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Como el reproductor hace uso de los archivos de música que estén alojados en diferentes sitios de Internet, sería bueno que tenga una lista de reproducción (direcciones web) para que no tengamos que volver a tipear la dirección si quisiésemos volver a escucharlo.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Agreguemos un control lista que nos permita una vez cargado seleccionar el archivo.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<a name='more'></a><span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">El control o componente (que a su vez es un contenedor) se llama ListView. Lo importamos a nuestro proyecto primero:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">import </span>haxe.ui.toolkit.containers.<span style="color: #45818e;">ListView</span>;</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Luego lo creamos y damos forma:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK2sh748k3d_GjWQ8GyMtq5zFbpfc-e1gZO-HPOUAKrzXm9dW3Sf0uIYpP54pkO-xRHh7WjIwmhJ6ES8mlYbyhtooxdguXqMLf_hLNNl4Fulzj9O2c6N9nyrScI-CyVKJdGR_-k6sRrZI/s1600/listv1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: Verdana, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK2sh748k3d_GjWQ8GyMtq5zFbpfc-e1gZO-HPOUAKrzXm9dW3Sf0uIYpP54pkO-xRHh7WjIwmhJ6ES8mlYbyhtooxdguXqMLf_hLNNl4Fulzj9O2c6N9nyrScI-CyVKJdGR_-k6sRrZI/s1600/listv1.png" height="89" width="320" /></span></a></div>
<span style="font-family: Verdana, sans-serif;">Como ya se habrán dado cuenta, muchas de las propiedades de los controles son similares para todos por igual. Sobretodo en lo que a propiedades estéticas se refiere.</span><br />
<span style="font-family: Verdana, sans-serif;">No olviden agregar el método addchild(lista) al final.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Entonces; Dijimos que cada vez que el usuario ingresa una dirección de Internet y presione el botón de cargar, esa dirección se agregue a la lista de canciones.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div id="spoiler" style="display: none;">
<span style="font-family: Verdana, sans-serif;">Los eventos en programación se originan cuando el flujo del programa se ve afectado por por sucesos que originaron el usuario, el sistema u otro agente externo. (Algunos programadores consideran el simple paso del tiempo como un evento. No estoy de acuerdo ya que eso es en mi opinión una simple espera a que "algo suceda").</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Un ejemplo practico es el usuario escribiendo la dirección web en el cuadro de texto que agregamos, otro evento se produce cuando presiona el botón de carga.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Existe un sin fin de eventos, pero no así el acceso a ellos. Como programadores, la cantidad de eventos que podamos controlar va a depender de muchos factores como por ejemplo el sistema operativo o plataforma donde se ejecute nuestro software, el lenguaje de programación, la seguridad del sistema, etc.</span></div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to Show/Hide Content" type="button">Mas info/Cerrar</button><br />
<br />
<span style="font-family: Verdana, sans-serif;">Agreguemos algo de código para que ello suceda: </span><br />
<span style="font-family: Verdana, sans-serif;">Como el evento que deseamos controlar pertenece a un objeto generado por HaxeUI (un botón), es aconsejable que utilicemos aquellos que fueron proporcionados por el creador de la librería.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Nuevo import: <span style="color: blue;">import </span>haxe.ui.toolkit.events.<span style="color: #45818e;">UIEvent</span>;</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Nos posicionamos por debajo del último control (objeto) creado y vamos tipear la llamada a dos funciones:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYuYReUYA46mI_-5a3lcVAJkP2oOfSpjFtWieQx-W9rBSwZ2FhsyKw5ZL2x8MxS8ZfK4RTJI_EIEn0S3gUFOKWbpSBmm_j9Xs2QeTP2Raum2q9tsn7X_TJuXfNHHerYiHriZD6eqF75Tw/s1600/listv2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYuYReUYA46mI_-5a3lcVAJkP2oOfSpjFtWieQx-W9rBSwZ2FhsyKw5ZL2x8MxS8ZfK4RTJI_EIEn0S3gUFOKWbpSBmm_j9Xs2QeTP2Raum2q9tsn7X_TJuXfNHHerYiHriZD6eqF75Tw/s1600/listv2.png" height="137" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;">El código, para los programadores con algo de experiencia, se verá muy familiar. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">En la línea 105, puede observarse como se agrega el método para interceptar el evento. En el caso particular, tenemos que:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">1) Agregamos con el método addEventListener() a la "pila de eventos a monitorear".</span><br />
<span style="font-family: Verdana, sans-serif;">2) Qué agregamos? el evento click del objeto carga (botón).</span><br />
<span style="font-family: Verdana, sans-serif;">3) Que va a hacer el programa? Va a ejecutar el conjunto de instrucciones que se encuentre dentro de la función.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Que en este caso será:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">1) Agregar al objeto lista, un nuevo ítem con el texto escrito en el cuadro (línea 106).</span><br />
<span style="font-family: Verdana, sans-serif;">2) Vaciar el contenido de texto del cuadro (Línea 107).</span><br />
<span style="font-family: Verdana, sans-serif;">3) desactivar el botón (hasta que algún otro evento lo reactive) (Línea 108).</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">En la línea 112 tenemos algo similar, pero en este caso el método no es un click del mouse, sino un cambio (CHANGE) en una de sus propiedades (el texto). O sea que, cuando el texto del control direccion cambie, se active el evento.</span><br />
<span style="font-family: Verdana, sans-serif;">Que no hace otra cosa que volver a activar al botón para poder ingresar el nuevo valor a la lista (Línea 113).</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Lo que estamos haciendo con esto es no permitirle al usuario crear una entrada "en blanco" o vacía dentro de la lista. Ello produciría un error en el programa más adelante.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Dejemos el manejo de eventos por un momento y sigamos agregando controles a la interfaz:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Pura estética, pero sirve de ejemplo. Vamos a agregar una línea divisoria, una barra de progreso y un par de etiquetas.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Dos nuevos import:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">import </span>haxe.ui.toolkit.controls.<span style="color: #45818e;">HProgress</span>;</span><br />
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">import </span>haxe.ui.toolkit.controls.<span style="color: #45818e;">Text</span>;</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Y los creamos:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCCuyFeB4TmcvsA16T8JUs7P_SWI4-mpkWtgugCTiROZQJmJGmeddyaCfUsK2s5qi4ILliLiYq3FlsBj8Kv-iptA1ku1FTTaO3mgOsTHGGIqYMj4GFCdFrErjeStPbwzzNlO_uOLPwuVc/s1600/list3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCCuyFeB4TmcvsA16T8JUs7P_SWI4-mpkWtgugCTiROZQJmJGmeddyaCfUsK2s5qi4ILliLiYq3FlsBj8Kv-iptA1ku1FTTaO3mgOsTHGGIqYMj4GFCdFrErjeStPbwzzNlO_uOLPwuVc/s1600/list3.png" height="236" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;">Las leyendas son simples etiquetas de texto que no pueden editarse en tiempo de ejecución por parte del usuario. Esa es la diferencia entre el objeto Texto y el objeto TextInput.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Luego tenemos a Hprogress que va a proporcionar una forma gráfica de ver como se completa la descarga del archivo.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Las propiedades min y max hacen referencia a los valores que va a tener el progreso como mínimo y máximo en este caso, que vamos a expresarlo en porcentual (de 0 a 100%) y a su vez, la etiqueta "leyenda_2" nos irá mostrando su valor numérico.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Por último, y para no complicar las cosas, en vez de dibujar una línea con algún método de OpenFL, aproveché que tenemos ya declarado el objeto Box, para crear una "falsa línea" (divisor_1), que no es otra cosa que un recuadro pintado de negro.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Al probar el programa, vemos que el cajón ya nos quedó chico o que la lista debería ser mas ancha..depende de ustedes darle forma a los objetos.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2HmdkEe7ymJdphjG9xeJtL3DjcY9z7uLrUJpKX-y-6l9bKTGrzzkEYNAaIdzumSfvDis8FDVxCYU-T1ygDu2konm0qlvBka_tU44AlcdspDG8TCjQmPlSF5pRgtFCItQB2HFER4K9omA/s1600/mprueba2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2HmdkEe7ymJdphjG9xeJtL3DjcY9z7uLrUJpKX-y-6l9bKTGrzzkEYNAaIdzumSfvDis8FDVxCYU-T1ygDu2konm0qlvBka_tU44AlcdspDG8TCjQmPlSF5pRgtFCItQB2HFER4K9omA/s1600/mprueba2.png" height="192" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Además, sería bueno que el botón de carga al iniciar el programa ya se encuentre inactivo para evitar entradas en falso a la lista de canciones.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Por lo que hemos hecho hasta ahora, la lista va a mostrar direcciones de internet hacia donde apunta el archivo a reproducir. Quizás sea buena idea con un poco de código que muestre solo el nombre del archivo y no toda la ruta de acceso que se dificulta para leer.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">El programa debería de ser capaz al menos de controlar lo que el usuario trata de ingresar para que no se produzcan errores.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Sería muy largo de explicar para un ejemplo tan sencillo como el del reproductor que estamos haciendo de como validar una dirección de internet (url), pero al menos podemos con un poco de código, manipular la cadena (direccion.text) y decidir si es valida o no.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Veamos: El programa va a necesitar una dirección directa que apunte a un archivo mp3. (Por ejemplo: cualquier archivo listado en este sitio <a href="http://www.stephaniequinn.com/samples.htm">http://www.stephaniequinn.com/samples.htm</a> ).</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Entonces, el usuario ingresa en nuestro cuadro de texto la dirección http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Podríamos, por ejemplo, revisar que el texto ingresado por el usuario debe terminar con la extensión correcta (en este caso .mp3).</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Tenemos que de alguna forma verificar que eso sea verdad. Si no lo es, le avise al usuario del error y no ingresarlo a la lista.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Obviamente el programa verificará lo que está guardado en direccion.text cuando el usuario presione el botón cargar. Entonces volvemos al evento y escribimos:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPEdMIsvMBcWnNHfnFzGk0FoWf8IVlA2MfJTanTcrbPB56Yl4rNmjmn7509mqTj78Xm616c_FpJh3I8NQvGt5G962m8sPCspJVdEcLo6d6nWEdbUcIgUTNtwwNp0-he50UcJ-IjhrDLUU/s1600/mprueba4.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPEdMIsvMBcWnNHfnFzGk0FoWf8IVlA2MfJTanTcrbPB56Yl4rNmjmn7509mqTj78Xm616c_FpJh3I8NQvGt5G962m8sPCspJVdEcLo6d6nWEdbUcIgUTNtwwNp0-he50UcJ-IjhrDLUU/s1600/mprueba4.png" height="120" width="400" /></a></div>
<span style="font-family: Verdana, sans-serif;">Líneas 105-106, Declaro 2 variables y almaceno en una el largo total de la cadena introducida por el usuario. En la otra, haciendo uso de la función substr(), extraigo de la cadena original los últimos 4 caracteres que uso para comparar con una constante ".mp3"</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Si son iguales (true), el programa agrega a la lista una versión corta de la cadena original, unos 20 caracteres del final (para que por lo menos el usuario tenga una referencia de que archivo se trata). Pueden alargar, acortar o dejar sin efecto esto dependiendo del largo del control lista..lo dejo a su criterio.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Si al comparar la constante obtenemos un Falso (los condicionales If en Haxe solamente retornan una variable lógica de comparación: Verdadero (True) o Falso (False), el programa va a mostrar una ventana emergente (Popup) señalando el error y reinicializando nuevamente los controles.</span><br />
<br />
<br />
<span style="font-family: Verdana, sans-serif;"></span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Verdana, sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWpuaZBskXkDssi-PnuBDdiUBxW-9SZy8isV9F6n0ZvHD9SI_kSRuKipNX6VZAAx8jwd3JujN-xEFdDv905SDI_0vkB_-uhYwBYg-t3eREAYBzoPYFhYQ3YgcUkpISyB2zLtGvbtVUN58/s1600/mprueba3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWpuaZBskXkDssi-PnuBDdiUBxW-9SZy8isV9F6n0ZvHD9SI_kSRuKipNX6VZAAx8jwd3JujN-xEFdDv905SDI_0vkB_-uhYwBYg-t3eREAYBzoPYFhYQ3YgcUkpISyB2zLtGvbtVUN58/s1600/mprueba3.png" height="203" width="320" /></a></span></div>
<br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">La ventana emergente va a salir siempre en el centro de la aplicación. como en el archivo application.xml hemos asignado al tamaño un valor mucho mas grande que el que por el momento usamos (800x480), se encuentra desplazada hacia abajo.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">No olviden importar el objeto para su posterior uso en el código:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">import </span>haxe.ui.toolkit.core.<span style="color: #45818e;">PopupManager</span>;</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Más métodos y más controles nos esperan en la próxima. Les dejo el código de lo que vimos hasta ahora (difiere un poco ya que al escribir esta entrada estaba probando algunas cosas que veremos en el próximo capítulo, pero es perfectamente funcional.)</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<pre class="prettyprint"><span style="font-family: Verdana, sans-serif;">
</span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
package ;
import flash.display.Sprite;
import flash.events.Event;
import flash.Lib;
import haxe.ui.toolkit.core.Toolkit;
import haxe.ui.toolkit.themes.GradientTheme;
import haxe.ui.toolkit.core.Root;
import haxe.ui.toolkit.containers.Box;
import haxe.ui.toolkit.controls.TextInput;
import haxe.ui.toolkit.controls.Button;
import haxe.ui.toolkit.containers.ListView;
import haxe.ui.toolkit.controls.HProgress;
import haxe.ui.toolkit.controls.Text;
import haxe.ui.toolkit.events.UIEvent;
import haxe.ui.toolkit.core.PopupManager;
/**
* ...
* @author gabriel
*/
class Main {
static public function main() {
var items = new Array<string>();
Toolkit.theme = new GradientTheme(); //Tema de colores usado por HaxeUI
Toolkit.init();
Toolkit.openFullscreen(function (root:Root)
{
// ------------ Declaracion de Controles ---------------------
var cajon:Box = new Box();
cajon.x = 10; //Punto de Origen x (abscisa o eje horizontal)
cajon.y = 10; //Punto de Origen y (origen o eje vertical)
cajon.width = 420; //Largo del cajon
cajon.height = 170; //Alto del cajón
cajon.style.backgroundColor = 0xFFFFFF; //Color de Fondo
cajon.style.borderSize = 3; //Grosor en pixels del borde
cajon.style.borderColor = 0x000000; //Color del borde (negro)
cajon.style.cornerRadius = 4; //Redondeo de las esquinas
var direccion:TextInput = new TextInput();
direccion.x = 25;
direccion.y = 25;
direccion.width = 300;
direccion.style.fontSize = 15; //Tamaño de la tipografía
direccion.text = "Agregar"; //Texto a mostrar inicialmente
var carga:Button = new Button();
carga.x = 350;
carga.y = 25;
carga.text = "Cargar"; //Etiqueta del boton
var leyenda_1: Text = new Text(); //Simple etiqueta 1
leyenda_1.x = 25;
leyenda_1.y = 65;
leyenda_1.style.fontSize = 15;
leyenda_1.text = "Descargando:";
var barra_1: HProgress = new HProgress(); //progreso de la descarga
barra_1.x = 125;
barra_1.y = 65;
barra_1.width = 225;
barra_1.min = 0;
barra_1.max = 100;
var leyenda_2: Text = new Text(); //Esta se va a modificar con codigo
leyenda_2.x = 360;
leyenda_2.y = 65;
leyenda_2.style.fontSize = 15;
leyenda_2.text = "100%";
var divisor_1:Box = new Box();
divisor_1.x = 10;
divisor_1.y = 105;
divisor_1.width = 420;
divisor_1.height = 4;
divisor_1.style.backgroundColor = 0x000000;
var lista:ListView = new ListView(); //Lista de canciones
lista.x = 25;
lista.y = 115;
lista.width = 150;
lista.height = 100;
lista.style.borderSize = 2;
lista.style.borderColor = 0x000000;
var leyenda_3: Text = new Text();
leyenda_3.style.fontSize = 15;
leyenda_3.x = 100;
leyenda_3.y = 200;
// ----------------- Eventos -------------------------
carga.addEventListener(UIEvent.CLICK, function(e:UIEvent) {
var largo:Int = direccion.text.length; //Almacena el largo de la cadena
var corte:String = direccion.text.substr(largo-4, largo - 1); //almacena los ultimos 4 caracteres
if (corte == ".mp3") {
items.push(direccion.text);
lista.dataSource.add ( { text: direccion.text.substr(largo-20, largo - 1) } ); //Agrega a la lista una cadena mas corta
direccion.text = ""; //prepara para nueva entrada
carga.disabled = true; //desactiva el boton
}else
{
PopupManager.instance.showSimple("Dirección Incorrecta", "Error", PopupButton.CANCEL); //Popup declarando el error
direccion.text = ""; //bora la cadena erronea
carga.disabled = true; //desactiva el boton
}
});
direccion.addEventListener(UIEvent.CHANGE, function (e:UIEvent){
carga.disabled = false;
});
lista.addEventListener(UIEvent.CLICK, function (e:UIEvent) {
leyenda_3.text = items[lista.selectedIndex];
});
root.addChild(cajon);
root.addChild(direccion);
root.addChild(carga);
root.addChild(leyenda_1);
root.addChild(barra_1);
root.addChild(leyenda_2);
root.addChild(divisor_1);
root.addChild(lista);
// root.addChild(leyenda_3);
});
}
}
</string></span><span style="font-family: Verdana, sans-serif;">
</span></pre>
<span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;">Pueden descargarlo de <a href="https://github.com/Cactus-ar/Haxe-Ejemplos/tree/master/Reproductor%20MP3" target="_blank">GitHub</a>, aunque va a ir sufriendo cambios con el tiempo.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com1tag:blogger.com,1999:blog-7289313234884568591.post-10744385685128898182014-11-04T16:33:00.000-03:002014-11-04T16:33:03.275-03:00HaxeUI: Reproductor Mp3 (2da Parte)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN3rAL-Jo-aPxpEerTE6j7cXcYPd1oFEarnnQipasp36JpLj5vl3D4WnRZ0dbCnMzq1YDp9nvBXoqDMKR_eVLzTbZAwEBnn7Cf5-Bn8q1pQSM7rKQQCL5Q316IQtsSsyt52A4_vuM5_RE/s1600/haxe_ui.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN3rAL-Jo-aPxpEerTE6j7cXcYPd1oFEarnnQipasp36JpLj5vl3D4WnRZ0dbCnMzq1YDp9nvBXoqDMKR_eVLzTbZAwEBnn7Cf5-Bn8q1pQSM7rKQQCL5Q316IQtsSsyt52A4_vuM5_RE/s1600/haxe_ui.png" /></a></div>
<span style="font-family: Verdana, sans-serif;">En la entrada anterior vimos como está estructurado básicamente un proyecto en Haxe y comenzamos con nuestro reproductor mp3. Vamos a comenzar a dibujar la interfaz.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">HaxeUI como vimos, cuenta con varios controles que son útiles en la creación de interfaces. Muchos de ellos ya conocidos (botones, cajas de texto, deslizadores, etc.). Comencemos a presentarlos en pantalla para ver algunas de sus propiedades.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<a name='more'></a><span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Lo primero que debemos hacer es importar a nuestro código otra herramienta que HaxeUI necesita para construir:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">import </span>haxe.ui.toolkit.core.<span style="color: #45818e;">Root</span>;</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Root (Raíz) es un "contenedor" de controles. Además, HaxeUI lo utiliza para dibujar los controles que nosotros declaremos dentro de él. Una aplicación puede tener más de un contenedor root, cosa que puede ser útil como por ejemplo en un programa que utilice múltiples herramientas divididas en varios sectores de la pantalla.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">En nuestro caso del reproductor, solo necesitamos mostrar todos los controles de una sola vez, en una sola ventana, por lo que Root va a ocupar toda la pantalla de nuestra aplicación; Asimismo vamos a usar solamente uno.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Entonces lo invocamos:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><span style="color: #45818e;">Toolkit</span>.openFullscreen(<span style="color: blue;">function </span>(root:<span style="color: #45818e;">Root</span>){</span><br />
<span style="font-family: Verdana, sans-serif;"></span><br />
<br />
<span style="font-family: Verdana, sans-serif;">});</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Ya lo tenemos inicializado. Vamos a ponerlo a trabajar:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Nuevo import, en este caso un contenedor llamado Box (aquí solamente lo voy a tratar como un objeto estético (un recuadro), pero tengan en cuenta que es un contenedor real; ya veremos este tipo de contenedores más adelante. Por el momento cumple la sencilla función de mostrar un recuadro dentro de la interfaz del usuario.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">import </span>haxe.ui.toolkit.containers.<span style="color: #45818e;">Box</span>;</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Y lo creamos dentro de Root:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">var </span>cajon:<span style="color: #45818e;">Box</span> = <span style="color: blue;">new </span><span style="color: #45818e;">Box</span>();</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Luego de haber creado el nuevo objeto, vamos a darle forma aplicando propiedades al mismo. El código que hayan escrito debería tener una sintaxis similar a esta:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizuEOpO_mBLiHO03Zun-X0OcdApSyYuNHdnLDKhFjjmQNrwOJIU_TK1JBP-RvLLVPFQgHDoFWtMNsdhbxyvxBLRItrzHl8GjVqv1QjjuEmlhmDZcmfqjf2IJjPod-XZll7jjU1rXqN-dI/s1600/mp31.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizuEOpO_mBLiHO03Zun-X0OcdApSyYuNHdnLDKhFjjmQNrwOJIU_TK1JBP-RvLLVPFQgHDoFWtMNsdhbxyvxBLRItrzHl8GjVqv1QjjuEmlhmDZcmfqjf2IJjPod-XZll7jjU1rXqN-dI/s1600/mp31.png" height="320" width="301" /></a></div>
<span style="font-family: Verdana, sans-serif;">Como expliqué más arriba, es solo un recuadro estético; Un marco para encerrar todos los controles dentro.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">En la imágen, se puede ver que propiedades le asigno al objeto. Básicamente tenemos:</span><br />
<span style="font-family: Verdana, sans-serif;">Un punto de origen por el cual va a comenzar a dibujarse en la pantalla (x,y).</span><br />
<span style="font-family: Verdana, sans-serif;">Un Ancho y un Alto del recuadro.</span><br />
<span style="font-family: Verdana, sans-serif;">El color que va a tener de fondo.</span><br />
<span style="font-family: Verdana, sans-serif;">El color que va a tener el recuadro.</span><br />
<span style="font-family: Verdana, sans-serif;">El redondeo de sus esquinas.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Una vez definido, le decimos a root que lo añada a su ámbito.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Si esta vez compilamos nuestro programa, veremos el primer resultado "visible" del mismo:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNqcoCyMwkrFaHa1tFcDkFOPw0OKqEaQeDs-9TPuRL102ocNBBwMaMTN_A8AaIpfduUUmxV7kauSv-QNyBRbEIEBJopeKbykLBY781H2p3Vlu9vINKnzOL43Ej46u4buniyaQOXBskPZo/s1600/rec1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNqcoCyMwkrFaHa1tFcDkFOPw0OKqEaQeDs-9TPuRL102ocNBBwMaMTN_A8AaIpfduUUmxV7kauSv-QNyBRbEIEBJopeKbykLBY781H2p3Vlu9vINKnzOL43Ej46u4buniyaQOXBskPZo/s1600/rec1.png" height="197" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;">Como no sabemos ya mismo que tamaño va a tener nuestra aplicación cuando esté terminada, lo dejamos con esos parámetros por ahora.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Lo mismo para con la ventana de flash que hemos configurado anteriormente. Es muy probable que volvamos a modificar estos parámetros a medida que vayamos incorporando más controles.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">De todas formas, lo ideal es que vayan jugando con estas propiedades para dejarlas a su gusto.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Agreguemos otro; En este caso un control propiamente dicho: un cuadro de texto.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Primero lo importamos como ya vimos:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">import </span>haxe.ui.toolkit.controls.<span style="color: #45818e;">TextInput</span>;</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Luego lo creamos justo debajo del cajon:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrJnmWYlzE6zYY7n_sDsp2ELiTzIwVp2203i5LV91EYEjXqaxZdt8PVe4iZTq8wov8xkyVZ7H9NnKYKXi2k6WuYEYMHOGNiAWzL97Jz52HU0zwckI-RYRWaEAYawnUc8JOMVsqshB_sfs/s1600/mp32.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrJnmWYlzE6zYY7n_sDsp2ELiTzIwVp2203i5LV91EYEjXqaxZdt8PVe4iZTq8wov8xkyVZ7H9NnKYKXi2k6WuYEYMHOGNiAWzL97Jz52HU0zwckI-RYRWaEAYawnUc8JOMVsqshB_sfs/s1600/mp32.png" height="117" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;">Nuestro reproductor de mp3, no va a cargar los archivos desde un dispositivo de almacenamiento local como puede ser un disco rígido, sino que va a ir a buscar los archivos de música a la dirección web que el usuario introduzca en el cuadro de texto que acabamos de crear.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Por último en este capítulo, insertemos un botón:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="color: blue; font-family: Verdana, sans-serif;">import </span><span style="font-family: Verdana, sans-serif;">haxe.ui.toolkit.controls.</span><span style="color: #45818e; font-family: Verdana, sans-serif;">Button</span><span style="font-family: Verdana, sans-serif;">;</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Justo por debajo de "direccion", creamos nuestro primer botón:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5Jd67ifLR23jKhqFTFhjPaZaO-fdO8qs0Ur_y8wMbDiUqP9YOzXikrpyo6xQUNQ5E9-y7RJbBhks0DIwGMX5CrOMK-mUz6B_wM98UklTiz8S_mH_7J3axT21lLLCA0JSgearcvX7E64/s1600/mp33.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5Jd67ifLR23jKhqFTFhjPaZaO-fdO8qs0Ur_y8wMbDiUqP9YOzXikrpyo6xQUNQ5E9-y7RJbBhks0DIwGMX5CrOMK-mUz6B_wM98UklTiz8S_mH_7J3axT21lLLCA0JSgearcvX7E64/s1600/mp33.png" height="78" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;">Hasta aquí hemos visto como inicializar haxeUI, creamos algunos objetos con él y a esos objetos les modificamos algunas propiedades.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Si todo salió correctamente, nuestra ventana debería de mostrar algo similar a esto:</span><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxfV6O8cDmKoyGfJ4mtim2CBxp2E8dqyraSH0WtT0JO7X7p1SW5fNVMg39YQJYmlNslVm45rmtvJPhVrY1i3C01p7Kt51Gh8SxCpdaO2CGiO8WFPl3viEFnOmFZvpi3C4nqlnUVPe2RPc/s1600/mp34.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxfV6O8cDmKoyGfJ4mtim2CBxp2E8dqyraSH0WtT0JO7X7p1SW5fNVMg39YQJYmlNslVm45rmtvJPhVrY1i3C01p7Kt51Gh8SxCpdaO2CGiO8WFPl3viEFnOmFZvpi3C4nqlnUVPe2RPc/s1600/mp34.png" height="187" style="cursor: move;" width="320" /></a><span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Como verán el botón tiene un color determinado. Si nosotros eliminamos la línea donde declaramos el conjunto de colores, el resultado sería completamente distinto..intenten a ver que les parece.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Aquí está el código fuente completo de lo que vimos hasta ahora:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<pre class="prettyprint"><span style="font-family: Verdana, sans-serif;">
</span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">package ;
import flash.display.Sprite;
import flash.events.Event;
import flash.Lib;
import haxe.ui.toolkit.core.Toolkit;
import haxe.ui.toolkit.themes.GradientTheme;
import haxe.ui.toolkit.core.Root;
import haxe.ui.toolkit.containers.Box;
import haxe.ui.toolkit.controls.TextInput;
import haxe.ui.toolkit.controls.Button;
/**
* ...
* @author gabriel
*/
class Main {
static public function main(){
Toolkit.theme = new GradientTheme();
Toolkit.init();
Toolkit.openFullscreen(function (root:Root)
{
var cajon:Box = new Box();
cajon.x = 10; //Punto de Origen x (abscisa o eje horizontal)
cajon.y = 10; //Punto de Origen y (origen o eje vertical)
cajon.width = 420; //Largo del cajon
cajon.height = 170; //Alto del cajón
cajon.style.backgroundColor = 0xFFFFFF; //Color de Fondo (blanco)
cajon.style.borderSize = 3; //Grosor en pixels del borde
cajon.style.borderColor = 0x000000; //Color del borde (negro)
cajon.style.cornerRadius = 4; //Redondeo de las esquinas
var direccion:TextInput = new TextInput();
direccion.x = 25;
direccion.y = 25;
direccion.width = 300;
direccion.style.fontSize = 15; //Tamaño de la tipografía
direccion.text = "Agregar"; //Texto a mostrar inicialmente
var carga:Button = new Button();
carga.x = 350;
carga.y = 25;
carga.text = "Cargar"; //Etiqueta del boton
root.addChild(cajon);
root.addChild(direccion);
root.addChild(carga);
});
}
}</span><span style="font-family: Verdana, sans-serif;">
</span></pre>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">En la próxima entrada seguimos agregando controles, y empezamos a darle cierta lógica mediante eventos. Cualquier duda pueden escribirme o dejar comentarios aquí debajo. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Prueben lo visto hasta ahora..agreguen mas botones, traten de cambiarles los colores..diviértanse con Haxe.</span>Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com0tag:blogger.com,1999:blog-7289313234884568591.post-5933466306433836152014-11-03T19:20:00.001-03:002014-11-03T19:20:34.126-03:00Programación en Haxe: Estructura.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqOQqun8_x9EXHXzMS7euB1eLOV4rmQTV81qMSAPfXXv62rI8lox_M4PNMKjwFNs9d0JmiQA-zByr-lk3GL60hl4FlQrBL6lnDOtcVpXDMRUEO5IuB7ox4jHH8XtEnu3mRIMWl_cgw38s/s1600/opensource.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqOQqun8_x9EXHXzMS7euB1eLOV4rmQTV81qMSAPfXXv62rI8lox_M4PNMKjwFNs9d0JmiQA-zByr-lk3GL60hl4FlQrBL6lnDOtcVpXDMRUEO5IuB7ox4jHH8XtEnu3mRIMWl_cgw38s/s1600/opensource.jpg" height="156" width="200" /></a></div>
<span style="font-family: Verdana, sans-serif;">Cualquier lenguaje de programación necesita una estructura ordenada dentro del código para que al ejecutarse (o incluso cuando se compila) no produzca errores. Haxe no es la excepción a esto y se deben respetar ciertas reglas.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Vamos a ir conociendo Haxe a través de ejemplos, pero a su vez incorporando varios recursos externos para familiarizarnos con las funcionalidades que nos ofrecen.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<a name='more'></a><span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">El primero de ellos, es una nueva librería que debemos incorporar a nuestra biblioteca: <a href="http://haxeui.org/" target="_blank">HaxeUI</a></span>
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">Esta librería contiene controles estándar (cuadros de texto, botones, construcciones de listas, etc.) muy similares a lo que un programador puede ver en Visual Studio por ejemplo. Existen muchas librerías con recursos similares para haxe, pero esta es una de las mejores que he encontrado.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Como siempre, lo primero que debemos hacer es instalarla: </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="background-color: black; color: lime; font-family: Verdana, sans-serif;">$> haxelib install haxeui</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><i>Nota: Si vienen siguiendo el blog, habrán visto que haxe hace uso de librerías externas casi de forma obligatoria. La mayoría son de dominio público y se encuentran en constante desarrollo. Para mantenerse al día con ellas, sugiero que de vez en cuando busquen actualizaciones. Esto puede hacerse fácilmente invocando <span style="background-color: black;"><span style="color: lime;">haxelib</span></span> con el parámetro <span style="background-color: black;"><span style="color: lime;">upgrade</span></span>.</i></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimq3UcZ-jfCdvvgRbFH_4gzvkJUxGtypwH_vWRBvWnfXt-Y7XGHdYRX26JCDQs2SJEk3w4Ci8R5DqiA-StIZky5FdByAx0si4nh-ZFnsNTr7stucUboZMjjkbIpRjnW7i2K4xBeRe3jl4/s1600/haxeui1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimq3UcZ-jfCdvvgRbFH_4gzvkJUxGtypwH_vWRBvWnfXt-Y7XGHdYRX26JCDQs2SJEk3w4Ci8R5DqiA-StIZky5FdByAx0si4nh-ZFnsNTr7stucUboZMjjkbIpRjnW7i2K4xBeRe3jl4/s1600/haxeui1.jpg" /></a></div>
<span style="font-family: Verdana, sans-serif;"><i>Con cada actualización que haxelib encuentre, preguntará que hacer: Actualizar (y/n/a) que significa y (yes - Sí), n (no), a (abort - abortar).</i></span><br />
<span style="font-family: Verdana, sans-serif;"><i>Quizás</i></span><i><span style="font-family: Verdana, sans-serif;"> antes de actualizar una librería sería aconsejable revisar las notas de las actualizaciones. Lamentablemente, para casi todas ellas nos encontraremos con que están</span><span style="font-family: Verdana, sans-serif;"> escritas en inglés. </span></i><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Una vez instalada, abrimos FlashDevelop y comenzamos un proyecto nuevo (OpenFL). </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Mi idea, para comenzar, es un reproductor de audio. Vamos a ir por partes con el código para que se entienda que es lo que sucede en cada paso del programa.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">En esta entrada, veremos un poco más en profundidad como está organizada la estructura de un proyecto.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Entonces: FlashDevelop -> Project -> New Project -> OpenFL project</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Esta vez, en el explorador del proyecto nos vamos a encontrar con una estructura un poco distinta de la vista en el capítulo anterior.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWNzBPRaN1bGIGfPLbLWoCLA8cMlTMmMUOgtIvZOJaB4cFRLD1ghKdqBDNNSYD4eak-Fv-CK7IsLG2yDzLkveXdOBOSp5paf1DQ2vER8OAuIKbmF_0x5WdI0QSvNueFXbhZK-av9V20Pw/s1600/openfl1.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWNzBPRaN1bGIGfPLbLWoCLA8cMlTMmMUOgtIvZOJaB4cFRLD1ghKdqBDNNSYD4eak-Fv-CK7IsLG2yDzLkveXdOBOSp5paf1DQ2vER8OAuIKbmF_0x5WdI0QSvNueFXbhZK-av9V20Pw/s1600/openfl1.jpg" /></a></div>
<span style="font-family: Verdana, sans-serif;">Lo primero que vamos a notar es que tenemos una carpeta llamada "assets". Dentro de esta carpeta se van a alojar todos nuestros recursos que no pertenecen a una librería. Imágenes, sonidos, archivos de configuración, videos, animaciones, tipografías, etc.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Luego vemos que hay dos archivos nuevos: "openfl-readme.txt" y "application.xml"</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">El primero es simplemente un archivo de texto introductorio a la librería OpenFL. Describe varios aspectos generales de como debe usarse, formas de depuración, etc.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">El segundo, contiene toda la información que el compilador va a utilizar para construir nuestro proyecto. Veamos que contiene haciendo doble click en él.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Desde ya que por la extensión sabemos en que código se encuentra..cosa que no vamos a tratar aquí. Para información sobre XML, pueden consultar <a href="http://es.wikipedia.org/wiki/Extensible_Markup_Language" target="_blank">la wiki</a>.</span><br />
<br />
<span style="font-family: Verdana, sans-serif;">Muchas de las librerías que vamos a ver, soportan XML para dar parámetros a sus funciones así que vamos a toparnos con él muy seguido.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">El primer cambio que vamos a realizar en este archivo es el color de fondo a blanco (#ffffff) y los fps a 30 reemplazando la línea de código correspondiente.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><span style="color: purple;"><window background="#ffffff" fps="60" /></span></span></div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Además, vamos a introducir la librería que instalamos.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div style="text-align: center;">
<span style="color: purple; font-family: Verdana, sans-serif;"><haxelib name="haxeui" /></span></div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<span style="font-family: Verdana, sans-serif;">Nuestro código quedará mas o menos similar a este:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIizdy6SGncW1KSe48Pt6lKgORZOYSpNE557qv77NYE2olHr6szEWHGAjS6U4cnDYSjTJLLj4ImSTNFGYQHqQCeOITOn6Iqg9As3b8QExFt9aDyYqecJM-RKMADDlxshlpTogOH98vZwo/s1600/apxml.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIizdy6SGncW1KSe48Pt6lKgORZOYSpNE557qv77NYE2olHr6szEWHGAjS6U4cnDYSjTJLLj4ImSTNFGYQHqQCeOITOn6Iqg9As3b8QExFt9aDyYqecJM-RKMADDlxshlpTogOH98vZwo/s1600/apxml.png" height="209" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<span style="font-family: Verdana, sans-serif;">Guardamos el archivo y por el momento lo dejamos. Es momento de empezar a escribir algo de código en Haxe y para ellos abrimos el archivo "main.hx" que se encuentra dentro de la carpeta "src".</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Vamos a borrar todo el contenido del archivo que esté por debajo del primer segmento de comentarios quedándonos algo similar a esto:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQv8VihyphenhyphenlQAY3WUthz7mCaSvD0w7thizSLs_Faqjl_ldaHK86hUJCBHqRr8po7rW99Rh8P2mODSB02LIkIuImMUfLAqJ4u-seo0hO3eBghXvpexLC60DtQR7QqT0ctTm8PbkIMCbylPQ/s1600/mp3re1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQv8VihyphenhyphenlQAY3WUthz7mCaSvD0w7thizSLs_Faqjl_ldaHK86hUJCBHqRr8po7rW99Rh8P2mODSB02LIkIuImMUfLAqJ4u-seo0hO3eBghXvpexLC60DtQR7QqT0ctTm8PbkIMCbylPQ/s1600/mp3re1.png" height="268" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;">Como ya hemos visto anteriormente, todo programa en Haxe (asimismo cualquier otro lenguaje) va a necesitar un punto de partida (o entrada). Desde donde va a comenzar el programa y que caminos va a tomar, dependiendo de lo que nosotros le ordenemos.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">También hemos visto que al ser un lenguaje orientado a objetos, cada estructura de código que escribamos, debe tener una forma especialmente determinada.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Haxe conoce 7 sistemas estructurales. Veamos la primera de ellas que vamos a usar.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Class:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">La instancia (u objeto) <i>class</i> es la estructura de datos más utilizada en un programa escrito en Haxe. Cada clase debe ser definida con un identificador (un nombre), una ruta implícita y encerrado entre llaves ({..}) el código (o expresiones) perteneciente a su tipo. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Comenzaremos entonces creando nuestra primer clase, que es a su vez el punto de entrada de nuestro programa. La clase main.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkqV6nu4HC4yZFPKxI0cIgOMHhP_74TdhU6l6aedYG2TNtKC0ORCq-tsJOxdo1v4pFXanSxOa5fiMjtQLEHNB9mv3xKbIkuphSb56B9vHeGlxKbhHcgTffD5DuIiomehpOLjV-mlQeE8w/s1600/mainclass.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkqV6nu4HC4yZFPKxI0cIgOMHhP_74TdhU6l6aedYG2TNtKC0ORCq-tsJOxdo1v4pFXanSxOa5fiMjtQLEHNB9mv3xKbIkuphSb56B9vHeGlxKbhHcgTffD5DuIiomehpOLjV-mlQeE8w/s1600/mainclass.png" /></a></div>
<span style="font-family: Verdana, sans-serif;">Inmediatamente debajo, escribiremos nuestro segundo sistema estructural que Haxe conoce: La función.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Una función por lo general es un compuesto de código al cual se le dan ciertos argumentos para que procese información y al terminar nos devuelva un resultado.</span><br />
<span style="font-family: Verdana, sans-serif;">Cada función (o método) están identificadas por la palabra clave "function".</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Deben poseer un nombre, pueden o no poseer argumentos que van a encerrarse dentro de paréntesis (), y por último pueden contener el tipo de dato que van a devolver al finalizar. Un ejemplo:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Trebuchet MS, sans-serif;">function resta (minuendo:float, sustraendo:float): float resultado{</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"> resultado = minuendo - sustraendo;</span><br />
<span style="font-family: Trebuchet MS, sans-serif;"> return resultado;</span><br />
<span style="font-family: Trebuchet MS, sans-serif;">}</span><br />
<br />
<br />
<span style="font-family: Verdana, sans-serif;">En este caso vamos a crear (dentro de la clase Main), la función con el mismo nombre (solo que esta vez todo en minúsculas). </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRFUBo8W9T3IBdTu14ehHpxBrW8bxbygDjDfMPH9_POLqZ4ODSYZghD96P9y1riHHn0QBUNoQ0rrYOjs-Yy9EoELmYhMDgy0MkESH9bkr1Ov89O9Qip-HLHjHPxTSAcPZH17zzEboznaI/s1600/main2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRFUBo8W9T3IBdTu14ehHpxBrW8bxbygDjDfMPH9_POLqZ4ODSYZghD96P9y1riHHn0QBUNoQ0rrYOjs-Yy9EoELmYhMDgy0MkESH9bkr1Ov89O9Qip-HLHjHPxTSAcPZH17zzEboznaI/s1600/main2.png" /></a></div>
<span style="font-family: Verdana, sans-serif;">Puede observase que flashDevelop las ha diferenciado con colores distintos. si los nombres coincidieran en este caso, obtendríamos un error al ejecutar el programa (pueden probarlo con solo renombrar la función a "Main").</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Vemos que también hay dos palabras claves delante de "function": ellos se conocen como modificadores de acceso. </span><br />
<span style="font-family: Verdana, sans-serif;"><br />Por ahora dejaremos de hablar de estos dos modificadores para no generar confusión (los veremos más adelante). Lo importante es que este es el punto de entrada del programa.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Volvamos hacia el inicio del archivo ya que necesitamos incorporar a nuestro programa algunos módulos externos de la librería HaxeUI.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">El uso de "import":</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Es un atajo básicamente. Como vimos en entradas anteriores, cada módulo en haxe comparte el nombre con el archivo donde se encuentra. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Si nosotros quisiésemos usar un módulo que no esta declarado en nuestro programa, deberíamos de utilizar la ruta completa de acceso al mismo para que el compilador lo encuentre. Por ejemplo si quisiéramos crear un nuevo objeto tipo botón la expresión completa sería algo como:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><i><span style="color: blue;">var</span> busca:<span style="color: #76a5af;">haxe.ui.toolkit.controls.Button</span> = <span style="color: blue;">new</span> <span style="color: #76a5af;">haxe.ui.toolkit.controls.Button()</span>;</i></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Al hacer uso de la instrucción import, toda la ruta hasta llegar al tipo definido externamente puede resolverse de forma más corta:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">var </span>busca:<span style="color: #76a5af;">Button</span> = <span style="color: blue;">new </span><span style="color: #76a5af;">Button</span>();</span><br />
<br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Cualquier ruta declarada con import tiene el siguiente orden de búsqueda por el compilador: paquete1.paquete2.paqueteN.modulo.tipo</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Hay que tener en cuenta cuando se importan modulos externos, los nombres que le damos a las variables para que el compilador no encuentre un conflicto con declaraciones ambiguas.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">En nuestro ejemplo, vamos a comenzar por importar el paquete de herramientas básicas de HaxeUI llamado Toolkit y el conjunto de colores que va a usar nuestro programa.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Entonces, incorporamos al código un par de nuevas líneas:</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYa7YlHocLNw_1Rw5ty2W3LF5iE4bOskVgLyWcF_hXEaVp9w9feADoEH1tS9YtIteX31clmUMoBIN1CfPgc5Lyum0vADwHKtb3mKG2Q9LUOpetCg1MJN5gNRnOzjTLMHgBNJypL6eyaGY/s1600/toolk1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYa7YlHocLNw_1Rw5ty2W3LF5iE4bOskVgLyWcF_hXEaVp9w9feADoEH1tS9YtIteX31clmUMoBIN1CfPgc5Lyum0vADwHKtb3mKG2Q9LUOpetCg1MJN5gNRnOzjTLMHgBNJypL6eyaGY/s1600/toolk1.png" height="320" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;">Como puede verse en la imagen, el uso de import, nos ha facilitado la tarea de escribir toda la ruta al momento de declarar una nueva instancia del objeto.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Incluso es mucho más simple de ver cuando se tienen muchas líneas de código.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Lo que hemos hecho básicamente dentro de la funcion main hasta ahora es declarar la paleta de colores que va a utilizar HaxeUI con todos los controles que agreguemos. Podríamos crear nuestro propio conjunto o estilo de colores, pero no tiene sentido en este momento. Para más información sobre ello, pueden consultar el enlace que se encuentra al principio (en inglés).</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">La segunda línea dentro de la función, llama a otra función (dentro del módulo toolkit, que se encarga de inicializarlo y dejarlo listo para usarse.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Si ejecutamos el código en este momento, no observaremos resultado alguno. En la próxima entrada, le damos forma a nuestra interfaz.</span>Gabrielhttp://www.blogger.com/profile/14668476537904737813noreply@blogger.com2