Rust Programming Language RustFest Zürich 2017, 5 Nov 2017

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: RustFest Zürich 2017 - Create Rust games easily by Lisa

Description

Ever wanted to make a game in Rust but didn’t know where to start? Then ggez is the framework just for you!

It bundles graphics and audio crates together with a simple API so can get started straight away.

In this talk I want to walk you through the making of a game with ggez from empty boilerplate to publishing a playable game.

About Lisa:
Lisa works in the product team at Travis CI. When not writing frontend code she learns Clojure and Rust, makes games and boycotts centralized social media.

A

Hello rust fist, thank you for the introduction and, as you may see behind me, we're going to talk about creating rest games easily, but first things. First I also have a clicker things about me, just like why. Why am I talking to you? Why? Why is this may be of interest to you I'm? Actually, a web developer, travesty I, where I write, HTML, CSS and JavaScript, and no rust anywhere, except in our like infrastructure, where we'd like rust compiles, but not on rust. I also put some stickers outside, but I think they're all gone.

A

So sorry, what is the like, maybe even more interesting, is that I like playing and making video games and like hanging out in hackathons or game jams or anything that allows me to produce large amounts of badly written codes in a short amount of time. You can find a lot of these things. I make it up and yeah like this morning, saw that a lot of people also attended West West Kiev. This was like my first time, speaking at a breakfast, also the event for which I learned rust in the first place. Sorry yeah.

A

So this is rust. Fist, Eric and I was like super excited to be like one of the speakers again, the at the when I got the emails, like oh you've, been selected as a speaker. It's like, oh, my god versus Eric, it's gonna be so cool, and but one of my co-workers was like so they're having a rust event in in Switzerland and they didn't call it rusty fist as I missed opportunity. But I got you covered because I made stickers.

A

I have 200, we put them here: limited-edition, okay, okay, so back in April and Kiev I was also talking about making games and rust, but back then I presented a game that I used that I implemented using piston, but doing the research. For the other talk, I already stumbled upon a game making framework library engine, as you may want to call it called GG. Easy and I can I guess what I used for this talk.

A

And finally enough I was like the creator of this is actually present, which was like a pleasant surprise in the break, because the game using your thing, okay, so what does GGC it's like? The name was one of the most confusing things for me in the beginning, since for good games easily. Obviously it's a library for making 2d games it's inspired by Louis left to the engine, which is a very nice API and just like creating games for like like packaging everything you need for an event. I get Game Jam which I attend.

A

So it was like this is like a very cool approach and like totally different to the one that like piston, takes. So that was interesting, so we have events and drawing and and sounds all in one crate, which is great and there's also like a module system in the making which, like also aims to extend these things. But it's from like I stuck the the issues they were like opening and discussions going on. It's like okay, I'm gonna, wait a bit until I get my hands dirty with that. Okay.

A

So, when I wrote, the proposal for this talk, I thought okay. So what can I do different this time? So it's not like always the same thing, just like a different game and that's how I was like. Oh I'm gonna do like a little walkthrough of like actually just like making a game during the talk, and just like explain you like what the things to and just I create a small 2-d game and I thought. It was like a very good idea to like in the in the review field, for the committee right, something like.

A

Oh, we kind of do this, like maybe semi life I drew some copy, pasting and gonna be fine and again this is totally not scary, but then in the announcements that happened on the rest rest, it was like, like a lice coding session. Are they? Oh, my god?

A

This is not what I signed up for so there will be. It will be depending on your definition of life coding. It may not be live coding, but I'm doing my best yeah.

A

So if you want to make a game, you should up front now, roughly no, but the games should be about, and inspiration can come from like everywhere and like things that you think about or like things that happened to you and for this game, I was very much inspired by the music video of Beyonce like from hold up the music video and, like my roommate, was playing it like on repeat all the time, and what's so much to me, the music video quite a couple of times and I'm gonna walk you through this and you hopefully could share my enthusiasm for it.

A

If you just Beyonce, I mean this very awesome, yellow dress and the baseball bat and she walks down the street and she smashes fire. Hydrants CCTV cameras caught various cars and the coolest thing that just like I think only happens like in the music video is that, just before the baseball bat hits a thing. Sometimes the music stops for like a tiny fraction, and that's just like plays again when the bat hits like a car or something I was like. That is a very awesome game.

