Building A Game with Phaser JS and NextJS

hey youtube what's up welcome back to another video in the series where i build my own tech startup um over the past couple weeks i've been having to do a lot of research into different game engines for javascript because although i've said in a previous video that what i'm building is like a pomodoro slash time tracking application and it is there's also some gamification to it that ties into the pomodoro application so i needed to do a lot of research into different game libraries with javascript because i really haven't done anything like this before so i looked at kaboom js and phaser.js and pixie js and i could do another video comparing those and explaining why i picked phaser js if anyone's interested in that but i don't think that's relevant to this video because i did pick phaser.js and then started with an implementation and i knew that i wanted to build a game and i knew after researching that phaser.js was the technology that i was going to use but i really didn't know where else to start so i sort of pared down the idea into the most mvp state and to me that meant building a level loading that level on the page uh and adding a character that is able to walk around this test level and that's what i built so jumping straight into the code here there's a couple um gotchas i guess with using phaser especially if you're using nexjs which i am next.js houses the web application that i'm building and the application part of that is a little bit smaller like a tool that exists in next.js but i still want a user to be able to access the game as well so we're forced to use an xjs and specifically if you're using phaser you need to lazily import the phaser package so you can see here i've got a use effect on line 18 and then an asynchronous function which is called init phaser and the first part of that is lazily importing my phasor dependencies then when you're instantiating your phaser game it's as simple as saying like phaser game equals a new instance of the phaser.game object and then you can pass in your game config here i have a width of 400 a height 300 and a zoom of two i experimented with a couple different um pixel ratios and to me this is just what felt best i tried doubling this and doing 800 by 600 and a zoom of one but you didn't get that quite uh you didn't get quite the same sort of like game boy feeling that i was going for it's sort of a retro vibe and these are my scenes that make up of the game make up the game itself the preloader will load the assets i'll get into that in a minute and then your test scene is what i built which is the level and the character that can walk around and i do have this debug flag set to true in order to see the character's hitbox uh i'm using a grid engine plug-in which sort of uh you don't need this you could just set your gravity to zero here on line 59 you can see i experimented with that but the grid engine does make it a little bit easier when you get into more advanced stuff like enemies following you or things like that after the game loads i set a piece of state so that react knows that the game has loaded and then i close that function and make sure to call it and then i have this use effect set to only run once when the page loads by uh passing in an empty dependency array as the second argument in the user function then i have a div here with an id of game content and a key of game content this is where phaser is going to instantiate that game object and it's important to have the correct id and key here that matches um the parent in your phaser game config okay so once you have all that done your game is basically made up of your scenes so here in my components folder i created a scenes actually i'm wrong i did it at the top level i think yes i did so there are components which you can use to build your application there are pages which are pages of your application and then i have a separate folder here for scenes that are specific to my game um maybe i'll rearrange my files to have a top level game folder and then scenes and assets together in that folder but this is where it is right now so we have a preloader which is going to load our tile image which i'll get into in a second and then map that using a json object and then we're also going to load a sprite sheet which is where our character is going to come from and then after that stuff is loaded we're using the create function to start the next scene which is our test scene [Music] so this is our test scene let me pull that preloader back open so i know where it is and this is our test scene so in our test scene once this is loaded we know that our assets are already inside of our game um so we do have to to try to tell sort of typescript to to trust us that the grid engine plug-in is loaded and it will always exist on this phaser on the scene object which is created by phaser so i'm creating a map object out of the tile map that we loaded and we pass in a key here and that needs to match the key that we passed when we created our tile map so here line 9 tile map to tile json we'll take our art and then map it into basically the level itself using a json object and we provide a key for that so then that exists i guess an ether and then in our test scene we're adding a tile set image or i'm sorry we're making a tile map using that key and then we're adding images to that scene here and then for each layer in that tile set image we're going in and adding the specific art so this is why once you see the game you'll see that there's a fence on top of some grass and you can't pass through the fence but this four each is going to build first the the ground level of grass that a player can walk on and then it will put the fence on top of that so exists higher on the z-axis we're bringing in our hero sprite setting a camera passing in a grid engine config for our grid engine plug-in and then we're creating the grid engine i guess this is where the the game itself kind of creates your your game engine so this update function is kind of going to listen to inputs from the user and it updates i think um 60 frames a second or perhaps whatever you set it to in your in your game config but um we're creating an object of cursors and using this function that comes in from phaser to do that and then we're basically listening to which input is pressed by our user and we're corresponding that to an action which will move our sprite okay so enough talking let me just show you what i built and maybe i should have led with this but this is the the application that i've got so far at the game page in my web app and i feel very accomplished after a few weeks of this but it's just a character on the the page that is going to move around as i'm pressing the arrow keys you can see there's a little pink hitbox that surrounds the character to know where his boundaries are and you can see i'm colliding with this fence that exists on my level so i accomplished all the goals that i set out to to do in order to prove like a a working version of this game i accidentally did make the level really really big so uh the character can wander around for a bit here but that's essentially um what i've got so far i would say i'm very happy with phaser and what i was able to do in a week of like spare time coding there's obviously a lot that can be cleaned up and a lot that still needs to be done and this is really just the beginning but um you know that's building in public a bit so my goal for the next week here is to get the character animating and i can talk about that a bit i mentioned when we were in the preloader file that i would talk about the tile sheets a bit so i'm using a free tile sheet that i found on the internet called a zelda-like tile sheet i guess and that is what provides the art for the the level and the character as well but those come in only as [Music] png's where the assets you can see here are rendered very much like altogether and in order to create the level you have to have a separate program called tiled where you can go in and you pick certain squares that you want to use and then you paint on to a canvas and tiled and create your level so i created that level but um i think that there is another program that i need to use in order to take this character animation and animate the character while he's moving so right now uh if i go back to my app you can see that there's no character animation he just sort of like floats around the app at the game i should say so my goal for the next week is to download the other program that i need i don't even know what it's called and figure out how to make animations somehow and uh then have my character animate and face different directions if he's moving up or down left right etc maybe a bonus goal here for pressing space bar and having him swing his sword uh that you can see here in the sprite sheet and yeah that's it so that's what i'm going to work on this week hopefully it goes well i'll be back with another update in a week and thanks for watching if you're following along on this journey it is slow and steady at the moment but you know all progress is good progress so thanks for watching see the next one

Channel: Yugen

Views: 29,055

Keywords: Vercel, NextJS, JavaScript, Typescript, JS, TS, Website, Solo founder, Startup blog, Startup vlog, Vlog, Startup, Start up, Agency, TailwindCSS, Tailwind, CSS, phaserJS, phaser, gamedev, build

Id: xRJ787usR5s

Length: 11min 30sec (690 seconds)

Published: Mon Aug 22 2022