Snap! (BYOB): Lesson 2 – Making a Custom Block and Introduction to Costumes
For background information and how to get started with Snap! (formerly known as BYOB), click here for lesson 1. I’m using BYOB version 3.1.1 for my examples, but you can follow along with either version linked below.
For this lesson, I’m working directly off the blocks from lesson 1. If you don’t know how to build a square, take a quick glance here.
Building a Custom Block
Custom blocks are a valuable tool for cleaner and more efficient programs. For example, see the “make a square” program from lesson 1:
The sprite repeats the action of walking 100 steps, turning 90 degrees, and finishing with a square. We could click this program 100 times but we’d get the same result: a square of a specific size. To make a smaller or bigger square, we find the block that regulates size and adjust the number. Here, it’s move _ steps. However, by changing 100 to another number, we’re going into the basic coding of the program–a surefire way to make mistakes.
It might not seem like a huge task with a small program, but imagine a program with several elements that affect size, shape, movement, etc. It would require searching, top to bottom, adjusting every block that affects the output. If you miss a block, or change the wrong block, you break the entire program. Then you have to analyze every block and find where things went wrong.
To avoid that messy situation, we will create a custom block that takes a size input.
For this exercise, I’m using blocks from the following categories:
- Motion (Blue)
- Looks (Purple)
- Pen (Green)
- Control (Brown)
- Variables (Orange)
Start with the “build a square” block from lesson 1. You won’t need it yet, but make sure you have it waiting.
Custom blocks are found under Variable. Scroll to the bottom and click Make a block.
The pop-up screen looks like this:
Notice the list of categories is the same as the list on the left-hand side of Snap! or BYOB. The category you choose is simply the location the custom block will live. Because our block draws a picture, I’m choosing Pen for its location.
Clicking Pen automatically highlights the command button which is the button we want for this exercise. If we want the sprite to do something, it’s a command block. If we want the sprite to report something, it’s a reporter block. An example of a reporter block is a block that takes inputs of a students’ grades and outputs their grade average.
Notice I wrote “draw square of size”. This is the name of our custom block. Clicking OK closes Make a Block and opens Block Editor.
Now you should drag the “make a square” program into the Block Editor.
Hovering over “make a square of size” brings up spots we can add inputs or text. We’re using it for inputs, but you could use it to add text if you misnamed the block.
Click on the + after “draw square of size”. Simply type in the name of our input – I’m using “size” – and click OK. For future reference, the right-hand arrow gives us options for types of inputs. For example, you could specify the “make a square of size” block only takes number inputs. I recommend using it for more complicated programs because it’s an additional way of keeping things nice and neat.
The size input will translate to an empty box in the final block. This is just the code behind the program.
Click on size and drag it to the move _ steps block. When you’re working inside the Block Editor, you don’t need to duplicate the block by right clicking. Dragging the input elsewhere creates another block, leaving the original in place.
I want to take a moment to examine the logic taking place here. Remember: You don’t want to copy the work; understanding why it’s happening is the most important part.
By creating an input for size and also having that input in the move _ steps block, we’re telling the program that any number a user inputs should change the amount of steps taken. This allows us to create a sort of parent block with all the work actually taking place behind the scenes.
Clicking OK creates the custom block:
Note: The custom block won’t automatically appear in the gray area. You’ll need to grab it from the category you assigned it earlier. Remember, I put it this one under Pen.
I’ve added a clear block (found under Pen) so we can start with a fresh stage every time the block is ran. Let’s test it out:
Instead of having a string of blocks with potentially several changes needed for different outputs, we now have a single block that takes any input and gives us an immediate output.
This method works on all shapes. Here is what you see:
Behind the scenes:
I also want to give a brief introduction to costumes. My example is a bit silly, but the possibilities are really cool. Click costumes at the top of the screen.
I’m clicking Import to use the preloaded images, but it also allows custom designs. For example: you could create a Mario costume, or grab a photo off the Internet, and change the sprite to look like the classic character. Now you have the start of a game.
I’m choosing a Bug for my costume:
Under the Looks category, I grabbed the switch costume _ block and connected it to my custom hexagon block. When ran, the screen will clear, the sprite will turn into the Bug, then draw a hexagon of the size I input.
I wanted to share the costume feature because it’s something with huge potential. You could build a game where the sprite looks like x then changes to y when z happens. As simple as Snap! BYOB seems, it really is a great platform for creativity.
Just for fun: