Teclas, Sonidos, Secuencias con Silverlight 1.0 (y la nave de Obi-Wan)

Pincha aquí para ver el ejemplo

Que tal, yo again (obvio, estas en mi Blog) , quiero compartir algunas temas de Silverlight con ustedes,  estos son:

Secuencia de Imágenes
Manejo de Teclas  por Parte del Usuario
Full Screen y Posiciones
Sonidos

Todo esto acompañado de un lindo proyecto de una nave espacial con la nave de Obi-Wan, para los fanáticos de Star War.

El Proyecto

image

Visión general del proyecto.

La nave y el fondo son imágenes (png para nave, ya que tiene transparencias) la explosión que vez, es parte de la secuencia que vamos a pasar a explicar.

Secuencia de Imágenes

Busqué bastante en Internet como cargar una secuencia de imagenes para realizar una animación, no encontré mucho, algunos decian que no se podía otros que si pero… es ahí cuando notas que algunas cosas le faltan a Blend (pero que recién está partiendo, por eso se entiende), y es que no era tan intuitivo, por la menos la solución que encontré y que te la comparto.

Sprites

image
Solo ocupo algunas imágenes, pero en el archivo van todas 🙂 (1-10)

Esta secuencia (Sprites) la encontré en Internet (todos los derechos son de su respectivo Dueño jejeje), entonces lo que tuve que realizar fue lo siguiente:

Como la imagen muestra, creamos un canvas (boom1) e insertamos la imagen dentro de él(b1,que corresponde a ani0002.png), luego creamos otro canvas y hacemos lo mismo, pero con una imagen de explosión más grande (ani0005.png) , pero que tiene las mismas dimensiones. Repetimos el proceso hasta ocupar ani0010.png, si te es más fácil, crea los canvas separados y luego  los vas incluyendo en el canvas padre.
Luego viene la parte de la animación, y es aquí en donde puedes darle los efectos que quieras, por mi parte, primero volvia opaco al canvas y luego lo hacia aparecer de a poco, de hecho hasta que dos imagenes se fusionaban para dar un efecto más realista.

Ten en cuenta que la imagen de la explosión más pequeña se muestra primero, por lo que las demás canvas deberás tenerlos por defecto con el opacity en 0 para que no aparezca solo la última imagen, tapando a las demás.

image
Esta figura ilustra como poder hacer la secuencia de imágenes.

Manejo de Teclas  por Parte del Usuario

La nave que tenemos se moverá según las flechas de dirección, como te imaginas, cada tecla tiene un código, entonces haremos lo siguiente: primero registrar el manejador de eventos en la función onLoaded que se llama cuando se carga el XAML.

  sender.addEventListener("KeyDown", onKeyDown);

Con esto estamos registrando en listener y luego en la funcion onKeyDown determinamos cual es la tecla que se presionó:

