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
| 
|
| 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
 |
| 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.
 |
| 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
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!!
http://gallery.live.com/results.aspx?tag=silverlight&bt=1
Bueno, era eso :)
Saludos,
Gonzalo
Solo eso, escriban :% en la barra de URL de Google Chrome y vean lo que pasa....
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