Скачать или смотреть ZIM Explore! 87. Sprites for Kids - without Scratch!

Here we show how kids can access Sprite animations in JavaScript when they have moved on from Scratch - or even as an alternative to Scratch. We code in the ZIM Kids editor called Slate. https://kids.zimjs.org . Please let Educators or your kids know. Cheers.

00:00 start intro https://zimjs.com/ia to make https://zimjs.com/controller/sprite.html
00:23 how do kids can make new Sprite() like scratch.mit.edu
00:44 Dr Abstract sprite example made in TexturePacker with animation.json file
01:40 difficult example with backgrounds
02:15 finding ZIM KIDS via GOLD - KIDS
02:29 information about KIDS coding examples https://zimjs.com/kids
03:38 start coding new Sprite() in SLATE https://zimjs.com/kids/slate
04:00 difference with teachers https://zimjs.com/editor to save files for free
04:15 ZIM KIDS assets background
04:42 selecting butterfly.png 10x4 sprite ( with 10 columns and 4 rows) also at    • ZIM Explore! 63. Sprites with multiple Ani...  
05:15 code for the backing with scaleTo().center()
06:00 code for the sprite butterfly
06:55 how the butterfly.png looks like 10x4 [10cols × 4rows]
07:55 sprite() code settings with registration point with centerReg() or center().reg(CENTER)
08:55 run() to loop the sprite animation in time:2 seconds
09:10 .sca() for scaling the sprite
09:28 sprite following the mouse position
09:33 by .drag() dragging the butterfly
09:55 select the transparent area around also with .expand()
10:20 we can .animate() or .wiggle() the butterfly
10:34 adding sprite to new MotionController()
11:38 without backing picture it works to click on stage to move
11:55 with backing picture set .noMouse()
12:26 setting MotionController({ignore:[image,button]})
12:40 setting MotionController(butterfly, "mousemove")
13:02 changing registration point back to .center() or .reg(LEFT, TOP)
13:31 visual registration point with .outline()
13:50 same possibility .centerReg() and .reg(CENTER) or setting .reg(CENTER, BOTTOM)
14:54 ZAPP DEMO list examples
15:07 ZAPP Emitter following MotionController https://zimjs.com/zapp/Z_UEM2Y
15:20 ZAPP Butterfly sprite animating with zoom in/out https://zimjs.com/zapp/Z_S2ZAB becoming smaller at the top as https://zimjs.com/controller
17:57 Try it yourself to make monkey sprite 4x4 at button assets [HELP] number 7.
18:02 going from ZIM KIDS to ZIM NIO examples https://zimjs.com/nio extra settings
19:19 all kinds of sprites examples at https://zimjs.com/examples
20:20 more advanced example at https://zimjs.com/ia explained in https://zimjs.com/FIVE minutes video    • Code in FIVE Minutes with ZIM (06 - Sprite...  
22:44 help kids coding from Scratch sprites to ZIM sprites in JavaScript easy free open source.