Scene Graphs

As designers, we are not expecting you to write (much) code in this course. But any work that you can do to remove work from the programmers is much appreciated. So that is why this lab is going to teach you how to make your own scene graphs using Figma and our JSON specification language. With these tools you can create the visuals for a UI element or complicated scene, and then hand it over to the programmers to hook it up to code.

In CUGL it is possible to create complicated scene graphs using JSON, without the need to write C++ or any other code. The CUGL Scene Graph Tutorial explains how to use this JSON specification. This document was created by a TA several years ago to help designers create scene graphs in JSON.

With that said, typing raw JSON can be pretty complicated, and it is easy to make a lot of mistakes. So in this assignment, you will be using a recently designed plugin that takes designs made in Figma and generates JSON code for the CUGL engine. We provide more information on how to use and install the plugin below.

As a reminder, this assignment is graded in one of two ways. If you are a 4152 student, this is graded entirely on effort (did you legitimately make an attempt), and that effort will go towards your participation grade. If you are a 5152 student, you will get a more detailed numerical score.

Table of Contents

• Useful Resources
• Assignment Tools
• Project Overview
• Instructions
• Submission

Useful Resources

Through this assignment we will assume that you already understand threee concepts: aspect ratio, Figma, and JSON files. All of them are fundamental concepts to this lab. If you are not familiar with them, then you should refer to the resources below.

Aspect Ratios

If you do not know what an aspect ratio is, the link above provides a quick overview of the topic from Adobe. This overview talks about why it is important for web pages and how to make a web page that is aspect ratio aware. Because your games will be on mobile devices, the same is true for the games that you develop.

With that said, there are some standard aspect ratios that you should be prepared for in this class. They are as follows:

• 16x9: Android phones, PC Gaming
• 16x10: Android tablets
• 19.5x9: Modern iPhones
• 3x2: Old iPhones (pre iPhone 5)
• 4x3: Most iPads
• 21x9: Ultra-wide gaming monitors

Figma Tutorial

Many of you have had courses in user interface design and have therefore worked with Figma. However, if you have never worked with this tool, it is very simple to learn. It is an extremely intuitive tool for laying out user interfaces. Follow the tutorial above to get started.

Whether you have or have not used Figma before, there is one important thing to be aware of. You must use the desktop app version of Figma. The web interface does not support our custom plugin.

JSON Tutorial

If you do not know what a JSON file is, then the above tutorial is an excellent resource for how to use them. As a designer, you do not need to know how to use JSON files in Javascript (or C++ for that matter). But you do need to know how to write and modify a valid JSON file with no errors in it.

For those of you who have taken Python, you will notice that JSON files look pretty much like (nested) Python dictionaries. And this is a helpful way to think about them. However, in Python all strings must have double quotes, not single quotes. Furthermore, all booleans are lower case (so true instead of True).

JSON Validator

When you write your JSON files, this files will have errors in them. And 90% of those errors will be the result of a comma: either a comma that is missing or an extra unexpected comma. While CUGL does provide you with error messages when this happens, it can be hard to read these error messages if you are not used to programming.

Even though you will be using Figma to create the JSON in this assignment, you are going to have to cut and paste the results into a file. So it is still possible to make it an error. That is why it is always best to test your JSON files in the JSON validator above. If the JSON file is malformed then it will tell you why and where.

CUGL Scene Graph Tutorial

Once again, this is a complete documentation of the JSON format used to create scene graphs. While this lab will take you through most of the process, you might want to keep this document around as a reference. With that said it is a little overwhelming until we have had the lecture on scene graphs. It will be necessary next week when we build off of the things you learned in this activity.

Assignment Tools

You will need two pieces of software to work on this lab. Make sure that they are installed and working before you start on the lab itself.

Figma

For this assignment, you will be working with Figma, a popular tool for designing user interfaces. Many of you already have some experience with Figma, but in this lab we will be unlocking some features you may have never seen before.

More specifically, this lab requires that you enable Developer Mode. This mode requires that you upgrade to the Professional Edition. Note that this is free to students. You just have to sign up. In our experience, they may ask you for your schedule, but your Cornell email address will automatically verify you.

Once you upodate to the Professional Edition, you will also need to create an educational team. Documents in Figma are associated with a team, and only documents saved under that team will have access to developer mode. If you log into Figma from a browser, you will see information about your account.

See the button that says Create free team? Do that. All of your documents will need to be saved to this team.

In addition, you will need to work on your document via the Figma desktop app. The tools that we need you to access are not available in the web version.

