Game On!

Hello everyone, so lovely to be here. Dave has asked me to speak at State of the Browser a few times and I was busy a few times. So I'm glad that we finally managed to make it work. So before I start, this is about animation. So motion warning, if you have motion sensitivity, maybe just go to the pub and we'll see you there in a bit. You'll need your phones at some point as well, so get your phones out. But also don't check your phones. Just get them out ready, but don't be on your phones. And content warning for Trello tickets. So I'm Cassie, I work for G-SAP, which is an animation library, as Jake said, that's been around for a really long time. It allows you to animate anything from CSS properties to Canvas and WebGL, Shaders, SVG, which is my favorite. So yeah, it's been around for quite a long time through various different iterations. It's actually called Green Sock Animation Platform. I'm not gonna tell you why. If you want to know why, you can find me in the pub. But when we did the rebrand, considering everyone called us G-SAP already, I was like, let's just lean into that. So yeah, been around for a really, really long time. I love Wayback Machine. Just a little shout out for the fact that we've got these wonderful Internet treasures that you can go back and find. This made me laugh so much. Deadlines are looming. You've got to deliver a Swift that looks amazing. Who's had to deliver a Swift that looks amazing? Man, you are old. I also really, really enjoyed this guest post. Flash versus HTML5, faux drama. The HTML5 versus Flash topic has become far too divisive. It is most definitely not a Flash killer. It's an evolving standard that promises some exciting capabilities, though. Yeah, well, not everyone's right all the time. So at GSAP, I spend most of my time hanging around in the docks, making the docks better, creating demos, helping people with various animation problems. I really love a complicated animation problem. And I'm known to kind of live in about a million Discords and Slacks, just kind of waiting for little things to jump on to help people with. So I'm kind of just surrounded by animation code and demos and examples all day, every day. We've recently put together this demo hub, which has got loads of different examples of how to use GSAP from everything, from shape morphing, to Canvas, SVG, little UI interface things. So when I sat down to write a talk, I kind of looked at all of these demos and all of the docs and all of these examples, and I had nothing. Because a talk is more than just bits of code and little snippets of information. And this is Jeremy Keith's fault, to be honest. I had the pleasure of working at Clear Left when I got started in web. And Jeremy was the one who introduced me to public speaking, and he was very determined that all talks must have a narrative structure. You have to have a narrative structure. You have to have a hero's journey, some sort of beginning and an end and something to get people excited about. And I was like, can't just show people a bunch of code and snippets one after another. So I did what I think a lot of people do when they're faced with a difficult challenge, I procrastinated. So I sat down and I played my favorite game at the time, Dave the Diver. Shout out for Spiritfarer as well, like I mentioned earlier, that is one of my favorites, made me cry. But Dave the Diver, you're a little chubby diver lad. And you dive into the trench and you find fish and you collect them for your sushi restaurant and you make people sushi. So that's what I did for quite a while. And it was while I was diving around in the trench, hunting down fish, that I realized that games are basically just a bunch of animations tied together with a narrative structure. Which is basically what I'd been asked to do. So if I turned up to do a talk and I didn't have a talk, but I had a game, maybe that would be fine. So that brings us to today where I don't have a talk, I'm sorry. But I have a game. So hopefully this will be a fun way to end the day. We're gonna do this kind of like a pantomime, because I'm gonna be doing, not live coding, I'm not mad, but live commenting out and tweaking things. So if I get something wrong, you're allowed to shout, Mr. Semicolon or something. Right now I can't find my cursor, there it is. All right, so. I'm just gonna reset things cuz I was adjusting. Can people see the code? Is that big enough? I might have to zoom out and then zoom back in again at some points. No. Everyone close your eyes. No, let's see if we can, I'll just do a reload here. Hopefully that hot reload, you won't see it. Hey, there we go. Okay, you kinda saw a bit of secrets. So I sat down to make a game. And I usually live in SVG land. And I thought, G-SAP can animate anything. So I should maybe play around with something that I hadn't before. And I hadn't really played around much with Canvas. So I thought I'd give JavaScript Canvas a go. So this is the start of my game. We've got a little person. And the little person can walk along in the world. They can jump onto things. They can double jump. There are platforms that they are blocked by in certain collision detections and not blocked by in other collision detections. And they can jump over things. And they can also fall off the world and die and respawn. So that's all the game mechanics. Hooray, hard bit done. So this was the beginning. And it looks like that's animating. But it's actually not really animating. It's animating much in the same way that traditional hand drawn animation is animating. So you get one picture, you draw each frame, and then you put all of those together in a kind of sprite sheet. And then you get animation. So that's kind of what's happening with Canvas. We've got the G-SAP ticker here, which is basically a fancy request animation frame. It uses request animation frame underneath the hood, but then it's got a bunch of little adjustments for if browser tabs are hidden and syncing up different animations within G-SAP itself. So it's like the heartbeat of the G-SAP engine. And then we've just added a function that draws the canvas every frame. So if the character moves or something changes, it updates it. And if you've used Canvas before, I'm sure you know it's very important to clear the canvas when you're updating it. Because otherwise you get stuff like this. Whee, I've got no idea where I am. Where am I? I mean, it could be fun to have a game that's like this. It was a bit of me that thought it would be amusing to have a Canvas game where sometimes the canvas just overdraws itself. It could be art, but maybe not for now. So yeah, that is our little ticker. There's not really much to do right now though. You could just wander around, but it's very cozy game coded. There's no real directives and there's no danger. So let's add some tasks. So we'll add ten little tasks. These are gonna be directives, things to do. And now we've got some things, some things moving around in our world that spawn. And they drop off the edge of platforms. And sometimes they even get rid of themselves by falling off the edge of the world, which is quite handy. Oop, no, out the way. And you'll notice that if I interact with them, the color of my character changes. Too red, yeah, those favorite color. And I was really excited about this because G-SAP has a plugin called Draggable. And it's just for DOM elements like SVG elements or HTML elements. And there's a thing in it called hit test. And you can say if these elements are overlapping or if they're about to overlap, all sorts of various little details, fires off a little function. And I was like, I can't do this cuz I'm in canvas land, not HTML land. But actually, if you structure your JavaScript object the same way as the bounding box object, good to go. So yeah, just using JavaScript objects and then G-SAP's hit test to check when I am bashing into them. So yeah, those are our little tasks. Let's add in some actual animation. I might get rid of the little tasks for now just so I don't die. Okay, it's me. With slightly bouffant 80s hair. So we've got a little character and I've added some sprite sheets. And you can see it kind of looks like it's animating, but it's actually just on key press, right? So it's swapping out the sprite on key press. So we want to actually add some animation in here. So we've got our little player. And this is gonna be our first little G-SAP tween. So here we've got a G-SAP tween. It's very nice and human readable. This is basically saying, hey G-SAP, I want to animate this thing over a duration of ten seconds. I want to animate the frames, the frames just belong in the object. With an ease of none, we're just doing linear easing. And then you can add repeat and yo-yo, which is like animation iteration direction, I think, in CSS. Prefer yo-yo, easier to write. But the same thing. And then if we take a look at our little character now, save it. So you can see that this is, it's idling. So we've got a big long sprite sheet and it's moving through the sprite sheet. But we've done a linear ease, so you can't actually see the sprite sheet swapping out. And this is a thing that I try and get across to people when they're doing animation. That you don't have to write out each animation step. You can just lean into easing to do the heavy lifting for you. So we've got a bunch of eases in G-SAP. The exciting thing now is you can use a lot of the eases that we've got in CSS, because you've got linear, which is very weirdly named. I don't know why they call it linear. Linear easing in CSS is not linear. You can pop G-SAP eases in there. We've made a little converter on the G-SAP site as well. So if we use steps, we've got to put the time down as well, to make it one second. So yeah, now we've got a little character that's got an animation. She's just waiting around for things to get interesting, much like you are. So we'll add another little animation. This one's for the run animation. Save that. And now we should have, yeah, we've got a bunch of little animations running, running, jumping, jumping, dying, excellent. Cool, what was I gonna do next? Let's set all the sprites to visible, awesome. So I started this mostly focusing on the animations, getting very excited. And I didn't really think through the state management side of having lots of sprites and lots of different states in a game. So there are a lot of little state management bugs everywhere, cuz this is basically my state management library. Along with a bunch of like, wait, no, that's not working above it, which you don't want to look at. Figuring it out as we go, but it's better than using Redux. So. Let's do showing the sprites. And we've got a little office. Wait, should we put some noise in? I think you can hear it. So we've arrived at work. >> And now we can jump on top of little platforms. And then this is where we have to hand in our work at the end of the day. Excellent. Okay, what have we got? Just trying to work out which bits I'm adding next. Okay, let's add in some more of our tasks. Let's do like six tasks. Amazing, so we've gotta have some work to do while we're at work. So we've got some Trellos. You interact, then they give you psychic damage, which I think is relatable to everyone. But right now, we don't really have a way to kill them. We need a way to kill these Trellos. So let's go take a little look. We've got a die function here, and I've done some more little GSAP tweens. Whoa, that was scary. Awesome, so this is a little opportunity to show off another really fun thing in the GSAP library, which is physics. So this is like, it's fake physics, cuz physics is very complicated and lots of maths and that's lots of JavaScript. So this is like a tiny little bit that we can add into GSAP that kind of gives the impression of physics, but without all of the maths behind it. So you can basically say, define a velocity and an angle and a gravity. And gravity is like how much you need to be pulled down. And velocity is how much it's gonna shoot off in a direction. And then angle is the direction that you want it to shoot off in. And then another little fun thing is the random strings here. GSAP passes those internally, so you can pass in random like this. So that's saying a random number between 400 and 800. Or you can do what my favorite bit is, which is constrained organized randomness. And you can pass in an array with some values that you've kind of predefined. So yeah, let's have a little go and see if that works. Come down here. Ha ha ha. I guess we've got randomness in there, they'll fly off in different directions each time, which is quite nice. Weee. You'll see if we, let's make this a little bit bigger. Had more velocity just to see what happens. >> Way, mega velocity. So yeah, that's kind of how velocity works. I think somewhere in the middle is gonna be good. Let's do 800. Brilliant, okay, so we've got some little trellis. We've got some randomness and we've got some physics in there. What should we add next? I think we need some admin tasks. It wouldn't be work without admin tasks, would it? Here we go. Last time I did this talk, the connection broke at exactly the time that I added in the printer, which was really funny. It's always the printers that break. Okay, so we should have a little printer now. Weee. Here we go, a little printer. We want to do some admin tasks when we jump on our printer. So let's comment this out. And it's much the same thing for the printer. We're gonna shoot some admin tasks off in different directions. We're gonna have a little bit more hang time for them gravity-wise. Why are they all hanging out by the printer? That was a bit loud, sorry. So we get admin fatigue if we do admin. And all our little papers shoot off. So yeah, that's using some physics as well. And then, We've also got quite a lot of handy callbacks. It's like the thing about animating in JavaScript is it allows you to kind of hook into lots of other things and events and tie those events into like kind of great for doing games really. So here on the onComplete and onStart callbacks of this animation, we've got some audio playing. And then we're also deleting the papers at the end of the animation, like take them out of memory. So yeah, we've got our little printer. We've got our little Trellos. We should probably show some stats. Awesome, so now if the Trellos, no, we get energy damage. We can get rid of them at the top. And then in order to do work, jump on the printer, and we get work done. Excellent. Cool, so this is where I thought it would be fun if people did a little bit of a choose your own adventure. So we're gonna do, I haven't done a Slido like this before. Present. So you can do the QR code. Is it not active? Is it active now? Yeah, okay, so gotta choose an enemy. Is it? Dates, either the date object or date pickers. Is it a badly made client side single page app? Or is it AI? I mean, yeah, I had a feeling it was gonna be that. I think that's clinched it. All right, so let's go back to our little game. We are gonna say AI is our enemy. And then, I think we've got. I'm not being rude, it's fine. Okay, excellent. We've now got a coworker who has discovered Claude code. And he is furiously hammering away at his keyboard every time he does this. It's just raining technical debt. So we've now got to avoid the technical debt as well. Dear. I'm getting a bit exhausted from getting killed by all the technical debt, so we should probably add in some little energy boosts so that we can power up again. So now, if we get damaged by the Trellos, we can power up by drinking a nice glass of water. But the problem is that every time our coworker hits the slop button, for some reason, I think that might be a bug. I don't know, I didn't intend that. I don't know if I'm not making a point or anything. Excellent, so that's most of the game. Let's do adding in a power up. Okay, so you're stuck on completing some of your Trellos. You need some help. What do you lean on to help you? It's almost like you're biased. I think state of the browser ticket has won by a large margin. Excellent. Okay, so let's add in a ticket in here. He's still hammering away. Can conversely more jing. I don't know if anyone else saw that. It's almost like making educational infographics should be a thing that humans do. Dear me, I need to jump over this gap now, which is quite a lot. Okay, there we go. Gotta watch out for the technical debt. Have some coffee. No, more technical debt. Let me get my ticket. >> Yay. Amazing. >> How am I doing for time? >> Quite tight. >> Quite tight, okay. Well, we're just gonna add in one thing. Wait, let's do, let's do a little coworker. Whoop, I'm gonna find our clever coworker somewhere. I'm terrible at this, sorry. It's almost like coding and doing a talk and playing a game at the same time is quite difficult. >> A div is not a button. Yes. >> I was frantically adding this in just before I did the talk, which is why I was on stage. David's been going around getting audio samples from people, so. I'm dying. >> Start with the marker. The reason I'm dying is cuz the co-workers helping, but also I'm an introvert, so. I'm also just gonna show you my favorite bit of the game. I was talking about the fact that I wasn't managing my state very well. And it's mostly to do when you swap out sprite sheets. Like some of the sprites need to block others. So if you're being damaged, you shouldn't also be able to run at the same time. And I didn't think about what happens at the end of the game. You try and hand in your work and you haven't completed it, you die. But you can also still move. So you kinda have to just drag yourself back into work again to carry on. Which I'm just gonna leave that in cuz it made me laugh. Yeah, one last thing. Let's do the little intro. So I made a little intro as well. Can't have game without an intro screen. You have to type to reply, but it's just. That's the lot.