Niveau de vie dans les jeux avec CSS3

Table des matières

Compatibilité d'encapsuleur pour cet article
Fonctionnalité Prise en charge ?
CSS3 border-radius oui
CSS3 box-shadow oui
Gradients CSS oui
Animations CSS oui
 

Introduction

La plupart des jeux sont conçus avec des éléments identiques tels que les indicateurs de jeu (pour la vie, la magie, les munitions, l'argent, etc.), des volets de statut et de contrôle situés dans les coins du jeu. Ils font partie du jeu, mais pas obligatoirement de la principale scène graphique.

En langage HTML5, la principale zone graphique est souvent créée avec une balise canvas. Le développeur écrit ensuite un code en JavaScript pour dessiner dans la zone canvas et créer le jeu. Il est important de retirer les éléments de jeu qui ne font pas partie de la principale scène graphique du canvas pour plusieurs raisons.

Premièrement, les objets pouvant être animés dans le DOM avec des transitions et des animations CSS profitent souvent de l'optimisation du navigateur voire de l'accélération matérielle. Ainsi, des animations pouvant être réalisées en CSS auront de meilleurs résultats que celles en JavaScript.

Deuxièmement, les objets dessinés dans une balise canvas avec JavaScript ne peuvent pas être manipulés par le DOM ou par CSS. Ainsi, si vous déplacez les éléments du jeu dans le principal document HTML et si vous les positionnez simplement sur votre élément canvas, vous obtenez le même résultat, mais profitez de la puissance de CSS3 et de JavaScript pour les manipuler.

Dans la suite de l'article, nous allons créer une mesure qui, pour les besoins de l'article, sera une barre de vie.

Barre de base

Commençons par le balisage HTML de base :

#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>

Nous pouvons utiliser ce modèle pour créer trois types de niveau de vie.

 

Niveau de vie critique

 

Niveau de vie faible

 

Niveau de vie élevé

Ces barres sont convenables et le seul élément que nous avons repris de CSS3 est le border-radius qui nous permet d'arrondir les coins de la barre de vie.

Ajout de gradients CSS à la barre

#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);
}
 

Niveau de vie critique

 

Niveau de vie faible

 

Niveau de vie élevé

Le fonctionnement des gradients CSS est quasi identique à celui des autres outils graphiques tels que Photoshop or GIMP. Vous définissez un type de transition, par exemple linéaire ou radiale, puis vous définissez une couleur pour le point de départ et une pour le point de fin. Le gradient effectuera une transition fluide entre les deux. Vous pouvez également définir le nombre de points d'arrêt qui vous convient pour effectuer une transition vers une couleur intermédiaire avant de poursuivre vers la couleur du point d'arrêt suivant ou la couleur du point de fin.

Ces gradients CSS sont subtils, mais permettent à la couleur du niveau de vie de se détacher de l'arrière-plan. À ce stade, vous devez également vous assurer de lire cet article dans un navigateur compatible CSS3 comme IE9+, Firefox, Opera, Safari ou Chrome. Dans le cas contraire, vous ne pourrez pas voir le gradient.

Ajout d'animations CSS à la barre

Le balisage est identique.

     
      @-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;
      }

Niveau de vie critique :

cette barre de vie clignote pour attirer l'attention du joueur sur son niveau de vie critique.

 

Les animations CSS permettent au navigateur de passer d'un ensemble de styles CSS à un autre ensemble de styles CSS. Vous pouvez également définir des styles intermédiaires pour votre animation. Dans ce cas précis, je n'en ai défini que deux. Le premier est à 0 % ou au début de l'animation. Le second est à 100 % ou à la fin de l'animation. Pour créer l'effet lumineux, le navigateur fera évoluer lentement les valeurs de la propriété box-shadow, d'une petite taille vers une grande taille.

Ajout de polices Web à la barre

Pour finir, j'ajoute le pourcentage à la barre en récupérant une police Web sur la page des polices Web de Google.

Lien vers la police Web. Google a créé ces polices pour qu’elles soient disponibles au grand public et libre de royalties.

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

Créez des règles CSS pour ce texte.

.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;
      }

Voici le balisage HTML pour les barres

<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 %
 

Niveau de vie critique

35 %
 

Niveau de vie faible

85 %
 

Niveau de vie élevé

有关编译器优化的更完整信息,请参阅优化通知