How to easily get a Sprite Animation on the HTML 5 Canvas and Make it Interactive
We have an info page at https://zimjs.com/ia (for interactive animation) to easily get a Sprite onto an HTML Page and make it interactive using the ZIM JavaScript Canvas Framework. Here is the interactive example that makes the sprite and the scene follow your mouse or finger https://zimjs.com/ia/interactive.html. SpriteSheets can be made using TexturePacker at https://www.codeandweb.com/free-sprit...
00:00 start at https://zimjs.com/ia
02:19 example of running girl with free texturepacker
03:32 learn coding on https://zimjs.com/learn
04:59 template code from https://zimjs.com/code loading assets with path
08:10 the girl running code new Sprite({json:spritesheet.json})
09:29 download ZIP file examples from https://zimjs.com/ia
12:55 drabstract.json spritesheet Texturepacker Pro code
14:15 install 2 packages in Atom.io
16:25 canvas code in html div code with CSS layout explaining
21:21 ZIP example interactive shooting
24:57 interactive example with progress waiter on https://zimjs.com/ia
27:27 interactive example sprite code
29:18 flip with new Dynamo()
30:34 walking slow and fast new Accelerator()
30:58 background pictures with new Scroller()
33:55 controlling with new MotionController()
36:07 mouse position x for starting walk fast or slow
37:42 start coding shooting
43:44 label credits animating in at start
45:59 toggle backing sound on/off
46:25 support at https://forum.zimjs.com now
47:35 summary what you can learn at https://zimjs.com
48:28 motionController possibilities at https://zimjs.com/controller
48:25 ZIM VR example with parallax and real VR at https://zimjs.com/015
ZIM is a JavaScript Canvas Framework at https://zimjs.com to code creativity!