What Scratch is and its graphical user interface

Scratch is a visual programming language designed to be beginner-friendly, allowing users to create interactive projects by dragging and connecting blocks of code. It is useful for making simple games.

Scratch can be accessed online through a web browser at scratch.mit.edu or via a free desktop application. Its graphical user interface (GUI) - the visual layout that users interact with - consists of several key areas that work together to build and run projects.

Main components of the Scratch interface

• Block palette - Located on the left, this area contains colour-coded blocks organised into nine categories (such as motion, looks, and sound). Users drag blocks from here to create code.
• Code area - Next to the block palette, this is where blocks are assembled into scripts. It shows the code for the currently selected sprite or the stage.
• Stage - The central area where the project runs, displaying sprites and the backdrop (background image). This is where actions happen when code is executed.
• Sprite info pane - Below the stage, this section lists all sprites (interactive objects) in the project. Users can add, delete, or select sprites here, and view details like position and size.
• Tabs for costumes and sounds - Above the code area, these tabs allow editing of a sprite's appearance (costumes) or audio (sounds). When the stage is selected, the costumes tab changes to backdrops.
• Start and stop buttons - At the top, a green flag starts all scripts, and a red stop sign halts them.
• File menu - In the top left, this provides options to create new projects, save, or load existing ones.

Creating code using blocks and scripts

In Scratch, code is built from blocks that represent instructions. This block-based approach makes programming accessible.

Key steps to create code

1. Select a sprite or the stage in the sprite info pane.
2. Switch to the code tab.
3. Drag blocks from the block palette into the code area and snap them together.

A script is a connected sequence of blocks that performs a task. Scripts often start with a hat block (recognisable by its rounded top), which triggers the script, such as "when green flag clicked" to run when the green flag is pressed.

Scripts can run independently; clicking a script activates it, showing a yellow glow while it executes. Multiple scripts can run simultaneously for different behaviours.

Types of special blocks

• Hat blocks - Start scripts, e.g., "when green flag clicked" or "when this sprite clicked" to respond to user actions.
• Cap blocks - End scripts with a flat bottom, e.g., "stop this script" to halt the current script or optionally others.
• Input and output blocks - Handle text, e.g., "ask" for user input, "say" to display messages, or "think" for thought bubbles.

Scripts do not always need a cap block; they end naturally when blocks run out. For example, a simple script might use "when this sprite clicked" followed by "think 'Ouch!' for 3 seconds" to react to clicks.

Working with sprites, costumes, and backdrops

Sprites are the main interactive objects in Scratch projects, capable of movement, sounds, and code execution. Costumes define a sprite's appearance, while backdrops set the stage's background.

Adding and managing sprites

• Click the "New Sprite" button in the sprite info pane to add from the library, upload an image, paint a new one, or get a random surprise.
• Position sprites by dragging them on the stage or setting coordinates in the sprite info pane.
• Delete unnecessary sprites or costumes by clicking the cross icon.

Sprites from the Scratch library often include multiple costumes for different poses. For instance, a griffin sprite might have four costumes; select one and delete others if not needed.

Costumes and their role

• Costumes are images that determine how a sprite looks.
• Access them via the costumes tab for a selected sprite.
• Edit costumes using the paint editor, which supports vector images (scalable without quality loss) or bitmap images.
• Adjust sprite properties like rotation style (e.g., left-right to flip horizontally without upside-down rotation) and direction (e.g., -90 for left-facing).

Sprites and costumes differ: sprites are active objects that can move and interact, while costumes are static images applied to them.

Adding and editing backdrops

• Select the stage and use the backdrops tab (similar to costumes).
• Add from the library, upload, or create in the paint editor, e.g., a simple vector backdrop with blue sky and green floor using filled rectangles.

Animating and moving sprites with motion blocks

Animation and movement bring Scratch projects to life. Use looks blocks for animation and motion blocks for positioning.

Animating with costumes

Cycle through a sprite's costumes to create movement illusions. For example, switch between two toad costumes to simulate running.

Sample script for animation:

• Starts with "when green flag clicked".
• Sets initial position: "go to x: -175 y: -130".
• Uses a "forever" loop with "next costume" and "wait 0.1 seconds" to swap costumes repeatedly.

This loop continues until stopped manually or by another script.

Understanding coordinates for movement

The stage uses x and y coordinates with the centre at (0,0). X increases rightward (positive) and decreases leftward (negative); y increases upward (positive) and decreases downward (negative).

Motion blocks (blue in the palette) control position

• Move - Advances the sprite steps in its facing direction.
• Change x/y by - Shifts position incrementally, e.g., "change x by -15" to move left.
• Set x/y to or go to - Jumps to specific coordinates.
• Glide - Moves smoothly to a point over time, e.g., "glide 1.5 secs to x: -300 y: -100".

For a jumping effect, use: "when space key pressed" followed by "glide 0.5 secs to x: -175 y: 80" (up) then "glide 0.5 secs to x: -175 y: -130" (down).

Complex movement, like a griffin crossing the screen, can use a "forever" loop with "go to" starting position and "glide" or a "repeat until" with "change x by" until a condition (e.g., x position < -300) is met.

Adding interactions, sensing, variables, and advanced features

Interactions make projects responsive, using sensing for detection and variables for tracking data.

Using sensing blocks

Sensing blocks (light blue) detect conditions like touching another sprite, the mouse, or a colour.

For game over detection:

• In a toad script: "when green flag clicked", "wait until <touching Griffin?>", then "stop other scripts in sprite" and "say 'Game Over'".
• Wrap jumps in "if <not <touching Griffin?>> then" to prevent post-game actions, using Boolean operators like "not".

Similar scripts on other sprites ensure mutual stopping without using "stop all", allowing messages to display.

Working with variables

• Variables store changeable values, like scores.
• Create them in the variables category: click "Make a Variable" and name it, e.g., "Score".
• Tick the variable in the palette to show it on the stage.
• In a script: "set Score to 0" at start, then "change Score by 1" in a loop for increments.

Advanced features for improvement

Enhance games with high scores and lists (similar to arrays for storing multiple values).

Adding high scores and player tracking:

• Create "High Score" variable and "Top Players" list.
• At game end: "if High Score> then" set "High Score to Score", "ask 'New high score! Enter your name.' and wait", and "add (answer) to Top Players".

This records top scores and player names, displaying the list on the stage for tracking.