Feature guide

Getting started with TurboWarp Plus Editor for Scratch users

Open a familiar SB3 and run it beside your code. The Ball Demo shows you where the familiar controls are, how to trace a project with several sprites, and how to arrange the editor around the work you're doing.

Open the editor in English · 日本語ガイド

1. Find the controls you know from Scratch

1.1 Open an SB3 file

First, have the Scratch project file you'd like to edit ready. For this exercise, download Ball Demo.sb3 and open it in the editor.

Choose "File" → "Open SB3 File…" and open the downloaded file. Select "ボール" (Ball) in the sprite list at the left edge of the screen. Its code opens in a tab in the middle.

The File menu with Open SB3 File selected
Figure 1 · The File menu with "Open SB3 File…" selected

1.2 Open the stage

Click "▾" next to "Open stage" and choose "Show in the drawer". Click the green flag above the stage on the right while keeping the code in view. Change 20 to 40 in the blue block and the ball moves twice as far per click. The same menu has "Show in a separate window" if you want more room for the stage.

The stage menu offers a separate window, a tab, and the drawer
Figure 2 · The stage menu offers a separate window, a tab, and the drawer
The demo runs on the right, beside the code for ボール
Figure 3 · The demo runs on the right, beside the code for ボール

1.3 Use the sprite list on the left edge

Open Ball Demo Plus.sb3 for this exercise and the sections that follow. The sprite list has moved from below the stage on the right in Scratch to the left edge. If another drawer view is open, click the leftmost "Sprites" icon in the activity bar.

Drag the divider between the list and the editor to adjust the width. A wider list fits more tiles per row when you have several sprites. Use the pin ("Pin sprite list") to keep the list visible. With the pin off, the drawer folds away when you move the pointer out. Move back to the left edge to reveal it.

The widened sprite drawer with its divider, pin, and undock controls
Figure 4 · The widened sprite drawer with its divider, pin, and undock controls
The unpinned sprite drawer opens over the code when revealed
Figure 5 · The unpinned sprite drawer opens over the code when revealed

Click "Undock sprite list" next to the pin to put the list in its own window. If the editor remembers a separate window that is no longer open, the same control reads "Reopen in another window". You can still select a sprite from there. Use the button at the top right of the separate window to dock the list again.

The ボール sprite in a separate sprite-list window
Figure 6 · The ボール sprite in a separate sprite-list window

1.4 Open sprites and backdrops in tabs

Select a sprite or backdrop from the list on the left to open it in a tab above the editor. With "ボール" still open, select "Backdrops" at the bottom of the list. Keep both tabs open and click either one to switch between them. You can also split the editor to work with tabs side by side (4.4).

The ボール and Backdrops tabs are both open. The editor shows the code for ボール
Figure 7 · The "ボール" and "Backdrops" tabs are both open. The editor shows the code for ボール

1.5 Switch editing views with the buttons

The buttons down the left side of each editing pane are "Code", "Costumes", "Sounds", "Properties & Variables", and "Messages". The [x] icon opens "Sprite Properties and Variables". For the stage, the left side includes "Backdrops" and "Global Variables". Hover over an icon to see its name. Costumes and Sounds show their own headings above the editor.

Select the brush icon to edit the purple ball costume. Select the speaker icon to see sounds for that sprite. The demo's sound list is empty. Select "Code" to return to its blocks.

The Costumes button on the left opens the purple ball costume
Figure 8 · The "Costumes" button on the left opens the purple ball costume
The Sounds button opens the same sprite's sound editor
Figure 9 · The "Sounds" button opens the same sprite's sound editor

2. Work with sprite properties and variables

2.1 Set position, visibility, and direction

In the ボール tab, click the [x] icon on the left to open "Sprite Properties and Variables". At the top you can edit the name, x and y, size, and direction. Use the eye icon to show the sprite and the crossed-out eye to hide it. Open the stage to see your changes. Collapse the stage drawer when it covers controls on the right.

The properties and variables of ボール, with name, position, visibility, size, and direction at the top
Figure 10 · The properties and variables of ボール, with name, position, visibility, size, and direction at the top

Drag the arrow around the direction dial from right (90°) to up (0°). Because the ball is round, you won't see the change until you click the green flag: it now moves up. You can enter a direction in the number field as well. The three buttons below it set the rotation style to "all around", "left-right", or "don't rotate". Before the next exercise, return the direction to 90 and the position to x = −60, y = 0.

The arrow points up, Direction reads 0, and the three rotation styles sit below the number field
Figure 11 · The arrow points up, "Direction" reads 0, and the three rotation styles sit below the number field

2.2 Change a variable and show the blocks that use it

The "Sprite Variables" table shows the variables and lists that belong to ボール. Change speed from 20 to 40, then press Enter. Click the green flag to see how far the ball moves. Set speed back to 20 for the next exercises.

Click the 1 in the "Read" column for speed. The search opens with the block that uses the value. Select the result to show "move … steps" in the green-flag script. Click the 1 in "Write" and select the result to show the block that changes the clone's speed. Hover over a variable row to reveal its rename and delete controls.

The Read count for speed opens project search filtered to the block that uses it
Figure 12 · The "Read" count for speed opens project search filtered to the block that uses it

For values shared across the project, select the "Backdrops" tile at the bottom of the sprite list and open "Global Variables". Check the "Stage" box on the rounds row to display the live value on the stage.

The Stage checkbox is on for rounds in Global Variables
Figure 13 · The "Stage" checkbox is on for rounds in "Global Variables"

2.3 Edit a list in one place

Return to the ボール tab and open "Sprite Properties and Variables".

The "Type" column shows a box icon for variables and a table icon for lists. Click a column heading such as "Type" or "Read" to sort the table. The route list holds the words the clone can say. The table shows the first five entries and +1 for the sixth.

Hover over the route row and click "Edit".

The speed variable and route list in the same table, with an Edit button beside route
Figure 14 · The speed variable and route list in the same table, with an "Edit" button beside route

Change the first item from start to checkpoint. Click the up arrow beside bridge to move it from third to second. Use the trash icon to remove an item or "Add item" to insert a new one. "Cancel" discards edits in the dialog.

The route editor showing checkpoint first and bridge second
Figure 15 · The route editor showing checkpoint first and bridge second

Click "Save" at the bottom right. The table now starts with checkpoint → bridge → turn. To keep the changes in a file, follow 4.7 Save the edited project as an SB3 file.

The saved route row starts with checkpoint, bridge, and turn
Figure 16 · The saved route row starts with checkpoint, bridge, and turn

Create a list and add items

  1. Open the panel. In the ボール tab, click the [x] icon on the left to open "Sprite Properties and Variables". Click "Add a new sprite variable" at the bottom left.

    The Add a new sprite variable button is at the bottom left of the variables pane of ボール
    Figure 17 · The "Add a new sprite variable" button is at the bottom left of the variables pane of ボール

  2. Name the list. Select the "List" tab, enter Checkpoints in the name field, and click "Create" at the bottom right.

    The List tab is selected and Checkpoints is entered in the name field
    Figure 18 · The "List" tab is selected and Checkpoints is entered in the name field

  3. Open the empty list. Hover over the new Checkpoints row and click the pencil button labeled "Edit".

    The empty Checkpoints row shows its Edit button
    Figure 19 · The empty Checkpoints row shows its "Edit" button

  4. Add items and save. Click "Add item" at the bottom left for each new entry. Enter Start, Bridge, and Finish in that order, then click "Save" at the bottom right.

    The list editor shows Start, Bridge, and Finish, with Save at the bottom right
    Figure 20 · The list editor shows Start, Bridge, and Finish, with "Save" at the bottom right

  5. Check the table. The Checkpoints row shows all three items in the order you entered them. To keep the edited project in a file, save it as an SB3 file.

    The saved Checkpoints row shows Start, Bridge, and Finish
    Figure 21 · The saved Checkpoints row shows Start, Bridge, and Finish

