HTML-Tutorium: SVG: MiniPong 01

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3
(zu größeren Teilen überprüft) 		Umfang: 4
(unwichtige Fakten fehlen) 		Quellenangaben: 5
(vollständig vorhanden) 		Quellenarten: 5
(ausgezeichnet) 		Konformität: 5
(ausgezeichnet)

HTML-Tutorium: Canvas | SVG

SVG: | Teil 1 | Teil 2 | Teil 3

Musterlösung: Minipong 1 (SVN-Repository)

Voraussetzung

Sie sollten die Inhalte der Tutorien HTML-Tutorium: SVG: Hello World und HTML5-Tutorium: Canvas: MiniPong 01 kennen.

Ziel: Animation des Balls

Im ersten Teil des Tutoriums wird die Ball-Amination des Spiels impementiert. Dazu wird die Canvas-Version dieser Animation in eine SVG-Version umgeschrieben.

Wie in Teil 1 der Canvas-Version des Tutoriums werden zwei Objekte implementiert: Das ROOT-Objekt der Anwendung und das zu animierende Ball-Objekt.

Das Objektmodell der Raphaël-Version von MiniPong 01
Das Objektmodell der Canvas-Version von MiniPong 01

Wenn man die Objektmodelle der Raphaël- und der Canvas-Version vergleicht, fallen einem nur zwei wesentliche Unterschiede auf. In der Raphaël-Version fällt das g_context-Objekt weg, da es in Raphaël kein „Kontext“-Objekt gibt. Anstatt dessen wird im Ball eine SVG-Version des Balls im Attribut svg gespeichert. Dieses Attribut wird mit Hilfe der Methode init initialisiert, sobald die Raphaël-Bühne erzeugt wurde und per p_canvas übergeben werden kann. Alle künftigen Änderungen an diesem SVG-Objekt werden direkt auf der Bühne sichtbar.

Anwendung „MiniPongSVG01“

Neues Projekt anlegen

Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen MiniPongSVG01 an.

Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

Dateien erstellen

raphael.js

Erstellen Sie den Ordner WebContent/lib und legen Sie in diesen Ordner die Datei raphael-min.js.

Gehen Sie dabei genauso vor, wie beim Einbinden von jQuery im 4. Teil des Hello-World-Canvas-Tutoriums.

index.html

Die Datei index.html ist im Prinzip genauso aufgebaut, wie die Datei index.html des MiniPong-Canvas-Tutoriums. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
                      "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>HTML: MiniPong 01 (Raphaël)</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

<!--<link rel="stylesheet" href="css/all.min.css">-->
    <link rel="stylesheet" href="css/main.css">
		
    <script type="text/javascript" src="lib/raphael-min.js"></script>

<!--<script type="text/javascript" src="js/all.min.js"     ></script>-->
    <script type="text/javascript" src="js/CONSTANT.js"    ></script>
    <script type="text/javascript" src="js/main.js"        ></script>
  </head>
  <body>
    <div id="d_page">
      <div id="d_canvas">&nbsp;</div>
    </div>
  </body>
</html>

Es gibt nur zwei wesentliche Unterschiede. Zum einen wird eine HTML-4-Datei an Stelle einer HTML5-Datei benötigt und zum anderen werden an Stelle des canvas-Elements zwei ineinander verschachtelte div-Elemente verwendet. Das div-Element d_page dient dazu, den Canvas im Web-Browser-Fenster zu zentrieren, während das div-Element d_canvas die eigentliche Raphaël-Bühne aufnimmt.

main.css

Erstellen Sie im Ordner WebContent/css des Projekts die Datei main.css. In dieser Datei werden die Farben und die Postion der Raphaël-Bühne und des Hintergrunds festgelegt. 

body
{ text-align:       center;
  padding:          10px;
  background-color: #AAA;
}

#d_page
{ width:  400px;
  margin: 20px auto;
}

#d_canvas
{ border-color: #777; 
  border-width: 2px; 
  border-style: solid;
  
  background-color: #CCC;
}

CONSTANT.js

Die Datei CONSTANT.js unterscheidet sich nicht von der Datei Datei CONSTANT.js des MiniPong-Canvas-Tutoriums.

