Scratch To Unity: User Interface

The layouts of Scratch and Unity are pretty different, and Unity can be a bit overwhelming by comparison. That is an unfortunate by-product of having so many features. It’s not as bad as you might think though, we just need to re-orient you by letting you know the equivalent location of where and what things are.

When scratch loads up, you’ve already got a sprite in a scene, and there are plenty of colorized and categorized code blocks begging for your attention.

Before you can run Unity, you’ll need to create a new project. Open the Unity Hub and select the “Project” tab on the left if needed.

If you already had a project created, you could select it from the list and it would open automatically. In this case, we will create our first project. Click the blue “New” button in the upper right corner of the Hub.

Now you can select a template. Pick the 3D template for now. Provide a name in the “Project Name” field, and finally click the blue “CREATE” button in the lower right.

When Unity loads up, you have an (almost) blank scene. I say “almost” because they did include both a camera and a light in the template.

The Stage

In the upper right corner of Scratch, you have a preview window of your game. You will use this while working to see the effect of your code blocks, and it also represents what other people will see when you publish a final product.

In Unity, you have two views that serve a similar purpose. Look in the top center of the window and you will see the Scene Tab is already selected. This gives you a working view of your “stage”. You can manipulate this view to see your content from a variety of angles and perspectives to make it easier to see how your objects are positioned relative to each other.

You can use the left mouse button to click and drag inside the scene view to pan (move) around inside it. If you hold the alt key and the left mouse button, you can click and drag inside the scene view to rotate your view of it. Finally, if you want to zoom to look at something centered in the screen, you can left click to select it, then click the ‘f’ key. There are additional keyboard shortcuts and mouse actions you may perform, but those are the ones I use most frequently and are good enough to get started for now.

In the upper right corner of the Scene view you will see a block with colored cones sticking out of the center. Click the red cone, labeled ‘X’, to see your scene from the side. Click the blue cone, labeled ‘Z’, to see your scene from the front. Click the green cone, labeled ‘Y’, to see your scene from the top. The X, Y, and Z are called “axis” and are commonly used to represent the coordinates of 3D space. You are probably already familiar with X and Y from Scratch, where X allowed a sprite to move left and right, and Y allowed a sprite to move up and down. The new Z axis allows objects to move toward or away from you.

Now Click the center cube itself, and you can switch between two projections of your scene. “Isometric” and “Perspective” describe how the world is projected onto the screen. Perspective matches closely to how your eyes work. Things that are far away look smaller and things that are close look bigger. You can also look at the way the grid lines appear to converge at points off in the distance. You will probably use this projection the most, because it looks like what you normally see.

With an isometric projection, objects are flattened, so that they appear with the same size and spacing regardless of their distance. This is very obvious in the grid lines as they no longer come together in the distance. You may use this projection in special cases, such as when you only want to work in 2D, or to make it simple to accurately position your objects. For example, it would be much easier to position an object on the floor by seeing it in a side view with an isometric projection, than it would be to try the same task from a perspective view.

The scene view is a great place to work, but it does not accurately represent how your scene will look when you play or publish it. For that, you need to click the “Game” tab that is to the right of the “Scene” tab. The position and rotation of the “Main Camera” object in the scene is directly responsible for what you will see here.

Adding Content To the Stage

The Scratch template already provides a sample sprite to start playing with. Adding additional sprites is as easy as clicking the add button in the bottom corner. All of the objects that are present in your scene will appear in this section of the window.

The hierarchy pane of Unity is the general equivalent. You will see it in the top-left corner of the window.

The hierarchy pane shows what GameObjects are present in your scene. A default Unity template only includes the “Main Camera” and “Directional Light”. But this pane also has a “Create” menu button which you can use to to bring new GameObjects into the scene.

Click “Create” -> “3D Object” -> “Cube”.

Now you should see a new entry named “Cube” in the Hierarchy pane, and a happy little cube in the middle of the Scene view.

I lovingly think of these primitive shapes as “programmer art” and I use them to make prototypes of pretty well everything I ever make. However, I imagine that some of you may get impatient and want something better to look at. The easiest way for beginners to obtain nice looking assets is to use the Asset Store. If you look at the top center of Unity you should see the “Asset Store” tab to the right of the “Game” tab. Click the Asset Store tab and take a moment to browse its contents.

If you want models (think of a model as like a 3D sprite), you’ll find them. Want animations, sounds, special fx (like explosions or fire), or even entire game templates that you can learn from? No problem! A lof of the content is paid, but you’ll even find high quality content for free.

If you go this route, you will feel like you are making progress very quickly and may surprise yourself by what you can do.

More advanced users may already know some free art generating programs like Blender. You can create your own 3D or 2D content in a variety of programs and import your work into Unity to play with. This process is as simple as drag-and-droping the file you want into the “Project” pane (found in the lower left corner of Unity).

