Background Design Rationale

Hello, fellow Hopscotchers! We all have the dream of making incredible projects for others to enjoy. Once you have the basics of your program worked out, you want to create an awesome background to match your awesome code. But how do you make the perfect background to compliment your project?


Complexity vs. Timing

Gradient backgrounds and starry skies are really amazing but complex backgrounds. Depending on the type of project (such as a tapper game, a quote, or the background for a musical creation) these complex backgrounds work really well. In other scenarios, (such as a draw pad background, crossy road, or movie) these complex backgrounds can be overkill and cause issues with how the project runs. I define a complex background as something that takes longer than 5 seconds to load.

Timing is important for games, draw pads, and movies. Hopscotchers who try out your project do not want to wait long to interact with your project. If you decide to use a complex background, you want to make sure that the loading does not impact how players connect with your program. For example, I once made a “Heads Up!” game. However, it took a minute to load the background and “How To” of the game, and I noticed that my friends didn’t want to wait to play the game. So if you decided to make your own version of “Heads Up”, I would suggest to work more on the program of how the game works and does scoring instead of how it looks.

Another issue with complex backgrounds is that they might be laggy while they load. To avoid issues with timing and lag for large interactive projects, you can experiment with making simpler backgrounds that still look cool.


Photos: What Style To Choose?

Those who have a subscription get a chance of making stunning backgrounds without much code. If you decide to make movies or storytelling games, photos can be used instead of complex backgrounds. To make your background photo have a consistent flow with the rest of your project, look at other aspects of the project. Are the characters and components of your project made from emojis, Hopscotch characters, shapes, or drawings? Try to base your photo background off of how the rest of your background looks. For example: if you have characters made from photos you or someone else took (such as R2-D2 or a dog), they probably won’t match with a Minecraft background. Also, if you make a background in a separate project, you could take a screenshot of it and add it to a different project. For example: You make a really cool gradient background, but it takes too long to load for the quiz you made. You could take a screenshot of the background and add it as a photo to your quiz, and get rid of the background that loads forever. That way you can keep the really cool background without needed it to load.


Do you have any tips for designing a background that I can edit into this topic? What awesome backgrounds have you made? Thanks for reading!

11 Likes

Great topic! I will look into this

3 Likes

Gradient. It’s laggy at the start, but then has little effect.
https://c.gethopscotch.com/p/zfzi1z8g3
Stars. Same time, less lag.
https://c.gethopscotch.com/p/zfzi5w1nr
If you are willing to wait a little longer (which in most cases you should be) you can make it even less laggy.

2 Likes

Well yeah this is a good Topic to look into but I personally think that a backround that didn’t have any work put into it kinda ruins the entire project.

I like taking my time to make a backround from scratch, using original code. Because when I see that blank, white screen, then seconds later a simple line made backround pops up slowly, I feel like that coder spent a lot of time and tried to make that backround the best they could make it. In my opinion, when I see projects on featured that have many photos cropped from the internet, I feel that they don’t belong there. Because they didn’t put that much effort into it.

why do I write so fast and so much in just a few short minuteslol

3 Likes

Nice topic and ideas

2 Likes

This is more Meta Hopscotch than Open Source Code, so I switched it Tom Meta Hopscotch. Open Sourced Code is more of free to use code on some basic function. Meta Hopscotch is everything about Hopscotch, which includes tips and tricks.

1 Like

I thought of this as a small subject, but it turns out that you can make this into really detailed stuff! Well written :clap: :slight_smile:

2 Likes

I think that complex backgrounds, used correctly, can really make a project shine. But I did not use my complex background correctly in “Heads Up,” as you had to wait for it to load before you could use the game. If you have a background that can load while you play the game, I think it would be better than having your users wait. I can put a lot of effort into a background, but if I don’t place it efficiently in the program, it makes more problems then what it is worth.

2 Likes

Great topic! (Very well formatted!!)

2 Likes

Yes this is a very good topic to look into and talk about. I find it interesting.

3 Likes

You can also use super zoomed emojis to create instant gradient backgrounds like this:

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

2 Likes

That’s really awesome! I’ll have to try that out soon.