How I make my smooth gradient BGs


Hello everyone! If you want to make smooth gradients for projects, I can teach you how.
First, tap ‘when game starts’. Then, go to the orange Movement blocks and select ‘Set Position’.
Set the X to 0 and the Y to 0.
Then go to the blue Control Flow blocks and select ‘Repeat Forever’. (You can also use another block, called ‘When =’ in the iPad blocks, and replace the two blank spaces to 7.)
Then, go to the purple Drawing blocks, and select ‘Draw a Trail’.
Set the colour to your chosen colour and the width to 2.
After that, select ‘Set Position’ again, and in X, tap the + sign, and in the first blank space, select ‘X Position’ in Objects, and in Y, tap the - sign, and in both the first and second blank space select ‘Height’ in iPad.
Then, select ‘Draw a Trail’ again, and set the colour to your chosen colour and the width to 2.
Do the same thing like just now, but in Y, just select ‘Height’. Your code should look like this:


Cool!!! I have some projects with this type of BG, but instead of Set pos: Self X pos+1, I did Set pos: Self X pos+10.

And then I changed the width of the trails to 10


Nice tutorial

Usually I don’t do smooth bgs so I’ll come here if I forget


This is an awesome tutorial, thanks!

1 Like

This is an amazing tutorial! I don’t use them much so very helpful! Could use a few more pictures maybe?

1 Like

Fun :slight_smile:
There are def ways ti make faster loading smoother ones but this is a good tutorial

But here are a couple things: Instead of repeat forever, use repeat times device width+2. And maybe set pos (-1,0) initially. And instead of height-height you can just use 0


Nice tutorial, well written!


Thank you for this amazing strategy!

I will give you credit as I will use this in my project - most likely

1 Like

Love this tutorial, but you could make it a lot faster. Here’s an instant one:

(The second image is the rest of the draw block)

Of course, you could change the H value to make it any colour.


Slow method, and many people have done this, I’d suggest using my Smooth BG Generator

Exception: Put the set variables in a 7=7 rule


I use that, but instead of the repeat I use clones, and then I can make gradients with any two colours instantly.


Me too, but this is for people who don’t know clones as well


Yeah, same. It’s much quicker.

1 Like

Nice tutorial mate!
Instead of having repeat forever, you could use
When total clones<257
I’m pretty sure that’s the number you would need.


Great tutorial! :smile:


Hopscotch has some hidden blocks in the game code which some people found, one of which is a ‘Create a Clone Times’ block which creates clones instantly. I tend to use this as, well, it’s instant.


Recently, I learned a better way to do it that’s super fast.

First, I create 30 clones,
Next, I add the code below:

I’ll explain it all better in 2019-04-18T04:00:00Z's quick coding advice at the Coding Café.

(Link will be posted here when the post comes out)


I wish I knew how to make faster gradients back when I made some of my older projects. Great tutorial!

1 Like

Thanks for the support and cc! I learned how to make my gradients faster thanks to you all.


Should I make more tutorials?