To make a list shared across the project, start from "Global Variables" in the Backdrops tab.

2.4 Inspect and edit individual clones

Keep the ボール tab open and show the stage in the right-hand drawer, as in 1.2. Click the white stage once and press C. A second ball appears on the right. A clone is a copy of a sprite created while the project runs. When this clone starts, it adds 10 to its own speed and says the first item in route for 2 seconds. If you edited the list in 2.3, the speech bubble reads checkpoint.

Open "Sprite Properties and Variables" and choose "1" at the right of the heading. The panel shows "Editing clone 1", and the clone's speed reads 30. Set it to 35, then switch back to "Original sprite", where the value is still 20. You can also inspect and edit the clone's position and list. Changes to individual clone values and properties apply to the current run. With six or more clones, use the numbered list or the left and right arrows to switch between them.

Clone 1 shows speed 30. The stage shows the original ball and the clone saying checkpoint
Figure 22 · Clone 1 shows speed 30. The stage shows the original ball and the clone saying checkpoint

3. Follow messages through the project

3.1 Open the block that receives a sprite's message

Click the speech-bubble icon "Messages" on the left of the ボール tab. "Sent" and "Received" show how the current sprite uses each message. Right after it starts moving when the green flag is clicked, ボール sends the message ball started. The "Block" column shows the block that sends the message and the block that starts its script. Click the underlined "ball started" to switch to the code and show the sending block.

The Sent list of ボール shows the message, the block that sends it, and the start of its script
Figure 23 · The "Sent" list of ボール shows the message, the block that sends it, and the start of its script

To open the receiving block, open "Messages" for ボール again and click "Stage" at the end of the arrow in the diagram at the bottom. When the Backdrops tab opens, click "Messages" on its left side, then click the underlined "ball started" in the "Received" list. The code pane opens at the receiving block of the script that changes rounds by 1.

3.2 Follow an arrow to the receiver and see the whole project

In the diagram below the lists, each arrow points from sender to receiver. The message name sits above the arrow. A thick border marks the current target. Here, the arrow from "ボール" to "Stage" carries ball started.

The "Messages" panel in the Backdrops tab shows the stage's "Received" list and a diagram of all messages across the project.

The stage's Received list and diagram. The arrow points to the stage, whose border is thicker
Figure 24 · The stage's "Received" list and diagram. The arrow points to the stage, whose border is thicker

3.3 Rename a message throughout the project

Click the "Rename message" pencil on the ball started row. Enter ball moved, for example, and click "Rename message" to confirm. Messages are shared across the project, so the name changes in both the sending and receiving blocks. To see the new name in the diagram, switch to "Code" and reopen "Messages". Choose "Cancel" to discard an edit before confirming.

The pencil opens an inline message name editor in the Sent list
Figure 25 · The pencil opens an inline message name editor in the "Sent" list

4. Find, arrange, and reuse code

4.1 Edit blocks efficiently with the flyout and search

Click a category such as "Motion" above the code. Its block flyout opens beneath the category. Drag a block from it into the code area. Resize the flyout using the handle at its bottom right, then scroll down the block list. The browser saves the size per category, and the editor remembers each category's scroll position while you work. Switch to "Looks" and back to "Motion" to pick up where you left off.

The Motion category opens its block flyout below the top row
Figure 26 · The "Motion" category opens its block flyout below the top row
Motion reopens with its wider flyout and its previous scroll position
Figure 27 · "Motion" reopens with its wider flyout and its previous scroll position

Search inside the flyout to find blocks to add from that category. Use the search box in the main menu bar to find blocks already in your project. In the original Ball Demo, enter "move", then select "move 20 steps" to show that block in the code pane.

Project search finds move 20 steps in the ボール sprite
Figure 28 · Project search finds "move 20 steps" in the ボール sprite

4.2 Navigate with the code minimap

Move the pointer over the code pane to reveal the minimap at the bottom right. It shows how the scripts for the current sprite are arranged. Its outline marks the area you're looking at. In Ball Demo Plus, look for the green flag, C key, clone start, and space-key scripts.

