Intro­duc­tion to Goril­la Game Builder

Nick Hodges 0:00
Alright. Okay, hel­lo again every­one, can you see my slides and hear me? Alright, I’m gonna take the lack of ter­ri­fied yelling from the rest of my team that you can. Alright, fan­tas­tic. So

0:11
thank you so much. Thank you that was, that was a won­der­ful talk. And it’s cer­tain­ly real­ly grat­i­fy­ing for me to see these things actu­al­ly come togeth­er and be made first and then actu­al­ly go out there and actu­al­ly be col­lect­ing data in the world. That’s super excit­ing. So you’ve seen quite a few games now both are one of the exam­ples that Katie and Lucy have done and the demos are Jo showed you ear­li­er. And as as some­body was say­ing, if any of you are think­ing that, Oh, this looks quite com­pli­cat­ed, I don’t think I’d be able to do that, don’t wor­ry, I’m going to show you how the game builder works. And also, I’m going to show you how some of those dif­fer­ent effects are created.

I should warn you, that this will com­plete­ly ruin games to you as these things are a bit like a mag­ic trick. Once you know how it’s done, you can’t unsee it. And it’s all smoke and mir­rors. And you’ll see how this is done in a bit. So to start off, and so when we came to design the game builder, obvi­ous­ly we’re mak­ing games for research for quite a long time, as Jo said ear­li­er, and we knew we want­ed to build a tool to let peo­ple do this them­selves, it was no good just build­ing all these things bespoke each time. And well, we the main sort of guid­ing prin­ci­ple that we want­ed is, first of all, and this needs to be easy and acces­si­ble to put togeth­er and the sort of rough bar that we kind of said we want this to be about as easy as Pow­er­Point to put togeth­er. You saw uni­ty ear­li­er that Lucy’s team had been using, which is a fan­tas­tic engine, but it’s big and com­pli­cat­ed. And it takes a takes a lot of stuff to put stuff togeth­er. I’m a great fan of uni­ty, I’ve put stuff on Uni­ty before. But it’s not it’s not quick and sim­ple to put things togeth­er. And the oth­er bit was, again, you saw in both of the talks ear­li­er is that we actu­al­ly we are mak­ing games for research. We’re mak­ing research games, not just games. And obvi­ous­ly, we want some game like stuff in there. So we actu­al­ly two things here, we need all the we need the core tri­al engine under­neath it. So we need reac­tion times we need response pro­cess­ing, we need prop­er tri­al struc­ture and all of the ran­dom­iza­tion and con­trols that go with that. And you saw that in both the talks ear­li­er, we still need all of the kind of stuff we’re essen­tial­ly used to when we’re build­ing our sort of main­line reac­tion time tasks.

But we want this game to go on top, we want this par­ti­cle engine on top, we want this ani­ma­tion sys­tem on top, and it’s the two togeth­er. That is how a game bet­ter kind of comes togeth­er to give you all of the sys­tems that you need. But with all of the exper­i­men­tal pow­er that that you need in order to actu­al­ly do research with it. So the first cool bit as peo­ple have said is the ani­ma­tion sys­tem. So I’m gonna show you a bit about what this looks like. So here we are, I’ve got a rab­bit. And I’ve got set up a sim­ple ani­ma­tion sequence that just shows a whole bunch of the dif­fer­ent ani­ma­tions in the sys­tem. So if I, if I just play it here, we can see that you can make it bounce up or down, you make a scale up and down, you can make it spin, you can make a fade in and out, and so on.

Now you edit these, these ani­ma­tions in the ani­ma­tion tool. So I can go in here, I can pull up my sequence. And you can see there, all of the ani­ma­tions that we put in there, you can add new ones, we’ve got a big list of all the dif­fer­ent kinds of effects you could put in there. And you can click on each one to to edit set­tings. If you want to reorder them, you can just drag them around. So if I want the spin to hap­pen first, I could put this up there play my ani­ma­tion again. And obvi­ous­ly the spin hap­pens first. And this, like I said, this is very much mod­elled on the ani­ma­tion pane in Pow­er­Point, which is nice and super easy just to put things in there and reorder them. So just using ani­ma­tions, I want to show you what you can cre­ate. Now I’m going to show you a task now and I’ll explain what’s going on and then we’ll we’ll see how the ani­ma­tions are put togeth­er. So here we go. In this game you are a rab­bit, there are two trees and you want to press left if the apple is on the left and right if the apple is on the right, but you need to watch out for the crafty fox, if you get it wrong, Rab­bit says no, no, I don’t want to go, there’s no apple there. And you can see this one’s got the Fox on there, so we I man­aged to avoid that. And this one’s got a con­found got an apple in both trees but a fox on the left. And if I go for that one, he’s gonna say hey, no, there’s a fox there. I’m not going there.