The Figma Plugin

Download: figtree.zip

The FigTree plugin is used to design (CUGL-specific) 2d scene graphs in Figma. It can be downloaded from the link above. Download this file and extract it somewhere on your harddrive. It is good idea to put it in whatever working directory you plan to be using for this course. When extracted, this folder should contain a file called manifest.json as well as a file named code.js.

To install this plugin, you have to enable developer mode in Figma. Look for the switch labeled <> in the bottom center of your window. This is show by the red outline in the illustration below.

It is possible that when you click on the switch nothing happens. If so, you should see an error message like the one below:

That means you should do just that. Save this file, and then drag that to the educational team to a previous step. Once you do that, developer mode should behave normally.

Once you have confirmed that developer mode is working, you are ready to install the plug-in. The plug-in can be installed in either developer or edit mode, it does not matter. Choose Plugin from the Figma menu on the left, and select Development > Import plugin from manifest…. Then navigate to where you saved the plugin and select the file manifest.json.

If this succeeds, you should a confirmation in the center of your screen like the one shown below.

If you are having problems installing the plug-in, try installing it while in developer mode. But when are done, turn off developer mode. You cannot edit Figma designs while in developer mode. Your workflow for this assignment will be as follows:

• Edit a Figma design in standard mode
• Turn on Developer Mode
• Use the plugin to export your work
• Turn off Developer Mode and repeat

In case you run into any errors, we also recommend that you run the development console. You can access this via Plugin > Development > Show/Hide Console. However, be warned that this console is a bit chatty becuase of issues in Figma, so not everything it says is relevant to you.

The Scene Tool

While we are not expecting you to compile code for this lab, we do need you to run a CUGL application. You should already have experience with this from the previous activity. If you were able to get the animation tool running, you will have no problem with the scene tool. If you did the last activity without ever running the animation tool, we recommend that you go back and get it working, as we will not provide you with new instructions here.

As with the animtion tool, you should download the correct tool for your platform:

• macOS: SceneToolMac.zip
• Intel macOS: SceneToolIntel.zip
• Windows: SceneToolWin.zip

In both cases you run the application by typing the name SceneTool.exe. On some platforms you may need to add an extra ./ like ./SceneTool.exe.

IMPORTANT: On macOS, remember to validate the application by typing the command

xattr -cr SceneTool.exe

Project Overview

Aspect Ratios

One of the key things about this lab is to make sure that your scene graph looks correct no matter the aspect ratio of the device. You can simulate that in this lab by altering the size of the game window. Everything that you need in this lab is located in the assets folder. Look at the file resolution.json in the subfolder boot. You will see the following code:

{
    "position":   "centered",
    "resolution": [1280,720]
}

To change the size of the screen, edit the resolution numbers. For example, if we wanted to create a 4x3 aspect ratio, we could edit the JSON as follows:

{
    "position":   "centered",
    "resolution": [960,720]
}

To see how the resolution changes, save the JSON file and run the scene tool again.

You can also change the position of the window on your screen so that it is not centered. Simply give a position like this:

{
    "position":   [50,50],
    "resolution": [960,720]
}

The position represents the number of pixels that the top left corner of the window will be from the top left corner of your monitor.

Scene Graphs

Before you start working with the JSON files, we need to give you a brief overview of scene graphs in general. We will have a much more detailed lecture about this next week, but there are few things that you need to know now.

To understand how a scene graph works, you can map out the structure with a tree. Every scene graph has a root node that is the size of your screen.

Each node uses coordinates that are relative to its parent. This means that if you move or rotate the parent node, the children of that node will also change with it. For example, if you have a window with buttons in it, the buttons will move as you move the window. In CUGL the origin of node is always the bottom left corner.

Figma works the same way, though it refers to its nodes in the scene graph as layers. If one layer is indented underneath another that means it is a child of that layer. Once again, moving the parent layer will move its children as well. Unfortunately, Figma places its origin in the top left corner. We will talk about why this happened later in class, but it should not cause any problems for you this week.

In this activity, the scene has been named “lab”. You will use Figma to replace the contents of the JSON, adding new scene graph nodes and positioning them. You will do that by creating nested layers in Figma, You will create layers for text and images, and you will use Figma frames to group them together. When you are done, the left side of Figma should look like this:

Each entry in this panel is node in the scene graph:

• root is the top level node, representing the entire scene
• background is the image for the scene’s background
• startmenu is the collection of nodes for the center menu
• menuboard is the wooden board that is the backdrop for this menu
• menu is the collection of the three grey buttons
• button:button1, button:button2, and button:button3 are the grey buttons
• button:left and button:right are the corner buttons in the menu

