Using Sprite Sheets for Animations


#1

Instead of uploading multiple, sometimes numerous, images to make an animation it’s possible to use a single image (called a sprite sheet)

This is an example sprite sheet of an explosion.

Hopscotch doesn’t allow the use of a sprite sheet in the typical way, but for some use cases we can still use the concept. We can cover all but one of the images and then reposition the sprite sheet (changing the visible image) to create the animation.

Here is a very simple demonstration project:

Now, before I get replies saying “There’s no need for this. Just use the Set Image block!”… Yes, of course, that’s an easier option. However, sometimes to improve performance we have to sacrifice simplicity for complexity. Not all projects using images for animation would even need to consider this but…

@awesomeonion, if a project had many animations with numerous frames each, would you be able to offer some input as to whether or not this technique would yield an improvement of some manner for use with Hopscotch? Perhaps with memory allocation verses individual images? What benefits might the end user see? E.g. Faster loading? Would there be less load on the renderer, potentially increasing (or not reducing as much) the project’s FPS?


#2

Ooh that’s cool me wil try


#3

Although there’s problem. I can’t do it because I can’t post images but I Guess I can use text art


#4

OOP look what I found!


#5

That’s true. A sprite sheet is mostly applicable for users with the subscription, but using a Text with emojis or Unicode characters is a great idea to play with the concept. :smiley:


#6

I think your a really good hopscotcher


#7

Thank you, that’s very kind. For what it’s worth, I’m also an adult. I like to inspire my kids (teach by example) and hopefully others here too. Besides, Hopscotch is pretty fun to use :wink:

The link I put is the original post is a very interesting video about how and why sprite sheets are actually used in more sophisticated languages.


#8

That’s a cool idea! Would there be a way for the characters or sprites that are not covered to still be able to detect when they are touching something else using this method?


#9

Just realising that your adult: OMG! That’s so cool!


#10

How exactly did you get the simple Sprite sheet?


#11

The trouble with collisions would be that the hidden parts of the sprite sheet would also register as a Bump/Touch.

However math/logical rules could be used in place of the built in collision rules to determine when a Bump/Touch occurs with the visible part of the sprite sheet. Although, as before, it’s still easier to use Set Image with different images and then use the standard Bump/Touch rules.


#12

I got the explosion sprite sheet from a website that publishes such things. There’s a bunch of sites out there, but that came from opengameart.org


#13

SCOTT PILGRIM VS THE WORLD
I’m probs the only person who knows who dat character is.


#14

Could you take a screenshot so I can see the menu?


#15

Hey that’s really impressive
I think you can do something like this all in the one set text. I remember MagmaPOP doing it


#16

What would be great is if animated gifs could be uploaded to a hopscotch project.
“READY” has this feature.


#17

I made a gif! I use da chrome tho


#18

Maybe some emoji animation.
Make a string of emojis
:no_mouth::neutral_face::slightly_smiling_face::relieved::grinning::smiley::smile::grin::laughing::sweat_smile::joy::rofl:
And try to animate that.
@ThinBuffalo would this work?


#19

I think I understand, are you cloning squares that are covering up certain parts of the sprite sheet and then moving the sprite sheet so you only see one image?


#20

That is really cool! Thank you for sharing this!