Medidor de salud en juegos con CSS3

Índice

Compatibilidad del encapsulador para este artículo
Función ¿Compatible?
Esquinas redondeadas CSS3
Sombras CSS3
Degradados CSS
Animaciones CSS
 

Introducción

Muchos juegos se diseñan con elementos comunes como indicadores del juego (para salud, magia, munición, dinero, etc.), o paneles de control y de estado que se colocan por los bordes. Forman parte del juego, pero no necesariamente de la escena de gráficos principal.

En HTML5, el área principal de gráficos se suele crear con una etiqueta canvas (lienzo). A continuación, el desarrollador escribe con JavaScript para dibujar en el área del lienzo y crear el juego. Tiene sentido quitar los elementos del juego que no forman parte de la escena de gráficos principal del elemento de lienzo por un par de razones.

En primer lugar, los objetos se pueden animar a menudo en el DOM mediante animaciones y transiciones CSS para disfrutar de una mayor optimización del navegador y de una aceleración uniforme del hardware. Es decir, las animaciones que se puedan realizar en CSS funcionarán mejor que las realizadas en JavaScript.

En segundo lugar, el DOM y CSS no pueden manipular los objetos que se dibujan en una etiqueta de lienzo con JavaScript. De este modo, moviendo elementos del juego al documento HTML principal y colocándolos en el elemento de lienzo, se puede conseguir la misma apariencia pero habrá que usar la potencia de CSS3, así como de JavaScript, para manipularlos.

En este artículo vamos a crear un medidor. Como ejemplo concreto, crearemos un medidor de salud.

Medidor básico

En primer lugar el marcado básico HTML:

#meter-container { width: 300px; } .meter { height: 10px; position: relative; background: #333; border: 1px solid black; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; padding: 10px; -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3); -moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); } .strong-health { background-color: #7eff00; width: 85%; } .weak-health { background-color: #ff0; width: 35%; } .danger-health { background-color: #f00; width: 10%; } .meter-value { /* Position the value */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
-->
<html>
  <body>
    <style>
      #meter-container {
        width: 300px; 
      }
      .meter { 
        height: 10px;  
        position: relative;      
        background: #333;
        
        border: 1px solid black;
        -moz-border-radius: 30px;
        -webkit-border-radius: 30px;
        border-radius: 30px;
        
        padding: 10px;
        
        -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
        -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
        box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
      }
      
      .strong-health {
        background-color: #7eff00; 
        width: 85%;
      }
      
      .weak-health {
        background-color: #ff0; 
        width: 35%;        
      }
      
      .danger-health {
        background-color: #f00;
        width: 10%;        
      }
      
      .meter-value {
        /* Position the value */
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
   
        -webkit-border-top-right-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -moz-border-radius-topright: 5px;
        -moz-border-radius-bottomright: 5px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;      
      }
    </style>
    <div id="meter-container">     
      
      <div class="meter">
        <div class="meter-value strong-health">
        </div>
        
      </div>
    </div>
    
  </body>
</html>

Se puede usar esto para crear tres estilos de medidor de salud.

 

Medidor de salud en peligro

 

Medidor de salud débil

 

Medidor de salud fuerte

Estos medidores no están mal y la única parte de CSS3 que se ha usado es la de esquinas redondeadas, que permite redondear las esquinas del medidor de vida.

Adición de degradados CSS al medidor

