HTML-Tutorium: SVG: MiniPong 01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
| Zeile 164: | Zeile 164: | ||
// Start the timer for redrawing the canvas every 1000/FPS seconds. | // Start the timer for redrawing the canvas every 1000/FPS seconds. | ||
g_timer = window.setInterval( | g_timer = window.setInterval(o_redraw, 1000/FPS); | ||
} | } | ||
</source> | </source> | ||
Version vom 29. Oktober 2012, 08:58 Uhr
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.
miniatur|links|374px|Das Objektmodell der Raphaël-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
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/jquery.min.js"></script>
<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"> </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 Projektes 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 DateiCONSTANT.js unterscheidet sich nicht von der Datei
Datei CONSTANT.js des MiniPong-Canvas-Tutoriums.
main.js
Die Dateimain.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 svg und
die Methode init zusätzlich definiert werden:
svg: null,
// Initializes the ball; it is called, when the canvas has been created.
init:
function(p_canvas)
{ this.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 erzeug 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.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()
{ // Create a new Raphaël paper (canvas).
var l_canvas = new Raphael("d_canvas", CANVAS_WIDTH, CANVAS_HEIGHT);
$("#d_canvas")
.css ({"width": CANVAS_WIDTH,
"height": 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
- 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)
- 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.
