Game App - Rollin


#1

Overview

Many board games are impossible to play without dice - they come in all sorts of shapes and sizes and are inevitably one of the first things to go missing. With Rollin, as long as you have your phone, you have your dice. In this app we will use a random number generator to simulate a dice roll and play some sound effects so that you can completely customise your own gaming experience.

rollin

Design

Since we want the image to be in the middle of the screen we can use a column almost like a screen within a screen. The image can be centered within the column and the button to roll the die is placed at the bottom of the screen, beneath the column.

25

Upload Files and Images

Underneath the invisible compoents area there is a section for files. We want to upload 6 images, one for each side of our die to this section. One way to do this is with the upload button. You can select one or more files and add them to your app very quickly.

Another, arguably faster way we can do this is by dragging and dropping all the files at once:

Blocks

Every time the die is rolled we want a new random image to appear. To do this we first need to create a list of all the images that we just uploaded:

10

Since we’ll be showing a new image every time the die is rolled we can create a function called “roll” for this task. At the moment all this function does is select a random image from our list of images:

24

Now, every time Button1 is clicked we can roll the die like this:

28

Don’t forget to roll it when the screen starts too:

19

Sound Effects

We can make our apps more engaging by adding in sound effects. First, let’s go back to the designer and add in a Sound component. Note that the sound component is an invisible component; intuitively this makes sense because we can play and pause sounds but we can’t see them. We can upload sound files in the exact same way that we uploaded our images and then set the source like this:

20

Blocks 2

The nice thing about using functions is that if we update this one function then every event that calls the function will also be updated:

13

Remix

This app is also available in our gallery of open-source sample apps for you to remix.

Why not create your own images for the faces of the die?
You could add extra dice to the app?
How about creating an 8, 12 or 20 sided die?

Credits

Wikimedia
Freesound