Morton 27 de febrero de 2013 a las 11.38
   Imprimir artículo
elWebmaster.com

Cómo crear una demo de Street Fighter usando animaciones CSS y JavaScript


street-fighter-wideEsta vez vamos a ense√Īarte una¬†manera de animar sprites en PNG a trav√©s de la propiedad steps () de las animaciones de CSS3. La idea de esta t√©cnica es recrear un gif animado pero con los tiles de un sprite PNG.¬† Un juego muy popular entre todas las generaciones es el famoso Street Fighter, que usaremos de ejemplo para este art√≠culo. ¬ŅEst√°s preparado?

Haz clic aquí para ver una demostración >>

Vamos a empezar con el pu√Īo (es la tercera fila del sprite). Primero necesitaremos abrir Photoshop para crear el sprite y hacer todas las im√°genes del mismo tama√Īo (en este caso ser√≠an de 70px de ancho por 80px de alto). Trata de buscar las dimensiones del m√°s grande tus frames y usa esas dimensiones para toda la grilla. Al final, obtendr√°s algo como esto:

ken

Lo siguiente ser√° configurar un div para Ken que recibir√° nuestro movimiento de pu√Īo (y todos nuestros futuros movimientos):

  1. /* html */
  2. <div class="ken"></div>
  3. /* css */
  4. .ken {
  5.     width:70px; height:80px; /* el tama√Īo exacto de nuestro sprite */
  6.     background-image:url('../images/sprite.png');
  7. }

Asumamos que los prefijos propietarios est√°n funcionando en forma impl√≠cita. Ahora declararemos la animaci√≥n del pu√Īo de esta manera:

  1. /* css */
  2. .punch {
  3.     animation: punch steps(4) 0.15s infinite;
  4. }
  5. @keyframes punch {
  6.     from { background-position:0px -160px; }
  7.     to { background-position:-280px -160px; }
  8. }

Lo que hicimos fue aplicar una animaci√≥n (pu√Īo) al nombre de una clase (.punch) que b√°sicamente anima background-position de 0px a -280px (sobre el eje x). Esta animaci√≥n se quiebra en cuatro partes (steps(4) que corresponde a las cuatro im√°genes del pu√Īo), y tomar√° 0.15 segundos en realizarse en pantalla. Luego empezar√° de n uevo infinitamente.

Finalmente necesitamos una manera de agregar/remover el nombre de clase .punch en el div.ken cuando otra tecla es presionada.

  1. /* javascript */
  2. $(document).on('keydown', function(e) {
  3.     if (e.keyCode === 68) { // 68 es la letra D en el teclado
  4.         $('.ken').addClass('punch');
  5.         setTimeout(function() { $ken.removeClass('punch'); }, 150);
  6.     }
  7. });

Usamos jQuery para addClass('punch') si la letra “D” es presionada y luego lo remueve usando un setTimeout de 150ms. Con estos mismos pasos puedes crear muchos otros movimientos.

Otro nivel con SASS

Si prestas atención a lo que haces, notarás que algunos valores nunca cambian (como el ancho y el alto en el sprite), y, luego de que hayas creado otros movimientos, notarás también que habrá un montón de código duplicado que será dificil de leer y mantener en el futuro. ¡Es hora de usar SASS!

Primero necesitamos @mixins b√°sico como animation() y keyframes():

  1. @mixin animation($params) {
  2.     -webkit-animation:$params;
  3.     -moz-animation:$params;
  4.     -ms-animation:$params;
  5.     animation:$params;
  6. }
  7. @mixin keyframes($name) {
  8.     @-webkit-keyframes $name { @content }
  9.     @-moz-keyframes    $name { @content }
  10.     @-ms-keyframes     $name { @content }
  11.     @keyframes         $name { @content }
  12. }

Necesitamos almacenar el ancho y la altura de la imagen y las variables SASS existen por esta razón:

  1. $spriteWidth:70px;
  2. $spriteHeight:80px;

Y finalmente podemos combinarlo para crear complejas nuevas mezclas que declarar√°n movimientos y manejar√°n el correcto c√°lculo de las posiciones de los fondos:

  1. @mixin anim($animName, $steps, $animNbr, $animParams){
  2.     .#{$animName} {
  3.         @content;
  4.         @include animation($animName steps($steps) $animParams);
  5.     }
  6.     @include keyframes($animName) {
  7.         from { background-position:0px (-$spriteHeight * ($animNbr - 1)); }
  8.         to { background-position:-($spriteWidth * $steps) (-$spriteHeight * ($animNbr - 1)); }
  9.     }
  10. }

Ahora puedes crear un movimiento con una sola linea de código:

  1. $spriteWidth:70px;
  2. $spriteHeight:80px;
  3.  
  4. /* punch */
  5. @include anim($animName:punch, $steps:3, $animNbr:3, $animParams:.15s infinite);
  6. /* kick */
  7. @include anim($animName:kick, $steps:5, $animNbr:7, $animParams:.5s infinite);
  8. /* hadoken */
  9. @include anim($animName:hadoken, $steps:4, $animNbr:1, $animParams:.5s infinite);
  10. ...

Necesitamos un fuerte bucle de detección de colisión. Probaremos la posición de las bolas de fuego cada 50 milisegundos. Necesitaremos un buen bucleador con mucho tacto para detecciones de colisión. En cuanto a la Fireball, si la posición izquierda tiene chance, esto significa que la bola de fuego  sobrepasó la ventana de clase lode .

Aquí pueden ver cómo realizarlo:

  1. var $fireball = $('<div/>', { class:'fireball' });
  2. $fireball.appendTo($ken);
  3.  
  4. var isFireballColision = function(){
  5.     return $fireballPos.left + 75 > $(window).width();
  6. };
  7.  
  8. var explodeIfColision = setInterval(function(){
  9.     $fireballPos = $fireball.offset();
  10.     if (isFireballColision()) {
  11.         $fireball.addClass('explode');
  12.         clearInterval(explodeIfColision);
  13.         setTimeout(function() { $fireball.remove(); }, 500);
  14.     }
  15. }, 50);

Haz clic aquí para ver una demostración >>

Eso es todo ¬°Esperamos que les haya sido de utilidad!

Fuente original del artículo: David Walsh Blog
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Martin dice:

    Esto me viene al peleteee!!! Mil gracias. Saludos.

  2. Alejandro dice:

    Esta muy bueno jejejeje

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder