How to animate on Hopscotch! (Only can be done with subscription)

hopscotch

#1

Today I'm going to teach how to animate! With the help of images and stuff. I'm going to just list a few things first below before we start the tutorial.

First of all I didn't create the concept. The person who created is unknown and we have yet to figure it out.

I mostly looked @Rawrbear's project for help, but he isn't the creator of the concept :P

Animation takes a very long time. A short gif could take hours. The animation I'm working on is a 75 frames Pokemon gif/animation.

For as I know the best website for splitting gifs into frames is this Website.


Okay so first just open a draft as normal.

Here is the first picture

As you see here, I made an ability. You can name it anything you want. For now I named it Set Pos. I put it in a When the game starts block. I inserted these 2 blocks into the ability. Set position x "Blank" y "Blank" and grow "blank". This is so that that the frames all stay in the exact spot and also to make the frames a little bigger. You will have to do this when every frame is made.

The repeat forever block with the Increase Value "Frame" by 1 is to cycle through the frames so we can it functions accordingly. The milliseconds are to show how many milliseconds are each frame's time apart from each other. You will only have to do this once


So this is how the values cycle through every frame. Every value starts at 0. So if Frame doesn't equal 0 then it will be invisible as you see here. If Frame equals 0 it will appear. You will have to repeat this a lot so remember this.


So this part is a little tricky but you will only have to do this once. First put when game starts block. Drag a repeat forever into it. With a check once if in the repeat forever block. Put a greater than symbol with your value and the number of images or frames that your animation has. Mine has exactly 75. This is so that when your animation is done it cycles back to the beginning of the animation so it forever goes on. Place a set value "Frame" by 1 in the check once if block.


Your done with your first frame! If might not look like anything at first but that's 1 out of ??? for you!

Here is how the remaining frames look like.

As you see you only have insert the ability and do the equal and not equal stuff. These animations take lots of patience. If you finish you will love the results.


Ok! Thanks for looking at the topic!

This took me about a whole hour to do some please don't just ignore it :P

As I said before I didn't create the concept of animation of hopscotch. So kudos to whoever made it.

And yes I'm very sorry but this kind of animation is only with subscription and I don't know any kind of animation with frames like this. ;( sorry non-subscribers.

Peace out!

OMTL

@BB-Box
@ArtyAnimal
@AvocadoDont
@AwesomeNachos
@BellaWafflez17
@bluedogmc-official
@BubblegumCupcakeMix
@ButterBark
@Candycane
@ChocolateFox
@ColourfulBlack
@ConnellCoder
@CreationsOfaNoob
@DA-BEASTY
@DMF
@Ella_13
@Explorer_
@FascinatingTreehouse
@FluffyMarshmellow
@FortatoBuilder
@FunkyGoldfish
@GiraffeProductions
@GLaDOS_On_Da_Forum
@happy12345678910
@HappyPerson
@HappyDolphin
@HopedHoper
@Hoppertoscotch
@IKeudin
@Jess888
@JojoDude
@KarmicSans2
@KawaiiRose
@Kitkat26
@KoolM123
@KVJ
@MiiR_legend
@minioncandy
@MudFlowerCat
@Murphy1
@PandaBlossom
@Paydent12
@PerfectPanda24
@PianoGorilla2006
@Potter_Head
@PumpkinGirl
@PurpleStorybook
@Rainboom
@RubyStars
@ScarySweetheart
@Sensei_Coder
@Silverdolphin
@SnowGirl_Studios
@Sprouse
@StarryDream
@Steelhooves
@StRiKe_Charler123
@Sugarisyummy
@Themasterofairjitzu
@ThePickle
@treefrogstudios
@TrevCoding
@Valgo
@Vortex.inc
@waddlemarco
@WasIdealessHere
@weathercats
@William04GamerA
@xXBARNSLEYFCXx
@Yellow_Mellow
@LemonPop9
@YuxinaYammy

(I also feel really proud for making the first animation tutorial on forums)


#2

Awesome! I have to go to bed, but I'll read this fully tommorow!


#3

Also here is my project that I'm working on with this kind of animation :D

https://c.gethopscotch.com/p/y9hlkhvu4


#4

Cool, so your doing the 3D sprite of mega rayquaza


#5

Yeh

it takes like 12 years :P


#6

Fabulous tutorial! Great project, too. I can't wait to see it went it's finished @Razor. :smiley:


#7

Thanks!

im over using this


#8

I don't have the subscription :crying_cat_face::crying_cat_face::crying_cat_face::crying_cat_face::crying_cat_face::crying_cat_face:


#9

I'm sorry :(

I know it's very expensive :(


#10

Maybe this is the first to use that technique..?
https://c.gethopscotch.com/p/y770ysp5f


#11

That's very helpful to subscription users who don't know how to animate with multiple sprites.

I've done that long ago using other programs.


#12

Copy and paste really helps in image animation!

It took me three days to make that Hexahedonism project because I split the work into three separate days, 10 frames per day. I spent about 10 minutes each day (or less!) making the 10 frames, so it's not that hard, just a bit more time consuming. :smile:

Nice tutorial, by the way! :slight_smile:


#13

You tagged a fridge :open_mouth:


#14

Can you add a link to a project that uses it?


#15

I'm a freezer, and I'm on the OMTL.