CODE PAGE

Interaction and Motion

To interact with objects you apply events using the on("event", function); method where "event" could be click, mouseover, keydown, ready, etc. followed by a function to call when the event happens.

You can drag an object easily in ZIM with object.drag();

Finding out if the object is hitting another object can be done with various hitTests in ZIM like object.hitTestBounds(object2);

We can animate using animate(); for Tween animation or manually animate in a Ticker.add(function); which gives us a repeating function to change properties and animate. Let's look at some code:

// Put this in a template - see https://zimjs.com/code.html

// EVENTS AND TWEEN ANIMATION

const circle = new Circle(50, red)
    .loc(100, 100)
	.cur(); // default "pointer" - any CSS cursor is fine
// or can use
// circle.x = 100;
// circle.y = 100;
// x starts at 0 pixels at the left and gets bigger going right
// y starts at 0 pixels at the top and gets bigger going down

circle.on("click", e => { // e gives us extra information about the event
    // animate the circle to position 200 in .7 seconds
    // apply an ease to the animation so it goes past the position and then back to it
    // circle.animate({x:600}, .7, "backOut"); // simple
    // note e.target would also give us access to circle

    // ANIMATION WITH CALLBACK FUNCTION
    circle.animate({
        props:{x:600},
        time:.7,
        ease:"backOut",
        call:target => {
            target.alpha = 0;
            // animate adds one last S.update()
        }
    });

});

// TICKER ANIMATION

const square = new Rectangle(100,100,green)
    .loc(0, 300);

Ticker.add(animate);
function animate(e) {
    square.x += 2;  // would add 2 pixels to its current position
	// Ticker will update the stage
}

// DRAGGING AND HIT TEST

const triangle = new Triangle(100,100,100,blue)
    .loc(500, 500)
    .drag(); // now can drag and drop triangle

// CreateJS gives us a pressup event
// (or use click which fires on mouseup)

triangle.on("pressup", e => {
    // see if triangle shape is hitting points on the rectangle
    if (triangle.hitTestRect(square, 8)) {
        // rectangle.alpha = 0;
        square.removeFrom();
        S.update(); // do not forget to update the stage
        // (not really needed because Ticker above)
    }
});

// KEYPRESS
// CreateJS does not give us key events
// so ZIM has made them available on the Frame
// otherwise we would have to go to window.addEventListener("keydown", function);
F.on("keydown", e => {
    zog(e.key); // tells us r
    if (e.key == "r") { // R key
        // reset the circle and square back to starting positions
        circle.x = 100;
		circle.alpha = 1;
        square.x = 0;
        square.bot(); // put at bottom
        S.update();
    }
});

Making digital environments in which people cancreate, communicate and play