Now that we understand the fundamentals of pixel art, let's make our own character sprites inside of MakeCode Arcade!
Now that we understand the fundamentals of pixel art, let's make our own character sprites inside of MakeCode Arcade!
MakeCode Arcade
First, open a new Chrome browser window (Chrome works best) and go to MakeCode Arcade.
mySprite
Let's create a character sprite. In the Sprites category, click on the set mySprite to sprite of kind Player block and drag it onto the canvas.
Sprite Editor
This creates a sprite object that you'll be able to control in the game. But how do you actually make the pixel art for it? Click on the gray box to the right of the word sprite in the block you just added and MakeCode Arcade will launch the built in sprite editor!
The default canvas size for your sprite is 16x16 pixels, as shown on the bottom of the sprite editor. You can click that number to cycle between a few presets. If you do, keep clicking until you get back to the 16x16 setting.
Next, let's have a tour of the editor.
These are the tools and interface elements of the sprite editor:
- Canvas is where you draw your sprite
- Editor and Gallery buttons allow you to switch between editing sprites and selecting from a set of pre-made sprites
- Pencil tip sizes allow you to switch between 1x1, 3x3, and 5x5 pixel tip sizes. These also apply to the eraser, and square/circle tools
- Pencil tool is used for drawing pixels in the canvas with the currently selected color. Just click or click-drag to use! It has an alternate behavior if you press the L on your keyboard -- it turns into a straight line tool
- Eraser is used to remove pixels from the canvas
- Bucket fill tool will flood fill an area with a color. The boundary of the fill is defined by the color of the pixel under the tool when the mouse button is released
- Square tool creates a rectangle defined by the click-drag-release points of the mouse cursor. The stroke width of the shape is determined by the pencil tip sizes. Press the C key on your keyboard to create a circle instead. Note: circles work best on larger canvas sizes
- Current color indicates the color you've got picked
- Color palette swatches are the colors you can use in your sprite. Click one to make it current. Note: choosing the transparent color allows you to erase pixels with the pencil/line, bucket, and square/circle tools
- Canvas dimensions determines how many pixels you'll be able to use for your sprite. Click this button to cycle between presets
- Undo/redo allow you to go back in time and fix mistakes! Or, change your mind and go back to the future!!
- Done press this button when you're finished and are ready to go back to the main MakeCode Arcade program
Try out the sprite editor now and create your own version of Ruby the red LED.
This sprite was created using the pencil tool and four colors. You can try out other tools, such as the paint bucket to flood fill Ruby to a different color! Or maybe the line tool to add some stylish stripes.
When finished, press Done. MakeCode Arcade will load your player sprite into the simulator.
Bigger Ruby
This is looking a bit small for our character -- let's return to the sprite editor and make a 32x32 pixel version instead!
In this version, not only is Ruby larger, but I've used some extra colors to add a bit of dimension and bling. The checkerboard technique is a type of dithering used to add a type of color mix that isn't possible with such a limited color palette.
Controls
That's looking better! Next, let's add some controls so we can move Ruby around the screen.
In the Controller category, pick the move mySprite with buttons block and add it to the on start loop.
Now, you can use the d-pad buttons on the simulator (or the arrow keys on your keyboard) to move Ruby around!
Text editor powered by tinymce.
