Next is to get the big white rectangle with your name in there.

Go back into the Scene block group and drag a set background image block to just under the set background color to block. Note: The on start "C" shape will expand to fit the two set background blocks.

The background image will be a white stripe with your name in it. To do this, click the grey square in the set background image to block.

Wow, that's more complex than a color choice popup. The block looks like MacPaint, Windows Paint, or other very basic image editors.

See the labels at left for what each item controls.

The idea is to make a white stripe with your name which is spelled out  in black. Select the color white from the color palette with a mouse click, the current color rectangle between the colors and the grey tools will turn white.

Now select the square tool. On the checkerboard drawing area, make a rectangle past the halfway point like in the picture at left. If you look closely you can see the white rectangle outline.

Now click the paint can spilling icon (bucket fill) and then click inside the white rectangle drawn in the previous step. That will fill the rectangle with the current color, white.

The Hack

You are free to customize every part of your badge including all the text. 

BUT, if you want your badge to look more like our example, without all the hand lettering (which cannot be automated at the time of this guide). you can load a blank badge image by saving the special code PNG file below, and opening it in MakeCode Arcade. It will be at this step except the "Hello my name is" and the white name band are already done. Believe me, this is the best way at present.

Use the steps outlined in loading code on the preceding page after saving your current progress.

To Letter Your Badge

To switch to black for lettering, click the color black in the color palette near the bottom-left. The rectangle between the colors and tools will turn black.

In the upper left are three size squares side by side. Click the middle one to set a broad "tip" for using our drawing pencil.

Select the upper left Pencil icon.

Very carefully write your name pixel by pixel on the white area. If you mess up and make a black pixel where a white one goes, you can click the counterclockwise Undo button on the bottom right. Or you may change the pencil color to white and fix it, then change the color back to black. This is the hardest part of this tutorial. If you find it hard, no problem, take your time. See my result after a bit of time. I chose a short name, chicken me, and my effort is not 100% which is fine, it will be viewed at a distance.

Adding your text (such as a name) in the white part of the name tag. You can faintly see the "Hello My Name Is" text above the white rectangle.

When you're done, click the Done button, on the lower right of the image editor. Your image will appear as a tiny icon in the set background image to block. You can click that icon anytime you want to edit the image and text.

Optional Extra Step

A steady hand is good when hand lettering text in a basic paint program. You can also edit the picture in Javascript, but it's not usually a beginner task. The benefit is you just edit some numbers and it's easier to see how things line up. Here are the steps:

Click the Javascript button in the top center of the screen. At any time, you can go to the block mode by selecting Blocks.

You'll get a new edit pane where the blocks are. It is only a small amount of code, so it seems.

You will see there is a "+" sign after the start of line 2, click that and you'll see a huge representation of the background.  Periods are background color, 1 are white, f are black.

I shrunk the browser view in Chrome to 50% to see more of the screen at left.

Edit the huge matrix of periods, 1's and f's to straighten lines and do other cleanup. Be sure each line has the same number of characters in it as the file originally had or errors will result (why I said backup your work previously).

The difference between 1's and f's for the name area is not so easy to distinguish.

Double check your work when done (that all lines are the right length, spaces between entries, etc.

Now when you click the Blocks button, you should see the block code you had. The graphic square will be too small to see changes. Click the simulator Play button to see your changes easier.

See the next page for more seeing your results.

This guide was first published on Jul 31, 2019. It was last updated on Mar 08, 2024.

This page (Adding Your Name) was last updated on Mar 08, 2024.

Text editor powered by tinymce.