ZIM    

Zim ist ein Javascript Framework, welches auf CreateJS, ThreeJS, Physics 2D und vielen weiteren Frameworks aufsetzt.

Mit Zim werden Webseiten mit dem Canvas Element erstellt. Die moderne Alternative zu den Flash-Inhalten aus früheren Zeiten. Es bietet umfangreiche Möglichkeiten Interaktivität, Animation, Physic, 3D, Sound und vieles mehr auf der Website zu integrieren.

Zim lässt sich auch innerhalb von Adobe Aninate nutzen.

Zim bietet umfangreiche Tutorials, Beispiele und Video Tipps. Diese Tipps sind nur eine klitzekleine Ergänzung zu dem umfangreichen Lernmaterial auf der original Zim Webseite.

How to Start

Die einfachste Möglichkeit zu beginnen gehe zu ZIM Code, wähle "COPY" und füge es in eine HTML Seite ein.

Der Einbettungscode ZIM Version 17:

<import zim from "https://zimjs.org/cdn/017/zim">;

Will man weitere Framworks nutzen, wie Physics, Three Js, Pizzazz, findet man alles unter ZIM CDN Beachte, dass du 2 Bezeichner brauchst, wenn du 2 Import Befehle vergibst.

<import zim from "https://zimjs.org/cdn/016/zim_physics">;
<import zim2 from "https://zimjs.org/cdn/016/zim_pizzazz">;                      

ZIM mit Adobe Animate

ZIM mit Adobe Animate findet man unter ZIM Shim mit Video und Download

Editor

Es gibt einen ZIM online Editor. Wenn man fertig ist kann man den Code kopieren.

ZIM History

Man findet Informationen zu den verschiedenen Versionen unter: About / Versions und Devs

Frame

Man startet mit der Definition des Frame

Die Frame Klasse hat einige Parameter für die grundsätzlichen Einstellungen

new Frame( scaling, width, height, canvasColor, bodyColor, readyFunktion, assets, path, sensors);

scaling

Der erste Parameter kann mit FIT, FILL, FULL , "tagId" versehen werden, je nachdem wie groß das Canvas Element dargestellt werden soll. siehe hier

tagId

siehe Beispiel / siehe ZIM Video

Wenn man das Canvas Element zusammen mit anderen HTML Elementen darstellem will, gibt man als ersten Parameter den Klassennamen eines Div Elements an
new Frame("animation",.....)
Im Body fügt man das Div und vergibt diese id. Innerhalb des div wird das Canvas Element vom Script integriert.
<div id="animation></div>
Das canvas Element kann mit CSS versehen werden:
#animation>canvas{}

ready

Der Name einer Funktion, in welcher sämtlicher Code eingebettet ist.

sensors / Progressbar, Eieruhr, Warten-Animation

Hier kann man eine Eieruhr oder eine Fortschrittsanzeige zuweisen. In Zim gibt es dazu den Waiter() und ProgressBar().

const waiter = new Waiter({backgroundColor: blue, corner: 0});

const waiter = new ProgressBar({backgroundColor: blue});

Der Name waiter in diesem Beispiel wird dann als neunter Parameter in new Frame() angegeben.

siehe Beispiel

KONSTANTEN

Es gibt einige Konstanten, die man im Code nutzen kann:

• F (Frame)
• S (Stage)
• W (width)
• H (height)

                var tri = new Triangle(100,100, 100, blue).center();
                var rec = new Rectangle(50, 50, red).pos(100, 100);
                var circ = new Circle(100, violet).pos(10,20,LEFT,BOTTOM);            

var tri = new Triangle(100, 100, 100, blue).center();
tri.reg(CENTER, TOP);

                var button = new Button(200,60,"CLICK");
                button.center();
                button.on("click", function(){zog("clicking");});
              

var label = new Label({
text: "click",
size: 20,
color: "white",
rollColor:"black",
fontOptions: "bold"
});

var button = new Button({
label: label,
width: 70,
height: 35,
backgroundColor: "purple",
rollBackgroundColor:"MediumOrchid",
borderWidth: 3,
borderColor: "violet",
corner: 15
});
              

var button1 = new Button(100, 50, "Click").center;
var button2 = button1.duplicate();
button2.pos(100, 20, RIGHT, BOTTOM);
button2.label.text = "hallo";

button2.on("click", function() {
zog("button2 angeklickt");
});
              

Assets

Assets sind Bilder oder Sounds, welche vorausgeladen werden, um sie dann in Canvas Element integrieren zu können.