So that’s the that’s that task. Let’s go I’m going to show it to you again. And we’re going to just call out the ani­ma­tions that are hap­pen­ing. Okay, so that’s a move, there’s a shake on the lit­tle branch­es and the apple appears and moves up, the rab­bit goes in, the apple falls down that rab­bit comes out again. There’s quite nice thing what we’re doing here when the app- when the rab­bit moves to the tree is we’re mov­ing the rab­bit and we’re also scal­ing it down which gives us quite nice clever effect that looks like the the whole the rab­bit’s mov­ing into the screen. But all it is is just a move and a scale hap­pen­ing at the same time. So all we’re doing is lay­er­ing those ani­ma­tions on top of each oth­er over and over again and that’s how we do most of the things that we want to do in these games. So I’m not going to take you through build­ing this whole game but I will show you just the first few steps so you can see how easy it is. So here I’ve got a com­plete­ly new game, it’s com­plete­ly blank noth­ing in there yet.

4:47
So we’ll add a tri­al which is going to be the begin­nings of that what else is show­ing you so the first thing we do is add a sprite, a sprite is the game word for an image on the screen. This is going to be the trees we drag our tree image in Oh, there it is. Now we can just pick it up and drag it around and resize it just like I showed in the task builder ear­li­er. We can give it a bet­ter name, we’re going to have two trees even­tu­al­ly, but we’re just going to build the stuff on the right to start with. And now we’re going to build our apple. So we know we want apple tex­ture to go in there, it’s going to grab the apple imagee, push thatin there. And good­ness that’s huge, let’s make that bit small­er, kind of put it where we want it. And then we’re going to ani­mate it. So we open up our ani­ma­tion tool, we’re going to add a clip called appear just when the apple just appears. And we want to do two things, the first one we want to just to sort of fade in. And we’ll give that a lit­tle dura­tion, just a short amount of time for it to fade in. And then we want just a move up in the air a lit­tle bit just to kind of give some give us some move­ment to draw atten­tion to it. So it’s real­ly, real­ly sad.

So we put those two things in there, we want to add anoth­er com­po­nent just to make sure that the apple starts invis­i­ble and only shows when we when we ani­mate it, and just for now we’ll just make that ani­ma­tion appear on the start. Obvi­ous­ly lat­er, we’ll make that bit appear after the rab­bits played. Now we play our lit­tle scene and already we can see the ani­mal appears and moves up a lit­tle bit. So that’s how easy it is to just start putting these ani­ma­tions in. And from there, we just keep doing more and more and more of those. So the rab­bit is done in exact­ly the same way with a sprite and an ani­ma­tor and adding in those those dif­fer­ent layers.

The sec­ond big part of of games that we want is this is the par­ti­cle engine. Now, a par­ti­cle sys­tem. We’ve seen quite a few of these in some of the pre­vi­ous demos. It’s these are used for effects like fire, smoke, explo­sions, all that kind of thing. And it’s very sim­ple. It’s just a sin­gle image that keeps get­ting emit­ted from a cen­tral point. And you can con­trol how many get emit­ted, how big they are, how fast they spin and when they fade out. So here we have a nice lit­tle sort of con­stant­ly going puff of stars, by want­i­ng to go a bit faster, I can just make the speed a bit big­ger. And now there you can see they’re slight­ly more effu­sive, and they’re going a bit fur­ther away, I can have more of them, which make it a bit more intense, that’s pret­ty wild you turn that back down again. And if I want­ed it to be, so that’s one way of look­ing at it, if I want­ed to do it slight­ly dif­fer­ent­ly, I could take bring the speed right down, but turn the dura­tion up. So they go slow, but they last a lot longer. And now you can see it’s a much calmer sort of effect was tak­ing up that same amount of space, I can make them spin a lot more. And this gives a more of a kind of a twin­kling effects as opposed to a full explo­sion effect that we’ve seen before.

We could do a sim­i­lar thing for smoke. This has got this same sort of idea. But this time, we’re using grav­i­ty to essen­tial­ly suck the clouds upwards a bit because that’s obvi­ous­ly what’s smoke does. If I turn them off, you’ll see what it looks like nor­mal­ly, we’re now just get­ting this bil­low­ing out from a cen­tral point that we’re doing before. But adding this sort of like reverse grav­i­ty, if you like, gives it this nice effect where the smoke sort of going up, we’ll make that a bit more intense and now looks the smoke that might come out of a fire or some­thing like that. So again, all of this is hap­pen­ing in real time the full engine is run­ning in there. And you can just sim­ply keep tweak­ing these, these these vari­ables and see­ing how they affect how they affect the par­ti­cle sys­tem, we’re going to keep fill­ing in those until until they look right.

Alright. So those are all pos­si­ble in game builder. And I want to show you now a show­case of some of the sim­ple things that you can do to to build some of the, to build your games. So the first one is a rock­et tak­ing off. So this is just a sim­ple case of ani­mat­ing things and lay­er­ing things. So let’s watch what hap­pens. So our rock­et stays there for a few sec­onds. Once we start­ed play­ing, and then we see the smoke starts com­ing out, and then it takes off. Real­ly, real­ly sim­ple. And that is done. So we’ve got our, the sky is just the sky in the back­ground, we’ve got our rock­et frame, which is a con­tain­er that allows us to ani­mate one thing and essen­tial­ly group a whole bunch of stuff under­neath it. So the rock­et, the rock­et there itself is the actu­al pic­ture of the rock­et and the frame is the bit we’re actu­al­ly going to move around. And we want to do that because we’ve also got our smoke. So this is sim­i­lar to the smoke effect that I showed you before. But this time, we want it to blow out downwards.