Click a point on the map or drag its outline to move around the workspace. Use "−" / "+" below it to zoom. In a larger project, you can see which way to go to reach code outside your current view.

The minimap at bottom right shows the positions of the separate scripts
Figure 29 · The minimap at bottom right shows the positions of the separate scripts

4.3 Read scripts in Z or N order

Right-click empty space in the code area and open "Change code layout view". "Z layout" reads the original positions by row, left to right. "N layout" reads them by column, top to bottom. Both display the scripts in a vertical sequence so you can read through them. A check mark shows the current view. Choose "Normal layout view" to return to editing the scripts at their original positions.

Right-click an empty part of the code area to choose Normal, Z, or N layout. The current Normal layout view is checked
Figure 30 · Right-click an empty part of the code area to choose Normal, Z, or N layout. The current "Normal layout view" is checked
The Z view displays the four scripts in a vertical sequence
Figure 31 · The Z view displays the four scripts in a vertical sequence

To move the scripts to new positions, return to Normal and choose "Edit" → "Rearrange Code Blocks". Pick an order and direction to preview the positions. Click "Rearrange" to apply them.

The rearrangement dialog previews the new layout for the chosen order and direction
Figure 32 · The rearrangement dialog previews the new layout for the chosen order and direction

4.4 Split the editor to work side by side

At the top right of the code pane, choose "Editor panel layout" → "Split right". You now have two views of the same sprite. Edits appear in both, and each pane scrolls and zooms independently.

In a larger project, keep your setup script in view on one side while working on an event script on the other. To close a pane, use its "Editor panel layout" → "Close this split".

The code for ボール open in two side-by-side panes
Figure 33 · The code for ボール open in two side-by-side panes

4.5 Copy a script from one tab to another

Right-click the ボール tile in the sprite list and choose "duplicate" to make "ボール2". In the original ボール tab, right-click the script that starts with "when space key pressed" and choose "Copy". Switch to the ボール2 tab, and open its code. Right-click an empty spot in the code area and choose "Paste". The connected stack is added to the destination. The duplicate starts with one copy of the script, so you'll have two after pasting.

Copy in the context menu for the space-key script
Figure 34 · "Copy" in the context menu for the space-key script
The code-area menu in the ボール2 tab offers Paste
Figure 35 · The code-area menu in the ボール2 tab offers "Paste"
The space-key script has been pasted into the ボール2 tab
Figure 36 · The space-key script has been pasted into the ボール2 tab

4.6 Drag a script to another sprite

You can also copy a script directly from the code area to another sprite in the same project.

  1. Open the sprite list on the left and return to the original "ボール" tab.
  2. Grab the yellow block at the top of the space-key script. Start on the block label, clear of the key dropdown. Drag to the "ボール2" tile in the sprite list and release when the tile reacts.
  3. Open the "ボール2" tab at the top to see the copied stack. The original tab still has its script.
Dragging the yellow event block carries the attached block with it
Figure 37 · Dragging the yellow event block carries the attached block with it
Dragging from the code for ボール to the ボール2 tile in the left drawer
Figure 38 · Dragging from the code for ボール to the ボール2 tile in the left drawer
The ボール2 tab now contains the space-key script copied by dragging
Figure 39 · The ボール2 tab now contains the space-key script copied by dragging

When you split the editor as in 4.4 and show a different sprite's code in each pane, you can also drag a script from one pane onto the code in the other pane to copy it.

4.7 Save the edited project as an SB3 file

When you finish editing, you can save your project as an SB3 file. Choose "File" → "Save As…" and enter a project name in "Name". Under "Save format", select "SB3 (current storage settings)", then click "Choose Where to Save…" at the lower right.

The Save As dialog with the SB3 format and Choose Where to Save at the lower right
Figure 40 · The "Save As" dialog with the SB3 format and "Choose Where to Save…" at the lower right

Where to go next

These guides cover saving projects in folders and working with GitHub.