A

Mechanic I'm, just gonna, use it so I created a game. Beyonce, brawls,.

A

So this is just like a small small ship. So what's happening is that we have like, like a portrait, view, game game window and we have Beyonce walking down the street which she does automatically. But you will later see and if I press space in this in this game, she stops and puts up the baseball bat. And then, if I keep a space pressed, we will have this little counter that counts up and to hold up appears.

A

And then, if I release the spacebar, we're just gonna have to smash bush lines and then smash whatever is around us. There's also like a little score thing and like I, also calculate like track time and in the end, I calculate like a high score from the points that you make and the time that it took you.

A

But all of this is already too much to explain to you in like 30 minutes, so we're gonna do like a more stripped-down version of this which looks like this, which is you you have the yellow dot and in a couple of like red dots to your left and right, we have the space pressing thing and the smoosh lines are was like a red red rectangle that where we do calculus collision calculation on yeah, this is what I just said.

A

You have the Ottoman like self moving player, some keyword, events, spying, smashable things and detecting collision. So, let's start and I have like on so the game is up on github already and I created a psych like so the full game is a master, but I created a walkthrough branch with commits that are roughly the same steps as that we will that I will walk you through. So, if you want to follow along, you can do some, but yeah, okay. So this is quite scary. Can you see this? Okay, that's, okay, okay, so brand-new project.

A

So what you're gonna do is we're just gonna add the dependencies to our cargo tunnel, which is GG easy, the the game crate. Currently in 0.3 there is supposed to be a 0.4 release, soon, ish and I'm a little bit afraid it will break everything but you'll, see and also like random crate, because I don't know how to create games without randomness.

A

Safe and then yeah, it's like, oh, we need to start somehow, and this looks like a lot of code, but in fact I just went to the GG easy RS website, and then you have like this example thing and I can just like copy this.

A

And instead of the birds, I'm, just gonna use main RS and just paste this yeah, and we just basically do all of the stuff in here I hope you can read this I think it's okay, okay, so let's just try cargo run and while it fetches our dependencies I'm just like I really hope this works. Okay.

A

So what is going on? We get the the GG ez crate. We're gonna use some of the stuff that did like prepared for us. Like a configuration thing, events the game result in context which is like related to like the drawing that will happen. Sorry Oh.

A

Like just like, Oh mark, okay, like this okay, okay, thank you. Okay,.

A

We have graphics, we have some primitives to actually draw shapes on the thing that we can later remove, because I will use PNG s, some tram tracking thing, and here is like the more the more interesting stuff we have one struct that is called main states which will have all our the the properties that we keep track of because they interest us in the course of the game. In this like getting started.

A

Example, it's just like a like a little float position, X and when we implement this, like the only thing that we do is I give this position. X, I 0, point 0 value, nothing too! Fancy the interesting stuff is happening in once we implement the event handler trade on main state, where we have like the two most important functions, update and draw, which is the things that we know it's flightcheck know okay, so this is the.

A

This is the example that I just copied from the from the start page: it's a circle that just like moves to the right, nothing yeah, interesting it wraps around which we'll look at in a second, because here in the update function, we just say is like okay every time we call this so like roughly 60 times a second, we will increase the exposition by this value and then in the draw function between the clear and the present, we actually draw this the circle yeah and then we have a main function, which then essentially it's the config, and then we load the context, and then we put the context in with the main state and ran the entire thing.

A

So yeah I didn't even need to learn something about this.

A

It just works. Okay, so we saw our that game looks like, and it's kind of like, not really a game. It's just like a circle that moves, but the thing is it Auto moves and we can directly use this for our Beyonce purposes.

A

So I would just like copy over some, like we just like to find some values like how our window should like the dimensions of a window. So we have like more like like a portrait style thing, and we can put this in the config.

A

The only thing that you need to change is that this needs to be a mutable thing then, and we just put it like, so that the the title of the windows as Beyonce brawls and we take off the the width and the height from the the window, and if I run this, this is fine yeah. Okay, so we have like a few configuration values and okay, that's a good start.

A

I start with the with the player. I will also just copy over these bunch of values that we use. So most of these are just like eyeballed, because it's like you can then adjust and see how how things work for you, I defy player, X and player Y, whereas because we just walk downwards, X will always stay the same and Y would be the the value that we update.

A

So like move down, the axis I have like a little value for a speed, so we can adjust like how fast we want this to go and then I defined, something like which I call the hit area, which is like the red more rectangle that will then we detect collision on or like the the swoosh of the baseball bat.

A

So to say, and and these three things holding speed holding time in and holding time, ax could probably have nicer names, but they are supposed to be keep track of the the time that I keep the spacebar pressed.

A

So if I press space I will count up and 0.3 until I heat until I reach the minimum holding time which is after like this is when the hold up appears and after like during which I can collect it and collect the position thing until I reach the maximum limit and then I just like, then you have this like window, basically of like this, where you can actually do the thing this whoosh, you might wonder it's like, oh, but this is like not actually time you're, just like counting up a value like on every iteration of update, which is true.

A

So it's like not actually time related and you will see significant differences depending on like what computer you run the Sun, but for the purpose of this game, I think it's totally fine. Okay, so let's create a struct. It can make use of some of these values. So I have a struct player. The player has an accent on why I use graphics, graphics, image for both the sprite and the hit area.

A

Images later will be just like a colored PNG, but later on, you kind of like have Beyonce and the baseball bat and smoosh and stuff I will also define H, X, X Y and its width and height for the hitbox, so that the hit area and because lots of calculation, things and then I feel holding which will keep which I would use for the holding time to keep track of that and implementing.

A

This looks something like this where's. My thing just put this here.

A

Okay, so we have a new player and yes, I use one rep, I'm, sorry and we just like initiate the things was like the constants that we have holding will be zero point zero in the update function that we will call in the maintenance update.

A

We basically check if, if self holding is zero point zero, which means we're not holding this, we will use to like update the players Y and also the hitbox wise that we have like them moving downwards and in the draw function we just like get the coordinates put them in the point thing, because it's nicer when we draw it- and we just like draw the sprite that we defined and if we are indeed holding like our holding value, is over the threshold of 4.0 that I defined earlier, and we will also draw the hitbox the hit area.

A

Okay. So if I save this and run run, we should already get something that moves. It's not moving. ah I know why, except oh yeah, I need this event thing, but I think for later. I just put it on the slide, because I need to put the player into the main stage. Obviously,.

A

Okay, so I'll remove the position X and put the player in here and then in the the main States new I will just so. Instead of like just position. X we'd now create a new player and give the player of the context, and then we can call cells player update. Instead of like the position update and draw.

A

No, that's the same. What.

A

Okay, let's try this again. We get a few warnings because I'm not okay, I know what this is. This is the unrep. That's biting me.

A

Luckily enough rest, so it's the pngs that I'm trying to draw are not actually there yet so I put them in the resources. Folder in my example run through things. I'm, just gonna put them in here and try this again. I know and I. Also I should read. My own readme is better because I also need to put this in the target debug thing because for path reasons that I couldn't figure out, but okay, this should work okay, so we have Beyonce.

A

And this is all there is right now so yeah. This is kind of boring, even though it moves which is exciting that they implement some more functions on our play, for example, hold and unhold.

A

Okay, so these are just like functions that we will later call when I press the space key. So if you say, if, like our holding thing, is more than zero point zero, so there's holding like pressing going on on the button and we'd like count up the holding thing, but in case we reached like the maximum limit, I will call on hold so basically reset and then, if we're like yeah, this would reset it to.

A

As you can see here in the on hold function, we set it to zero point zero, and this is also if we call hold in fickle hold in the first place, and the value is zero point zero. We go into this branch, which will then start increasing the hold and because we need to call it at some point. I can define, for example, a custom like the key down event, and this goes into the event handler thing for the main state.

A

Emacs, what's happening: okay, key down event comes from ggz, we get a key code and we also get modifier keys and I. Think this. The last third argument is like repeat or something, but we don't need this or I. Don't need this in my case and then I just gonna match over the key code match for space and then I call self player hold and we're gonna do this again and now, if I press space it stops and then the thing appears, and then you see this it's like because I never released.

A

There is no release event, so we cannot go on so we should have something that I let's go on, and this would be the key down event which is kind of the same but and be much the same thing, but instead of whole be called unhold, which will resets the holding value and that should that should be it. So I can press space and I release it and then we go on and if I press it longer, yeah, okay, so this works.

A

So we have sort of like our little mechanism, of like counting up waiting a bit before something happens, and what's next we need things that we can smash. Obviously, I start with a couple of values that I need, so I saw, or maybe remember, from the jiff I have I just lined all the things up in either on the left or the right side, and those two points on like the x-axis are just like. Hard-Coded, like I just chose them, which seems right and look kind of. Okay.

A

I have two things called the spawn factor, which is like the area which is smaller than like the overall window heights, but just like a little bit less because I don't want them to be like two up like up too high or up too low, and just like looks wonky I have smashed builds per screen. So you can say us like how many things you want to be like to have generated and then what I also do is I just use a the same width for all the smashable.

A

So in the in the finished game, I had like a car and the higher end and the CCTV camera and they look like they have different widths, but in fact I just like treat them all as the same thing, because it's easier and I don't have to like position. Things like I just for simplification reasons.

A

Okay, so how does a struct look like.

A

We just have like x and y values that we then like fill in. We have an active flag that I use a lot which is just like. We will only like once. You basically hit a thing, it will no longer be active and we stopped drawing it and we like count up score or whatever and I, also like the little graphic, that's just read, but it could be lekar or a hydrant and you can, depending on what kind of smashable thing you have. This would be different. I have here.

A

We also need randomness, I'm, just gonna put this up here, so yeah randomness, because it's essential okay, let's implement this thing,.

A

Okay, so the new function is kind of yeah, let's just walk through it, a bit for the wine, like the value of the y-axis I just chose to like generate some random thing that is in the spawn factor and I also still have this, like plus 100 to like move it down even a little further.

A

It should probably also put this in one of the configuration values for X I, just just like generating a boolean so and then match it to true or false, and then aside, like left and right so like it's like, and sometimes if these, like weird occurrences, where, like literally everything, is on either the left or the right sides like this doesn't seem right, but it's okay, the sprite is a new sprite yeah and then in draw, which is kind of this should probably go into this so I check.

A

If, if the thing is still active, only then we draw, and if it's not active, we don't do anything. Okay,.

A

So, as with the player, we also need to like let our mainstay know about that. We have a thing that we can smash so in our main state struct yeah.

A

We also have smashed balls and we don't just have one, but we have multiple, so I say like oh, we need a vector of smashable and when we create a new game, state I just create an empty vector and then say basically in the range of like zero to how many smashed balls on one per screen push nice Mashable's into this vector and then.

A

So yeah and then the only thing left to do is to draw things and that goes into draw. I will draw the smash before the player so that the hitbox will then overlay the vegetables okay. So, let's see how this looks never made a mistake: oh we have things and when I, if I, not press space, you should see that the hitbox will eventually collide with things on the left of the right side, but we don't have that yet.

A

So, let's add that and there's like one place where I would call collision there's probably, and that, like a thing that is better suited, but I would call it in the key event. So if we release just before we reset I would check collision and collision itself, I decided to implement on the main state as well.

A

So what happens so I release the key? We call collision and then we're actually checking like if, if the whole thing like, if we're still holding the key and they're just over the minimum time, because otherwise we had already reset it I'm gonna iterate over all this Mashable's that we have check if they're active, then do the nice geographical to the boxes. Intersect thing, which is just like very verbose, could probably perfecter that and if they do intersect, I said the active like on this mesh filter. Falls I could also play a destruction.

A

Sound I already picked them in the sound API is also really nice or like count up score or all these things, but I would just make them go away. And let's see if this works, what main stage, but oh.

A

True wrong line, thank you.

A

Okay, so let's see if I press this yeah- and this is like- and you see- I'm very generous with the implementation okay, so that was it for this. Let's go back to slides yeah we're done! Thank you for their force, but yes, so things that I did not cover, because this yeah and there's an API for like writing text to the screen and, like all these timing, functions that I'd like way better suited to actually time things just like scoring you can like have this depend on like what kinds of things you want to smash.

A

It's a lot of fun, drawing pngs in making those, because it makes things cute, but like there's also a certain aesthetic to like just rectangles I think sounds you can like play them. It's like really just like, like lot of sound play, a sound stab, a sound and then you can play around with with the well use of just like how many things you want to create and like how like how generous you want to be with the collision and those values and yeah.

A

But I like this as an exercise to you and that is actually.