Un poco de teoría: Datos y variables (II)

Volver al índice

¿Qué es una variable?

Básicamente, y sólo para que nos entendamos, una variable es un contenedor de datos, una caja vacía esperando a que la rellenemos. Como existen distintos tipos de datos (ver entrada anterior) cada tipo de dato necesita de una cantidad de memoria específica y por tanto las cajas pueden ser de distintos tamaños, formas y colores. Lo de «formas y colores» es una licencia que me permito para dejar claro que no vale meter un dato de tipo X en una caja que ha sido concebida para albergar datos de tipo y, aunque nos parezca a priori que cabe.
Cada caja va con su tipo de datos, como en los juegos de encajar piezas en huecos con su forma y color a los que hemos jugado todos de pequeños.

20130321-171559.jpg

¿Para que sirve una variable?

Si decidimos que un objeto se va a desplazar 10 píxeles en cada frame, es muy útil almacenar esa cantidad en una variable, para que cada vez que necesitemos utilizarla no tengamos que recordar el valor exacto. Pero es que además, podríamos querer cambiar la velocidad de este objeto más adelante. Aún mejor, podríamos decidir que el objeto tiene una aceleración, que le suma una cierta cantidad, 5 por ejemplo, al número de píxeles que desplazamos nuestro gráfico en cada fotograma.
De hecho, por esta razón se llaman variables, porque una vez definidas e inicializadas a un determinado valor, se puede modificar este.

Como imaginaréis esta es una tarea bastante habitual en la programación de animaciones. Pero la utilización de variables es tan habitual en todas las tareas de programación, sea la aplicación del tipo que sea, que no se puede concebir ésta sin el uso de las mismas.

Son la base de la programación.

Definir o declarar una variable

Las variables se definen o declaran con una sentencia que comienza por la palabra clave var seguida del mombre que le queramos dar a la variable. Depués es obligatorio especificar el tamano, forma y color de la misma, o sea, el tipo de dato que va a albergar. Esto se hace escribiendo : a continuación del nombre y acto seguido el tipo de datos. Por ejemplo:

[sourcecode language=»as3″ wraplines=»false» firstline=»1″]
var velocidad : Number;
[/sourcecode]

Esta sentencia crea una caja de tipo Number (para números decimales), pero no inicializa la variable, no le asigna un valor. Esto significa que el sistema
le va a asignar uno por defecto.

El valor de una variable no inicializada depende del tipo de datos que tenga. En la tabla siguiente se describen los valores predeterminados de las variables, clasificados por tipo de datos:

Tipo de datos Valor predeterminado
Boolean false
int 0
Number NaN
Object null
String null
uint 0
No declarada (equivalente a anotación de tipo *) undefined
Todas las demás clases o tipos null

Aunque de momento no le vamos a encontrar utilidad directa a estos valores por defecto, es importante conocerlos, porque aparecen en algunos de los errores que arroja el compilador cuando algo está mal y esto nos puede dar información valiosa que nos ayudará a corregir nuestros fallos. También hay ocasiones en las que cuando trazamos el valor de una variable, aparecen estos valores por defecto y por lo que necesitamos conocerlos para averiguar que es lo que está pasando.

Además, el valor por defecto de algunos tipos de dato, como por ejemplo Number nos obligan a inicializar las variables antes de poder realizar operaciones con ellas, como veremos en el siguiente apartado.

Inicializar o asignar valor a una variable

Una vez declarada o definida la variable podemos asignarle un valor, lo que se denomina inicializar la variable.
[sourcecode language=»as3″ wraplines=»false» firstline=»1″]
var velocidad : Number;

// …

velocidad = 10;
[/sourcecode]
Fijáos en que aquí ya no se antepone var a la variable, ni se especifica de nuevo su tipo de datos. No es necesario porque la variable ya ha sido definida.

Pero lo más habitual es definir e inicializar las variables en la misma sentencia:
[sourcecode language=»as3″ wraplines=»false» firstline=»1″]
var velocidad : Number = 10;
[/sourcecode]
Primero, porque nos ahorramos una línea de código y, segundo, porque evitamos errores asociados a que Number tiene como valor por defecto NaN.

Veamos un ejemplo. Si no inicializamos velocidad e intentamos realizar una operación matemática sencila antes de haberle asignado un valor, e intentamos trazar el resultado:
[sourcecode language=»as3″ wraplines=»false» firstline=»1″]
var velocidad : Number;

// …

velocidad = velocidad + 10;

trace("Incrementando la velocidad, ahora velocidad = ", velocidad);
[/sourcecode]
obtendremos una respuesta no esperada:
[sourcecode wraplines=»false» firstline=»1″]
Incrementando la velocidad, ahora velocidad = NaN
[/sourcecode]
Y es que ese valor por defecto NaN significa que inicialmente velocidad no es un número, no hasta que nosotros le demos un valor. Por eso no le podemos sumar 10 hasta que la hayamos inicializado. Así que la forma más correcta y segura de escribir el código anterior sería:
[sourcecode language=»as3″ wraplines=»false» firstline=»1″]
var velocidad : Number = 0;
trace("La velocidad inicial es", velocidad);
// …

velocidad = velocidad + 10;

