The CreatiCode Playground

CreatiCode

The creaticode playground contains 4 main areas, the menu bar, the editor, the player and the sprite pane.

The Player Window (The Stage)

The player window is also called the stage. Try to find these 2 buttons:

The green flag button : when you click on it, the project will start to run in the player window.
The stop button : this button will stop the project.

For example, after you know how to add the soccer sprite and code blocks, you can run a project like this:

The Sprite Pane

The sprite pane is where you manage the sprites and the stage of a project.

Adding or Deleting a Sprite

You can click the CreatiCode Icon button to add a new sprite from the library. To delete it, you use the trash bin on that sprite’s icon.

Selecting a Sprite or the Stage

You can click the icon of a sprite or the stage inside the sprite pane to select it. You can also drag any sprite in the stage window to select it.

The Editor Area

The editor area contains 4 tabs: the code editor, the costume editor, the sound editor and the Diagram (premium-only).

The Code Editor

The code editor is where you build a program using code blocks. Building a program is like playing a puzzle game: you find a block from the block list, and drag it into the coding area.

The Block List

Since there are quite many blocks for you to choose from, they are organized into different “categories”. For example, when you click the “Motion” category, all blocks related to moving and turning are displayed. The list will hide when you click on the coding area. You can use the “pin” button to control whether to keep the list open all the time.

The Coding Area

You can drag blocks in the coding area to create stacks of blocks. When a block is dragged, all other blocks attached below it will move together. You can also drag the white space in the coding area to shift all blocks.

You can use the “+” and “-” buttons to scale the blocks, and the color picker on top to choose a different background color.

The Costume Editor

The costume editor allows you to set one or more costume images to a sprite. Each costume is an image, and it controls how that sprite looks on the stage. If you choose a different costume for a sprite, then that sprite will look different on the stage.

You select the costume from a library or draw them yourself. For example, this soccer player sprite has 4 costume images. By switching between the first 2, it looks like the player sprite is kicking the ball.

The Sound Editor

The sound editor allows you to manage sound clips you can play in a project. You can either pick from a sound library, or record your own sound. Note that you would need to allow the browser to use your microphone to record a sound.

The Diagram Editor

For premium accounts, you can use the Diagram tab to create all kinds of diagrams, such as a flowchart of your program, or sticky notes for new ideas.

The Menu Bar

The menu bar on top helps you manage the project. You can set the name of the project, and share the project with others.