In der Konstruktormethode der Frame Klasse, kann man die Werte für das Vorausladen der Elemente einfügen. Die Parameter der Frame Konstruktormethode sind:

Nun erzeugt man ein Array für die assets und eine Url für den Pfad und gibt beides dann in dern Frame Funktion ein.

const assets = [ { id: 'robo', src: 'spaceguy.png' }, { id: 'roboJs', src: 'spaceguy.json' } ];
const path = "../spriteSheet/assets/";
new Frame( FIT, 1024, 768, black, darker, ready, assets, path );

Dann kann man ein Bild mittels der Klasse Pic oder Sprite einfügen.

var robbi = new Pic( "robo" ).centerReg();

Es reicht auch, nur die Namen der Dateien einzugeben.

const assets = ['spaceguy.png', 'spaceguy.json', 'bum.mp3']

Sprite

siehe ZIM Sprite / siehe Video Dr Abstract /

Ein Sprite ist ein Bild welches aus vielen Einzelbildern besteht, die in Reihen und Spalten aufgeteilt sind. Diese Einzelbilder kann man als Animation abspielen, oder man zeigt nur eins der Einzelbilder an, beispielsweise das Bild eines Kartenspiels oder Memory-Spiels.

Spritesheets kann man erstellen mit Texture Packer, Adobe Animate oder Sprite Sheet Packer

const robbi = new Sprite( {
image: "robo",
cols: 6,
rows: 5,
animations: { mid: [ "0", "10" ], end: [ "20", "30" ] }
} )
.pos( -200, 0, LEFT, BOTTOM )
.run( { time: 1.4, loop: true, label:"mid" } )
.animate( {
props: { x: W },//W Breite der Bühne
time: 6,
ease: "linear",
loop: true,
loopWait: 1 //am Ende des loops Wartezeit 1 Sekunde
} );
            

Die Parameter der Sprite() Funktion sind Bildname aus dem Asset, Spalten und Reihen. Der Parameter animations, bietet die Möglichkeit einen Teilbereich für eine Animation zu bestimmen. Hierbei gibt man Startframe und Endframe, des Animationsausschnitt an und weist sie einem selbstvergebenen Labelnamen zu. mid:["13","20"]

In der run Methode kann man diesen Namen unter label angeben:

.run({time: 2, label:"mid", loop:true})

Beachte das funktioniert nur ohne Json.

Json

So ein Spritesheet kann auch eine Json Datei haben, mit Informationen über die Spalten und Reihen, Labels, Geschwindigkeit.
Eine solche Json-Datei kann man in den Assets einfügen, {id: 'lampJs', scr:lampi.json} und sie dann in der Konstruktorfunktion des Spritesheets zuweisen. Auf rows und cols kann man dann verzichten.

const lamp = new Sprite({
              image: "lampi",
              json: 'lampJson',
              }).run({loop:true});

Möchte man nur einen Teilbereich animieren wie oben erklärt, gibt man diesen Teilbereich in der Json Datei ein. siehe diese Json-Datei unten. siehe dieses Beispiel

Je nach Art des Json-Formats kommt dieser Bereich an eine bestimmte Position. Siehe dazu dieses Video

              "animations": {
              "walk": [0, 16],
              "cry": [17, 24]
              }
            

Beispiel

Dynamo

ZIM Doc / Beispiel / Beispiel2

Die Klasse Dynamo bietet eine Alternative zur run() Methode eines Sprites. Man kann damit definieren, welche Frames, wie schnell abgespielt werden.

reversible: false bedeutet, dass bei negativem speed, das Objekt gespiegelt wird.

In folgendem Beispiel bestimmt die Mausposition die Abspielgeschwindigkeit. Sie wird der Dynamo-Eigenschaft percentSpeed zugewiesen. Alternativ gibt es auch die Methode speed das bedeutet frames pro Sekunde.

const glump = new Sprite( {
image: "glump",
json: "glumpJs"
} ).sca( -1, 1 ).centerReg();

const dynamo = new Dynamo( { sprite: glump, speed: 30, label: "walk", reversible: false } );
Ticker.add( () =>
{
dynamo.percentSpeed = ( ( F.mouseX - W / 2 ) / ( W / 2 ) * 200 );
} );

Die Dynamo Methode pause(), pausiert den Dynamo, mit pause(false) kann man die Pause beenden. Im Beispiel2 gibt es auf Pfeiltaste nach oben eine Pause von 1 Sekunde. Während der dynamo pausiert wird, wird die run() Methode des sprites aufgerufen. Dort kann man mit call eine Callback Methode zuweisen, die aufgerufen wird, wenn die run() Methode beendet ist. Eine coole Möglichkeit eine andere Sequenz des Sprites abzuspielen, beispielsweise einen Sprung, einen Schrei oder Schussbewegung.

F.on( "keydown", e =>
{
if ( e.keyCode == 38 )
{
glump.impulse( 0, 400 );
dynamo.pause( true );
glump.run(
{
label: "cry",
time: 1.5,
loop: false,
call: () => { dynamo.pause( false ) }
}
);
}
            

Keyboard / Tastenanschlag

Folgendermaßen kann man auf die Tastatur zugreifen. F ist die Konstante für frame und diese hat den Event keydown. Über den Event-Parameter wird über key ein String der Taste geliefert und über keyCode, der Keycode. Die Eventeigenschaften altKey, ctrlKey, metaKey liefern den boolschen Wert true, wenn sie zusätzlich gedrückt wurden.

              F.on( "keydown", e =>
              {
              zog( e.key );
              zog( e.keyCode );
              zog( F.altKey );

              } );

Scroller

ZIM Doc / Beispiel 1 / Beispiel2

Im Beispiel 1 wird ein Tile erstellt und dieses als Scroller verwendet. Das Tile wird mit einer definierten Geschwindigkeit gescrollt. Der Parameter gapFix definiert einen Überlappungswert am Übergang, wo Ende und Anfang aneinander stoßen.

const rect =  new Rectangle( {
width:30,
height:30,
color:dark,
corner:30}
const background = new Tile(rect), 40, 7, 5, 5).alp(.3).center();

const scrolli = new Scroller( { backing: background, speed: 1.5, gapFix: -5 } );

MotionController

ZIM Doc / Zim Beispiel / Zim Video

Will man Objekte per mousedown, mousemov e, keydown, gamebutton, gamestick, swipe bewegen, setzt man die Klasse MotionController ein.

Beispiel keydown / Beispiel mousedown & mousemove

keydown

Beispiel keydown siehe Developer

Als ich damals mit Flash programmierte, habe ich festgestellt, dass Bewegungssteuerung mit Tastatur nicht einfach ist. In ZIM wurden diese Probleme sehr gut gelöst.

Man erzeugt ein Objekt und weist dieses dem Motioncontroller mittels target Parameter zu. Welche Taste gedrückt wird, definiert man mittels map Parameter. Vergibt man den Map Parameter nicht, sind es die Standardtasten: Pfeilstasten, ADWS.

Im map Parameter gibt man ein Array mit Keycodes ein. [links, rechts,oben, unten] Will man für eine Richtung 2 oder mehr Tasten bestimmen, wird auch das mittels Arrayschreibweise eingegeben [45, 56]. Im Beispiel finden wir den Keycode für die Tasten ADWS und zusätzlich die Pfeiltasten Zum Beispiel die Taste für linke Richtung ist [65, 37] 65=A , 37 = linkePfeiltaste. Wie oben erwähnt müssen diese Standardtasten nicht eingeben werden.

  const controller = new MotionController( {
  target: car,
  type: "keydown",
  diagonal: true,
  damp: .2, //Dämpfung bei der Drehung
  rotate: true,
  map: [ [ 65, 37 ], [ 68, 39 ], [ 87, 38 ], [ 83, 40 ] ],
  speed: 10
  } );
            

firstPerson

Der Parameter firstPerson:true erzeugt eine andere Art von Steuerung, bei der die links und rechts Taste für die Drehung zuständig ist, die vertikalen Tasten für die Bewegung.

Siehe Beispiel nutze Pfeiltasten

boundary

In dem Beispiel wurde auch der Parameter boundary genutzt. Die Bewegung findet nur innerhalb dieser Begrenzung statt. Beachte im Beispiel wie cool sich das Objekt an der Grenze verhält.

boundary: new Boundary(x,y,width, height)

Es folgt ein Script, welches key (String) und keyCode (numerisch) in der Konsole anzeigt. zog() ist die Zimschreibweise für console.log()

              F.on( "keydown", e =>
              {
              zog( e.key ) // a string
              zog( e.keyCode ) // the numeric code
              zog( F.altKey ) // true if alt is pressed - also: ctrlKey, metaKey,
              } );

mousedown

mousedown ist der Standard type. Es funktioniert nur, wenn man direkt auf die Bühne klickt und nicht auf Objekten, die sich auf der Bühne befinden. Die Objekte, die auch auf mousedown reagieren sollen fügt man unter mousedownIncludes in einem Array ein. Nehmen wir an in folgendem Beispiel gibt es ein Hintergrundbild namens backing.

              const controlli = new MotionController(
              {
              target: rect,
              type: "mousedown",
              speed: 5,
              damp: .5,
              rotate: true,
              diagonal: true,
              mousedownIncludes:[backing]
              }
              );

mousemove

              const controller = new MotionController( {
              target: circle,
              type: "mousemove",
              speed: 10
              } );

Accelerator

ZIM Doc / Beispiel

Ein Accelerator ist ein Beschleuniger mit dem man die Geschwindigkeit mehrerer Animationen steuern kann.

Man erzeugt einen Accelerator und weist diesem gleich in der Konstruktorfunktion oder über add() mehrere Animationen zu, beispielsweise Scroller oder Dynamo

const accelerator = new Accelerator().add( [ scro1, scro2, scro3 ] );

const accelerator = new Accelerator([ scro1, scro2, scro3 ] );

Über einen MotionController kann man eine Geschwindigkeit anhand der Mausbewegung, Mausposition, Tastaturbefehl etc. definieren. Als target wird der Accelerator angegeben. So werden die Geschwindigkeiten prozentual verändert.

const scro1 = new Scroller( new Pic( "fensterBack.jpg" ).centerReg(), 1 );
const scro2 = new Scroller( new Pic( "schaltBack.jpg" ).centerReg(), 2 );
const scro3 = new Scroller( new Pic( "foreground.png" ).centerReg(), 3 );

const accelerator = new Accelerator( [ scro1, scro2, scro3 ] );

const mc = new MotionController( {
target: accelerator,
type: "mousemove",
axis: "horizontal",
speed: 100,
minPercentSpeed: -200,
maxPercentSpeed: 200
} );
            

Beispiel Scroller / Beispiel Animate

Animate

siehe ZIM Video / ZIM Doc

Es gibt in ZIM eine komfortable Animation, mit der man die Eigenschaften von Objekten animieren kann.

siehe Beispiel

const circle = new Circle(100, pink).center().drag();
circle.animate({
props:{scale:2, x:"-200"},
time:2,  
loop:true,
rewind:true});

Es gibt mehrere Parameter:

time: 2.5 definiert die Länge der Animation mit einer Fließkommazahl in Sekunden.

Unter props ist ein Animationobjekt für die Eigenschaften. Siehe im Beispiel x:"-200" Der Wert in Anführungstrichen definiert einen relativen Wert zur Position. Ohne Anführungsstriche ist ein absoluter Wert.

Im obigen Beispiel wird die Größe geändert, durch rewind:true, ändert sich die Größe vor und zurück.
rewindWait:2 erzeugt vor jedem Richtungswechsel eine Wartezeit von 2 Sekunden.

rewindCall: meineFunktion ruft eine Funktion nach dem Richtungswechsel auf. Hat man einen rewindWait angegeben, wird die Funktion nach der Wartezeit aufgerufen.
rewindWaitCall: meineFunktion ruft die Funktion vor der Wartezeit auf.

loop:true erzeugt eine Dauerschleife, setzt man zusätzlich loopCount:2 ein, gibt es nur 2 Schleifen.
loopWait: 2 erzeugt nach jeder Schleife eine Wartezeit von 2 Sekunden.

call: () => { zog( "Animtaion beendet" ); }

Mittels call: kann man eine Funktion am Ende der Animation aufrufen. In diesem Beispiel wird eine Ausgabe in der Konsole. Hat man eine Funktion erzeugt, kann man einen Verweis setzten.
call: meineFunktion

ease:backOut Es gibt viele Arten Beschleunigungen auch easing genannt. Standard ist "quadInOut"
"bounceOut", "elasticIn", "backInOut", "linear", "snapIn", "snapOut", "snapInOut", "ballisticIn", "ballisticOut", "ballisticInOut", "slowmoIn", "slowmoOut", "slowmoInOut"
Unter ZIM Ease hat man sogar die Möglichkeit eigene Easings mittels Editor zu erstellen.

Die drag() Methode stoppt die Animation automatisch. Dieses kann man folgendermaßen verhindern:

drag({removeTweens:false})

Animation per Mausklick stoppen und starten

Wir haben ein Objekt circle mit einer Animation.

S.on( "stagemousedown", () =>
                {
                    circle.pauseAnimate( !circle.paused );
                } );

Der boolsche Wert der Eigenschaft paused, wird bei jedem Klick umgekehrt.

Mehrere Geschwindigkeiten synchronisieren

Mit dem Accelerator und MotionControl kann man die Animationen mehrerer Animationen synchronisieren. Der MotionController bietet die Möglichkeit eine prozentuale Geschwindigkeit zu definieren. Dazu muss in der Animation der Parameter dynamic:true gesetzt sein.

Siehe Beispiel

sequence

Im nächsten Beispiel Tile wird der Parameter sequence der Animaion eingesetzt. Dadurch werden alle Objekte eines Tile Objekts oder Arrays nacheinander animiert.

Siehe Beispiel

Tile

ZIM Video / ZIM Doc

Mit der Tile Klasse kann man Objekte kacheln. Die ersten Parameter der Konstruktorfunktion sind:
new Tile(Objekt, Spalten, Reihen, horz Abstand, vert Abstand)

const circle = new Circle( 40, pink ).centerReg();
const tile = new Tile(circle,8,5).center();

Weist man einem Tile eine Animation zu, so wirkt sich das auf das komplette Tile aus. Der Animation Parameter sequence: 1 mit einem Zeitwert in Sekunden, weist die Animation jedem einzelnen Kindobjekt nacheinander zu. Der Zeitwert bestimmt den Zeitraum zum Start der Animation des nächsten Objekts.

Beispiel

const tile = new Tile( circle, 8, 5 ).centerReg().animate( {
                props: { scale: .5 },
                time: 1,
                sequence: .2
            } );

Tile.drag()

Die drag() Methode dem Tile zugewiesen, bewirkt, dass jedes Kindobjekt verschoben wird. Will man das ganze Tile verschieben, setzt man folgenden Parameter:
drag({currentTarget:true});

Tile.loop()

ZIM Video

Man kann in einem Container, Array, Object oder Tile loopen.

tile.loop(function(){})

Die Parameter in der Funktion:
Der erste Parameter definiert in einem Container wie Tile die einzelnen Kindobjekte. Beim Array sind es die Arrayelemente, der nächste der Index. Bei Objektliteralen ist der erste Parameter die Eigenschaft, der nächste der Wert.

Der zweite Paramter ist bei Containern und Array eine durchlaufende Nummerierung oder Index.

Der dritte Parameter auf true, bewirkt einen Rückwärts-Loop.

Beispiel

const circle = new Circle( 40, pink ).centerReg();
const tile = new Tile( circle, 8, 5 ).centerReg();

tile.loop( function ( circ, i )
{
    circ.radius = i * 1.5;
    circ.color = colorRange( "#ffff00", "#00ffff", i / ( tile.cols * tile.rows ) );
} )

Man beachte auch die tolle Funktion colorRange() . Sie erwartet 2 Farben und erzeugt alle möglichen Farben die dazwischen liegen. An welcher Stelle, wird über den dritten Parameter festgelegt mit einer Zahl von 0 bis 1. Dabei ist .5 die Farbe genau inder Mitte. In diesem Beispiel wird der Index durch die Anzahl der Kindelemente geteilt, um von 0 bis 1 vom ersten bis zum letzten zu gelangen.

Physics

ZIM Video / ZIM Docs

alle Beispiele Physics

siehe Beispiel 1 / siehe Beispiel 2 / Beispiel 3 / Beispiel 4 / Beispiel 5 / Beispiel Billard

Zim setzt auf die Box 2D Physic Engine auf und erleichtert den Umgang und Einstieg damit. Nutze den Einbettungscode: <import zim from "https://zimjs.org/cdn/016/zim_physics">;

Außerdem gibt es die Methode addPhysics(), welche man Displayobjekten zuweisen kann. Die Objekte sollten den Registierpunkt in der Mitte haben centerReg() sich auf der Bühne oder in einem nicht transformierten Container in 0,0 befinden.

 new Circle().centerReg().addPhysics();

siehe Beispiel 1

new Physics()

ZIM Doc

Die Physics Klasse, ist ein Wrapper für die Box2D engine. Hier kann man generelle Einstellungen vornehmen.

Der erste Parameter Schwerkraft ist standardmäßig 10. Setzt sie auf 0 ergibt das keine Schwerkraft, Vogelperspektive, wie beim Billard.
new Physics(0)
Der zweite Paramter erwartet ein Objekt der Boundary Klasse new Boundary(x,y,width, height)
siehe auch boundary für Jump

siehe Beispiel 2

Hängt man an die Physics Klasse .drag() werden alle Objekte verschiebbar . Es ist eine ander Art von drag() als üblich. new Physics().drag();

new Physics().debug() zeigt Anfasser und Physic Objektausmaße.

addPhysics()

Alle Objekte, die pyhsikalische Eigenschaften bekommen sollen, werden mit addPhysics() versehen. Hier gibt es einige Parameter.

Der erste Parameter dynamic: true bewirkt auf false gesetzt, dass das Objekt zwar pyhsikalisch ist, aber statisch fest verankert ohne Drehung und und Bewegung.

Parameter linear : 5 bewirkt eine Dämpfung der Bewegung. friction:8 ist Reibung, diese wirkt nicht bei rollendem Circle. bounciness:0 ist Abprall. Ist derWert über 1, ist der Abprall größer als der Aufprall. angular: 5 ist die Dämpfung der Drehbewegung.

.follow() wird eingesetzt wenn die boundary der Physic größer als das Fenster ist und die Ansicht dem Objekt folgen soll.

siehe Beispiel 2 / Beispiel 3 / Beispiel 4

Es gibt Methoden wie force(), impulse() spin() um die Objekte zu bewegen. Es ist keine Bewegung im eigentlichen Sinne, sondern es sind Kräfte die auf ein Objekt einwirken.

Beispiel Billard

control Steuerung per Tastatur

siehe Beispiel 5

Durch die Methode .control() kann man ein Objekt per Pfeiltasten nach links und rechts bewegen. Der Parameter speed:50 definiert die Geschwindigkeit.
rad.control({speed:50});

Die Tastatur funktioniert jedoch nur, wenn sie mit der Maus angeklickt wurde. deswegen wird ein Pane erzeugt, welches in der show() Funktion die control() Methode zuweist. Die show() Funktion blendet das Pane aus.

new Pane( "Start", black, yellow, W ).show( () =>
        {
            rad.control( { speed: 80 } )
        } );

Jump

siehe Beispiel 5

Das Springen ist etwas kompliziert. Generell wird ein impulse() vertical gesetzt. Das soll aber nur geschehen, wenn das Objekt ein anderes Objekt berührt. So wird verhindert dass der Befehll ständig wiederholg wird. Daher wird eine Variable beispielsweise ground angehängt, welche durch die Methode contact auf true gesetzt wird. contact() wird aufgerufen, wenn eine Berührung stattfindet. Beim Sprung wird ground auf false gesetzt. Der Sprung wird durch die Leertaste, W-Taste, Arrowup Taste ausgelöst

 rad.contact( obj =>
    { 
        rad.ground = true;
    } );

    const down = F.on( "keydown", e =>
    {
        if ( rad.ground && ( e.key == "ArrowUp" || e.key == "w" || e.key == " " ) )
        {
            rad.ground = false;
            rad.impulse( 0, -300 );
        }
    } );

boundary Deckenhöhe verdoppeln

Beachte im Quelltext des Beispiels, dass die boundary geändert wurde. Die Höhe ist nun 2 mal so hoch wie die Bühne H*2 und die vertikale Position ist -H also unten anstatt oben. Dadurch wird die boundary nach oben höher, so dass das rad nicht an die Decke stoßen kann.

new Boundary( 0, -H, 5300, H*2 )

contact()

Mittels contact() kann man ermitteln, ob und welches Objekt berührt wurde. Der Parameter einer Callback Funktion definiert das berührte Objekt.

ball.contact(  obj =>
{
    var colorNow = obj.color;
    obj.color = black;
    timeout( .3, () =>
    {
        obj.color = colorNow;
    } );
}  );

Im Beispiel wird das Objekt, welches von Objekt ball berührt wurde schwarz eingefärbt und nach einer drittel Sekunde wieder auf die ursprüngliche Farbe gesetzt. Das Problem ist nur, wenn das Objekt nochmal berührt wird, bevor es wieder seine ursprüngliche Farbe bekommen hat, bleibt es schwarz, weil die colorNow bei Berührung schwarz ist. Daher ist folgende Lösung besser:

Billard

ball.contact( ( obj ) =>
    {
        if ( obj.color != black )
        {
            var aktColor = obj.color;
            obj.color = black;
            timeout( 0.3, () =>
            {
                obj.color = aktColor;
            } );
        };
    } );