All of your content, whether imported from the asset store or added manually, should be placed in the Assets folder. I highly recommend you organzie your project with sub-folders. You can create a folder from the “Create” button, then select “Folder”.

Some common folders you might want are:

  • Scripts – All of your code would go here.
  • Models – All of your 3D models could go here.
  • Textures – All of your images could go here.
  • Audio – All of your sound files could go here.
  • Prefabs – Prefabs are saved configurations of GameObjects you can reuse.
  • Resources – This is a special folder that allows Unity to dynamically load additional content that didn’t start out in the scene.
  • Editor – This is another special folder that allows you to create your own inspector windows and tools for your content.

Once content is imported into the project, drag and drop it from the project pane into the scene view or hierarchy pane to “instantiate” it (make it appear in the open scene).

Editing Content

In scratch, you can easily position your sprites by left clicking and dragging them. For some tasks, like adjusting whether a sprite is hidden, or changing its size or direction, you might use the inspector.

Unity also has an inspector pane, which you can see on the right side of the screen. Note that it will look different depending on the currently selected object. You should see something like this when the “Cube” is selected:

You can toggle an object to make it hidden by unchecking the box next to the name text field in the inspector. Look a little further down and you will see a section called “Transform” where you can enter the position, rotation and scale of your object. There are other “components” attached to this GameObject as well such as the Mesh Filter, Mesh Renderer and Box Collider. You can ignore those for now. All GameObjects in Unity are built by assembling these sorts of components, almost like putting together Lego bricks. The code we write later is also considered a component we will add.

Usually, you wont want to position your content by typing in values into the inspector. You can use the mouse to position your objects in the scene just like you can in Scratch, but you have to select the right editor tool first. Look in the upper left corner of Unity at the toolbar.

The tools in order from left to right are:

  • Hand Tool – The icon on the button toggles between a magnifying glass and a hand (depending on if you hold the alt-button), but selecting this tool will allow you to control your view of the scene itself.
  • Move Tool – Select this tool and handles will appear over selected game objects which allow you to move objects. For example, if you click and drag the red arrow, you will move the object along the X-axis.
  • Rotate Tool – Select this tool and handles will appear over selected game objects which allow you to rotate objects. For example, if you click and drag the red circle, you will rotate the object around the X-axis.
  • Scale Tool – Select this tool and handles will appear over selected game objects which allow you to scale objects. For example, if you click and drag the red box, you will scale the object along the X-axis.
  • Rect Tool – This tool was added to aid in positioning sprites, especially for user interfaces. You can actually use it even with 3D objects though and is a unique mix of scaling and positioning objects based on fitting the object within the handles of the rect.
  • Move, Rotate, or Scale selected objects – This single tool is the equivalent of the earlier Move, Rotate, and Scale tool, where handles for all three types of manipulation appear all at the same time.
  • Available Custom Editor Tools – A place for you to access custom tools. See here for more.

The image above shows our cube selected, and the Move Tool activated.

Next to the Tool buttons are “Pivot” and “Global”. These are also Toggle buttons and control how the handles of some of those tools work.

  • Pivot / Center – determines where the handles are placed. Pivot is the origin of the mesh, which in the case of our cube is also the center of the cube, so you wont see much of a difference yet. Some models, like characters, will be built standing on top of the origin. In that case, the pivot would be at their feet, and the center would be at their waist.
  • Global / Local – determines the coordinate space that the handles are placed in. This is most obvious by rotating the object, then choosing the Move Tool and toggling between global and local. With global, the Y axis will always point up. With Local, the Y axis points in whatever direction is up from the perspective of the selected object.

Playing the Scene

When you’re ready to test the fruits of your labors, you’ll want to know how to actually play the scene. In Scratch, you press the green flag above the stage to start your scene, and the red stop sign to stop it.

Unity also has buttons to control playback above the scene view. It looks like a play button on your DVD player (the arrow pointing right). Press the play button a second time to stop the simulation.

There are a few important tips you should know:

  • You can use the inspector to modify your scene while it is playing.
  • WARNING – edits to your scene made in play mode wont be saved when you exit play mode.
  • You can pause the scene with the pause button, then step through the simulation a frame at a time using the step button. The Step button is the button to the right of the pause button.
  • You can pause your playback even before starting the scene. This makes sure you can step through even the very first frames of the simulation.


In this lesson we learned how to create and open a Unity project. Then we looked over the main areas of the Unity user interface and saw how it relates to Scratch. We also looked at ways to add content to the project and our scene, and edit the content such as by moving, rotating and scaling it. You should now understand how to view the content from various angles, and when you’re ready, how to play the finished result.

If you find value in my blog, you can support its continued development by becoming my patron. Visit my Patreon page here. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *