[Example Project] Random Tiles of Questions

Hey Everyone,

Happy Thursday! Wanted to share with you this example project where we randomly generate a board composed of tiles of questions.

This is similar to what you may have seen in our different examples projects where we randomly choose a question to show to the user, or create a Lens that tells a story using a story script where we have a format and drive it with data.

Download the example project

Playing with the example

In order to make your own Lens, all you need to do is modify the List of Questions script:

Then, you can modify a Behavior script that tells the Lens to show the final list of questions:

This is hooked up via the Random Questions script, which takes in the availableQuestions, and then randomly assigns it to the Screen Texts in the game panel. Take a look at the script to see a bit more detail--it’s commented to make it easy to read :)

To decorate your board, all you have to do is to use Screen Texts and Screen Image as you would usually!

Dynamic Texts

Since we’re applying our text via script, we need to make sure that our Text component will display it properly.

Specifically, note how we set the vertical overflow to shrink, so that as our questions get longer, the text will shrink to fit the available size vertically. Secondly, our Horizontal Overflow is set to Wrap, so that when the text gets long, our text will go to the next line.

Setting up the board

Let’s take a look at how our board is set up so we can see how we would edit our board.

The first thing to realize is that since the tiles are repetitive, we’ll really only need to create it once, and then we can duplicate it a couple times! So we’ll go over one structure, and it will be the same everywhere else. 

This is the basic structure for one question, you can see that there is a lot of nesting in the objects. The cool thing about Screen Transforms is that its size depends on its parent size.

Let’s start from the Question Text and work our way up.

You can see here that all the Question Text Screen Transform does it add a padding of .20 along all sides, to the Question Background object. In other words, the Question Text itself doesn't care about how big each tile is--just how it exists within the tile!

So if you want to make your board tighter, you can change the padding size. E.g. if you make the paddings all .1, then there will be less paddings along the side.

You can see we do the same to the Question Background object, so that we have some space between each tile.

Additionally, it contains an Image component, with the material Question Background. This is what provides the white background for each tile. You can add your own image to the Question Background material to change the tile background, or change it the way you would change any other image or material!

The Question object itself is what takes care of the size of the tiles. You can see that it’s width is a quarter of its screen parent transform (screen transform size goes from -1, to 1--so by going from -1 to -.5, we are going a quarter of the way).

You may realize at this point that we keep the height from -1 to 1, or all the way from top to bottom. The reason we do this is because we want to control the height in the parent Row--that way, we can easily duplicate the Row object, rather than having to duplicate every tile.

You can see in the Row object, that similarly, the height of the object goes from .5 to 1--or a quarter of the way.

Now that we have our basic set up, we just have to duplicate it a couple times and move them appropriately.

You can also see that we nested all the rows inside a Question Blocks Container--this way, we can modify how the game panel looks like. For example, like before we can add paddings around the entire board. Or, we can add a background to the entire board. Be creative!

Finally, we put that object inside a Game Panel, so that we can control how the Questions Blocks Container is set up in relation to the Lens. In this case, we enabled fixed size--so that even on widescreen displays (such as Snap Camera), the game panel will still be square.

(Warning: fixed size means that the size is no longer relative--so if you choose too big of a fixed size number, the screen transform may go outside the available space!)

Pro-tip: The Game Panel is inside an object with a Safe Render Screen region--this way we can make sure that the game panel never overlaps with Snapchat’s UI! That being said, this will affect the relative size, so if you’re using some absolute values, it may still go beyond the region.

Pro-tip part 2: You can use device simulation in the preview panel to make sure your Lens looks as you expect across devices :)

Conclusion

• Separating your logic from the view is a good way to have more control over each piece. You can hook in Behavior, and APIs to easily modify your game logic later without having to worry about breaking your project.
• Setting up your Text component well means that it will be responsive to the text it contains. You can drive components with scripts so it can work dynamically.
• Screen Transforms are relative to their parents. By nesting your screen transforms, image, and texts, you can easily control each aspect and have it be responsive to each other!

Can’t wait to see what you all come up with! Let us know what you want to see next :)

Cheers,

Jonathan