#gradient-example .strong-health {
        background-color: #7eff00;         
        background-image: -moz-linear-gradient(top, #78F165, #0CF30C);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #78F165),color-stop(1, #0CF30C));
        background-image: -webkit-linear-gradient(#78F165, #0CF30C); 
        width: 85%;
}
      
      #gradient-example .weak-health {
        background-color: #ff0; 
        width: 35%;  
        background-color: #f1a165;
        background-image: -moz-linear-gradient(top, #F1F165, #F3F30C);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F1F165),color-stop(1, #F3F30C));
        background-image: -webkit-linear-gradient(#F1F165, #F3F30C); 
}
      
      #gradient-example .danger-health {
        background-color: #f00;
        width: 15%;        
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}
 

Medidor de salud en peligro

 

Medidor de salud débil

 

Medidor de salud fuerte

Los degradados CSS son parecidos a los degradados de otras herramientas gráficas como Photoshop o GIMP. Se define un tipo de transición, ya sea lineal o radial, y, a continuación, se define un color para el punto inicial y otro para el punto final. El degradado pasará suavemente de uno a otro. También se puede definir cualquier cantidad de puntos finales que permiten pasar a un color intermedio antes de pasar al siguiente color de parada o al color final.

Estos degradados CSS son sutiles, pero dejan que el color del medidor de vida destaque sobre el fondo. En este momento, también debería comprobar que está leyendo este artículo en un navegador habilitado para CSS3, ya sea IE9+, Firefox, Opera, Safari o Chrome. De lo contrario, no podrá ver el degradado.

Adición de degradados CSS al medidor

El marcado es el mismo.

     
      @-webkit-keyframes glow {
	0% {
          -webkit-box-shadow: 0 0 16px rgba(240, 163, 163, 0.5);
          border-color: rgba(0,0,255,0.5); 		
	}
	100% {
          -webkit-box-shadow: 0 0 16px rgba(240, 0, 0, 1.0), 0 0 36px rgba(240, 0, 0, 1.0);
          border-color: rgba(0,0,255,1.0); 
	}
      }

     @-moz-keyframes glow {
	0% {
          -moz-box-shadow: 0 0 16px rgba(240, 163, 163, 0.5);
          border-color: rgba(0,0,255,0.5); 		
	}
	100% {
          -moz-box-shadow: 0 0 16px rgba(240, 0, 0, 1.0), 0 0 36px rgba(240, 0, 0, 1.0);
          border-color: rgba(0,0,255,1.0); 
	}
      }

     @-ms-keyframes glow {
	0% {
          -ms-box-shadow: 0 0 16px rgba(240, 163, 163, 0.5);
          border-color: rgba(0,0,255,0.5); 		
	}
	100% {
          -ms-box-shadow: 0 0 16px rgba(240, 0, 0, 1.0), 0 0 36px rgba(240, 0, 0, 1.0);
          border-color: rgba(0,0,255,1.0); 
	}
      }
 
      #animation-example .danger-health {
        background-color: #f00;
        width: 15%;     
        background-color: #f0a3a3;
        background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
        background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
        
        -webkit-animation-name: glow;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;	
	
	-moz-animation-name: glow;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-moz-animation-timing-function: ease-in-out;
	
	-ms-animation-name: glow;
	-ms-animation-duration: 1s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-direction: alternate;
	-ms-animation-timing-function: ease-in-out;
      }

El medidor de salud en peligro:

Ahora el medidor de salud en peligro brilla para llamar la atención del jugador sobre el estado crítico de su salud

 

Las animaciones CSS permiten que el navegador pase de un conjunto de estilos CSS a otro conjunto de estilos CSS. También se pueden definir estilos intermedios para la animación. En este caso, sólo defino dos estilos. El primero está al 0 % o al principio de la animación. El primero está al 100 % o al final de la animación. Para crear el efecto brillante, el navegador pasará suavemente la propiedad de sombras de un tamaño pequeño a uno grande.

Adición de fuentes web al medidor

Finalmente, voy a añadir el porcentaje al medidor usando una fuente web desde la página Google web fonts.

Enlace a la fuente web. Google ha creado estas fuentes para que estén a disposición del público y libres de derechos de autor.

<link href='http://fonts.googleapis.com/css?family=Chewy' rel='stylesheet' type='text/css'>

Cree algunas reglas CSS para este texto.

.textbox {
        font-size: 40px;
        color: #fff;        
        font-family: 'Chewy', cursive, helvetica, arial, sans-serif;
        text-shadow: 2px 3px 1px #000;
        letter-spacing: 0px;
        -webkit-text-fill-color: #fff; 
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;

        text-align: center;
        text-transform:uppercase;
      }

Aquí está el marcado HTML para los medidores

<div id="animation-example">
    <link href='http://fonts.googleapis.com/css?family=Chewy' rel='stylesheet' type='text/css'>

  <div class="container">
    <div class="meter">
      <div class="textbox">15%</div>
      <div class="meter-value danger-health">
      </div> 
    </div>
    <p>Danger Health Meter</p>

    <div class="meter">
       <div class="textbox">35%</div>
      <div class="meter-value weak-health">
      </div>
    </div>
    <p>Weak Health Meter</p>

    <div class="meter">
      <div class="textbox">85%</div>   
      <div class="meter-value strong-health">
      </div>
    </div>
    <p>Strong Health Meter</p>
  </div>
</div>
</div>
 
15 %
 

Medidor de salud en peligro

35 %
 

Medidor de salud débil

85 %
 

Medidor de salud fuerte

Para obtener información más completa sobre las optimizaciones del compilador, consulte nuestro Aviso de optimización.
Etiquetas: