Spritesheet editor frame(s) disable enhancement

In the sprit of creating the smallest and smartest size (kb/pixel) image sprite. Allow the user to pick and choose what frames to be compiled into a spritesheet before hitting the create button by way of enabling or disabling of frames. Additionally, allow the timeline to pause 2-3 seconds on a specific frame as there isn’t a UI option now, I’d imagine its a scripting endeavor? On that thought, does anyone know a js command to set a pin/action to pause for “x” amount resulting in a pause a play scenario?

Thank you.

The sprite are effectively symbols.

So you can use limited sprite actions to start, pause, go to time, continue.

.

You can pause at a given frame.

This also means you can use some of the symbol API to control a sprite.

A sprite only has one time line; ‘Main Timeline’. ( remember this timeline is within the sprite like a symbols main time line )
You cannot add any other timelines.

If you wanted to control the sprite’s timeline via JS then you would just use similar code you would to control a symbols Main Timeline.

Unfortunately you cannot use custom Math equations on the sprites easing as you do not have access to it. Which means you cannot use a custom Math Equation as a call back

So you would need to use things like

requestAnimationFrame() and/or setTimeout(function()

A basic rough code example.

 var sprite_ =  hypeDocument.getSymbolInstanceById('sp1')	
sprite_.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)

window.globalID;

repeatOften() // run time checking function


function repeatOften() {



 setTimeout(function(){ 
 
var currentTime =  sprite_.currentTimeInTimelineNamed('Main Timeline');
console.log(currentTime);

if (currentTime > 2.95 ){

sprite_.pauseTimelineNamed('Main Timeline')

cancelAnimationFrame(window.globalID);//- Stop checking as we don't need it now

console.log("stopped for 5 seconds")


///--- re start in 5 second
setTimeout(function(){ 
sprite_.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)
}, 5000); //--


//-- last setTime will run in 5 seconds so we can exit this function block for good.
 return
}



window.globalID = requestAnimationFrame(repeatOften);

}, 100); //--> Animation Speed.


}

This all can be done in the UI without code.
If you put the sprite start action on a second scene timeline.

for example.

On a second scene timeline you place a start sprite action.
In the same timeline you add a pause action ( for the scene timeline, you do not need to put the pause on a sprite action, the scene timeline pause will be sufficient to pause the sprite )

On the Main scene timeline you start the second scene time line when you want your sprite to start.
And further along on the Scene’s main timeline you add another timeline action to continue the second timeline.

Timing is key here.

If we want the sprite to start at 4s after the scene’s main time line starts
We put the first action to start the second scene at the 4s mark.

Once the sprite starts we want it to pause after 3s.
So on the second timeline for the scene we put a pause at the 3s mark.

Back on the Scene’s Main timeline at the 12s mark we restart the second scene.

Which restarts the sprite 5s after the pause. ( 4+3 =7) + 5 = 12

Hope that makes sense.


It would be nice to have more actions in the UI. Like call JS/ custom behaviours etc.

5 Likes

Thanks for the feedback, and awesome tutorial @MarkHunte!!!

3 Likes

This is a good workaround I didn’t think about using extra timeline(s). However, think about what I’m asking, pause and play after x amount of seconds. Of course using timelines to achieve will def work but it’s a laborious process which is why I didn’t think of it and the other involves a lengthy injection of code. @jonathan do you think it’s a good idea to bring pause and play with an Input field as an actionable timeline pin? Will a regular user think to use timelines if all he wants to do is pause the timeline and play?:thinking:

1 Like

It sounds like what you really want is to be able to specify the duration of specific frames, including omitting some entirely? I think it is reasonable (after all even GIFs support an “interframe delay”), but probably not very common. Most spritesheets we’ve seen are played through at a consistent rate.

1 Like

Yes, omitting the frames before the creation of a spritesheet. This way you have a visual representation of frames and if any frames that aren’t needed a user can deselect. This would
be ideal in cases where you need to limit the amount of sprite frames if needed as there’s limitation in how big a spritesheet can be. As for the delay, what I meant was if we can pause for an x amount of seconds within the timeline by introducing another selection ‘pause duration‘ possibly with an input field prompt?

Ah, so you meant in the general sense (not specifically related to sprite sheets, though could of course be used on a timeline that runs a spritesheet). We’ve gotten some requests for this over the years, and I have added this feedback to the tracker.

1 Like