So one of the “funnest” programs that I
like to make is a choose your own
adventure game just because I like
combining the creativity with a little bit
of code and we made one for you in the
sample apps, so if you want to go into the
sample apps and check it out you can go
start with that and make
your own from there.
But right now, I’m going to show you how
to do one on your own getting started,
starting with nothing. So, what I’ve got
here is – I’m right here in code studio
and I like to start in design mode.
Because in design mode, I can start by
just designing the app without even
thinking about what the code is going to
look like. The first screen in my app is
to be the first question in my “Choose
your own adventure”, so let’s pull some
text out there and let’s say, erm, “You
wake up, you’re in a desert”, because that
seems like a place you would wake up –
“You see a skateboard and a camel.
- Which one do you take?”
That seems like a reasonable question -
let's increase the text size of this
because I want it to look a little bit
bigger - it's nice big question right here
and I’m going to drag it right into the
middle and now I’m going to add 2 buttons.
Button one is going to be for Skateboard
so we’ll change the text of that one to
say stake – didn’t spell that right -
skateboard and the id of that one is going
to be skateboard, so I can remember which
button it is and then I’ll make that
button a little bit bigger. I feel like
skateboard should be purple for some
reason so I'm going to make it a nice big
purple button and then let's add a button
for camel! Also a good choice if you wake
up in the desert - Camel - and the id of
that one I’m also going to make camel and
now I’m going to make that one big, make
them of equal size so people don't know
which one to pick. Now I’m going to go
design the next screen before I write any
code, before I make it go anywhere or do
anything, I’m just going to go ahead and
design the next screen that’s going to
happen. So let’s go to new screen and
let’s make this our… no button, I don't
want a button. We’re going to use some
more text. We’re going to make this our
our... we'll make this one our
Camel screen. So what happens if you’ve
got a camel – so let’s see – if you’ve
got a camel and you go into the desert -
seems like a good choice! It was a long
hard slog. After five days of treking
through - spelled trekking wrong – let’s
go for wandering – wandering through the
desert you eventually make it to the city.
Congratulations!
And make that nice and big, let’s go with
font size up here – nice big font and
there we go – that is screen two and what
I want to do next is add some pictures,
add some backgrounds, but for right now,
just teaching the basics of how to get
coding, so I’m just going to move on and
add another screen. This is the screen
where the person picked the skateboard.
If he picked up the skateboard – I think
he died! I don’t think – I don’t think
skateboards are a good choice for the
desert. We’ve got our “You Died.” Screen,
so now, if you look up here, you can see
we’ve got three different screens – we’ve
got our intro screen, we’ve got the screen
we want to go to if you choose camel and
we’ve got the screen we want to go to if
you choose skateboard. And I’ve labelled
them differently – so let’s redo that
labelling. Let’s call this
“skateboardScreen”, so that they are all
labelled in the same way.
Now, let’s go back to our intro screen,
and let’s actually make these buttons work
So what I want to happen is I want when I
click on the skateboard button, I want it
to go to the skateboard screen. As you can
see here, when I click on the
skateboard button, I get all these
different properties – I can set the text,
I can set the height, the width of the
button, I can set the colour, background
colour of the button, but there’s also
this other tab next to properties for
events. Now an event is something that can
be called when you interact with an object
So, if I have a text input object, then I
might get an event when they change the
text in it or when I, erm, when I interact
with it in another way, like click on it.
For a button, the main event that we care
about is clicking on the button and as you
can see here, under events, for button,
I’ll see that there is a click event.
Underneath that, I can see that it’s
triggered when the button is clicked with
a mouse or tapped on the screen.
Perfect – I’m going to click “Insert and
show code”, and it’s automatically going
to put the code into our program so that
when the skateboard button is clicked, it
will let me know that the skateboard
button is clicked. This function is going
to run right here, and what it’s going to
do is it’s going to log into the console,
that I’ve clicked the skateboard button.
Let’s try it – I click run, I click on
skateboard, and right down here to the
console, I can see that it logged that
I’ve clicked the button. It’s a good start
but I don’t want to actually just want to
log to the console. What I really want to
do is switch screens! So, let’s get rid of
this “log into console” line right here
and under UI controls at the very
bottom, you can see a function right here
for setting the screen. I’m going to go
grab that, put it over here, and when the
skateboard button is clicked, I want to
switch to the skateboard screen. Now I’m
going to do the same thing for the camel.
Let’s go back to design mode and on the
camel button, we’re going to insert and
show code. Instead of logging to the
console that the camel button was clicked,
what we are going to do is we’re going to
set the screen to our camel screen. There
we go! Should we try it out, click run,
and if I click camel - I win the game!
Which is fantastic! If I reset my game
and I run it again and I click skateboard
– I die! Which is sad, but it makes sense,
because I’m using a skateboard in a
desert. So, hopefully you guys can invent
your own games that are more fun and more
interesting than this one and you can
again check it out on our app lab page
and there’s a list of apps and a longer
“choose your own adventure” game that you
can use to get started. Thanks!
Subtitles by the Amara.org community