And all we do for our rock­et is in our ani­ma­tion, we have an ini­tial delay, so we have a bit of a pause. And then we spawn our spoke and attach it to our­self. And we and that’s how we make sure it’s com­ing out the bot­tom of the rock­et and a lit­tle pause, and then we just move it up into the air. And that makes it take off. And if we watched out through again, we can see one two, there’s a pause, then the engine starts run­ning. And then up it goes. Simple.

The next one is this was in one of the demos that Jo showed you, the cave open­ing. So I’m going to show you the effect and then we’ll show how it’s put togeth­er. So this is the one with a cave with a trea­sure that we did. So if what hap­pens when you play it is that this sort of thing opens up and reveals the inside of the cave and reveals the trea­sure inside.

9:41
The way that’s done is by just lay­er­ing up assets real­ly clev­er­ly, these are all of the art assets. So that row three along the top that we’re using to cre­ate this effect. So we’ve got a back­ground, which is the one on the left. There’s then a fore­ground which is the one on the right. And there’s final­ly a mask that kind of jaggedy black out­line. So when we lay­er them all up, we get what looks like this sort of com­bined cave. The black out­line means we then can put black all around the edges. So we don’t have any sort of edges of the screen that look a bit strange. But the key bit is that between those first two images in between those two, that’s where we’re going to put our door. And I’m going to show you this again, but with­out the blacks around, so you can see how it’s done. So here I’ve got the back­ground and the fore­ground and the gem. So that one’s there, that’s got the the main back­ground, what we’re going to do is add, I’m gonna use a sim­ple quad for this, obvi­ous­ly, you could use a, an image with a nice kind of rocky tex­ture, I was going to use just a grey square for this. And all we need to do is essen­tial­ly I’ll make it a bit big­ger, so it’s about the right size, it does­n’t have to be per­fect. And all we’re going to do is just drag it into the right sort of order in the in the sequence, obvi­ous­ly we don’t want to put it right at the back, so it’ll be behind every­thing, we want it behind the fore­ground but in front of the gem.

Then we just add an ani­ma­tor, so this is the same ani­ma­tion we’ve been using through­out and the ani­ma­tion itself was just a real­ly sim­ple move up in the out­line, all you want is a sin­gle, sin­gle option here to move to posi­tion we’re just going to move it up in the air again, give it a bit longer, so it moves up a bit more slow­ly. And then when we play that we can see the effect you can see the lay­er­ing hap­pen­ing right, you can see that thing com­ing in between the two. And a good way to sort of imag­ine how to do this is just imag­ine you’re mak­ing your game out of out of bits of card­board, right? You would you’d lay them up and use your hold one in between two oth­ers and move it up and down to cre­ate these kinds of effects. So that’s how it’s done in Katie’s games, sim­i­lar­ly, where you had the bur­glar mov­ing off the side of the screen, and some of those oth­er kind of things that’s done in exact­ly the same way we had the back­ground, we had the bur­glar on the front. And then we just had actu­al­ly just a white pan­el on the side that the bur­glar moved behind to make it look like he was going going off the side of the screen.

And the last one, this is one of my favourite effects is how to make look like a car is dri­ving along a road. This again was in I think one of the ones that Jo showed you. The basic trick, and this is the biggest spoil­er, is that the car isn’t mov­ing, the trees are. The cars are stay­ing exact­ly the same place and we all we do is sim­ply move the trees down the screen. Again, the way we set this up, so we’ve got our tree here. And we’ve actu­al­ly got two ani­ma­tions on this tree, we’ve got an ini­tial one, which just moves it to the bot­tom of the screen, and then it go and then it trig­gers an ani­ma­tion on itself. So one of the nice things about the ani­ma­tion tool is you can actu­al­ly daisy chain ani­ma­tions togeth­er and the sec­ond one this repeat one moves the top of the screen instant­ly, and then moves to the bot­tom of the screen in the space of a sec­ond in this case, and that one loops. With this oth­er one it’s doing exact­ly the same thing, except that and this one has got a slight­ly small­er dura­tion because it starts fur­ther down the screen if you want it to line up even­tu­al­ly. So then that’s how you cre­ate this effect.

So again, it’s just the trees mov­ing down the screen. But obvi­ous­ly, to us, when we look at it, it looks like the car is dri­ving along. You can do the same trick, it does­n’t have to be top down, you can do the same trick side­ways where you could have a car or a train or some­thing puff­ing along. And all you do is just move the trees along in the back­ground but the actu­al train stays com­plete­ly still.

So that’s my lit­tle show­case of things that you can do with the game builder. I hope that’s giv­en you some ideas of stuff that you might be able to do and indeed gone like oh, it’s not, it’s all just smoke and mir­rors. It’s all just clever tricks. It’s noth­ing ter­ri­fy­ing in there. So and as I said we are thrilled to see what peo­ple could build with it.