Building a Game in Ember Starring Your Cat
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 37 | |
| Author | ||
| License | CC Attribution - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/34724 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
EmberConf 20161 / 37
4
5
7
10
11
13
14
15
16
17
20
23
24
25
26
27
29
30
31
32
00:00
VideoconferencingCodeComputer-assisted translationGame theoryBuildingMathematicsStrategy gameLimit (category theory)MereologySoftware testingIntegrated development environmentPoint (geometry)Chi-squared distributionCorrelation and dependenceCartesian coordinate systemSource codeGame theoryLibrary (computing)MereologyMobile appPattern languageProcess (computing)Electronic mailing listAxiom of choiceRight angleScripting languageSoftware testingWeb browserObject (grammar)Computer-assisted translationComputer programmingNeuroinformatikWeb 2.0Software frameworkComa BerenicesFrame problemJava appletLink (knot theory)BitSlide ruleBuildingData structurePoint (geometry)HookingMultiplication signSet (mathematics)Software developerTouchscreenDigitizingTablet computerUniverse (mathematics)Data storage deviceNumberGoodness of fitCodeResultantLine (geometry)Level (video gaming)CuboidInheritance (object-oriented programming)Uniqueness quantificationOperator (mathematics)DebuggerSoftware maintenanceAngleExpert systemPhysical systemMobile WebQuicksortGreatest elementACIDRepresentational state transferSoftware design patternDemo (music)Configuration spaceHydraulic jumpFront and back endsXMLComputer animation
09:13
EmailComa BerenicesProcess capability indexFile Transfer ProtocolMenu (computing)Computer-assisted translationOrder (biology)Game theorySpacetimeMechanism designMereologyHydraulic jumpRootMathematical analysisUniform resource locatorAmsterdam Ordnance Datum
10:59
BuildingGame theoryMenu (computing)EmailInheritance (object-oriented programming)Template (C++)TouchscreenWechselseitige InformationHill differential equationSlide ruleLoop (music)Maxima and minimaFirst-person shooterMultiplication signService (economics)Tablet computerLimit (category theory)Hardware-in-the-loop simulationLoop (music)Semiconductor memoryCodeMereologyDirection (geometry)State of matterRoutingPoint (geometry)TouchscreenWordService (economics)Element (mathematics)Game theoryLine (geometry)QuicksortNumberSpring (hydrology)Web browserBitLevel (video gaming)Multiplication signGroup actionPosition operatorParticle systemWebsiteSlide ruleWeb 2.0RootUniform resource locatorObject (grammar)Default (computer science)CuboidCASE <Informatik>Type theoryStandard deviationWindowSubject indexingFunctional (mathematics)Frame problemSuite (music)Parameter (computer programming)Roundness (object)Event horizonSystem callPlanningTemplate (C++)Metropolitan area networkMathematical analysisGreatest elementComputer fileSoftware maintenanceMenu (computing)Right angleProcess (computing)AreaReading (process)EstimatorLemma (mathematics)TelecommunicationSoftware frameworkBefehlsprozessorServer (computing)Inheritance (object-oriented programming)SpacetimeLink (knot theory)Set (mathematics)SmoothingSocial classAxiom of choiceRouter (computing)Computer-assisted translation2 (number)LogicLiquid
19:49
Color managementSoftware testingGame theoryMenu (computing)Euclidean vectorIdentity managementEmailAuto mechanicEquals signSlide ruleMaxima and minimaMobile WebRevision controlBuildingAndroid (robot)Raw image formatLogicLink (knot theory)VideoconferencingCodeService (economics)Event horizonGame theoryCASE <Informatik>Software testingNumberMechanism designMobile appMenu (computing)Software developerProcess (computing)Knowledge-based systemsBitNormal (geometry)Connectivity (graph theory)Computer-assisted translationLink (knot theory)FreewareRight angleData storage deviceTelecommunicationDataflowGroup actionLine (geometry)QuicksortProgram slicingWeb 2.0Series (mathematics)Point (geometry)CodeElectric generatorPresentation of a groupMoment (mathematics)Execution unitSpecial unitary groupCellular automatonComputer iconLogicMereologyLevel (video gaming)SubsetBuildingStandard deviationWordAndroid (robot)Selectivity (electronic)BootingSoftware frameworkNeuroinformatikSoftwareComputing platformAreaFigurate numberSlide ruleService (economics)Expert systemMultiplication signCommon Language InfrastructureTouch typingMobile WebCountingSheaf (mathematics)NP-hardDampingDynamical systemFront and back endsPhysical system
28:39
XMLUML
Transcript: English(auto-generated)
00:13
Good morning. Thank you everyone for getting up on the early side to see this like one of the first talks of the day
00:21
So thank you very much super appreciated if you have trouble seeing the slides There is a link here to the slides on speaker deck. So feel free to download those My name is Matt McKenna. I work at a digital health startup in San Francisco called Omada Health
00:40
We do a little bit of ember in some of our internal apps And I'm I'm really excited to give this talk which is called build a game and ember Starring your cats and there will be a demo of a game starting my cat croissant in a little bit but the reason I'm excited to give this talk is because I
01:01
Think it's already pretty well established that ember is a fantastic choice if you're building What you might call like a fancy crud app built-in in JavaScript and that's true if you're Building an app that's hitting a rest API and doing like crud operations. Then ember is a really good choice
01:20
But I think but I think ember is is more versatile than that. In fact, I think ember is a fantastic choice for building any Front-end JavaScript application even one as as non-standard as a game starring your cat So that is the takeaway that I hope to bring to this talk is
01:41
That there are things that are common to to all JavaScript apps And these things are generally not the most exciting parts of JavaScript app development In fact, I think they're kind of the boring parts And I think if we if we let ember handle the boring parts of app development Then we will be able to spend more time doing the fun stuff the exciting stuff
02:05
Of app development like like making your your cat jump around the screen So if if you're here, maybe maybe your first thought is Why? Why build a game in in JavaScript like if you want to make a game?
02:21
Why JavaScript or maybe you take it from the other angle and you say I'm gonna make something in JavaScript. So why again? And for me, that's that's pretty straightforward. So I got into Computers because I was into games and then I got into programming Because I was into computers. So now that that programming is part of my career
02:40
I really like wanted to cross off my bucket list go back and make the thing that got me really excited about programming in the first place and Then next if if you do ember or even if you don't do ember, but you do a little bit of JavaScript You already know enough to start making a game like right now
03:00
There's there's very little between you and just making a fun little game And kind of along those lines deploying your game is is relatively easy, especially compared to mobile app development and what it takes to Like publish an app onto an app store and then once you do deploy your game
03:22
Your game will have a really wide footprint because your game can be played on mobile tablet desktop And so there's just I think a lot of good reasons to to get your your feet wet making games in in JavaScript and perhaps most importantly right there on the right is a picture of
03:40
Croissant, she's a fluffy little cat enjoys sleeping food and I think she likes being a star of this game So that's why building a why you might want to build a game in JavaScript, but why? Why build a game in ember how does ember enter this you you might make a game in JavaScript, but how does ember relate to this?
04:04
And I think to kind of appreciate why ember can be useful in game development It's important to distinguish between two things one you and to your JavaScript app and so what I mean by that is
04:21
You are special and if you grew up Kind of near where I did kind of when I did maybe you saw Mr.. Rogers on TV And and he had a song called you are special The these are the lyrics to it, and they're really nice. You are special you are unique. That's what makes you wonderful I agree with that. I think you are unique that is what makes you wonderful
04:44
your JavaScript app though Your JavaScript app is probably Less special than you are there are things that even if your app feels like it's it's super unique that no one has ever made this App before there are things that your JavaScript app is probably going to need to do
05:02
So this this like chart here is a list of things on the left that your JavaScript app probably needs and the list of things on the right is the patterns or Objects that ember uses to attack these things your app needs And and why I have this slide is to show that you may feel constrained by
05:25
By a framework like you don't want to do everything the frameworks way But the framework is actually helping you take care of the boring parts of app development. So like those things on the left like Handling the asset pipeline or doing testing these aren't things that people get really excited about like I want it when I decided
05:42
I wanted to make a game I wasn't like I want to make a game, and I'm really excited about doing the asset pipeline It was like I just wanted the asset pipeline to be there so I could work on the game And so this reminds me of a quote by Eleanor Roosevelt, and I I may not have the quote exactly right But how it goes is with freedom comes maintenance
06:04
And I think what Eleanor meant here was that of course you have the freedom to choose For any JavaScript design pattern and of course you have the freedom to choose any micro library you want to get your JavaScript app developed, but now if you do decide to to take these disparate libraries and patterns and
06:25
Glue them all together to make your app You are now on the hook to maintain that glue code And I think the question well the question that I had asked when I decided I want to make a game was How bad did I want to maintain that glue code like how much time did I want to spend
06:40
Working on the glue code compared to to working on the game itself So that brings me to the boring parts of game development. I'm not a professional game developer I imagine professional game development has its own sets of Boring parts, but for me for me making this game starring croissant
07:02
There are three main things that that I wasn't super jazz to work on that I wanted the framework to help me out and The first thing was the the non game UI so I knew that I needed menus in my game I needed ways to like pause the game. I needed ways to turn the audio on and off I need ways to to show high scores. I needed these things, but but that's not why I wanted to make the game
07:25
I just knew I needed them Next was testing I knew I wanted to test my game I wanted to to do everything on the up-and-up, but I didn't want to have to configure testing framework I've configured a number of testing frameworks in my day, and I've yet to have a good time doing it
07:42
So I was really hopeful that I wouldn't have to worry too much about too much about setting up my tests so I could I could write them pretty easily and quickly and Finally there was deploying so I knew I wanted to deploy to the web So you could play the game in the web browser, and then I thought well This is a game. I play games on my phone I would also like to have this game beyond on the App Store
08:04
And then I got into the games that I got into when I was a kid were all desktop games So part of me really wanted to get a desktop app also But I didn't want to have to become an expert in all these Systems that I was going to deploy so I just wanted the game to be on them So this sort of makes up the the structure of the rest of the talk is that we'll go through
08:24
How I used ember to handle these three boring parts the UI the testing and deploying the game So this is a this is a screenshot of the game the screenshots on the right That's an actual picture of croissants on the left I think like a good third of my pictures of croissants are her in an Amazon.com box
08:44
I don't know if this is maybe it's the way it is with your cats too, but they love deliveries from Amazon So we'll go into how the game works in a little bit, but kind of long story short It's written in canvas And here are some links to if you want to play now The you can go to croissantapizzacat.com warning. There's like audio so could be kind of fun
09:05
The link on the bottom is is to the source code, so if you're interested in seeing that So now if you will permit me, I will switch to the game So this is it. This is the the main menu. I don't know if you can see the
09:24
The URL up top, but it's just slash right the root URL If I hit play here Croissant the game starts, and I press so I just lost I'm terrible I am supposed to be the preeminent croissantapizzacat player in the world that was super embarrassing
09:40
So here's the idea you know you press space you jump you get the pizzas you avoid the cat beds And that's how you lose is if you fall into a cat bed because I wanted to make a game Starring my cat croissant, but I wanted like I didn't want it when you lose to have anything bad happen to you So yeah, you know so she's and if you have your audio on there's like a slight purr when she's in there
10:02
Because this is like like my favorite game over. It's like oh take a nap So Yeah, so that's kind of like the main game mechanics. There's a couple other parts. I want to show so There I collected 71 pizzas Then my high score is now 71 and if I click the croissant face here we go into
10:23
No, that's okay. Thank you very much, though So if you hit the the menu button you go into play slash one slash menu, and then if you go into the high scores You'll see here are some of my high scores that one that I just got that 71 is right there
10:40
And then I can go back and go back to play and one more part I wanted to show is that if you're playing and You hit the the menu the the game pauses, so this is you know in general Just like how the how the game works. It's not crazy complicated or anything
11:04
So I want to get started talking about how how the the game menus work, so I wanted to make menus that didn't feel you know like a website I wanted to feel kind of like a game and so for me like When I was thinking about what does the game menu look like? The kind of two main things one game menus at least in my memory are full screen
11:24
So they take up the whole screen and then the second part is that the animate so like a more nested The like did the more nested you go the more like animated in one direction and when you go unnested you animate in another direction so so I wanted to try to get something that felt like that out of ember and
11:41
Fortunately like standard ember you're already halfway there, so if you built some ember You're probably used to nested routes, and if you're new to ember You know maybe maybe you haven't seen this, but I think it's it's not too hard to to pick up like how this works So on the far left is our root URL And that's just slash when you click play you go to slash play slash one so for level one
12:03
and then if you click on the croissant face you go into the menu and you know it's one slash menu and and so forth and The code snippet on the bottom is what the router.js file looks like so that's how That's how we define our routes and and maybe you're thinking like why even show the slide This is totally standard ember, but that's exactly
12:23
I think the point is that you get this sort of functionality from ember Just right out of the box like you're kind of halfway there to making a game menu So this will get you nested menus But it won't get you the animated full screen menus that I had talked about before so how do we do that?
12:42
I want to take then a step back to talk about how templates are rendered in ember by By default so it's a mouthful in English, but like in practice It's a lot easier so see if I can get this right in ember templates are rendered I am reading it off the screen, so I don't even have to memorize it And ember templates are rendered into the parent routes templates outlet which is like impossible to parse in English
13:04
I think but in practice It's it's not too hard so it's like your your nested template gets rendered into its parent templates outlet And if you do this you'll get nested Menus however it won't be animated in full screen to do that That's what these next two slides are about so the first thing is
13:23
Liquid fire, so it's an add-on for ember if you were at this some of the talks yesterday You might have heard it mentioned if you aren't already familiar with it, but what it is is it's a fantastic add-on for animating between routes in in ember and What's what's really cool about it is to configure it. There's there's not much work
13:42
You have to do so in the previous slide We saw that we there was the outlet which the template gets rendered into after you install liquid fire the way you use The way you can tell an outlet to be animated is by changing your outlet Into a liquid outlet like it's kind of that simple and if you want to make something full screen Or if you want to change how that animation like looks you can give your your outlet a class
14:05
That that does the you know full screen stuff, so I wouldn't worry too much about the CSS below but that's the CSS that makes the the game beef or the game menus be full screen and Then finally if you've used liquid fire before
14:21
You've probably seen the transitions JS and what this does if you're not familiar is this is how you tell liquid fire What animations you want to use when you transition between one route and another route? So what this code snippet says somebody's playing I love it What this
14:41
Is saying is that if you're in the index the main index? Route and you go into a nested one to move left, and if you go the other way to go, right? And what I what I just love about Ember and liquid fire is that I was able to go from Like a standard website looking Nested menus to something that felt like a game in
15:02
In like less than 20 lines of code or maybe like 30 lines of code And I didn't feel like I was fighting the framework I felt like like I was using it correctly Which which like if you're used to using frameworks it feels good when you feel like you're working like together with it so the next part is Pausing the game so we saw that when you went into the the menu the game paused
15:25
And so I think that brings up like how do you handle the communication between? the game written in canvas and the menus written in ember And it this might be a part really like yeah that there's like no good way to do that This why did you pick ember you've made a bad choice
15:42
But fortunately ember exposes just like kind of all the right things to make this not Super difficult So to talk about like how we do the playing in the pausing I got to take two kind of digressions into how the game works And the first one is the game loop so the game loop is something that just about every game will have
16:02
And it has has two Main things it needs to do so it'll run forever And it will one update the positions of the sprites on the screen so like where croissants is Where the pizzas are where the cat beds are and then two it will draw Those those sprites to the screen and so if you can see that code snippet here
16:22
You'll see update and draw you can kind of guess what those things do And perhaps perhaps you're not familiar with the first line in there, which is window dot request animation frame And if you're not familiar with that we'll talk about in the next slide But but what it does is it takes the game loop in as a the game loop function in as a parameter
16:41
So the let's talk a little bit about request animation frame, which is like the the second of the two digressions, so Request animation frame is a web API supported most modern browsers now you kind of don't have to have to worry about compatibility there and Its main job is to call the callback function in our case the game loop Whenever the browser is ready to repaint and the browser is going to try to repaint
17:04
60 times a second if things get slow it might not be able to do 60 times a second, but it's going to try You may be thinking like if you haven't seen request animation frame before but you've used to some JavaScript like you could already do this With with set interval you could use window dot set interval and have it fire 60 times a second and you could do that
17:22
Totally work, and it's fine, and that's the way games were done in the browser like a little bit ago But there's there's some like performance reasons Why you wouldn't want to do that having to do with like the smoothness of animation also like CPU usage when your tabs in Background there's a link on the slide here if you wanted to get a little bit into the details of why request animation frame is
17:43
Like sort of the best practice for for making games in JavaScript but then having having like talked a little bit about like how the game works and Like how the loop works the next part is well Where do we put this game logic because we want the game to maintain its state?
18:02
When it's in any any route so we don't want the game to reset for example when you go into the menu so like where where do we put this code where should it live and Fortunately here ember has a type of object that that really suits our needs and it's a service So if you haven't used services in ember before what they are our long-lived JavaScript objects that can maintain state between routes
18:27
So this is a good spot to put our game logic, so it'll survive State there, so it's a will survive as we go in between Routes, so this is where I'm suggesting we put our play and pause methods
18:40
So here is a snippet from the game service You may recognize the first chunk of code as the game loop that we looked at earlier And then there's two more methods. There's a play method and a pause method so the play method sets pause to Spacebar the pause method does just the opposite set sets pause to true cancels the animation essentially pausing the game
19:08
And removing those event listeners. It's all right. We have our game loop. We have a plain pause method now How do we tell ember that we want to play? When we're not in the menu, and we want to pause when we are in the menu
19:20
Well, this is another area where we're ember was like designed in such a way that that really helps us out so We can inject the game service into our menu routes and take advantage of two events that happen on the route There's the two events are activate and deactivate So the activate event will happen when we go into the routes the deactivate event will happen when we leave the route
19:44
So what you're seeing on this slide is that we call pause on the game service on activate and we call play on The game service when we deactivate and this is kind of another area where I felt like I Wasn't like hacking ember. I wasn't doing anything that was like going against the framework
20:03
I felt like me and the framework were sort of one here and like making this thing work And and it's one of those times. We just feel like like really like in the the flow of developing and Kind of a good feeling So yeah the next section here is is testing the game in ember, so
20:21
I've heard that testing games is like near impossible, and that's that's probably true I thought it was pretty hard to test my game I think testing JavaScript in general UI stuff is is kind of hard But I knew I wanted to have tests because you know it's like You only have to have a project go on for for like a week or two before like not having tests starts to bite
20:41
you So I was happy that that ember count came built in with you know queue unit Testums like I didn't have to set all this up From the beginning cuz then maybe I just never would have done it And what was especially great was that the UI stuff is?
21:00
Like the way, I need to test that is the way I would test any ember component, so What I have here is a test for my game menu component And what I'm trying to test here is I just want to to know that when I tap the audio off button that the it then toggles to say audio on and vice versa and
21:22
What's great about? Ember is that when I generated this component? I already got a test like stub to where I can put my test, and I'm using just standard ember testing Processes to to make this test happen so that one. I'm like yes. Thank you ember for helping me there and Then maybe like a little bit more complex is that how do I know that the game?
21:43
How do I know that the game is working at all like it's great that the the menu works But how do I know that the game mechanics actually work and in a game? That's like more complicated than like pressing spacebar to jump over cat beds Maybe maybe there's just no like good way to test this sort of thing But for me like this croissant the pizza cat is a pretty simple game
22:03
And there's like one really simple game mechanic, and that's croissant touches the pizza She gets a point so I wanted to test that I wanted to make sure that that one game mechanic was was working properly So what I decided to do was create an acceptance test and an acceptance test boots up your whole app
22:21
And then what I had to do was Go to the first level check that the score was zero so get a baseline what the score is Wait one second and then check that the score Was greater than zero and I figure if okay if croissant has a score greater than zero that means she's such a pizza And it's it all works But if you saw if you saw the game when I was playing or maybe maybe you played on your computer
22:44
You know there's no guarantee that That Chris the pizza will be at like croissant level or that she didn't run into a cat bed or something like that So I needed to do something to make sure that croissant would definitely touch a pizza And that's what in this code snippet what the spew pizzas like crazy test helper does
23:07
and so What what it does is it turns the game from the thing on the left? So that's what the game looks like when you're when you're playing it normally to something on the right so on the right there Croissant moves a little bit faster
23:20
The pizzas are all at croissant height, and there's no cat beds And I think what's kind of cool about this is this is like one of those moments where you're like I love being an ember developer. I love being a JavaScript developer because The test helper itself was just like in like a normal ember test helper So like that's something that ember gave me and the ability to be able to modify the game code
23:43
like in line like Dynamically while the game was running is the thing that JavaScript lets me do so like this is one moment where I'm like yes This was like a fun way to to make this game Finally I I would like to chat a little bit about deploying the game in ember, so
24:03
We talked about before I really wanted to get this on the web I want this to be on mobile I wanted to be on desktop, but I didn't want to have to become an expert in all these systems I didn't want to have to bother some mobile engineers or desktop like os 10 engineers or something like that to figure out how to do this so Fortunately ember once again kind of came to my aid and if you're here last year you saw that the community came around to
24:28
Decide that ember CLI deploy is like the canonical way to deploy your ember apps to the web So I decided to go with that and and you know works really well, so I deployed this app to
24:41
S3 Was great great things about it were like at one point. I made a mistake in the code published that code was able to revert the the code and Like just all the things you would want to do on a robust like deploy process so like thank you ember CLI deploy and Then there's deploying to mobile and desktop, so I hope you got a chance to see
25:05
Alex's and Felix's talks yesterday on building mobile apps and desktop apps Respectively because they're really great and they have a lot of tips on how you can use what you already know about ember to to put your stuff on these other platforms
25:21
so seeing that that they were talking at the conference and seeing that they had ways to Build like ember apps in mobile and desktop I looked into the the things that they were doing and I decided to try my hand at using ember CLI Cordova to publish to the App stores and ember electron to build a desktop app
25:41
And I was really pleased that I was able to use ember CLI Cordova to get Croissant the pizza cat on to the Apple App Store into the Android App Store So if you search for you'll you'll find it on there I think I have zero reviews so like please five stars if you can everyone And so ember CLI Cordova worked out really well
26:00
And I was especially nervous about Android because I had never built an Android app and I was just thinking like am I gonna have to learn Android to be able to make this happen and The answer was I not really like I had to learn enough about how the like IDE worked But like really embers CLI Cordova took care of the the boring parts of getting the app set up and same with ember
26:23
Electron I had never built in os 10 app from from scratch before and Ember electron just kind of handled that for me. So it was sort of great So if you want to download the the Mac app, you can go to croissanthepizzacat.com Thank you very much. Somebody got it. Yes five stars, please. Please remember
26:41
And download the the game so I just like thought like how awesome is this add-on Ecosystem that like I can focus on making the game and all these things that would take forever To do and I would have hated doing them just get kind of for the most part handled for me So the takeaways from this is that I think all apps all JavaScript front-end apps are going to have very similar
27:08
Things that they need at least in some base level There are things that they're gonna need and I think we should let ember Handle the boring parts that might be like a great thing for ember to just do like all the stuff We don't want to spend our time doing
27:20
For me and this game then the main things were we're building the UI Dealing with the testing where do we put the game logic and then and then deploying the game itself Here's a couple links. I learned a lot from Mozilla's developer network on building games in JavaScript It really handy the second link has a bunch of like free tools to like make game assets, which which I also found handy
27:46
in in case you Want to know how like I put these graphics together as kind of like, you know basic as they are here's some apps that I used there I Have this the ziplock bag full of croissant stickers. So like I can't take them all
28:03
I mean, I probably could take them all home, but please take them from me. So find me later They they look like that in the slide there Croissant does have two colored eyes But I was made aware that I got it backwards her green eye is actually her right eye Whatever it is, whatever I have on the slide is it's wrong
28:22
Yeah, so thank you very much really appreciate You coming to see this