Indicatore di energia vitale per videogame con CSS3

Indice

Compatibilità dell'incapsulatore per questo articolo
Funzionalità Supportata?
border-radius CSS3
box-shadow CSS3
Gradienti CSS
Animazioni CSS
 

Introduzione

La maggior parte dei giochi viene progettata con elementi comuni, come gli indicatori di gioco (energia vitale, magia, munizioni, soldi e così via), e i pannelli di controllo e di stato sui bordi dello schermo del gioco. Questi elementi fanno parte del gioco, ma non necessariamente parte della scena grafica principale.

In HTML5, l'area grafica principale viene in genere creata con il tag canvas. Lo sviluppatore quindi scrive il codice JavaScript per disegnare nell'area dell'elemento canvas e creare il gioco. È importante estrarre gli elementi di gioco che non fanno parte della scena grafica principale dall'elemento canvas per due motivi.

Primo, gli oggetti che si possono animare nel modello DOM utilizzando transizioni e animazioni CSS in genere risentono dei vantaggi offerti da una migliore ottimizzazione del browser e una maggiore accelerazione hardware. Le animazioni che si possono quindi eseguire in CSS offriranno prestazioni migliori rispetto a quelle eseguite in JavaScript.

Secondo, gli oggetti disegnati in un tag canvas con JavaScript non possono essere manipolati dal modello DOM o da CSS. Spostando quindi gli elementi del gioco nel documento HTML principale e posizionandoli semplicemente sull'elemento canvas, è possibile ottenere la stessa estetica, ma utilizzare la potenza di CSS3 e JavaScript per manipolarli.

Ai fini del presente articolo, verrà creato un indicatore di energia vitale.

Indicatore di base

Innanzitutto, analizzare il markup HTML di 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>

è possibile utilizzare questo markup per creare tre tipi di indicatori di energia vitale.

 

Indicatore livello energia vitale critico

 

Indicatore livello energia vitale basso

 

Indicatore livello energia vitale elevato

Questi indicatori sono piuttosto interessanti e l'unica porzione di codice CSS3 utilizzata è la proprietà border-radius, che consente di arrotondare gli angoli dell'indicatore di energia vitale.

Aggiunta di gradienti CSS all'indicatore

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

Indicatore livello energia vitale critico

 

Indicatore livello energia vitale basso

 

Indicatore livello energia vitale elevato

I gradienti CSS funzionano in modo analogo ai gradienti di altri strumenti grafici, come Photoshop o GIMP. Occorre definire un tipo di transizione, come una transizione lineare o radiale, quindi definire un colore per il punto iniziale e un colore per il punto finale. Il gradiente assicura una transizione uniforme e lineare tra i due colori. Si possono poi definire una serie illimitata di punti intermedi, che consentono di effettuare la transizione a un altro colore intermedio prima di passare al successivo colore intermedio o al colore finale.

I gradenti CSS sono delicati, ma consentono di far risaltare il colore dell'indicatore di energia vitale rispetto allo sfondo. In questa fase, è necessario inoltre verificare che questo articolo venga visualizzato in un browser abilitato per CSS3, come IE9+, Firefox, Opera, Safari o Chrome. In caso contrario, non si visualizzerà il gradiente.

Aggiunta di animazioni CSS all'indicatore

Il markup è identico a quello utilizzato nella sezione precedente.

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

Indicatore livello energia vitale critico:

ora, l'indicatore del livello di energia vitale critico viene reso luminescente, per attirare l'attenzione del giocatore sul livello critico dell'energia vitale disponibile.

 

Le animazioni CSS consentono al browser di passare da un set di stili CSS all'altro. Si possono anche definire stili intermedi per l'animazione da creare. In questo caso, vengono definiti solo due stili. Il primo è impostato su 0%, che corrisponde all'inizio dell'animazione. Il secondo è impostato su 100%, che corrisponde alla fine dell'animazione. Per creare l'effetto luminescente, il browser passa a una dimensione maggiore della proprietà box-shadow.

Aggiunta di caratteri Web all'indicatore

Infine, si aggiungerà la percentuale all'indicatore importando un carattere Web dalla pagina dei caratteri Web di Google.

Eseguire il collegamento al carattere Web. Google ha creato questi caratteri in modo che siano disponibili pubblicamente e privi di royalty.

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

Creare alcune regole CSS per questo testo.

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

Di seguito viene riportato il markup HTML per gli indicatori:

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

Indicatore livello energia vitale critico

35%
 

Indicatore livello energia vitale basso

85%
 

Indicatore livello energia vitale elevato

Per informazioni più dettagliate sulle ottimizzazioni basate su compilatore, vedere il nostro Avviso sull'ottimizzazione.
Contrassegni: