Nick Hodges- Gorilla
In this talk, Nick will give an introduction to Gorilla Game Builder: a new tool which allows you to create gamified research tasks, and collect data on participant’s responses, without the need to code.
Nick Hodges 0:00
Alright. Okay, hello again everyone, can you see my slides and hear me? Alright, I’m gonna take the lack of terrified yelling from the rest of my team that you can. Alright, fantastic. So
thank you so much. Thank you that was, that was a wonderful talk. And it’s certainly really gratifying for me to see these things actually come together and be made first and then actually go out there and actually be collecting data in the world. That’s super exciting. So you’ve seen quite a few games now both are one of the examples that Katie and Lucy have done and the demos are Jo showed you earlier. And as as somebody was saying, if any of you are thinking that, Oh, this looks quite complicated, I don’t think I’d be able to do that, don’t worry, I’m going to show you how the game builder works. And also, I’m going to show you how some of those different effects are created.
I should warn you, that this will completely ruin games to you as these things are a bit like a magic trick. Once you know how it’s done, you can’t unsee it. And it’s all smoke and mirrors. 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, obviously we’re making games for research for quite a long time, as Jo said earlier, and we knew we wanted to build a tool to let people do this themselves, it was no good just building all these things bespoke each time. And well, we the main sort of guiding principle that we wanted is, first of all, and this needs to be easy and accessible to put together and the sort of rough bar that we kind of said we want this to be about as easy as PowerPoint to put together. You saw unity earlier that Lucy’s team had been using, which is a fantastic engine, but it’s big and complicated. And it takes a takes a lot of stuff to put stuff together. I’m a great fan of unity, I’ve put stuff on Unity before. But it’s not it’s not quick and simple to put things together. And the other bit was, again, you saw in both of the talks earlier is that we actually we are making games for research. We’re making research games, not just games. And obviously, we want some game like stuff in there. So we actually two things here, we need all the we need the core trial engine underneath it. So we need reaction times we need response processing, we need proper trial structure and all of the randomization and controls that go with that. And you saw that in both the talks earlier, we still need all of the kind of stuff we’re essentially used to when we’re building our sort of mainline reaction time tasks.
But we want this game to go on top, we want this particle engine on top, we want this animation system on top, and it’s the two together. That is how a game better kind of comes together to give you all of the systems that you need. But with all of the experimental power that that you need in order to actually do research with it. So the first cool bit as people have said is the animation system. So I’m gonna show you a bit about what this looks like. So here we are, I’ve got a rabbit. And I’ve got set up a simple animation sequence that just shows a whole bunch of the different animations in the system. 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 animations in the animation tool. So I can go in here, I can pull up my sequence. And you can see there, all of the animations that we put in there, you can add new ones, we’ve got a big list of all the different kinds of effects you could put in there. And you can click on each one to to edit settings. If you want to reorder them, you can just drag them around. So if I want the spin to happen first, I could put this up there play my animation again. And obviously the spin happens first. And this, like I said, this is very much modelled on the animation pane in PowerPoint, which is nice and super easy just to put things in there and reorder them. So just using animations, I want to show you what you can create. 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 animations are put together. So here we go. In this game you are a rabbit, 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, Rabbit 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 managed to avoid that. And this one’s got a confound 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 animations that are happening. Okay, so that’s a move, there’s a shake on the little branches and the apple appears and moves up, the rabbit goes in, the apple falls down that rabbit comes out again. There’s quite nice thing what we’re doing here when the app- when the rabbit moves to the tree is we’re moving the rabbit and we’re also scaling it down which gives us quite nice clever effect that looks like the the whole the rabbit’s moving into the screen. But all it is is just a move and a scale happening at the same time. So all we’re doing is layering those animations on top of each other 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 building 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 completely new game, it’s completely blank nothing in there yet.
So we’ll add a trial which is going to be the beginnings of that what else is showing 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 earlier. We can give it a better name, we’re going to have two trees eventually, 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 texture to go in there, it’s going to grab the apple imagee, push thatin there. And goodness that’s huge, let’s make that bit smaller, kind of put it where we want it. And then we’re going to animate it. So we open up our animation 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 little duration, just a short amount of time for it to fade in. And then we want just a move up in the air a little bit just to kind of give some give us some movement to draw attention to it. So it’s really, really sad.
So we put those two things in there, we want to add another component just to make sure that the apple starts invisible and only shows when we when we animate it, and just for now we’ll just make that animation appear on the start. Obviously later, we’ll make that bit appear after the rabbits played. Now we play our little scene and already we can see the animal appears and moves up a little bit. So that’s how easy it is to just start putting these animations in. And from there, we just keep doing more and more and more of those. So the rabbit is done in exactly the same way with a sprite and an animator and adding in those those different layers.
The second big part of of games that we want is this is the particle engine. Now, a particle system. We’ve seen quite a few of these in some of the previous demos. It’s these are used for effects like fire, smoke, explosions, all that kind of thing. And it’s very simple. It’s just a single image that keeps getting emitted from a central point. And you can control how many get emitted, how big they are, how fast they spin and when they fade out. So here we have a nice little sort of constantly going puff of stars, by wanting to go a bit faster, I can just make the speed a bit bigger. And now there you can see they’re slightly more effusive, and they’re going a bit further away, I can have more of them, which make it a bit more intense, that’s pretty wild you turn that back down again. And if I wanted it to be, so that’s one way of looking at it, if I wanted to do it slightly differently, I could take bring the speed right down, but turn the duration 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 taking up that same amount of space, I can make them spin a lot more. And this gives a more of a kind of a twinkling effects as opposed to a full explosion effect that we’ve seen before.
We could do a similar thing for smoke. This has got this same sort of idea. But this time, we’re using gravity to essentially suck the clouds upwards a bit because that’s obviously what’s smoke does. If I turn them off, you’ll see what it looks like normally, we’re now just getting this billowing out from a central point that we’re doing before. But adding this sort of like reverse gravity, 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 something like that. So again, all of this is happening in real time the full engine is running in there. And you can just simply keep tweaking these, these these variables and seeing how they affect how they affect the particle system, we’re going to keep filling in those until until they look right.
Alright. So those are all possible in game builder. And I want to show you now a showcase of some of the simple things that you can do to to build some of the, to build your games. So the first one is a rocket taking off. So this is just a simple case of animating things and layering things. So let’s watch what happens. So our rocket stays there for a few seconds. Once we started playing, and then we see the smoke starts coming out, and then it takes off. Really, really simple. And that is done. So we’ve got our, the sky is just the sky in the background, we’ve got our rocket frame, which is a container that allows us to animate one thing and essentially group a whole bunch of stuff underneath it. So the rocket, the rocket there itself is the actual picture of the rocket and the frame is the bit we’re actually going to move around. And we want to do that because we’ve also got our smoke. So this is similar 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 rocket is in our animation, we have an initial delay, so we have a bit of a pause. And then we spawn our spoke and attach it to ourself. And we and that’s how we make sure it’s coming out the bottom of the rocket and a little 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 running. And then up it goes. Simple.
The next one is this was in one of the demos that Jo showed you, the cave opening. So I’m going to show you the effect and then we’ll show how it’s put together. So this is the one with a cave with a treasure that we did. So if what happens when you play it is that this sort of thing opens up and reveals the inside of the cave and reveals the treasure inside.
The way that’s done is by just layering up assets really cleverly, these are all of the art assets. So that row three along the top that we’re using to create this effect. So we’ve got a background, which is the one on the left. There’s then a foreground which is the one on the right. And there’s finally a mask that kind of jaggedy black outline. So when we layer them all up, we get what looks like this sort of combined cave. The black outline 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 without the blacks around, so you can see how it’s done. So here I’ve got the background and the foreground and the gem. So that one’s there, that’s got the the main background, what we’re going to do is add, I’m gonna use a simple quad for this, obviously, you could use a, an image with a nice kind of rocky texture, I was going to use just a grey square for this. And all we need to do is essentially I’ll make it a bit bigger, so it’s about the right size, it doesn’t have to be perfect. And all we’re going to do is just drag it into the right sort of order in the in the sequence, obviously we don’t want to put it right at the back, so it’ll be behind everything, we want it behind the foreground but in front of the gem.
Then we just add an animator, so this is the same animation we’ve been using throughout and the animation itself was just a really simple move up in the outline, all you want is a single, single option here to move to position we’re just going to move it up in the air again, give it a bit longer, so it moves up a bit more slowly. And then when we play that we can see the effect you can see the layering happening right, you can see that thing coming in between the two. And a good way to sort of imagine how to do this is just imagine you’re making your game out of out of bits of cardboard, right? You would you’d lay them up and use your hold one in between two others and move it up and down to create these kinds of effects. So that’s how it’s done in Katie’s games, similarly, where you had the burglar moving off the side of the screen, and some of those other kind of things that’s done in exactly the same way we had the background, we had the burglar on the front. And then we just had actually just a white panel on the side that the burglar 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 driving 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 spoiler, is that the car isn’t moving, the trees are. The cars are staying exactly the same place and we all we do is simply move the trees down the screen. Again, the way we set this up, so we’ve got our tree here. And we’ve actually got two animations on this tree, we’ve got an initial one, which just moves it to the bottom of the screen, and then it go and then it triggers an animation on itself. So one of the nice things about the animation tool is you can actually daisy chain animations together and the second one this repeat one moves the top of the screen instantly, and then moves to the bottom of the screen in the space of a second in this case, and that one loops. With this other one it’s doing exactly the same thing, except that and this one has got a slightly smaller duration because it starts further down the screen if you want it to line up eventually. So then that’s how you create this effect.
So again, it’s just the trees moving down the screen. But obviously, to us, when we look at it, it looks like the car is driving along. You can do the same trick, it doesn’t have to be top down, you can do the same trick sideways where you could have a car or a train or something puffing along. And all you do is just move the trees along in the background but the actual train stays completely still.
So that’s my little showcase of things that you can do with the game builder. I hope that’s given 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 mirrors. It’s all just clever tricks. It’s nothing terrifying in there. So and as I said we are thrilled to see what people could build with it.