function onKeyDown(sender, keyEventArgs) {
              if (nave.Visibility != "Collapsed") {
                  var angulo = sender.findName("angulo").Angle;
                  if (keyEventArgs.key == 15) {
                      sender.findName("angulo").Angle = 180;
                      nave["Canvas.Top"] -= 10;
                  } ….

Si vemos el código observamos que uno de los argumentos de la función es keyEventArgs es key, que tiene el código de la tecla presionada. El código anterior tiene algunos detalles, como por ejemplo que se mueva la nave siempre y cuando la nave este en estado visible (!=Collapsed), y según la dirección de la tecla, vamos a cambiar el ángulo de la nave y luego hacerla avanzar. Al final de esta función se verifica si la nave sobrepasa los bordes, los cuales no los calculamos en duro, si no  con:
silverlightPlugin.content.actualWidth
silverlightPlugin.content.actualHeight

De esta manera podemos determinar el tamaño de la escena, ya que puede estar en pantalla completa o normal.

Para poder modificar el ángulo y que fuera accesible esta propiedad desde javascript, debemos ponerle x:Name a RotateTransform

<TransformGroup>
  <ScaleTransform ScaleX="1" ScaleY="1"/>
 
<SkewTransform AngleX="0" AngleY="0"/>
 
<RotateTransform x:Name="angulo" Angle="0"/>
  <TranslateTransform X="0" Y="0"/>
</TransformGroup>

Full Screen y Posiciones

Es muy simple pasar a pantalla completa con Silvellight , sin embargo debes asegurarte de que el fondo se ajuste tambien en dimensiones a tu pantalla, ya que al pasar a modo fullscreen, no quiere decir que tu fondo se redimensionen automáticamente.

 

function pantallaCompleta(sender, args) {
if (fullscreen == false) {
   silverlightPlugin.content.fullScreen = true;
   fullscreen = true;
   fondo.width = silverlightPlugin.content.actualWidth;
   fondo.height = silverlightPlugin.content.actualHeight;
}else {
   silverlightPlugin.content.fullScreen = false;
   fullscreen = false;
   fondo.width = 640;
   fondo.height = 480;
  
if (nave["Canvas.Top"] > (silverlightPlugin.content.actualHeight – nave.Height))
{

 nave["Canvas.Top"] = (silverlightPlugin.content.actualHeight – nave.Height) – 50;
              }
if (nave["Canvas.Left"] >
(silverlightPlugin.content.actualWidth – nave.Width))
              {
nave["Canvas.Left"] = (silverlightPlugin.content.actualWidth – nave.Width) – 50;

       }
 }
barra.width = silverlightPlugin.content.actualWidth;   

}

Hay cosas que destacar en este código, una es que si ya esta en modo fullscreen , volvemos a el tamaño normal (640 x 480), por otro lado , si la nave esta fuera de esas coordenadas ya que esta en pantalla completa, volvemos a posicionar la nave. También si te fijas redimensionamos el fondo y la barra para que ocupen la pantalla completa.

Tocar Sonidos
Esto es bastante simple, lo que debemos hacer es insertar un tag media element (tal como se hace con los videos)

<MediaElement x:Name="Sonido" AutoPlay="False" Source="389.mp3" />

El archivo 389.mp3 tiene el sonido de la explosión, y es en esta función en donde llamamos a su método Play()

  function explota(sender) {
              if (nave.Visibility != "Collapsed") {
                  sender.findName("boom1").Visibility = "Visible";
                  boom["Canvas.Top"] = nave["Canvas.Top"] – 50;
                  boom["Canvas.Left"] = nave["Canvas.Left"] – 50;
                  sender.findName("BOOM").Begin();
                  sender.findName("BOOMOFF").Begin();
                  nave.Visibility = "Collapsed";
                  sender.findName("Sonido").Play();
              }
        }

En el código anterior hacemos explotar la nave siempre y cuando esté visible, llamamos a la animación de la explosión (la explosión y el botón) y luego tocamos el sonido.

Espero que te sirva.

Pincha aquí para ver el ejemplo

Pincha aquí para bajar el ejemplo

[Off-Topic] El único Gadget con Silverlight en la Galería… :(

Que tal, les quería comentar, no a manera de vanagloriarme de que mi SuperGadget de Escritura a mano, es el único en la categoría Silverlight en http://gallery.live.com/, pero la idea es que más de nosotros participemos en esto desarrollando, como decía el Guille, derrepente es programar por programar, tenemos poco tiempo, sube las cuentas, el precio de los combustibles, los alimentos y nuestro nivel de cafeína en la sangre y solo bajan las horas de sueño, pero si algo nos apasiona es desarrollar nuevas “juguetitos”.

Les dejo la invitación, vamos que se puede!!

image


http://gallery.live.com/results.aspx?tag=silverlight&bt=1


Bueno, era eso 🙂
Saludos,
Gonzalo

:% –> Chrome Crash!!

image

Solo eso, escriban  :% en la barra de URL de Google Chrome y vean lo que pasa….

image

Vaya! , como algo muy raro, realmente es raro escribir :%, que más se les pasó?  No niego que parece un buen browser, pero… hay que probar un poco más, ahhh, se me olvidaba, si, es 0.2.149.27, pero se lanza con aires de release. Me imagino que alguien no puede sentarse por este error en Google…

Eso, que estén bien!

Saludos,

Gonzalo