main.js

Die Datei main.js unterscheidet sich von der Datei Datei main.js des MiniPong-Canvas-Tutoriums nur in denjenigen Anweisung, die für die Darstellung des Balls auf der Bühne zuständig sind.

Für das Ball-Objekt g_ball müssen laut Objektmodell das Attribut v_svg und die Methode init zusätzlich definiert werden: 

v_svg: null,
      
// Initializes the ball. 
// It has to be called when the canvas has been created.
init:
  function(p_canvas)
  { this.v_svg
    = p_canvas
        .circle(this.x, this.y, this.r)
        .attr({"stroke"       : BALL_BORDER_COLOR,
               "stroke-width" : BALL_BORDER_WIDTH,
               "fill"         : BALL_COLOR,
              });
  },

Die init-Methode erzeugt auf der Raphaël-Bühne ein SVG-Kreis-Objekt und übernimmt von aktuellen Ball-Objekt (this) die Position und den Radius. Anschließend initialisiert sie die Randfarbe, die Randbreite sowie die Füllfarbe des SVG-Kreises.

Die Draw-Funktion des Ball-Objekts vereinfacht sich gegenüber der Canvas-Version deutlich. Der Kreis muss nicht mehr umständlich als Pixelgrafik gezeichnet werden, sondern es werden einfach die x- und y-Koordinaten des SVG-Kreis-Objekts verändert. Das Rendering des SVG-Objekts übermimmt die in den jeweiligen Browser integrierte SVG-Render-Engine: 

// Draws the ball at its current position onto the canvas.
draw: 
  function()
  { this.v_svg.attr({cx: this.x, cy: this.y});
  }

Darüber hinaus ändert sich nur die Initialisierungsmehtode f_init. Währen diese Methode in der MiniPong-Canvas-Version den 2D-Kontext des HTML5-canvas-Elements ermitteln und in der Variablen g_context ablegen musste, muss die Initialisierungsmehtode hier die Bühne als so genanntes “Raphaël paper” erstellen und auf diese Bühnen einen SVG-„Ball“ legen. Die Variable g_context wird hier nicht mehr benötigt.

Hinsichtlich des Animationstimers unterscheiden sich die Canvas- und die SVG-Version von dagegen f_init nicht. 

// Has to be called after the HTML page has been loaded.
function f_init()
{ // Resize the canvas.
  document.getElementById("d_page").style.width    = CANVAS_WIDTH  + "px";
  document.getElementById("d_canvas").style.width  = CANVAS_WIDTH  + "px";
  document.getElementById("d_canvas").style.height = CANVAS_HEIGHT + "px";

  // Create a new Raphaël paper (canvas).
  var l_canvas = new Raphael("d_canvas", CANVAS_WIDTH, CANVAS_HEIGHT); 
  
  // Create the svg view of the ball.
  g_ball.init(l_canvas);

  // Start the timer for redrawing the canvas every 1000/FPS seconds.
  g_timer = window.setInterval(o_redraw, 1000/FPS);
}

Eine letzte Änderung ergibt sich in der Observer-Methode o_redraw. Anstelle der beiden Befehle 

// Clear and redraw the canvas.
g_context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
g_ball.draw(g_context);

braucht man in der SVG-Version lediglich einen Befehl: 

// Redraw the canvas.
g_ball.draw();

Das Löschen der SVG-Bühne übernimmt die Render-Engine des Browsers für uns.

Anwendung testen und sichern

Testen Sie Ihre Anwendung in gewohnter Weise.

Vergessen Sie nicht, sie im SVN-Repository zu sichern.

Quellen

  1. Braun (2011): Herbert Braun; Webanimationen mit Canvas; in: c't Webdesign; Band: 2011; Seite(n): 44–48; Verlag: Heise Zeitschriften Verlag; Adresse: Hannover; 2011; Quellengüte: 5 (Artikel)
  2. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)

Fortsetzung des Tutoriums

Sie sollten nun Teil 2 des Tutoriums bearbeiten.

Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML-Tutorium:_SVG:_MiniPong_01&oldid=51296“