Session 1: Discovering PictoBlox & Customizing Tobi Robot Sprite

🚀 Lesson 1: Getting Started with PictoBlox and Your First Program

Welcome, future engineers!

Imagine you are controlling a smart robot named Tobi.

In this first session, we step into the world of visual programming, get to know the PictoBlox interface, and build the first program for our robot character.

---

🎯 Learning objectives

After this lesson, you will be able to:

• Install and launch PictoBlox.
• Recognise the main areas of the PictoBlox interface.
• Understand the X and Y coordinate system on the stage.
• Use Events, Motion and Looks blocks.
• Build and run your first PictoBlox program.
• Save your project to keep working on it in later sessions.

---

🧰 What you need

Before you start, prepare:

• A computer running Windows, macOS or Linux.
• An Internet connection to download the software.
• A mouse and keyboard.
• The PictoBlox software.

---

📥 Download and install PictoBlox

Click the link below to download the software:

⬇️ Download PictoBlox here

After the download finishes:

1. 1Open the PictoBlox installer.
2. 2Click Next to continue.
3. 3Accept the terms of use if asked.
4. 4Choose the installation folder.
5. 5Click Install.
6. 6Wait for the installation to finish.
7. 7Launch PictoBlox.

---

1. Exploring the PictoBlox interface

When you open PictoBlox, the workspace is divided into several areas.

1.1. Toolbar

The toolbar at the top of the screen lets you:

• Create a new project.
• Open a saved project.
• Save the current project.
• Choose the language.
• Connect a board or robot.
• Choose the working mode.

---

1.2. Block palette

Blocks are grouped into categories, each with its own colour.

---

1.3. Coding area

This is where we drag and snap blocks together to build a program.

Blocks run in order from top to bottom. Blocks with matching shapes click together like puzzle pieces.

---

1.4. The Stage

The Stage is where the sprite or simulated robot carries out the actions you programmed.

On the stage you can see:

• The sprite's position.
• The direction it is facing.
• What the sprite says.
• Visual effects.
• The result of running the program.

---

1.5. Sprites

A sprite is an object you control in PictoBlox.

A sprite can be:

• A robot.
• A cartoon character.
• An animal.
• A vehicle.
• Anything you design yourself.

In this lesson we use a robot sprite and call it Tobi.

---

2. The X and Y coordinate system

Every position on the stage is described by two values:

• X: the horizontal position.
• Y: the vertical position.

2.1. The X axis

The X axis runs left to right:

• X = -240: the left edge of the stage.
• X = 0: the centre of the stage.
• X = 240: the right edge of the stage.

When X increases, the sprite moves right.

When X decreases, the sprite moves left.

---

2.2. The Y axis

The Y axis runs bottom to top:

• Y = -180: the bottom of the stage.
• Y = 0: the centre of the stage.
• Y = 180: the top of the stage.

When Y increases, the sprite moves up.

When Y decreases, the sprite moves down.

---

2.3. The centre of the stage

The centre of the stage is at:

X = 0, Y = 0

---

3. Building your first program

We will program Tobi to return to the centre of the stage and say hello.

Step 1: Add a start block

Open the Events category and drag out the block:

when 🏴 clicked

This block tells PictoBlox to start the program when the user clicks the green flag.

---

Step 2: Move Tobi to the centre

Open the Motion category and snap on the block:

go to x: 0 y: 0

When this block runs, Tobi jumps straight to the centre of the stage.

---

Step 3: Make Tobi say hello

Open the Looks category and snap on the block:

say "Hello everyone, I'm an AI Robot!" for 2 seconds

---

The complete program

Snap the three blocks together in this order:

1. 1when 🏴 clicked
2. 2go to x: 0 y: 0
3. 3say "Hello everyone, I'm an AI Robot!" for 2 seconds

How the program flows:

Click the green flag → Tobi returns to the centre → Tobi says hello

---

4. Running the program

Click the green flag above the stage.

Watch what happens:

1. 1Tobi moves to X = 0, Y = 0.
2. 2Tobi shows the greeting.
3. 3The greeting disappears after 2 seconds.

If the program doesn't work, check:

• Are the blocks snapped together?
• Is the green flag block at the top of the program?
• Are the coordinates exactly X = 0, Y = 0?
• Did you type the greeting correctly?
• Did you click the green flag?

---

5. Practice: exploring coordinates

Change the values in the block:

go to x: ... y: ...

Then watch where Tobi ends up.

Answer these questions:

1. 1Which way does a positive X value move the sprite?
2. 2Which way does a negative X value move the sprite?
3. 3Which way does a positive Y value move the sprite?
4. 4Which way does a negative Y value move the sprite?
5. 5Which coordinates put the sprite in the centre of the stage?

---

6. Challenges for young engineers

Challenge 1: Change the greeting

Change the greeting to:

Hello! I'm ready to explore PictoBlox!

Run the program again and watch the result.

---

Challenge 2: Create an introduction

Add blocks so that Tobi says, one after another:

1. 1Hello everyone!
2. 2I'm Tobi, an AI robot.
3. 3Let's learn to code together!

Each sentence is shown for 2 seconds.

Suggested program:

1. 1when 🏴 clicked
2. 2go to x: 0 y: 0
3. 3say "Hello everyone!" for 2 seconds
4. 4say "I'm Tobi, an AI robot." for 2 seconds
5. 5say "Let's learn to code together!" for 2 seconds

---

Challenge 3: Tobi explores the stage

Write a program that moves Tobi to these positions in order:

1. 1Centre: X = 0, Y = 0
2. 2Right: X = 150, Y = 0
3. 3Top: X = 0, Y = 100
4. 4Left: X = -150, Y = 0
5. 5Back to the centre: X = 0, Y = 0

After each move, make Tobi say where it is.

---

7. Saving your project

So you don't lose your work:

1. 1Open the File menu.
2. 2Choose Save As.
3. 3Name the project:

Lesson-1-Getting-started-PictoBlox

1. 1Choose a folder.
2. 2Click Save.

---

✅ End-of-lesson checklist

Tick what you have completed:

• [ ] I installed and opened PictoBlox.
• [ ] I can find the stage and the coding area.
• [ ] I understand what X and Y do.
• [ ] I know the centre of the stage is X = 0, Y = 0.
• [ ] I can snap together Events, Motion and Looks blocks.
• [ ] I ran my first program successfully.
• [ ] I completed at least one challenge.
• [ ] I saved my project.

---

📝 Review questions

1. 1Which block starts the program?
2. 2Which coordinates mark the centre of the stage?
3. 3Which direction does the X axis control?
4. 4Which direction does the Y axis control?
5. 5Which block category makes a sprite speak?
6. 6If X = -150, is the sprite on the left or the right?
7. 7If Y = 100, is the sprite at the top or the bottom?
8. 8Why should you save your project after practising?

---

🌟 Summary

In this first lesson, we:

• Got to know the PictoBlox interface.
• Explored the stage, sprites and coding area.
• Learned how the X and Y coordinate system works.
• Built a first program with blocks.
• Made Tobi move and say hello.
• Saved the project to continue later.

In the next lesson, we will give Tobi livelier movements using direction, turning and loops.