taralino

Sprites

Das Sprites Add-on beinhaltet Grafikobjekte (Bilder), welche zur Darstellung im Canvas-Paket verwendet werden können. Daher werden die Canvas-Befehle .circle, .box und .rect um folgende Optionen erweitert:

Variable	Datentyp	Hinweis	Default-Wert
sprite	Zeichenkette	-	none
angle	Zahl	-	0.0

Die Option sprite definiert die Id einer Grafik des Sprites-Pakets. Welche Grafiken bzw. welche Ids zur Verfügung stehen, kann den folgenden Beispielen entnommen werden. Mit angle kann (wie üblich) eine Drehung um den Mittelpunkt sowie im Uhrzeigersinn definiert werden. Der Winkel ist im Bogenmaß anzugeben.

Datenquelle

Das Sprites Add-on beinhaltet Bildmaterial, das unter kenney.nl zur Verfügung gestellt wurde (abgerufen am 15. April 2024). Sämtliches Assets-Datenmaterial wird von Kenney unter der Creative Commons Public Domain 1.0 Universell License (CC0 1.0) vertrieben.

Lizenzhinweis

Das Sprites Add-on wird unter der Creative Commons Public Domain 1.0 Universell License vertrieben:

Sprites.js

21. April 2024

Die genauen Angaben zur Lizenz findest du unter dem folgenden Link: CC0 1.0

Sprite-Ids

Eine Liste sämtlicher Sprite-Ids findest du hier:

Zur Referenz

Übersicht

Das Sprites-Paket stellt folgende Befehle und Funktionen zur Verfügung:

Download

Das Sprites Add-on steht über folgenden Link zum Download bereit.

Sprites.js

Beispiel

Zur Verwendung von Sprintes im Canvas-Paket.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
  <script src="Sprites.js"></script>
</head>
<body>
<script>

function setup() {
  Canvas.init([0,20], [0,10], {width:600, background:"lightgrey"});

  Canvas.circle( 3, 5, 1.0, {sprite:"ball-soccer"});
  Canvas.circle( 6, 5, 0.5, {sprite:"coin-gold", angle:-0.4});
  Canvas.box( 10, 5, 2.0, {sprite:"physics-box-wood-1"});
  Canvas.circle( 14, 5, 2.0, {sprite:"animal-circle-giraffe", angle:0.3});
  Canvas.circle( 17, 5, 1.0, {sprite:"character-circle-red", angle:-0.2});
  Canvas.circle( 17, 5, 1.0, {sprite:"character-face-4", angle:-0.2});
};

</script>
</body>
</html>

Vorschau Download Kopie speichern