ZIM Explore! 63. Sprites with multiple Animations! With ZIM - Code Creativity on the Canvas - ZIMjs
Channel: ZIM LEARN
Date: 13/10/2022

Here we explore how to make a Sprite (Butterfly) with multiple animation labels in the same SpriteSheet. We move the sprite around with a MotionController and control speed, scale and backing image based proportionally on the position of the sprite.  See https://zimjs.com/ia for general Sprites and https://zimjs.com/controller/sprite.html for this specific example.

00:00 start ZIM can animate new Sprite() with motionController
00:28 sprites on https://zimjs.com/ia
01:12 butterfly MotionController() on https://zimjs.com/examples
01:20 explaining sorts of MotionControllers in https://zimjs.com/controller
02:47 explaining the code of https://zimjs.com/controller/sprite.html
04:17 a spritesheet.png with columns and rows must be loaded in the Frame code before using it
04:50 coding background picture
05:06 coding new Sprite() with butterfly.png
08:02 difference between example with and without background picture mousedownIncludes: [ image, button, .. array]
09:30 MotionController with "mousemove" is easier
09:49 example with zoom and with moving background picture
11:24 code template F frame S stage W width H height at https://zimjs.com/code
11:40 background picture field.jpg .scaleTo(S) stage
12:00 new Sprite() butterfly.png with animation labels added
12:58 registration point .reg(CENTER, BOTTOM)
14:00 let set direction left and right
14:30 function swap Directions of flying to left or right
19:09 explaining the code via https://zimjs.com/docs.html?item=Sprite with transition code
20:39 mc MotionController is controlling the direction to set left or right
21:37 summary of the swap direction code
26:25 information can be asked at https://forum.zimjs.com and https://zimjs.com/discord
27:10 randomFly() after timeout when user is not moving mouse
29:46 zoom when flying down bigger closer effect, smaller when flying high on the sky to have the effect of far away butterfly
31:12 setting different speed ProportionDamp()
42:15 can can use it for all animations introduced in https://zimjs.com/nio click on EXTRA button to see zoom, speed,..