accessing an image from a spritesheet by name?

[mspanish]

Hey this is the most awesome library for making kids apps in JS that I think EXISTS!!! Thank you!!!

I made a TexturePacker json/image spritesheet and threw the json into a JS file as an object so I could reference it easier - I have the letters of the alphabet laid out, just static for now. I wanted to pack a few other spritesheets with misc images and figure this should be pretty easy - I must be missing something! My data is here:

`var alphabetRegularResolution = { "images": [ "alphabet-0.png" ], "frames": [ [1, 1, 240, 241, 0, -5, -5], [243, 1, 240, 240, 0, -5, -5], [485, 1, 240, 240, 0, -5, -5], [727, 1, 240, 241, 0, -5, -5], [1, 244, 240, 240, 0, -5, -4], [243, 244, 240, 241, 0, -5, -5], [485, 244, 240, 241, 0, -5, -5], [727, 244, 240, 241, 0, -5, -5], [1, 487, 240, 241, 0, -5, -5], [243, 487, 240, 241, 0, -5, -5], [485, 487, 240, 241, 0, -5, -5], [727, 487, 240, 241, 0, -5, -5], [1, 730, 240, 241, 0, -5, -5], [243, 730, 240, 241, 0, -5, -5], [485, 730, 240, 241, 0, -5, -5], [727, 730, 240, 241, 0, -5, -5], [1, 973, 240, 241, 0, -5, -5], [243, 973, 240, 241, 0, -5, -5], [485, 973, 240, 241, 0, -5, -5], [727, 973, 240, 241, 0, -5, -5], [1, 1216, 240, 241, 0, -5, -5], [243, 1216, 240, 241, 0, -5, -5], [485, 1216, 240, 241, 0, -5, -5], [727, 1216, 240, 241, 0, -5, -5], [1, 1459, 240, 241, 0, -5, -5] ], "animations": { "a": { "frames": [0] }, "b": { "frames": [1] }, "c": { "frames": [2] }, "d": { "frames": [3] }, "e": { "frames": [4] }, "f": { "frames": [5] }, "g": { "frames": [6] }, "h": { "frames": [7] }, "i": { "frames": [8] }, "j": { "frames": [9] }, "k": { "frames": [10] }, "l": { "frames": [11] }, "m": { "frames": [12] }, "n": { "frames": [13] }, "o": { "frames": [14] }, "p": { "frames": [15] }, "q": { "frames": [16] }, "r": { "frames": [17] }, "s": { "frames": [18] }, "t": { "frames": [19] }, "u": { "frames": [20] }, "v": { "frames": [21] }, "w": { "frames": [22] }, "x": { "frames": [23] }, "z": { "frames": [24] } },

"texturepacker": [ "SmartUpdateHash: $TexturePacker:SmartUpdate:79a38008ef9a27f6aaab4db36f052401:f6383cfc6f9d22762e8601b5a194da83:615a9b210f7a1e092bb53bb63749870a$", "Created with TexturePacker (https://www.codeandweb.com/texturepacker) for EaselJS" ]

}`

And I'm trying this to load it:

frame.loadAssets(["alphabet-0.png", "bg.png"], "sprites/"); frame.on("complete", function() { waiter.hide(); frame.asset("bg.png").addTo(stage); var animation = new zim.Sprite({json:alphabetRegularResolution}); zog(animation); })

Can you see what I need to do to access just the 'a'? I tried

var animation = new zim.Sprite({json:alphabetRegularResolution}, 'a');

But this is a no go in Zim. I tried using some createJS methods but couldn't get anything to show up on the stage.

Seems this must be here and I just missed how to do it! Thanks for this library - I am making a kids app for learning to read visually, for autistic and other kids who have trouble with phonics, and this is exactly the kind of thing to make the app shine.

[mspanish]

I am getting single images loaded, but the index isn't correct - I am trying this:

var sprite = new zim.Sprite({json:frame.asset("alphabet.json")}); var theFrame = sprite.animations.g.frames; sprite .center(stage) .gotoAndStop(theFrame)

[mspanish]

Silly mistake - the animations.frames is an Array, and since these are static there is just 1 reference - so I needed to have

var theFrame = sprite.animations.r.frames[0];

Now they are loading perfectly into my awesome Zim engine!!! :) thanks again.

[danzen]

Good. If you have labels for each frame as you do, you can do the following: var sprite = new zim.Sprite({json:frame.asset("alphabet.json")}); sprite.gotoAndStop("q"); // or whatever OR sprite.gotoAndStop(16); OR sprite.run({label:"q"}); AS OF zim_4.7.0 I would recommend using run for any actual sprite animations - to show a single frame, gotoAndStop is fine ;-). But to actually play multiple frames - check out the run() functionality in the docs and in the example here: http://zimjs.com/code/spritesheet/skateboard.html Thanks for the comments on ZIM - it is nice to hear. I would be interested in seeing what you make!

[mspanish]

Hello and thanks so much!

One problem I'm having is with a buttery smooth drag and drop. My 4 year old daughter has autism, and has grown to love her Kindle apps which mostly use drag and dropping of letters and objects to complete activities. I'm amazed as how "ios-esque" the dragging and dropping in Android has become! I've looked high and low for examples of really great dragging - and this one is the best:

http://fabianirsara.com/2014/09/30/multitouch-gesture-transformations-with-easeljs/

do you have anything in Zim that would allow for this kind of awesome smooth dragging and dropping? The zoom and rotate is cool but not necessary, but really good dragging with velocity and snapping is pretty much going to be the centerpiece of the child's interaction with my app.

Sorry so off topic if you want I'll repost as a new question!

[danzen]

Zim has a pretty extensive drag method - like circle.drag() with a dozen parameters or so: http://zimjs.com/code/docs.html?view=drag -- Set the slide parameter to true and then play around with the slideDamp and see if it is as good as you need. If you need better, I can revisit it and see if there are any improvements to be made. Here is a ZIM Bit on dragging with sliding: http://zimjs.com/code/bits/view/slide.html and here is a ZIM Bit on snapping: http://zimjs.com/code/bits/view/snapping.html. At some point, we might look into multitouch gestures pinching for scaling and rotating, etc. I have done that before in Flash. The Dan Zen site uses a drag slide: http://danzen.com and the Museum steps are kind of cool - but that was custom just before ZIM. http://danzen.com/museum.html

[mspanish]

Thanks very much, I'll check that stuff out. The solution above uses createjs so I may be able to just use that in my project too. I'm working on finding a good particles system today, that is proving a bit tricky as the ones I've found for createJS either don't have enough good online builders or don't have an emitter lifetime variable- I need both looping particles like bubbles in the ocean,and also 1 offs that last maybe 2 seconds when the child clicks or achieves something. I've decided to build my tech stack around the 3 or 4 core features that I need, rather than the other way around. I do miss the days of Flash as you could do anything with Flash, it was just a matter of finding a cool sample!

[danzen]

You have me intrigued - I want to make a particle emitter now! That and another project needs an emitter - I am checking things out...

[mspanish]

Yeah particle emitters are very cool! But every one I've implemented so far has some catch. Mostly they are abandoned, no commits in months or years - and none so far has been perfect. I'll let you know if I find one that has it all for createJS, which I'm now pretty much committed to, after a few days of messing with Unity (agghh) and Corona (nice, but so few good samples for what I need, plus the whole Lua thing!).

Lua would still be better than C# though. I have an irrational hatred of C# - can't really get past it :) So I'm going all in with JS now, even though this is an app that is mainly intended for the app stores and not the browser.

[danzen]

That's good news on the JS front then. Please keep talking - we would like to turn ZIM into the most friendly general purpose Canvas Framework. Did you have a look at zim.drag() and have any questions. If you need a hand with anything let me know. I pay most attention to https://www.facebook.com/groups/createjs/

[danzen]

Hey Stacey - I was just going to open an issue for the the particle emitter. Would you do it? So I don't keep on opening my own issues ;-). Thanks - I would love to get to it... just a few more things first.

[probt]

I just discovered Zim, and I agree that it is a fantastic canvas JS library. In regards to PE's, I'd suggest taking a look at Proton; very configurable, and lots of options in regards to rendering and emitter types.

[danzen]

Thanks Paul. Would you suggest just making sure it works in / with ZIM or creating a similar version in ZIM? I have not had any experience with PE's aside from just naturally coding a few similar type things. I glanced at one and do see that there are many many configurations, etc. Looks like fun to code but seeking advice on if I should even bother... Proton does look very good. I need to learn more about the StageGL that CreateJS has. I think - maybe I should try Proton out and see how well it works in the ZIM environment.

[danzen]

Hi folks - just launched a Particle Emitter with ZIM 5. You can try out some examples and see code here: http://zimjs.com/code/particles/ I want to do some examples on StageGL which is CreateJS's WebGL renderer. But still cool things on the Canvas renderer! Thanks for the prompting - let us know how it works.

[mspanish]

hey awesome! Thanks Dan!

[danzen]

Hey Stacey - or any others here interested in ZIM - please come on by the Slack Group https://join.slack.com/t/zimjs/shared_invite/MjMwNDM0MDkzOTg1LTE1MDM1NDIxNDktNGRlMzBjMjRiYQ

Not sure if you have been keeping up with ZIM – but lots of updates over the summer – see the 30 or so Bubbling videos and there is a new site – we are on ZIM Six now!

Dan

[mspanish]

Thanks Dan - I'll check it out, have not kept up but will check it out as I admire your work greatly - thanks!

[danzen]

The invite to the Slack Team is now at http://zimjs.com/code/slack/ all the best, Stacey - hope to hear from you one day with a project in ZIM ;-)

[karelrosseel]

hi @mspanish I'm new in Zim.. can you tell me how to make a sprite animted .. and do you have your animated alphatic things for your child still.. I'm also teacher and want to make things..