Lebenspunktezähler mit CSS3

Inhaltsverzeichnis

Encapsulator Kompatibilität für diesen Artikel
Merkmal Unterstützt?
CSS3: border-radius ja
CSS3: box-shadow ja
CSS-Farbverläufe ja
CSS-Animationen ja
 

Einleitung

Bei vielen Spielen befinden sich entlang der Ränder bestimmte wiederkehrende Elemente, wie Anzeigen (für Lebenspunkte, Zauberkraft, Munition, Geld usw.) sowie Steuer- und Statusfelder. Sie sind zwar Teil des Spiels, nicht notwendigerweise aber auch Teil der Hauptgrafikszene.

In HTML5 wird der Hauptgrafikbereich häufig mit einem Canvas-Tag erstellt. Anschließend schreibt der Entwickler für das Zeichnen im Canvas-Bereich und zum Erstellen des Spiels JavaScript-Code. Aus mehreren Gründen ist es durchaus sinnvoll, Spieleelemente, die nicht Teil der Hauptgrafikszene sind, aus dem Canvas-Element herauszunehmen.

Zum einen kommen Objekte, die im DOM mittels CSS-Animationen und Übergängen animiert werden können, häufig in den Genuss einer besseren Browseroptimierung und profitieren sogar von der Hardwarebeschleunigung. Das bedeutet, dass Animationen, die in CSS ausgeführt werden können, schneller sind als Animationen in JavaScript.

Zum anderen können Objekte, die in einem Canvas-Tag mit JavaScript gezeichnet werden, nicht durch das DOM oder durch CSS manipuliert werden. Wenn Sie also Elemente des Spiels in das HTML-Hauptdokument verschieben und sie einfach über Ihrem Canvas-Element positionieren, erhalten Sie dasselbe Aussehen, profitieren aber gleichzeitig beim Manipulieren der Elemente von der Leistungsfähigkeit von CSS3 und JavaScript.

In diesem Artikel werden wir einen Punktezähler zum Messen der Lebenspunkte konstruieren.

Einfacher Zähler

Der grundlegende HTML-Code sieht folgendermaßen aus:

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

Mit diesem Code können wir drei Lebenspunktezähler-Stile erstellen.

 

Gefahr (danger-health)

 

Schwach (weak-health)

 

Stark (strong-health)

Diese Zähler sind gar nicht so schlecht, und CSS3 kommt hier nur bei border-radius ins Spiel, um die Ecken des Lebenspunktezählers abzurunden.

Hinzufügen von CSS-Farbverläufen zum Zähler

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

Gefahr (danger-health)

 

Schwach (weak-health)

 

Stark (strong-health)

CSS-Farbverläufe funktionieren ziemlich genauso wie Farbverläufe in anderen Grafikprogrammen, wie Photoshop oder GIMP. Zunächst wird ein Übergangstyp, z. B. linear oder radial, definiert, und dann werden die Farben für den Ausgangspunkt und den Endpunkt festgelegt. Die Farben verlaufen daraufhin übergangslos von der Ausgangsfarbe in die Endfarbe. Außerdem ist es möglich, eine beliebige Anzahl von Stopppunkten zu definieren, sodass der Übergang erst in eine Zwischenfarbe erfolgt, bevor es weiter zur Farbe des nächsten Stopppunktes oder des Endpunktes geht.

Diese CSS-Farbverläufe sind subtil, sorgen aber dafür, dass sich die Farbe des Lebenspunktezählers vom Hintergrund abhebt. An dieser Stelle sollten Sie kontrollieren, dass Sie sich diesen Artikel in einem CSS3-fähigen Browser, wie IE9+, Firefox, Opera, Safari oder Chrome, ansehen. Anderenfalls ist der Farbverlauf nicht zu erkennen.

Hinzufügen von CSS-Animationen zum Zähler

Der grundlegende HTML-Code ist derselbe:

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

Lebenspunktezähler-Stil "Gefahr":

Jetzt blinkt der Lebenspunktezähler im Stil "Gefahr" rot, um den Spieler auf den kritischen Zustand aufmerksam zu machen.

 

CSS-Animationen ermöglichen es dem Browser, von einem Satz CSS-Stile zu einem anderen Satz CSS-Stile überzugehen. Sie können auch Zwischenstile für Ihre Animation definieren. Hier definiere ich lediglich zwei Stile: den ersten bei 0 %, also am Anfang der Animation den zweiten bei 100 %, also am Ende der Animation Um den Blinkeffekt zu erzielen, erfolgt ein allmählicher Übergang der Eigenschaft box-shadow von klein zu größer im Browser.

Hinzufügen von Webfonts zum Zähler

Zum Schluss füge ich dem Zähler noch die Prozentangabe hinzu, wobei ich einen Webfont von der Website "Google web fonts" nutze.

Dazu verlinke ich zum gewünschten Webfont. Diese von Google erstellten Fonts sind öffentlich verfügbar und dürfen gebührenfrei genutzt werden.

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

Nun werden ein paar CSS-Regeln für diesen Text erstellt.

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

Der HTML-Code für die Zähler sieht wie folgt aus:

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

Gefahr (danger-health)

35 %
 

Schwach (weak-health)

85 %
 

Stark (strong-health)

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