More Background Options

A feature I’d like to see in Hopscotch is:

More blocks or options for set background (maybe that could be its own section of blocks, who knows?)

I’d use it for this type of project:

Themed projects, demo projects, etc.

Here are some examples of Hopscotch code that could be improved if we had this:

could be this:

Here are some example designs I’ve made:

Other things like radial background would be pretty cool too, or patterns of some sort without having to use clones.

I’ve seen something similar in another programming languages, it looks like this:

(drawing a background on context in JS – you can run this on a project page if the project uses player version 2.0.x)

var ctx = document.querySelector('canvas[name="background"]').getContext('2d')

var my_gradient = ctx.createLinearGradient(0, 0, 0, $0.getBoundingClientRect().height);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");


That would be awesome!


another idea: have an option to color based off the x and y values of each pixels location on the screen.
that way you can use variables to create procedural backgrounds a bit easier and less object heavy than clones (ofc, this may even more performance heavy than that, but just an idea :P)


We did have the option for Set Background image in mind for some point in the future.

The ideas for linear and radial gradients and patterns would be really cool too. It would definitely simplify the manual gradient code.



Hope to see them some time :slight_smile:

(the code in OP is really all you need for that to work, btw)


I am definitely itching to add them! :joy: There are a number of blocks that I would love to add — just need to have ideas reviewed and slot in dev time. (There are some other things like adding translations and testing, but it is generally straightforward.)

As a public aside note, for context, I was working on the dev side of the Set Background block — adding the new block in the editor and making it work in the webplayer. The options here are definitely possible.


“my_gradient” would have to be defined as a function or an object for that to work.


I am declaring that in the second line. It’s context.createLinearGradient with the parameters passed in.

I would have to replace $0 with document.querySelector('canvas[name="background"]') though to target the element outside of dev tools

ooh, very cool :sunglasses:

right, of course. This was just a quick list of things. I think it does make sense to have a new category of blocks for this too, since it has its own layer just like drawing.


Oooo I like the gradient idea! Maybe you can have the “top” and “bottom” be able to be swapped out for other part of the screen, so you could get vertical, horizontal, or diagonal gradients!

I like gradients


Yeah maybe even a param for angle