JavaScript Game Development With Phaser - Tile Maps & Plugins

hi i'm matt wilbur i'm a full stack web developer focused in front end and ux i work for cosaic a fintech company in charlottesville virginia and we produce chart iq a javascript library for creating interactive time series charts tonight i'm going to talk about phaser which is a full featured javascript framework for creating games for the browser and before we get started i just want to introduce you to the green guy on the screen there his name is alphazeta and he is the mascot for my website greensada.com and he's going to help with the presentation tonight just to go over my background in game development real quick i started out my career at visionary media they were an animation and interactive studio in new york city and produced several animated series and games made exclusively for the web and went on to do some work for warner brothers online entertainment creating games for movie websites and then over the years did games for various clients at various agencies i worked at with clients like little tikes hormel foods and vice media this is a follow-up to a presentation i did last year there was an introduction to the phaser framework we went over things like setting up phaser creating scenes adding images as backgrounds adding sprites there was the interactive game objects on the screens and animating them with sprite sheets tying all of that into the physics engine and handling collisions and adding keyboard input and we created a game that was a clone of the classic arcade game mario brothers that i called zeta bros if you happen to miss that presentation uh don't worry i've since written it up as an article on medium and you can get a link to that on my website greensata.com and i'll have links to all of that at the end so tonight i want to talk about two powerful features of the phaser framework and the first one is tile maps and tile maps allow you to build large play fields by reusing image assets uh by using a tile set which is in a large image composed of many small images that you can reuse to create even larger images and this allows you to design your levels without writing any code or recompiling your game and do quick edits and tweaks to your game without having to rebuild your javascript i also want to talk about plugins which allow you to extend phasers api and create reusable components that you can share across projects now last time we did a clone of the mario brothers arcade game so i want to introduce you to a spiritual successor that i call the legend of zeta so let's make a game now before we get into the javascript i want to introduce you to a program called tiled and tiled is a tile map editor that allows you to create tile maps without programming you could of course program them by hand but tiled allows you to do it with a graphical interface which gives you an instant preview of what your tile map looks like allows you to tweak things easily mess around and add new artwork and and also do a little bit of programming in the form of adding metadata to your tiles it's also a generic program it's not specific to the phaser framework it works with other game development frameworks like uh unity so i want to i'm going to open up tiled here and when you open up tiled for the first time the first thing it's going to ask you for is your tile set image and i'm gonna let me show you what the tile set looks like so i'm gonna go in here and open up this and what we're going to do um this game is going to take place at area 51 which is a base in nevada let me zoom in here a little bit now a tile map like i'm sorry a tile set is just a large image composed of many small images squares of the same size the size doesn't matter as long as they're all the same size within the same tile set so in this case we have 32 by 32 pixel squares so if you look at this rock here for example this is a good example of one tile here where this staircase is one tile here so if you can imagine a grid along here breaking this up what tiled is going to do is slice up this image from that grid into many smaller images that we can reuse to create our much larger map so i'm going to go back into tiled here you can see here where it's it's sliced up the image into its smaller tile elements and right away um the rubber stamp tool is selected and this is probably the tool you'll use most often this allows you to select a specific tile and place it down on your tile map now we need to recreate the nevada desert which is where area 51 is located and of course you know placing all those tiles one by one would be very time consuming and fortunately it has this full fill tool which works like you would expect in any bitmap graphics software so with it selected and my tile selected i can move over any empty space and click and it's just going to fill the available space in this case with the sand tile so now we have our sand for our desert ready to go i'm going to zoom in a little bit here and the first thing i want to do in creating my area 51 base is add some roads and you'll see down here if i can zoom in a little bit you'll see here where i have um this road tile here and these nice rough edge tiles that transition between sand and road i could of course start placing these um by hand here and create a road like that but then i'd also have to manually go in and add these edge tiles in here which would be very time consuming and fortunately tiled has a really nice feature that lets you take advantage of this type of terrain tile which of course is called the terrain brush i'm going to undo my road here now before we can use the terrain brush we have to first define the tiles that make up our terrains so to do that i'm going to go into the tile set editor here i'm going to click this edit button down here and i'm going to let me zoom in a little bit um i'm going to click on the tile or i'm sorry the terrain button here which will bring up my terrain uh palette i've already created sand and you can see here where i've these highlights here define um what each tile is and in terms of outer tiles and inner tiles in creating your terrain brush so hollow shapes define outer tiles solid shapes to find inner tiles and tile is just highlighting these to show me which ones i've defined and now i want to create my road terrain which will be the opposite of the of this a more accurate name here might be sand to road and then i'm going to create the road to sand uh tiles so if you had other terrains like grass or water you would want to create transitions for those as well so i'm going to create road here and oh before i do that let me delete this one little uh finicky thing about this is when you create the terrain whatever tile you have highlighted is going to be the one it uses as the graphical preview for the terrain so i'm just going to select that road there and then go back into my terrain palette and then click the plus button i'm going to call this road and now i want to define my road to sand tiles so in this case i'm going to create a solid fill these are my inner road tiles and i'm just going to drag along the inside here and create a solid shape filling in selecting all these tiles here takes a little bit of practice to to set this up with with tiled once you get the hang of it you'll see the benefits of it so here we have our inner tiles defined and i wanted to find the outer road tiles here by creating this hollow shape defining that as outer road tiles now with that i have the terrain set up and i can start using them in my terrain brush so i'm going to go back to my tile map and i'm going to click on the terrain brush here and if i go to the terrain pallet down here you'll see the sand and road terrains that i've created now i already have sand here so that's not going to make a difference because i have nothing but sand here but if i click on road you can see now if i zoom in a little bit you can see now how it's not just placing the road tile but it's creating a three by three grid with all of those transition tiles those nice rough edge tiles and if i start painting with this brush you'll see how it intelligently places the appropriate tiles to create those edges so i can go around here oops i made a mistake and i can go around again i made another mistake and here and now i can do the opposite and go to my sand terrain and i can fill in the places where i made a mistake and you'll see how it's it's putting the correct edge tiles in there so i can get a nice um looking terrain with very little effort which is a really nice feature now one other thing i'm going to create here because it's area 51. i'm going to go back to the road and i'm just going to create a giant freaking runway because that's what area 51 has and i can hold down the shift key and just drag and create nice straight lines this way and fill in a big space very very quickly now like i said this is a runway so very quick because i'm all about the details i'm just going to click on the this paint tile i have here and i'm just going to fill in the lines for the runway just do that real quick and i should probably be holding down the shift key i am relying entirely on my mouse skills right now okay so there we have our road and we have our terrain set up very quickly and easily using the terrain brush now the next thing i want to do is start adding a little bit more detail and adding objects for the character to interact with but before i do that i want to take advantage of another tiled feature called layers and layers work like you would if you've used photoshop or other art software like that allows you to stack up your images on top of one another and you'll be able to see those layers in your game and bring them in independently which is really nice so here we have the default layer and i'm just going to rename this right now to background and then right away i'm going to create a new layer i'm just clicking the new button down here and i'm going to create a tile layer i'm going to call it interactive and these are going to be things that the character could potentially interact with so uh just from the get go i can add um some rocks let me zoom out here so i can see more of my tiles so i can click on the stamp tool and why isn't it painting oh i turned off the layer for some reason so i can add some rocks here like this i can select multiple tiles at the same time and i can just drag across in my palette and place multiple at the same time now i'm deliberately leaving off the top of the roof here and i'll get to that in a moment but i'm just going to add the bottom part of the building here i'm going to add the posts for this sign and finally i'm going to add my flying saucer which i guess we'll just put it right on the runway here now we want to be able to interact with these tiles and we're going to add some metadata that we can interact with in our in our javascript but before i do that i want to add one more layer and i'm going to call this one overhead and in overhead i'm going to select the top of the building that i skipped before and i'm going to select this sign here and put that there now the reason i've done it that way um is you're going to be able to bring these layers in independently of one another and set the z ordering of the layers in the phaser game so if you can imagine here if i turn off the overhead layer if you can imagine a character walking across this portion of the map this overhead layer is going to be floating above them and obstruct them from view and give us a pseudo 3d look to our map which will be really nice so now go back to the interactive layer i want to start defining some of these tiles as barriers of things that i wouldn't want the character to be able to cross just physical objects that are barriers to their passing so to do that i'm going to go into back into my tile set editor i'm going to turn off the terrain editor here and i'm going to click on the tiles i'm sorry before i do that i'm going to select all the tiles and i'm going to go down here into custom properties i'm going to click the plus button and then create a property i can give it any name i want i'm going to call this one collide and you have different data types you can set and i'm going to set this one to boolean and what that does is add a checkbox here for each one of these tiles whether or not it's collide it's boolean true or false false is unchecked so now i'm going to hold down the control key and i'm going to select tiles like these rocks and the saucer and anything that i would consider a barrier that i'm using that i wouldn't want the character to cross so the sign and the building oh why isn't that oh i hit cancel instead of save it's weird for some reason the cancel button is on the other side um so i'm going to call this collide type boolean okay and then i'm going to choose my rocks and my building and i'm just dragging across it here to select all these tiles together and i'm going to check the box collide and what this means is whenever that's whenever the character in the game comes into contact with one of these tiles i'm going to be able to read this property this true value and collide and respond to it for these particular tiles so these background tiles we're walking on there's nothing checked but something that's a barrier here collide is checked so now if i go back into my tile map editor i can't click on it i'm going to do one more thing before our map is done and that is create one more layer of a different type this time i'm going to create an object layer and what an object layer allows you to do i'm going to call this one script the reason i'm calling scripts will become apparent in a moment what this allows you to do is define regions of space that aren't tied to specific tiles but just a specific position in your tiled map so i'm going to go here and i'm going to create um i'm just going to add a rectangle here over these different interactive elements in the game so i'm going to create one around the building i'm going to create one around the sign i'm going to create one around the saucer here now this won't be visible to the user but you're going to be able to detect it and interact with it in your code so now that i have my my shapes defined i'm going to go pick the select tool here and i'm just going to hold down shift and select all three of them and here i'm going to add a custom property just like i did with my tile but this one i'm going to call name and i'm going to call i'm going to make this type string and now with the property added to all three one by one i can go in here and give them a name building and this one will be called sign [Music] and this one will be called saucer so now when i when my character is moving around in the game i can detect a collision with any one of these shapes and read this property off misspelled saucer not that it matters i can read this property and know which particular shape the character collided with now the reason i called it script is because i'm going to have the character respond to different objects in the game with some dialogue so this is going to be tied to my my dialogue and tell the character which object they're interacting with so they can respond accordingly now the reason i did this instead of adding the metadata directly to the tile is because i it allows me to reuse tiles and have different names for each one so if you can imagine i have many many buildings i can have different names for each of those buildings and respond to them differently so with that i have everything i need to build out my entire uh tile map in my area 51 base i've already done that so i'm going to jump ahead here and just show you quick this is the completed area 51 base that we're going to be using in the game now to get this into phaser i'll just show you real quick i've also created this underground lab level that we're going to go into in the game this is using the same uh process that i showed you with the with area 51 on the the overworld just using a different tile set so to bring this into your phaser game all you have to do is go to file and export and you're going to choose type json not javascript i've already exported these here so i'm not going to export them again so let's bring them into our phaser game now and start building out our game so i'm going to switch over to visual studio here and i'm just going to um close that i'm going to switch branches real quick i've already set up the project and let me just go over quick um how it's set up um in main.js i'm importing phaser as an npm module you don't have to use phaser as an npm module i'm just choosing to use npm in webpack in this project to set up phaser all you have to do is create a config object here most of this are the default values so it's the height and width of the canvas the name of the element that the canvas will exist within which physics engine we're going to use phaser has multiple physics engines with varying degree of uh performance and accuracy in this case we're using the arcade engine which is the default it's the most performant but the least accurate i'm going to skip over the plugins section for a moment and show you the scene array which is the array of scenes in your game it's just like a movie where you have multiple scenes to break up the levels in your game and we take that config object and pass it to phaser.game to create our our phaser uh game engine now this game scene that i've created is here and this is an object that extends phaser dot scene and a scene has three functions um by default you have your preload create and update and they use what they sound like preload allows you to preload assets before the scene appears um create as called when the scene is is displayed now that's different from the constructor which is called when you initialize your game create is called every time the scene is is loaded so if you leave a scene and come back to it creates going to be called again so keep that in mind when you're initializing values and finally the update method which is called on each animation cycle i've already added my character here and normally we would add the character as a sprite and use the scenes add factory to add a sprite game object you can add multiple game objects to the scene like backgrounds and other characters here and your characters are normally sprites if you're dealing with bitmap images now i've added i have this this value here rpg character that's my game object type which is not built into phaser this is a custom game object that i've created as a plugin so let's dig into that and see how we've added this custom game object so if i go over to plugins here i have a file gz rpg character and in that i'm going to scroll to the top in that i have a class here that i've created that extends phaser's sprite game object so this is everything you would have in a sprite but i've added some additional functionality so in here i've added hit points i've added some default positioning and i've also added a lot of code here to handle the animation this is stuff that normally you would do in your scene um using the scenes animation api and i brought this now into the sprite itself in my custom rpg character object because they're all going to be moving around the game in basically the same way up down left right and they're going to have the same walk cycle animations using sprite sheets so we have the update that handles all of that animation change and um a very very crude uh walk cycle i'm sorry a pathfinding uh function here called do patrol and this is what i'm gonna use for my non-player characters and all it does is you pass in an array of coordinates and it's just going to move the character from coordinate to coordinate around the screen so we'll be able to use this for our non-player characters to have them move around by themselves and this is all tied together within within the um the the same controls that the keyboard is going to be using for um for movement so there's uh there's it accepts string values up down left and right and translates that into movement on the screen so in do patrol it's issuing those commands automatically and in the case of our player character we're going to issue them with the keyboard so now i want to be able to take this custom sprite that i've created and make it my own game object in phaser that i can use with phasers factory or the scenes factory method so down here at the bottom i'm creating a new class that extends phaser's base plug-in object and in that i'm going to call the plugin manager's register gameobject method and this allows me to register my class that i've created above that rpg character as its own game object in the phaser api now i pass that a factory which is going to instantiate the rpg character class above make a new object and pass along the parameters i send to it and send it back to my scene with that i have everything i need to start adding these game objects to my scene these custom rpg character game objects and to activate my plugin all i have to do is go back to my main js and in the games config object you have a plugin property and i'm going to add it as a global uh plugin and i'm just going to pass a reference to my gzcharacter plugin class that was at the bottom of that file with that factory method that creates the the characters so with that it's going to be available automatically to every part of my um my phaser game so i can go back into my scene here and just like i would normally add a sprite i'm going to add my custom sprite rpg character and i'm just going to pass its starting position and its speed its walk speed as it's moving around now one other thing that i didn't cover in my last presentation because it was a fixed screen this time we're going to be moving around a much larger area that massive tile map we created so i'm going to reference the camera and i'm actually going to have the camera move around now so here i'm going to tell the camera to follow the player that i've created so this is going to pan around the player is always going to be locked center relative or that i should say the camera is going to be locked uh relative to the player and it's going to move around and you're going to see the background uh move around once we have it in place so now let me start up my game real quick so you can see where we are i'm just going to type into the console here npm start and that's going to invoke webpack and the development server so we can start previewing the game now this takes a little bit longer the first time you run it because this is running phaser in development mode development mode is quite large it's about three megabytes so webpack has to crunch through it the production mode version of phaser is much smaller it's less than a megabyte um the the dev version has a lot of debug code in it that you would leave out in in production so we need to wait a second for the game to appear and it should be appearing any second now any second now and here it comes and so now we have our character here our alpha zeta character here is facing away from us and it's already tied into the keyboard via that rpg character that custom sprite that i created and so now i can press left i can press right i can press up and i can press down and i have the characters animation already set to go and now i can reuse that by creating similar uh sprite sheets for my animation with different characters i can very easily add different characters just by changing out their spreadsheets changing their name value and their start position and having them move around and even pass that array along to have our non-player characters move around automatically now you can't tell here but the characters actually moving around in 2d space but there's nothing else in the scene the relative to them then you can see that they're moving so let's add our tile map in so we can add some background to give some context to the character on the screen so i'm going to jump back into visual studio and i want to start bringing in those tile maps that i created in tiled now to do that i'm going to import the tile map the same way i would any other asset in my phaser game and the image is just a normal image in phaser that that sprite sheet i'm sorry that tile set image that has all of the different individual tile graphics i just preload that as an image using the scenes load method of type image and then i give it a path to the image itself that's phaser likes to add uh string keys for everything so we're going to call this one tiles and then i'm going to call tilemap tile json to load the map which is the json file that i exported from tiled so with those two things phaser has what it needs to to recreate everything i did entitled in the phaser game to take advantage of those files the first thing i want to do is call the scenes make method and have it make a new tile map and i'm going to pass to that the map that json file that i created in tiled once i have that loaded into my map object i can pass along the tile set image to the tile map and now it's able to reconstruct the tile map in the game and right away i can start bringing out those layers that i created entitled and placing them in the game and to do that i call the maps create static layer method and i pass a string value that's the name that i gave the layer in tiled in this case we had background i passed the tile set and its coordinate position in this case zero zero and i'm going to do the same thing for the interactive layer and for the overhead layer now if you remember i said that i want to control that z order and i want to have the overhead layer appear above the characters in their z ordering so normally phaser assigns the z ordering of objects in the in the order that they're added to the scene but now we've already created our player up here so these these tile maps are going to be above the player so i want to set the depth manually here and i'm just going to call the player set depth method and i'm passing an arbitrary value 10. um that's just what i've chosen it's going to put it 10 levels above everything else in the game and then i'm going to set the overhead layers depth to 20. and so that's going to ensure that my overhead layer appears above the player and so with that the game should have already recompiled and if i bring up my browser you can see my tile map is in there just as i created it entitled and now the player can move around and the camera is tracking them in 3d space and we can walk around and explore this map exactly the way we create it entitled and you can see here now if i pass that overhead layer it's obstructing the player from view giving it a 3d appearance now we have a problem here we can walk on top of buildings which isn't very good we can walk through these signposts and on top of rocks so let's fix that by tying all this into phasers physics engine so i'm going to jump back into my javascript and this is very simple we're going to take advantage of the collide property that we created in tiled and i want to add that this layer to the physics engine so i'm going to call first i'm going to call the layer set collision by property method and this is what the physics engine is going to look at when it's handling collision with that i'm going to pass the collide property that custom property i created and i'm going to tell it what value i want to consider a collision in this case true so everywhere where i check that box entitled it's going to count as a collision in phaser so now i'm going to reference the physics engine and i'm going to add a new collider just like i would with any other game object and i'm going to set that collision between the player object and the layer itself so now when it calls when it detects a collision between the player and any tile in that interactive layer it's going to call this collision by property inside the layer and look for that value true and determine whether or not it's a collision and so with those two lines now i've tied everything into the cullet into the physics engine and i'll be able to detect collisions now so now i'm pressing the key to move but it's not moving because the physics engine is counting that as a collision so now i can't pass rocks and i can walk up and i can hit buildings and not walk past them but i can go behind the building and i can still get that 3d effect because if you remember i set the collide to true for the top but because it's in the overhead layer and i set no collision with the overhead layer there's nothing to detect and so now everything's tied together in my physics engine and now we want to start building out and start adding some dialogue because we want to have the character talk about things as the character interacts with them in the game so now i want to introduce you to another type of plug-in i want to have a way to have the character speak i want to have a dialog box come up and have it write out the text that the character is saying and to do that i've created another plugin called gz dialog here now gc dialog extends phaser's scene plugin object and this is going to allow me to attach it to the scene as another property of the scene now this is a lot of code here and all it does is very simple is it creates a rectangle on the screen and you pass it a string of text and it's going to write out that text inside that rectangle in an animated fashion letter by letter to make it look like the character is speaking so if we go down here we have a set text method and this is the one that's important here this is where we're going to pass the string value to have it animate out the text so to use this plugin all i have to do is go back into my game config object and in the plugins property i add another property called scene and i'm going to pass a reference to that gz dialog plugin which i've imported above and with that if i go into my game scene now the scene itself is going to have another property called gz dialog which will give me access to that set text method where i'm passing this hello world string to it so if i go back to my game now i can it should have recompiled already and it did and now we have our text written out on the screen in our dialog ready to go so i can bring this into other games and reuse this dialogue from game to game without having to write any additional code all i have to do is add it to my config object and call that set text method and i have instant dialogue in my game which is really nice so let me reload this quick so you can see the animation if you missed it so this is a test hello world and it writes it out so now i want to start adding some custom text to this and tying it into the objects on the screen so the character can respond to thing to each thing as they come into contact with it so i'm going to go back into my javascript here and i'm going to switch branches real quick and now i want to take advantage of the um that object layer i created that script layer that i made in tiled with those custom script those rectangles on the scene or on the tile map now there's no way to directly import an object layer i'm not sure if this was done by design but you can access the objects and recreate them in phaser very easily so here i'm loading in the script object layer and from that i have access to all the objects i've created i'm just going to loop through them real quick and i'm going to add i'm going to use the scenes add factory and add a rectangle which is just a an invisible rectangle on the on in the scene and i'm going to pass along the same coordinate positions of the object layer i'm also going to copy any custom properties i've created in this case we have just won the name and then i'm going to tie it to the physics engine by calling the physics add method and i'm going to add a new collider between the player and that object i've created and it's going to call a hit script handler so this hit script is going to be called whenever it detects a collision between the player and one of those invisible rectangles now what this hit script method does is it goes into a json file that i've created up here called script and what script does is it has the the character as a property and the name property that i've given all of those rectangles if you remember saucer and sine and i didn't do building here but i have rock and what it's going to do is grab whenever it detects the collision it's going to look up the name and it's going to grab this string value and then it's going to pass that string to the set text method in the dialog object to bring up that dialog so he's going to be able to read off any one of these strings as he collides with them so with that if i go back into my game it should have recompiled and now if i collide with this saucer it's going to read that text from that script json file can't leave yet i have a mission to complete and i can press space bar to make the dialogue go away i can collide with a rock and he says al and i can go up here and i can collide with the sign here and he says hm this may be the entrance to the secret lab so with that you have everything you need to create this whole world of things to interact with just by adding additional objects additional tiles and additional metadata to these tiles and handling them in your collision handlers so i'm going to jump ahead here to my master branch and i've added just a little bit more it's not quite a complete game but it's complete enough for demonstration purposes and i've added a few extra things here that i'll just walk through really quick um i've created a few more uh scenes here and every one of these scenes are objects that extend that game scene we've been working with so i've i'm just taking the existing game scene and i'm choosing which tile map i want to load in so area 51 is loading in the area 51 tile map that we've we work with but i've also created this lab 1 and lab 2 that are the same game scene but they're loading in the lab 1 and lab 2 tile maps so we're able to have different levels but reusing our code but just loading in different tile maps to create the different levels i've also added another gz rpg character uh where is he i skipped over him oh here it is that i've called sentry and with sentry this is going to be one of the non-player characters that i'm adding a different spreadsheet so it looks like a security guard and here i'm passing an array of coordinates so it's going to use that very simple pathfinding algorithm i created to move the character around from point to point on the screen and have them walking on their own i've done the same with lab one and lab two and i've also added an intro scene in an end scene so all those do is they bring in just a static graphic that you can click on and and start your game and so with that i can go back into my game which is already recompiled and now we have our intro screen with our splash graphic and i can click on it and now i'm back in my game i've also added these hearts up here to indicate our hit points and if i move up we have our non-player character moving around just from point to point and i can collide with them and it takes a hit you can see a heart went away up here i've also added some metadata to this staircase i've added an ascend and descend property to these staircases and all that's going to do is when it collides with that particular tile it's going to look for ascend or descent as its property and it's just going to load the next scene or the previous scene depending on whether or not it says send or descend the send will go into the next scene now if i go back into my scenes array i forgot to show you this earlier where i've added these various scenes here this scenes array is going to display the scenes in order so when he's in area 51 and you see that descend property in the tile it's going to automatically go to the next scene in the array lab lab 1. now in a real rpg you might want to be less linear about it you might want to actually have a string value attached to the the tile or maybe use a custom object like we did with the script with the name of the scene so you can tell phaser exactly what scene you want to load but for here we just have this steady linear progression i'm just going to wait for him to walk by and i can hit the staircase here and go into our next scene so again this is the same code but it's just loaded a different tile map it's added a character with different coordinate positions he's moving around and so with that we can create as many levels as we need just by swapping out our graphics and putting characters in different places and then finally we have this other scene with some more script objects with him to respond to that i'll let you explore that on your own um so we've got some references to bob lazar and here and some other ufo culture remarks um like i said you can see those on your own and so that's it and with this you have everything you need to build out a complete game with a massive world with all kinds of things to interact with just by adding different tiles and different metadata to those tiles and handling the interactions with them so that's it go back to my slide here so that's it um links to all of this are up here um we have the slides and the source code is of course on github one other thing i want to mention um both phaser and tiled are independent projects so if you use these in any kind of commercial capacity please give some money to these guys they spend a lot of work on these projects both creators have their own patreon page and in fact the phaser creator has a newsletter they send out and for a one dollar a month subscription you can get the newsletter which comes with a zip file with tons of examples of the phaser framework and sometimes even complete games um follow me on twitter i'll post links to all of this on on twitter and again the original presentation i've written up as an article on medium which you can find on my website greenzata.com and so with that i'm going to stop the recording and you can ask me any questions you want

Channel: Matt Wilber

Views: 4,445

Keywords: javascript, game, development, programming, phaser, presentation

Id: MR2CvWxOEsw

Length: 42min 26sec (2546 seconds)

Published: Sun Nov 29 2020