The meaning of the other elements will become clear as you work through this activity.

Layout Managers

The scene graph is only part of the picture. In order to make your application responsive to different aspect ratios, we also have what are known as layout managers. Instead of giving a node a specific location in your application, you want some way to specify how the application changes as the aspect ratio changes.

The layout manager that you will be working in the class is the anchor layout. This is a layout in which nodes are placed at one of the borders (or in the center of the screen). For example, if we place two nodes – one at the top left and one in the bottom right, then they will adjust as shown below:

The nice thing about this layout is that it is the default behavior of Figma. When you select an object, you should see a panel named Constraints in the top left corner.

This defines how your object is anchored relative to its parent. If you choose Center/Center like we have, the object will always keep the same distance from the center of its parent whenever it changes size. Similarly Left/Top will anchor the object to the top left. Finally, Left and right and Top and bottom are equivalent to the “fill” option in CUGL, stretching the child node to fill up its parent.

However, there is a very important difference here between CUGL and Figma. If the parent is not the same size as the child, choosing the “fill” option will not resize the child in Figma, but it will in CUGL. Layout managers in CUGL and Figma do not match exactly, and CUGL may show a slightly different scene if you are not careful (We have an open MEng project to fix this)(.

The other important layout in CUGL is the float layout. It is used to automatically arrange objects in a line, either vertical or horizontal. It is ideal for a menus like the grey buttons in our example. Figma has a similar concept called auto layout. You can access it by pressing the + button for Auto Layout on the right.

Once again, while CUGL is very close to Figma, it is not exactly the same. There are two important differences between CUGL’s float layout and Figma’s auto layout. First of all, in Figma, it is possible for auto layout to push an object outside of the bounds of its parent. CUGL will never do this, opting instead to wrap the objects around to a new line.

The other issue happens when you make an object invisible. FigTree respects visibility in Figma. So if you make an object invisible, it will still add it to CUGL, but it will not show it on the screen (however, your programmers can make it visible at any time). But if you make an object invisible in Figma, it will remove it from the auto layout. The other layers will be arranged as if it is not there. CUGL will not do that. Making an object invisible does just that, but it is still part of the layout. So there will be a gap where the object is supposed to be.

Layout managers are one of the hardest parts of scene graphs to wrap your head around, and thankfully Figma makes them a lot easier. But as we have said, you will always need to be careful of the differences. Otherwise the image that you get in CUGL will not match what you see in Figma

The JSON Description

In CUGL, all scene graphs are specified with JSON files.The scene that you are working with is in located in the file assets.json. If you look at this file, you will see the following

"scene2s" : {
    "lab": {
        "type"      : "Node",
        "comment"   : "This is the root node of the scene for the lab",
        "format"    : {
            "type" : "Anchored"
        }
    }
}

The JSON object "scene2s" is the list of scene graphs for this game. There is only one scene graph, which is called "lab". Its root is a simple node with an anchor layout. For this assignment, you should always have the root node "lab". Everything that you create in Figma will replace everything in curly braces after the "lab" key. Because of how assets work in CUGL, you will need to restart the Scene Tool application every time you change this file.

If you look at the files, you will notice another JSON file called "loading.json". This is the loading screen with the CUGL logo at the beginning. Do not modify this file. However, this file is a good reference for you to look at it if you are ever getting stuck.

Instructions

Once you have figured out how the project all fits together, it is time to start making changes. You should start with an empty Figma 1280x720 frame, which is the basis of your scene (essentially Scene Root). If you look in the layers panel, you will notice that Figma gives it a name like “Frame 1”. The first thing you must do is change this name. CUGL wants names that are valid identifiers. That means they can only contain letters, numbers, and the underscore (), and they cannot start with a number. They absolutely _cannot contain spaces. We recommend that you rename it to root to match our scene layout above.

Renaming is going to be an important part of this assignment. Figma loves to put spaces in names, and you have to get rid of them. If you attempt to use the plugin on a layer with a space it it, you will get an error in the developer console window. This will be the most common error you will run into while working on this assignment.

Make sure that the frame has X and Y position 0. If you do not do this, CUGL will treat your entire design as if it were “offscreen” for the entire activity, and you will never see anything other than a grey screen.

Once you made sure the frame is in the right place, we recommend that you make the following changes in order.

1. Add a Background Image

All of the assets that for this assignment are contained in the various folders with the scene tool that you downloaded. Under the textures folder you should see the file "background.png", which will be the background for our scene. Import this file into Figma and make it a child of the frame. Make sure it is named background in the layers panel to the left. Change the height of the image to make it the same height as the frame and move it to be flush with the left side of the frame. Note that only half of the background image will be in the frame, so your Figma should look like this:

Now, you need to add the correct constraints. These constraints will ensure that the outputted JSON will look correct no matter the aspect ratio. For the background image, we want the image to stretch in the y-direction to match the height of the screen, but because our background image is so long we just want to lock it to the left side so the rest of the image is revealed as width increases. To do this, change the horizontal constraint to Left and the vertical constraint to Top and buttom.

The idea behind this constraint is the we are “locking the height” of this image to all devices. This means that, no matter the aspect ratio, the full height of the image will always be visible. Only the horizontal portion of the image will change. And when that changes, the left edge of the image will always be visible. Hence the aspect ratio only changes the amount of image we see on the right. While it is not common practice to anchor a scene on the left (usually aspect independence is done by centering the image), height locking is a common practice that you are likely to do in your game.

Now it is time to use FigTree. First, make sure the the frame root is selected in the layer panel (you will get the wrong answer if background is selected). Now switch to Developer Mode. You should see the following JSON code under FigTree Scene (make sure you are looking at the Inspect panel).

{
    "type": "Node",
    "format": {
        "type": "Anchored"
    },
    "data": {
        "anchor": [
            0,
            0
        ],
        "size": [
            1280,
            720
        ],
        "angle": 0,
        
  Show 36 more lines of code

Click to clipboard icon to copy all of this code into your clipboard (including the lines you cannot see right away). Now past this into assets.json so that it replaces the curly braces after "lab". When you are done, the JSON should look like this:

{
    "textures": {
    },
    "fonts": {
    },
    "scene2s" : {
        "lab": {
            "type": "Node",
            "format": {
                "type": "Anchored"
            },
            "data": {
                ...
            }
            ...
        }
    }
}

You will also notice some more JSON in Figma in the box labeled Textures. That is because the FigTree scene uses an image file, and it has to know how to associate the name (background) with file itself. Our file assets.json does not have any textures, so you need to copy this as well. Once again, click on the clipboard icon and paste this into assets.json, replacing the curly braces after "textures" (but make sure you do not accidentally delete the comma).

You are almost ready to use the scene tool. You will notice that in the JSON you just copied, it says [filename].png. That is because Figma does not know anything about the file locations in our game, so it can only generate placeholders. You will need to replace [filename].png with background.png which is the name of the file in the textures folder.

Ensure that your JSON is properly formatted either visually or using the JSON Validator. Once you are happy, run the Scene Tool. If your game crashes when you run it, the cause is most likely a faulty JSON (did you accidentally delete that comma after "textures"?). If it is working correctly, the default aspect ratio (16x9) will look like the image below.

You should check that your image is correctly anchored and sized for multiple aspect ratios. For example, for 19.5x9 (iPhone), it should look like this

If you are having trouble with this step, it is important to get help immediately. Come to office hours to get some help.

2. Add the Menu Backdrop

Next, import the file menu.png to Figma and scale this image by 0.8, using the K shortcut (set the size to 0.8x). Move the image so that it sits flush to the top of the screen and is centered. We recommend that you rename it as menuboard in the layers panel, as you are going to use the menu keyword for something else.

You are going to want to associate some buttons with this menu, so you should frame the menu by right-clicking on the image and selecting Frame Selection. Call this frame startmenu. This is where you will put all of our assets for the menu. This is also the name the programmers will use to refer to this subcomponent (should they need to).

However, before you do that you need to set the constraints of the image and the frame. We want the image to be centered in the frame, so set both constraints accordingly. We then want this frame to always remain centered and remain flush to the top. So you should change the horizontal constraint of the frame to Center and the vertical constraint to Top.

When you are done, copy the JSON over and use the SceneTool. The 16x9 version should look like this.

Try this on different aspect ratios. The menu should always remain centered at the top. It is also possible to test this in Figma. Take the right edge of the root frame and drag it left-and-right. The background image will always remain anchored on the left and the start menu will remain centered.

3. Add Navigation Icons

You are now going to add two navigation icons to the menu. When you are done, the 16x9 version should look like this:

You are going to start with the icon for left navigation. You are going add a new image to the scene graph that uses the left arrow texture called leftarrow.png. You should make this image a child of the startmenu frame, not the root node.

The icon texture is a little too big, so you also want to scale this leftarrow image by 0.8 (shortcut: K). Remember that you already resized the menu backdrop in a previous step by the same amount. It would have been nice to apply this to the startmenu group so that all of its children are scaled accordingly. However, while CUGL is capable of doing this, Figma is not. Figma requires that any scaling be reapplied for each element. Of course, one way to around this is to have all your textures already at the desired resolution!

In the constraints section, anchor it to the bottom-left corner with Left and Bottom. Notice that the bottom left corner refers to the bottom left of the menu, not the screen. That is because the navigation icon is a child of the menu, and not a child of the screen. Understanding this is important for creating interesting UI elements.

Now we want to adjust the left arrow to an appropriate position. In this lab, we want the offset to be roughly 10% of the dimensions of the startmenu parent. In the other words, you should to nudge the image up by 10% of the size of the parent startmenu, and to the right by 10%.

You can eyeball it and drag around, or set it explicitly via the X and Y fields in the right sidebar The values are approximately 53 for X and 381 for Y. To check the distance from your leftarrow child node to the bounds of the parent, you can select the arrow and hold Alt while hovering your cursor over the parent.

Note that the current iteration of the Figma plugin will export the anchor offset as a percentage. You should see offset values in the "layout" object close to 0.1 if you positioned it correctly.

"y_offset" : 0.1,
"x_offset" : 0.1

Notice – just like anchors – we usually measure offsets in terms of a percentage. While it is possible to express this offset in pixels (see the documentation), percentages are much better for aspect ratio independent design. A value greater than 1 will nudge the child outside of the parents content box. If you need to nudge an image left or down, you would use negative values.

Try out what you have done by running the scene tool again. Remember that you need to copy the new JSON for both the scene and the textures, as you have added a new file this time. And again you will need to manually input the name of the two image files.

When you run the tool again, you should see the following:

Repeat this process with the texture "rightarrow.png to add the right arrow. You will need to scale again by 0.8. The right arrow will be positioned from the bottom right corner of the menu. That means you need to set its contraints to Right and Bottom. Nudge it so that is 10% away from the corner in both directions. That means you should see something like this in its JSON:

"y_offset" : 0.1,
"x_offset" : -0.1

Note that "x_offset" is negative because it is shifted left from that corner.

4. Add Navigation Buttons

You have a somewhat interesting scene graph now. However, it is made up entirely of static images. Nothing happens when you click on it. So your next goal is to turn the left and right arrows into buttons. You do not need to write any code to do this. The project that we have given you automatically detects any buttons in your scene graph and activates them. So when you are done, you will be able to click on one of the buttons and have it darken, like in the image below.

Technically, a button is a scene graph node with two children: an up child and a down child. When the button is up, only the up child is shown. When it is down (pressed), only the down child is shown. It is also possible to create a button with only an up child. In that case, the button will darken when you click on it. That is what you will doing in this step.

To make an image into a button, you will need to put the image in yet another frame (whenever you group things together, you need a new frame). Select the left arrow and once again choose Frame Selection.

The frame will represent the button. The image represents what the button looks like when it is up (not pressed). But you need to tell Figma that this frame is a button, and not a normal frame like the other ones. But doing this is really simple. You just need to tag the frame.

Remember that all of the objects in the layers panel must have names that are valid identifiers. That means they can only contain letters, nubmers, and the underscore. However, it is also possible to put a colon (:) in a name. Doing so tags the frame as something special.

Name this frame button:left. The button before the colon tags this frame as representing a button. The left after the colon is the actual name of the object, and it is the one that the programmers may wish to reference.

Once you have done this, generate the JSON. You should see an object named "left" that has type "Button". Try it out immediately in your scene tool. You will see a difference between the left arrow and the right arrow. The right arrow is still a static image, but the left arrow darkens when you click on it. That is how you know it is working!

Repeat the process for the right arrow to turn it into a button too.

5. Add a Labeled Button

A label is a static, uneditable piece of text. But text in a game is not just a matter of typing characters. You need a font to display it on the screen. Fortunately, we have provided you with some fonts in the font directory for the scene tool.

However, to use these fonts in Figma, you will need to install them first. Follow the instructions for your computer. You will need to restart Figma to access them after installation. To verify that the font is installed, select the text tool and start to type something. You should see a Text panel to the right. Just below that you can select the font. The font we have given you is called Gyparody. If it is successfully installed, you should see something like the following:

If you are having problems installing the fonts, please contact a staff member for help.

Now add some text anywhere inside of startmenu. Type the word "first". When done, select the text in the layer menu. Change its font to Gyparody and make the style Heavy. Set the font size to 38 point. When you are done, it should look something like this.

We want you to turn this text into a button. But first you need to give it a background. While in CUGL we can give text color backgrounds, that is not possible in Figma. You will need to add new object as a background. In the textures folder there is an image named "greybutton.png". Add this to your design and frame the image. This frame now creates a group that you can add the text to, combining the text and image. Center both the image and the text in the frame. Make sure the text is on top of the image and change the color of the text to white. It should now look like this:

Before moving on, we want you to make some changes to the contraints on these objects. While these constraints will have no effect on this activity, you will need them when you continue with this scene next week. First of all, set the image constraints to Left and right and Top and bottom indicating it will fill the entire frame enclosing it. Second, we want you to change the text from auto width to fixed size. Give the text a width of 200.

Now it is time to turn this into a button. You might be tempted to add a "button:" tag to the frame containing the image and the text. However, that is wrong. A button needs to have one child representing its up position. This frame has two. Instead, you want to select the frame and choose Frame Selection. Yes, now you have a frame containing another frame. This outer frame should be tagged as the button. Call it "button:button1". Call the interior frame "up", indicating that this is what the button looks like in the up position.

When you are done, it is now time to try it out in the scene tool. You have added a third texture, so obviously you will need to update the "textures" entry again. But this time you have added a font as well. Scroll down until you see the JSON for fonts in the plugin panel. Copy this into assets.json, replacing the curly braces after "fonts". Once again, you will need to manually enter the name of the file. Since you used the heavy style of Gyparody, that is the file gyparody-hv.ttf.

When you have done this, run the scene tool. You should have a new button you can click on.

6. Complete the Menu

Repeat the process above to create two more buttons. They should have the same background but different text. One button should be labeled "second" and the other "third". They should have the same size and constraints as the button for "first".

As the last step, you want to arrange these buttons together in a vertical format. Create one last frame, which you will call menu. It should an immediate child of startmenu. Make the frame 320x280 and center it roughly in the menuboard image.

Once you have done that, add the three grey buttons to this frame. They should be ordered "first", "second", "third". You are now going to perform an auto layout. Select the frame menu and press the plus symbol next to Auto layout on the right. Choose the down arrow for a vertical layout. Center the layout in the middle of the frame. Finally, set a vertical gap of 30 pixels between the buttons. When you are done, you should have the final image:

Export the JSON to the scene tool and try everything in CUGL. Make sure to try several different aspect ratios and watch what happens to the layout. When you have finished that you are done with the activity.

Exploring FigTree

The Figma plugin for CUGL is very new and still very experimental. You have seen most of what it can do. You can also use it to add rectangles (including rounded rectangles) and ellipses to your scene, but no other shapes.

The key thing to understand about FigTree is that it is primarily a layout tool. Some of you may be really good at Figma, and use it like an artist tool. You add drop shadows and all sorts of graphics effects. FigTree cannot support any of these. FigTree is primarily a tool for laying out images drawn in another program, and annotating these images to turn them into UI elements.

Even as a layout tool, FigTree does not support components, instances, or other advanced Figma features. This is mainly because those features are incompatible with a singular scene graph (they are more intended for storyboarding).

With that said, FigTree does support one additional UI element: a text field. A text field is an label that you can edit. When you click on it, a cursor will appear and it will allow you to type (assuming that there is room in the text box). To create a text field, simply create a text object in Figma and tag it with "edit:". We recommend that you don’t try this in the buttons, as editable buttons have some weird behavior. Instead you might want to add some new text to try it out.

Remember that you can only type text into a text field if there is enough space for typing. By default, Figma applies auto width to all text, meaning there is no room. This is one of many reasons why you want to give a fixed width to text objects.

There are several other UI elements in CUGL, including nine patches, sliders, and progress bars. Unfortunately, those are not supported by FigTree. You can only add these by manually modifying the JSON files. That is what you will do next week.

Submission

Due: Fri, Feb 07 at 11:59 PM

After a shorter initial design lab, this one is obviously more work. However, we hope that the new plugin makes it possible for you to work on this lab without understanding too much about how CUGL scene graphs fit together. We will have a proper lecture on scene graphs before the next activity.

To turn in the lab, simply submit your final assets.json file to CMS. We do not need anything else. We want the file as it was at the end of Task 6. If you experimented with FigTree and added anything else (like a text field), please remove it before submission.