Tutorial: Designing Sprites For Your Projects

Hi guys! Recently, I’ve been becoming interested in graphic design and I figured I would combine my passion for design and for coding into this tutorial. In this topic, I’ll be teaching you how to design characters (or “sprites”) for your hopscotch projects. These characters will be what is called “flat-design” which means they will be simplistic and will be made up of basic shapes. This tutorial includes methods for non-subscribers and subscribers, so everyone has the chance to design their own sprites! I split this topic into drop down boxes so you can easily find whatever section will be useful for you :smiley:

Graphic design apps (For subscribers)

If you are a subscriber, you have a lot of freedom in design. Since you can import photos, you can use other apps to create your characters. The main app I recommend is Assembly.

Using Assembly

When you first open the app, you will have options to choose what canvas size you want to work on. I personally use the 1x1 canvas, because the characters I design are relatively small. After you choose a canvas size, you will come to a screen that looks like this:

As you can see, you can scroll along the bottom and you will have many different shapes to use in your design. Simply click on the shape you want to use and it will appear on the canvas, where you can then resize, reshape, and choose a color as needed.

One of my favorite features of assembly is that they have some free shape packs that you can download to get more then the basic shapes. Some of these free downloadable packs are “character packs” and have a bunch of shapes that you can use to design a human-looking character.

Here is an example of a character I designed using assembly:

While I love designing characters, I’m not by any means a graphic designer. For inspiration and help with design, I often turn to the internet. You can find many great articles on design theory and design tips. Here is one article I really find useful:

https://gigantic.store/30-top-character-design-tips/

The best way to get better at designing characters and using Assembly is to practice! You will discover many new features and techniques as you continue to work with the app. (If you’re interested in design prompts to get you started, check the last drop down box)

If you have questions on using assembly, let me know!

Shape art

If you don’t have the subscription, or you don’t want to download a graphic design app, no worries! The creators of Hopscotch have given us all of the tools we need to design characters right in the app.

Planning Your Shape Art

The key to good shape art is using a variety of shapes, colors, sizes, etc to make your character look exactly how you envision it. My first tip is to plan your shape art by drawing your character first. You could do this on paper or digitally. Then, after you draw up a design, think about how you could use the shapes in the hopscotch app to make this design come to life.

Important Blocks

After you have a steady plan, here comes the fun part: Coding your shape art! Here are some blocks that I think are extremely useful when designing shape art:

  • Set Color: this one is self explanatory! I recommended using HSB colors instead of the hopscotch colors to really customize your character.
  • Set size/set width and height: These blocks let you resize things as needed
  • Set Z index: this block helps you set the stack order (which object will be in the front and which are in the back). Objects with a greater Z index will be in front of those with a lower Z index. So for example, if you’re creating a shape art that looks like a human face, the face shape would have a lower Z index then the face features, because you want the face features to appear on top of the face shape.
  • Set position: this block is useful because it allows you to choose the exact position a shape will be in.
Prompts for practice

One of the hard parts about designing is coming up with an idea of what to design. Incase you have designers block, or are looking for some design practice, here are some prompts for you! If you use any of these prompts, I encourage you to post what you made here and you can get feedback from your peers!

  • Can you design a character using only 2 shapes? How about 1 shape?
  • How would you design yourself? Or your pet?
  • Create a wilderness scene
  • Can you design a character that looks like your username? (For example, I would design a blue dog)
  • Can you create a monotone character? Can you create a character with 5+ different colors?
  • What is your favorite sport/hobby? Can you design a character who plays this sport or does this hobby?
  • Look around whatever room you are in. Can you recreate an object you see using shape art?
  • Can you make a shape art inspired by your favorite food?
  • Can you make a shape art inspired by your favorite television show?
  • Search “shape art” on hopscotch. Without looking at the code, can you recreate one of these projects on hopscotch or on Assembly? (Make sure to credit the original designer tho!)

If you do one of these challenges, post the link here and I’ll give it a like and follow you if I don’t already!

Other links/related topics

Here are some other topics that might be helpful:

You can post your designs on the drawing with hopscotch topic, and people can also “commission” you by requesting a design for them to use within one of their projects (make sure you follow the rules and formatting guidelines :grin:):

Drawing with Hopscotch Topic 01 [OFFICIAL]

How to make rotating shape art:

Rotating Shape Art

Although this topic is old and closed, I think it would still be useful to take a look through and see other people’s designs/discussions about design:

https://forum.gethopscotch.com/t/official-design-sharing-topic/35198?u=bluedogmc-official

Rodrigos explanation on what design is:

https://forum.gethopscotch.com/t/working-at-hopscotch-question-topic/5555/6?u=bluedogmc-official

Here are some great shape art projects for inspiration:

https://c.gethopscotch.com/p/10zq3mms3z

https://c.gethopscotch.com/p/108y0ha3i7

I also recommended checking out @William04GamerA’s profile, as he posts a lot of amazing trail and shape art!

Thanks for reading! This was just the basics, and I’m planning on doing more mini tutorials within this topic. If you would like to be tagged when I post more tutorials and challenges here, vote yes on this poll:

  • Yes, tag me!
  • Nah

0 voters

If you are knowledgeable about design and you would like to teach a shape art, trail art, or design “class”, let me know and you can post your tutorial here!

Thanks for reading and reply with any questions!

16 Likes

Really cool! first btw

4 Likes

Cool, but I don’t really need this. I’m too lazy lol. Great tutorial tho!

5 Likes

haha, thanks for reading anyway!!

5 Likes

this is actually really helpful, thank you!

6 Likes

I have an artist for my current game, but I may use this app next time! Btw I don’t have the sub, but I use seeds

4 Likes

Nice! This app is by far one of the easiest design apps I’ve found.

Oh yeah I forgot about seeds!

4 Likes

Very noice tutorial you have there
(I don’t make art that much tho lol)

3 Likes

nice tutor

3 Likes

Amazing tutorial! Gonna be super helpful to a lot of people

another tip for shape art, if you're interested

Another tip for shape art is using just one object and cloning it. The order of the clones is kinda similar to setting pos back/forth, but with less lag. Sometimes z index can be kinda glitchy and laggy (for me at least) so it’s easier to just clone in the order of the shapes. If you’re doing something like an animal, it’ll have different “layers” and it’s easiest to recreate if you start from the bottom layer and work your way up. Use the lower clone indexes for the base and rough shape of whatever you’re tryna recreate, and then the finer details come as the clone index increases. Highest clone index is usually the top most layer and the lowest (2, since I never use the original object as a shape in the shape art) is the bottom most layer.
And instead of using a billion check-if-else’s, it’s easier to just do a “when self clone index = _” and then a “repeat forever; set color _” as the last block in it.

6 Likes

Amazing tutorial! I can really second the recommendation on the Assembly app - it is super fun and easy to use, and you can make some really cool things with it! It also helps you improve your shape art skills, because you practice how to put things together.

4 Likes

This is a really useful tip, thank you!

3 Likes

No problem!

5 Likes
Tags

@TheOnionSWE
@SilverStar
@The_Electogenius
@Cherry_Red
@LR10123
@ArcadeGrounds
@ellatm
@GweTV
@FearlessPhoenix
@William04GamerA
@Stylishpoopemoji33
@TrueHarryPotterLover

I plan to post some more shape art tutorials/tips sometime this week! Until then, I wanted to do a small contest for anyone who is interested/has time.

Basically, all you have to do to enter is pick one of the prompts in my original post or come up with your own and make a shape art relating to that prompt.

To submit an entry, just post a link here! There isn’t really a deadline, this is more of aN opportunity to practice shape art while winning prizes!

Prizes:
Anyone who enters will get:

  • Spam likes and a follow (if I don’t follow you already) on Hopscotch
  • Feedback on their project
  • A shoutout in my next hopscotch project!

My favorite entries will get:

  • The previous listed prizes
  • A mushroom if possible (I only have 10 seeds currently, so I only have two plants to give out to people :cry:)
  • A nomination of your project for curated

This is just for fun and there’s no deadline, just post a link to your project if you want to enter :grin:

9 Likes

This seems fun! I was planning on doing another shape art, so I’ll probably do your lil challenge

If you need more prizes, I can throw in spamlikes and a follow to your fav projects

6 Likes

Awesome, thanks!

4 Likes

No problem!

4 Likes

same
great idea tho!

2 Likes

Don’t forget about creating something like a megamoji

3 Likes

I’ve made a quick one:

5 Likes