Nick Hodges, Gorilla
@nikoraisu
Full Transcript:
Nick:
Hello, I’m Nick from Gorilla just like Jo said and today I’m going to talk to you about the game builder tool that I’m putting together and also some slightly more sort of a down to earth, practical steps of how to go about designing and making your own games. I promise not to take you through an entire half book of Lichtenstein as Dan recommended, but I’ll give a slightly more boiled down version of it. So this has all been sort of a… I’m going to do this relatively quickly because this has been already mentioned, but to recap the motivations here as I shall see it. So why would you go ahead and create a game over a standard psychological task? Well, we’ve already heard in lots of different ways that we can expect increased participant engagement and attention. We think we’ll get better quality data because people are more focused on the task and we think we’ll get lower attrition because it’s more fun.
Nick:
And in fact, we saw it actually just now in Niko’s talk that in his longitudinal study motivation actually increased over time, which is a pretty fab result. Secondly, we want to use whatever the fiction we create to bootstrap the comprehension. And Diana mentioned, we’re creating these little worlds and that can really help our participants understand what they’re supposed to do. It also gives us, and I think Simone touched on this in the first talk, that it also allows us to, in some cases, disguise what we’re measuring so the participants don’t start to second guess us. So if there’s a particular type of accuracy that we’re after, if we present the game in such a way that you simply have to uncover all the clues, but we’re not really too bothered about how long it takes you then we can disguise the fact that that’s what we’re truly measuring.
Nick:
And thirdly, we want this world and this experience to use animations and other effects to kind of flow together and create a sort of seamless experience. So how does the game builder enable all of this? So to set the scene, the game board is a new tool in Gorilla. So like the task builder or the questionnaire builder, but built specifically for creating games. It contains the same core trial engine that we use across all of our tools. So all of the timing, all of the response handling, all of the randomization is all in there. It contains a rich animation system that lets you create complex sequences of animation. And it also contains a particle engine that lets you create a dynamic effects like fire and sparks and things like that. And this being Gorilla, you can do all of these in the UI without needing to write any code.
Nick:
So I’m going to show you a demo of some of these tools working in a moment, but first I just want to set the tools and context. So how do you go about designing a game from start to finish? We’ve seen some of these amazing projects. What was the sort of a behind the scenes workflow that we went through? Now I’m sure some of you watching and thinking, “Wow, these look amazing. But, boy, this sounds really hard, I don’t know where to start. I’m not really a gamer. I don’t spend been hours on my PlayStation.” Don’t worry, we’re making small, simple games research here, not the next blockbuster Call of Duty. But what we can do is take a lot of the ideas, both from science that’s been done before, but also mainstream games and distill them down to something very simple that we can use in our research.
Nick:
I spent several years in the gaming industry before I created Gorilla. I built loads of games and I am going to make all of you into game designers by the end of this talk. So how do you start? The first step is to design your fiction. So put simply, we want to design, create the world that the player is in. Give it some kind of setting. We want to give the player some kind of agency within that world. And then we want to match the game that we’re creating to the task that you’re trying to implement. And this is the bit that I think Diana mentioned, in her talk, where this is the part where you want to align the mechanics of your game with the goals that you’re setting. Now, this all sounds quite lofty and high level, but you can boil this down to just four sentences.
Nick:
So here we go. You just fill in the blanks. You are in space. You are an astronaut. You have to repair the space station. Watch out for asteroids. Good luck. Simple. Okay. The second step is to storyboard your game out. This basically means just to draw out what happens screen by screen. What does the player see at each juncture? This is just an example I made up. And now when you are coming up with your fiction, you probably had some ideas in your head as to how this is going to look. So you probably had some visions of what the player would see. So draw those and flesh it out from there. Now this design phase is super important. This is where you work out how the interaction is going to work, what the player sees and this is where you’re going to get rid of 90% of the ideas that, lovely, but it’s going to be too hard or too fiddly.
Nick:
Once you’ve got your storyboard together, now you need to get your artwork. Now we’re not going to create any of the art ourselves. We’re going to find artwork that already exists and use that. So look at your storyboards, make a list of all the individual props that you drew. Every single, individual bit and then go shopping for images of them. Google Image search is the best place to start. I think you’re very quickly find some of the big stock image sites like Shutterstock and others. They’ve got loads of great options. Simone’s talk earlier, it showed a wealth of other really cool resources where you can get our royalty-free stuff. So do check out those as well. And so now if you have too many, you can go back to your storyboards and simplify. It’s worth noting, you can do an awful lot with just one image.
Nick:
So as my little tree example, here, you can make a whole forest with just one tree. You might want to scale up and down a bit, flip it horizontally so you get into a mirror image of each other change, make some brighter or darker and suddenly you’ve got a very nice looking forest and I’ve only got one tree. Transparent backgrounds are a must, so you can layer things up really nicely. And again, these image sites will have loads of those. And one thing that I’ve been looking at recently is this thing called Photopea, which is essentially a button-by-button replication of Photoshop in the browser. So if you don’t have access to image manipulation software, there’s a good option for you there.
Nick:
Okay. So we’ve got a storyboard, we’ve got our art. Now we can get stuck in and actually build it. So this is when you go ahead and build it in the game builder. As we always say, stub out the big parts, come back later and fine tune you all the details. And in particular, this I think applies generally, but in particular with games, if something’s not working or it’s too hard to pull off, take a step back and see if there’s an easier way. Go back to the storyboards if you need to change a particular sequence. Go back and look for different pieces of art if you can’t get it to look right. This is often quite an organic process.
Nick:
And then finally piloting. Now obviously always going to pilot your task. I think with games in particular, there are three big questions that you want to ask yourself. First of all, do people understand what to do? What do you need to put into your instructions and what is just sort of obvious from the game around them? Is any of the art confusing or distracting? Is there too much noise in the background? Is it ambiguous as to whether something on there is good or bad, that they should collect it or avoid it? Are there things they think they should be able to click on, but they can’t. Stuff like that. Now, and finally, is it fun? Now, obviously we’re doing all this for research purposes, but we want to be sure that it’s satisfying and engaging to play so that we get that motivation and compliance that we’re after.
Nick:
So I think you saw a little bit this early in Josh’s talk, actually. So this was the card game that was in Josh’s presentation. I’m going to show you, in a bit of a more expanded detail as a showcase, how we went through that design process on that project and brought it to life. And I’m going to then show you me actually building it in the new tools. So quick recap. So you’ve got two options, A and B. They each worth a different number of points. Only one’s correct and there’s a confederate who’s going to give you advice. And this advice may or may not be accurate. And what we’re interested in is how long does it take for the… The confederate is going to start at accurate and then stop in accurate and what we’re interested in is how long does it take before the person notices that their confederate is lying to them.
Nick:
So on our way we go. Design your fiction. So we settled on a casino. This one, obviously, had gambling initially and we tried some other ideas out, but we dialed it back into a sort of casino. Some of the other ideas we considered, I think there’s one version where there were two jewels, but one of them was guided by a snake. We thought that sounded quite fun, but we were worried that made incorrect answers too salient and correct ones not salient enough. And so people get too to worried about avoiding the snake and not noticing in the jewels. Whereas another version with two envelopes and you’re trying to work out or you’re trying to guess which one to take, but that seemed a bit devoid of context. Felt like a weird drug deal. So we sort of scrapped that one. So going for casino. So let’s go through the process.
Nick:
So you are in a casino, you are a gambler. You have to choose the credit card, watch out for the confederate’s advice. Good luck. All right, storyboarding. So again, nice and simple. The cards slide up onto the screen from below. We’ve got the two cards, red or blue. We’ve got the points superimposed on top. They want to slide into view and then a beat later, we want the advice slide in from the side. So in this case saying, “Hey, I think you should take the blue one.” You then click on one of the cards. And you’re either going to go [inaudible 00:09:06] going to flip over and show you either a star if you’re right and a cross if you’re wrong. And we’ll put some nice puffs of stars or a puff of smoke on there as well to make it look good.
Nick:
Okay, art. So here we go. We’re at 10 pieces of art we need for this. A nice sort of green background. A sort of felty card table. We want the two cards, red and blue. We want the other side of the card, which the star or cross on them. And then for the confederate, we’re going to just do a nice little speech bubble and put a picture of the card on top with a little tick to sort of make it look like a hint. And then those last two bits are the particles that we’re going to spawn. So it’s going to be the star or the smoke. That’s all we need, 10 pictures.
Nick:
Okay. So you’ve already seen this, but just to recap, here’s what the final result looks like. Okay. So they slide up, you see it slide up from the side. That’s your advice saying, “Hey, you take the blue one.” So we go ahead. Oh, I find the tick on the blue one. It’s correct, so we get the puffer stars. And we see the score go up in the corner. This time he’s saying, “Take the red one.” So let’s go with it again. And ah, the swine, how dare he? Okay. That’s what we’re shooting for. So I’m going to show you the new game builder now. So the first step in creating this game is to lay out all these different components.
Nick:
So here we go. This is a brand new project in the game builder. I haven’t done anything yet. I’ve got a single blank scene, which I’ve called puzzle. And all I’ve done so far is upload those 10 images I showed you earlier. So we always start out with this screen container, which then drives that screen. And the first thing we’re going to do is go ahead and add a sprite. A sprite is just a game word for an image on the screen that we can move about. Let’s go and choose the texture. We’re going to choose our nice green felt texture. And there’s our background. You can see this all pop into place live in front of me. The next thing we’re going to do is add another thing, which is a container. And the container is just the thing that lets us group other bits together. So the card, essentially, is going to be the card picture and then the text on top. So we want to be able to group this together. Let’s name these.
Nick:
So we remember who they are. That’s the background, that’s the card container and let’s go ahead and add a sprite for our card. So there we go. Let’s call this card and then we just drag it into the card container to stick it into that group. There it is. Okay. Now we can go ahead and choose the card that we want and there it is. And now we’re going ahead and add some animation to it. So this is in our new system where you create entities with these certain bits on it, but you can add other components on to add more behavior. So in this case, we want a sprite to show the card and we want them animated, so add some animation. So add that, open up my animation tool and I’m going to hit a clip called flip because it’s going to be the bit where it flips over and let’s go ahead and add our flip animation.
Nick:
So we add a flip animation here and we want this to start at zero and go to one. We want to flip all the way over at 400 millisecond, let’s go with that. Now I’ve created all this. And what I can then do is go back into the tool, click on my play button and see that animation happened that I just created. Okay, not bad. What we want to do now, there’s a quite a nice trick we can do where at the same time it’s flipping, we want it to jump up and down and that’ll make a nice effect. So this is what the channels that you do. You can have two [inaudible 00:12:15] animation happening together in parallel. So we’re going to keep our flip and then we’re going to have a second channel that’s going to move the card up and down. And those two effects combined together will make it look like it’s doing this nice little flip over on the table in front of you.
Nick:
So we have one move that moves up, one move that moves it back down again. We’ll make all the times enough and you can see that visually, all of our animation channels are lining up. Show you how they’re going to line up. And now we can go ahead and try that. And there we go. That’s thing we want. Now, obviously at the moment, it’s still blue on both sides. We’d need to see the other side of the card. So what we’re actually going to do is go back on our animation tool and we’re going to chop this flip in half. So we wanted to flip halfway. Then we’ll add a special animation, which doesn’t actually move anything, but it just changes the text that we’re looking at. So we’re going to flip it halfway. So it’s basically exactly pointing up at us, change it to, I guess, card good, which is the one with a star on it. And then we’ll have it flip the rest of the way.
Nick:
And so that’s how we’re going to create our nice sort of flip effect. So we can set it up to be 200 milliseconds the other side. And then we can go back into our tool and see that working. So this is all happening in engine. Your whole task is running in that central panel. You don’t have to keep previewing and then jumping back to the tool. This is all happening live in engine. So we can try that now. And oh, something’s not quite right. No problem. Back into animation tool. I can go back in here. That bit didn’t save properly. Let’s set that back to where it should be and then I can close that and play it again. So a really, really nice tight loop between experimenting with things. Let’s set it back to the beginning. It starts out blue. We can then play off the animation and then we see the star on the other side.
Nick:
[inaudible 00:13:48]. That’s how we can composite all these things. The last thing we’re going to want to do is add our puff of stars at the end. So there’s another animation here, again, it doesn’t move anything. It just spawns something. So we’re going to go ahead and spawn some stars at the end of this animation, I’ve already created the stars’ particle effect, so we can just type the name in there. And now we can refresh our scene, set it all back to the beginning and see the whole thing happening altogether. And this is all happening dynamically in engine. What you see here is exactly what your participant’s going to see, is all the same elements running.
Nick:
Okay. So that’s how you can compose all the different bits of your scene. So the next thing is, how do we stitch all of this together? So I’m going to fast forward a bit here. So I’ve done both cards now. So it’s all the same stuff you’ve seen before. They’ve now got a text bit on the top, which shows the numbers with the score in the corner and then the confederate is done with one sprite to be the speech bubble and another sprite to be the advice. So it’s all done exactly the same way.
Nick:
So the first thing you want to do is make the various elements animate onto the screen. So in the same way that we did the move on the card, make it jump up and down, I’ve got a move animation called a pair, which makes the cards slide up. We’ve got this special property called play on start, which means that when we start the screen, we’re going to play these animations immediately. So let’s set these onto the confederate and the card container and then we need to move our card container off the screen. So it starts off screen and then the very first thing it does is animate on. If I go ahead and refresh this, we then see that that slides on. And then the confederate comes in. This is all using those same move animations. The confederate’s got a little delay on there so that it comes in a bit after the cards. So the next thing we need to do is when we first set it up, we just set the card just to be the blue card the whole time.
Nick:
What we actually want is to define which card goes where and how many points are on each side in our spreadsheet so that we can design all of our trials out of our account, the balancing and set which answer is going to be the left or the right. So what we do here is we go back to our card left and instead of saying, oh, it’s always going to be the blue card all you want to do is click this little link button and say, look for a spreadsheet column called card left and use that. Sure, if you can’t find it, default to card blue, but we want it to be whatever’s in the spreadsheet. We can do the same for the points. We’re going to bind that to another column that I set up called points left. And we see when I bind this it snaps to being what is currently in that first row of the spreadsheet. So we can actually preview each row of our spreadsheet as we build.
Nick:
So that’s that. Now the next thing we need to do is set up how we’re going to respond to this. So you respond to these by clicking on them. So I’m going to add a click response to my card. Now this is the one on the left, so the response I’m just going to call this one left. And in my spreadsheet, I’ve set up where the left or right is the right answer. And I’m going to bind the score that you get for that response to the points left column. The last bit we then need to do on the screen level is say, okay, when we get the response, is it right or not. So here we can add a score to the screen and say, okay, the correct answer is whatever is in the answer column in my spreadsheets. So if you use the task builder, these kinds of mechanics are very familiar to you, but we’re trying to make the tools much more content aware at this time.
Nick:
The final bit is that when we do finally respond, we want to then play one of our animations. So there’s another component here that does animate on response accuracy. And we can then say, well, if we’re correct, play this one. If we’re incorrect, play this other one. That flip animation I showed you, I’ve changed that to be called correct. And I made an incorrect one that shows the cross and does the smoke. Now we built all of this. If we reset it all, we can see the whole thing in and out and when we tap on the blue card, we can see your animation play and the stars play out. So in the same way, we can actually composite it our whole task. We could build the whole thing here. The whole flow completely in engine running live in the editor. And we think all of this together, it’s going to make games super easy to put together, really nice and fast iterate on.
Nick:
And it’s going to enable some really exciting research in the coming months. So that’s pretty much everything I’ve got for time so far. I’ve one last little sneaky thing I want to show you, which is multiplayer. We’ve been working on Gorilla Multiplayer for a while. It’s close to completion and we’re really excited by where this is going. It’s going to be working across multiple tools. So it would work in the game builder that I just showed you, it’ll also work in the new task builder we’re building. I’m not entirely sure what a multiplayer questionnaire would look like, but in theory, that would be possible to. Again, it’s fully integrated into UI. There’s no coding required and we’re looking at multiple different modes of interactions. So turn-based, real-time chat, all this kind of thing. So I’ve got a very, very simple demo of the Ultimatum game, which I’m sure you’re familiar with, which I’m going to show you.
Nick:
And I’ll give you a very, very quick insight into how it’s put together. So here we go. I’ve got, this is the same task. I’ve got it in two separate browsers. This is going to have to be how you do preview multiplayer stuff. So I’ve got Chrome on left and Edge on the right. They’re both looking at the same page in the same task. So let’s go ahead and start a preview on both of them and what you’re able to do with the multiplayer games is you’ll be able to create a room dynamically and then paste it into the other browser so you can link your two browser windows together. This is for previewing in the experiment. This will be done for you with lobbies and things, but this is how we do it just when you’re previewing. So those two will now find each other and the task will start simultaneously. Now you see, they’re both seeing the same thing, but only the one on the left has got this next button. because they’re the one that’s in control of the screen.
Nick:
So [inaudible 00:19:04] instructions of the Ultimatum game. Say hit next and there we are, see the offer. Now we can see some of the animations are the same, but some of them are different. The one on the left has got the options of how much to offer and the one of the right is just waiting. So in the one on the left then chooses what they’re going to offer, the toll passes to the player on the right. So they then offer that and they choose whether to refuse or accept it. They go ahead and do that. And then we go again, but this time it’s the other way round. The player on the right is the one making the offer and the player on the left is waiting. Say go ahead and do that. And then control is going to pass back to the player on the right. And they get to refuse to accept as usual. Okay, that’s that.
Nick:
Let’s go back into the editor and see very quickly how this is put together. So the first step for multiplayer, which is really important, is you have to go to the multiplayer tab and turn it on. It’s the kind of tuning I like. And then when we go to our displays, there’s basically one extra bit that we could do. Because we said we want two players, we get these extra two columns on our spreadsheet, Player A and Player B. And then when we go to displays, we lay out one of our [inaudible 00:20:10] user, but there’s a special extra component we can add called the multiplayer component. And all that does, is it restricts that element to being for one player or the other. So in this case, the response options there for Player A and the other player’s working off of it is for Player B. When we go to the second screen, it’s the same idea, but the other way round. So now the response options are there for Player B and the waiting text is just there for Player A.
Nick:
So using these really, really, really simple mechanics, you’re able to control who sees what in any one screen. Now, when we first paired our players together and indeed when they’re paired together in a lobby, they will have a canonical order between them. One of them is his player one, and one of them is player two. What those Player A and Player B bit allows you to do in your spreadsheet is control of whatever order the players existed in the world. In the first trial I want, okay, whoever the first player is their Player A first. And whoever the second player is they get to be Player B, but in the second trial in level row three here, I want it to be the other way round. So the second player gets to be Player A and the first player gets to be Player B. That’s how you can impose a turn structure and make sure that all of your players who’ve been given opportunity through all the different actions. And you’ve got all the control there in your spreadsheet.
Nick:
That is everything from me. We will be running beta programs and early access teams for all of these tools. So if you’re interstate go to Gorilla.sc/comingsoon, sign with the maintenance and we’ll be in touch when we’ve got something to show you. And that’s everything from me.
Jo:
Thank you so much, Nick. That was extraordinary seeing how quickly you put that game together. I remember when you first built the gambling game for [Josh Balsters 00:21:48], it took about a day, if not, two days to build that gaming code. And you’ve just built most of that game in half an hour. Is that about right?
Nick:
Pretty much. I think that’s what we’ve got it down to you now. Yeah. Yes. And I think too so much of it is… So as we find so much of these elements, it’s the same thing that you want to do again and again and just by moving that functionality into the tooling, it makes it super easy to experiment with these things, fine tune all those adjustments and having that live, in engine, visual layouts, I find to be extremely powerful when I’m building anything. I’m a programmer. I’ve been programming for decades and I still much prefer it to have everything visually there in a tool in front of me that I can then edit with because I think that feedback loop from making a change to seeing the effect that it has, has such a massive impact on how quickly you can work. So that’s what we’ve really tried to tighten with this new generation of tools.
Jo:
Okay. A couple of questions in the chat for you. So [Lizzie Buchanan 00:22:49] is asking, is there a way to make the games adaptive? Is that going to be built into the game builder?
Nick:
Yeah. So adaptivity is something that we… So there’s a few different ways of doing this and this is actually going to be core across all of the tools that we’re building. So yes, absolutely there’s going to be a particular ways of doing adaptivity. One of them is either by, I showed you the binding to the spreadsheet, but you can also bind certain properties to embedded data, which is dynamic data that is saved on a per-participant basis. So if you have, and this is how I think Nico’s games work is that the time that you had to react was a piece of embedded data that was modified depending on how quickly you did it. So if you did really well, that we would save that time that you had to get slightly smaller. And then the following trial basically, you read from that value to then set itself up.
Nick:
So all the same thing would work here instead of choosing spreadsheet, you choose embedded data. The other thing we’re putting in, which is another way of approaching difficulty, [inaudible 00:23:49] and adaptivity is that I think most people familiar with the spreadsheet that drives your trials, what we’re trying to make really seamless is that you could actually have multiple spreadsheets. And so you could have three spreadsheets with easy, medium, hard and then have rules that essentially mean that when you reach some performance [inaudible 00:24:05], we essentially hop up a spreadsheet to your medium difficulty trials. So that’d be another way of doing slightly broader adaptivity where you have several different difficult levels that you want to introduce to people. And even define all of those really easy in your spreadsheet and have a simple rule of way of how you move between them. So those are some of the ways that we’re looking to bring adaptivity both to the game builder and to the task builder, as that all comes together.
Jo:
And then another question from the Q&A is do you envisage your multiplier being extendable to more than two players? And I mean, we saw just 10 minutes ago, Dan Richardson showing in his experiments, which have dozens of co-present participants. So Dan, maybe you can, if you’re still here, you can turn your video back on. If people want to do, there’s two different ones, real-time interaction that could be done with the hive? That might be that Dan’s gone.
Speaker 1:
I think Dan’s gone, Jo.
Jo:
Okay. Or Nick?
Nick:
Yeah. So I think that’s, yeah. So there’s a few different ways that we’re looking at exploring this. One of them is that the demo I showed with the Ultimatum game is obviously for, in this case, to be a game, but for a fixed number of players. And I think there’s a large range of these tasks that people are interested in, which are where you have to have a fixed number of people. I think there’s another whole chart of games, like Dan’s ones, where actually you want to play with a whole group of people and people don’t necessarily have assigned roles. They’re all doing something together. And I think where that really has an impact on how you go about building things is that if you’re doing something that has very specific roles, needs a very fixed number of players, then you’re very, very sensitive to people dropping out.
Nick:
In the Ultimatum game, if one of the players just disappears. You’re basically stuffed. Whereas in one of Dan’s presentations, if one audience member goes away, it’s fine. You can carry on. So I think what we’re looking to do is give you some fairly specific options. This is either a game that really needs two people and it doesn’t work any other way, or, yeah, this is a tool for a group of whole bunch of people. And those are some of the configurations/options that you’d be able to set in that multiplayer tab that I showed you. So that’s how we’re envisaging that working. And I think, like I say, the real crux thing, boringly, is how do you handle dropouts. And I think you’d want very, very different rules depending on the kind of mode of game that you’re building.
Jo:
Yeah. Certainly, with online studies, some people report dropout rates as high as 10%. One in 10 people are dropping out and that kills your experiments. As soon as you’ve got a game with 10 people, then you just can’t run your experiments anymore because it will always fail at one way or another. So, yeah, that’s really interesting. We’re going to have to stop there, but if you’re in the room and you were there for the games presentation and game builder, could you give some feedback to Nick in the chat? What do you think about game builder? What’s that made you think about for your research?