trace("Incrementando la velocidad, ahora velocidad = ", velocidad);
[/sourcecode]
Lo que aperecerá en la consola ahora sí que es lo que esperábamos
[sourcecode wraplines=»false» firstline=»1″]
La velocidad inicial es 0
Incrementando la velocidad, ahora velocidad = 10
[/sourcecode]

Así que si quereis evitar errores, sobre todo al principio, no olvidéis inicializar las variables cuando las declaréis.

Volver al índice

Actualización
Os dejo aquí un video que he encontrado que stá bastante bien y que cubre más o menos el mismo tema que este post:

También os dejo este otro, que explica como realizar algunas operaciones con estas variables:

Ejercicios:

  1. Repetir los ejemplos de los videos (Aquellos que me los entreguen recibirán su recompensa en el apartado de actitud de la nota)

Un poco de teoría: Datos y variables (I)

Volver al índice

Lo que vale un peine… digo un bit!

Nuestros programas necesitan datos para trabajar. La posición de una instancia en la escena, su nombre, la velocidad a la que se mueve, si es visible o no, etc.

Todos estos datos se almacenan en memoria. De momento nos importa poco entender los detalles del funcionamiento de la misma, y de como la gestiona el reproductor de flash. Lo que sí que nos importa, en esta primera fase, es gestionar bien que datos se almacenan en memoria y cuales no y como trabajar con ellos para no ocupar más de la necesaria.

Todos los lenguajes de programación definen lo que se denominan Tipos de Dato para facilitar esa tarea. Para entender como y por qué es necesario tener una visión general, aunque sea muy simplista, de como se gestiona la memoria en cualquier sistema informático.

Continue reading →

Introducción a la programación de animaciones

Volver al índice

En esta primera sesión vamos a utilizar una animación preparada previamente en una instancia colocada en la escena de flash. El objetivo es aprender a hacer una animción interactiva utilizando un pequeño código en actionscript.

Podeis descargar la animación que vamos a utilizar de aquí (necesitaréis Flash CS5 como mínimo para abrirla)

Este es el resultado esperado:

[gigya src=»https://dl.dropbox.com/u/3646945/newbeForever/esne/1_Control%20de%20animaciones.swf» width=»550px» height=»400px»]

Continue reading →

PuzzleBobble game

Este es un ejemplo de lo que se puede llegar a hacer con Sprite Sheets, tanto en as3 como en otros lenguajes. En lugar de utilizar gráficos vectoriales para las animaciones, que al tener filtros y ser relativamente complejos tienen un coste importante en tiempo de proceso, las rasterizamos a una secuencia de fotogramas (bitmaps).
Para utilizar esta técnica no queda otra que programarse uno su propia librería para que resulte algo más cómodo manejar sprite sheets, o utilizar Starling, que a mi personalmente no me gusta (en el momento de desarrollo de este proyecto, además, no estaba muy claro si la plataforma final iba a ser el desktop o movil-tablet y no me quería arriesgar a contar con la presencia de una tarjeta gráfica potente).

Un detalle: el juego se bloquea cuando pierdes 🙁 . Así que tendréis que recargar la página cuando queráis volver a jugar. Esto se debe a que está pensado para integrarse en facebook y cuando pierdes hace varias llamadas a la API de facebook, que no está permitido hacer desde aquí.

[gigya src=»https://dl.dropboxusercontent.com/u/3646945/newbeForever/personal/graniniBobble.swf» width=»700px» height=»700px»]

Como veis el juego va muy suave (55-60 fps) sin necesidad de aceleración gráfica. Aunque no hay app publicada en iOS (Al cliente no le interesaba) yo hice mis propias pruebas y con algunos cambios (fundamentalmente haciendo algunas clases estáticas y prescindiendo de algunos eventos) el juego corre perfectamente en un iPad 1.

A ver cuanto tiempo aguantáis la embestida de la fruta!! 😉

Yet another slideshow

Debe de haber cientos de códigos para descargar y hacerse un slideshow en flash. Pero, en parte porque quería practicar mis recién aprendidos patrones de diseño y en parte porque en Le Petit Kolhos necesitábamos uno que pudiera funcionar desde dentro de wordpress.com y usando su gestor de contenidos, decidí hacerme el mio. Esto último ha sido un poco trucoso pero está conseguido.
Aquí teneis una pequeña demostración:
[gigya src=»http://www.glantucan.com/LPKslideshow.swf» width=»260px» height=»226px» flashvars=»duration=5&transitionTime=.5&basePath=http://lepetitkolhos.files.wordpress.com/2010/11/&playList=ss_adultos2.jpg;ss_esquinica.jpg;ss_adultos.jpg;ss_plasti04.jpg;ss_plasti03.jpg;ss_plasti01.jpg;ss_plasti02.jpg;ss_adultos4.jpg;ss_fritanga.jpg;ss_medioambiental.jpg;ss_medioambiental2.jpg;ss_adultos5.jpg;ss_talleradultos01.jpg» wmode=»transparent»]

I+D+VS

La exposición I+D+VS en "La arquería", con nuestro interativo de fondo.


El grupo de invesgación NuTAC (Nuevas Técnicas, Arquitectura y Ciudad) de la UPM nos ha encargado a través de el descampao la programación de una proyección interactiva para la exposición I+D+VS. Futuros de la Vivienda Social en 7 Ciudades, que a través de ocho ejemplos de proyecto de vivienda social en diferentes ciudades.
Continue reading →