Phaser Tutorial | Make Your First 2D JavaScript Game

Whoa! Have you tried Phaser? Phaser is an HTML5 game development framework. It can be pretty tricky to get started with, but once you understand some basic principles you can really create some nifty projects. In this tutorial, you will build "Apple Catcher" a 2D game where you collect apples in a basket falling from the "Sky Tree." By learning through practice you will discover how to implement sprites, music, particle systems, and more with Phaser!
Let's Get Started!
Tutorial Chapters
0:00 Introduction
0:26 Local Setup
1:03 Clean Up Vite Files
1:27 Github Assets
1:40 HTML Setup
2:10 CSS Setup
3:33 Javascript Setup
5:21 Adding Physics to Scene
6:24 Creating Phaser Scene
6:52 Adding Background Images
8:02 Adding Player Sprite
9:46 Player Controls
11:03 Adding Target
12:06 Random Spawning
12:30 Collision Detection
13:25 Updating Hitbox Size
14:00 Game UI
15:13 Creating a Timer
16:15 Adding Music/SFX
17:13 Particles Systems
19:04 Start/End Screen Setup
20:58 Win/Lose State
22:32 Outro
GitHub Starter Files: github.com/digitaldeja0/Phase...
Music Credits: Chill Abstract by Coma-Media
Music Source: pixabay.com/music/upbeat-chil...

[@richiebee33]

I loved this tutorial! Thank you so much for taking the time to help us.

[@marcholman291]

Agreed! You have a very unique style! I like how you keep the pace quick and you don't waste any time, no bumbling around or covering topics that your audience should already know. I really hope to see more like this from you!

[@Yesnomaybeso1001]

You are genuinely awesome. I love how u compliment us for completing bits of code. Love your style

[@joeypunkrock11]

Great tutorial thank you! Getting straight to the point great style

[@user-bd7hc7jb4o]

Thanks for this quick and simple intro! Well done.

[@lowpolyprincess]

Glad you liked it!

[@SammyGarcia01]

Thank you so much for this tutorial! It was pretty easy to follow~

[@thesmokinggnome]

This was a very well made tutorial. Thank you for providing this! I appreciated the speed and found it impressive that you didn't get more tongue-tied speaking the longer lines of code 😂

[@AutMouseLabs]

Liked and subscribed. Thank you for your excellent work!

[@user-mk5dq4bj7k]

Excellent. I just started learning phaser and your video was very helpful for me. Thanks a lot!😊

[@lowpolyprincess]

Thank you so much, thats motivating to read 😄. What is your project and how is it going so far?

[@TonyAgassi]

Great tutorial!

[@adotinthecosmos]

Great video. Well done keeping it concise

[@lowpolyprincess]

Much appreciated!

[@hojatghasemi8628]

I love you and your content ❤👏🏼 please do more tutorials for phaser engine and phaser editor. After what happened to unity, we really need professional 2d tutorials like yours 👍🏽

[@lowpolyprincess]

Working on it! Thank you! 😊

[@roujiteku2114]

thanks so much for this omg

[@henoknigatu7121]

cool👍...this js skills are my dreams to master!

[@lowpolyprincess]

You totally got this. 💫😊

[@arjuno7058]

I followed all the steps and managed to finish the game. When I play the game the music, apple, and score run smoothly, but when the game is over and I reload, the game won't start. It says the audio context was not allowed to start. and websocket connection failed. Would somebody help, please?

[@hossamfathi8042]

Great ❤.. could explain the use of npm install(only) in this case..which files will be installed

[@lowpolyprincess]

Hey! It installs "vite" as a "devDependencies", then we go on to install the "phaser" modules as a "dependencies". You can always view the"package.json" to see all the files that will be installed or have been installed. You can google search the listed dependencies targeting them on the NPM site to learn all about the modules you are loading. I hope this answers your questions. 🙂

[@xenosred7232]

S Durgesh Reddy, you have my respect

[@lowpolyprincess]

Thanks!

[@cliftonsullivan]

How do you get the emojis in visual studio?

[@alivalishov]

setting html and body 100% height is a perfect solution to the problem of not covering the full screen in mobiles

[@mgmyo7066]

thank you for your tutorial, how to use phaser in vue 3 can you make tutorial for this?

[@Yesnomaybeso1001]

I'm interested in this too. How is your project going?

[@regykb]

is it possible to create commercially viable games with this?

[@pricklypickles]

Hi, great tutorial. Is this game able to add levels like; speed increases slightly after every 10 captured, or the amount of apples to increase after every round? Thanks for showing, cool game.

[@lowpolyprincess]

Definitely 😊

[@pricklypickles]

@@lowpolyprincess may I ask you a quick question. Directly in front of the apples that falls, there is a 'Green' line and a 'Red' line surrounding my basket. Are these lines normal or is there a way I can make them go away? Thanks.

[@lowpolyprincess]

Ahhh, yes, gotcha. You can make the lines go away by navigating to the "config" object, and changing the debug property from "true" to "false". This will be on line 152 in the final repo. @@pricklypickles

[@pricklypickles]

@@lowpolyprincess thank you so much, I will be giving that a try. 😊👍

[@pricklypickles]

Hi lowpolyprincess, thank you for you advice, and your advice worked just nicely. However, I found something else that may be of interest to you, or maybe it's me being picky. When you click on the start button for the game to start, that is just fine, however, I accidently clicked on the surrounding blue screen and that too started the game. So in a nut-shell, starting the game is not only restricted to the start button. Maybe it's me, maybe I did something wrong in the code. Please can you advise whether i need to check my code or shall I just leave it be. Thanks a million.

[@user-ih5vz5vs5b]

When I tried to test the vite phaser game using a xmapp after bundling..I got a lot of error massage related to the assets and resources

[@alexejsitcuk3314]

yeah, that is because of the paths Set them relatively in index and also in main.js (./everything)

[@Anonimousxz]

Você tem que usar o node na versão 18 para funcionar. Recomendo instalar o gerenciador de nodes chamado NVM e instalar o node na versão 18. Saudações do Brasil!

[@ehuntober]

please do more tutorials for phaser engine and phaser games

[@lowpolyprincess]

Will do! 💫

[@FauziJabbar]

what's gameCanvas in config?

[@lowpolyprincess]

Hello👋🏽, the id for the html canvas.

[@chrislopezzzz]

You are an absolute goddess of programming and a life saver kudos to you. Like, subscribe and I’m gonna bake a pie in your honor. Cheers 🥧

[@lowpolyprincess]

Aww, that is very kind, thank you. I hope the pie was great.🍰

[@BdR76]

I'm sorry but setting up a Phaser3 dev environment is the hardest part, but in this tutorial it's just 1 minute of typing without explaining any of it. 😐 Like how/why do I install "npm"? What is vite@latest, is it some sort of template? If so, then why delete almost all of it after it's created? Setting up the local webhost is just "npm run dev"? I get the error message "missing script dev" what is that command even supposed do? idk I feel like the setup part could be its own video, with all the assumed installed apps, pitfalls and potential for errors. Relative to setting it up, the actual game dev part is extremely simple imho.

[@lowpolyprincess]

Hey there, thanks for checking out the video! 👋 I am planning to make an updated and improved 2024 tutorial. Your feedback is appreciated. There are definitely other ways to set up a Phaser project. Each has its own pros and cons, tis the way of developing. Would you like me to answer your questions about NPM and Vite?

[@Anonimousxz]

Ela só usou esse vite para conseguir rodar um ambiente de servidor localhost sem precisar ter que rodar um Apache...

[@Platonic_Platypus89]

I'll give it a shot for a couple of basic answers to your questions, and believe me, her method is substantially easier to follow than most. "npm" is Node Package Manager...node.js is a "version" of javascript that is designed to be used during backend development. You need NPM to manage different "libraries" meant for vanilla JS. Explaining vite would take half a book, but suffice to say that it provides two things....a dev server which you need to run javascript locally and test builds, as well as a skeleton structure of files and assets depending on the framework (REACT Vue Preact and so on) that you choose to use. Try old school, having to rerun webpack and babel every ten minutes. And....you delete the majority of the code in there...because that is what everyone does when you start up development of a new application. The prebuild is meant for testing whether your server is working and to provide a basic outline of what the skeleton and the framework is going to do for you. I am one hundred percent sure that I didn't answer all your questions the way you wanted. But I gave it my best shot. Could be that you were making suggestions for the next video, but I took a shot in the dark and answered what I thought were legitimate questions.

[@alivalishov]

2:53, hey! You actually don't have to write => flex-direction: column; => here is why: When you write => display: flex; => the default property is "column" vertically default, so you don't have to specify it. Good job :)

[@lowpolyprincess]

Very DRY approach, thanks for sharing!

[@alivalishov]

@@lowpolyprincess hey I now realised that, it was a mistake. The default property for flex-direction is => row.

[@stopandthinkinsights]

13:06 15:56

[@cons_benjamin]

anda mas lento por favor! muy bueno el video igual

[@papinkelman7695]

Particles and tweens, lots of then. A great game without a single particle looks bad. A bad game with lots of particles is still a bad game but looks good if done right.

[@lowpolyprincess]

Thanks for sharing your input!

[@alexejsitcuk3314]

Non english natives and non ADHD people have a huge problem caching up with your speed :D

[@LLDJ_]

bro sounds like: "🤓"

[@iamtheteapot7405]

Their username has the word princess in it 🤓

[@crj1249]

If you are real developer, you will watch and follow along at X2 playback

[@CasperSocio]

If you are real developer, you will cringe every time spaces are neglected

[@naranggakhoirulutama422]

yes I realize I'm very beginner and slow

[@CasperSocio]

Nah, I'm what they call a formatting freak and it doesn't really matter once it goes through the compiler. If you want better looking code, start using Prettier and EsLint and set it up to auto fix when you save the file. And keep up the good work educating!

[@richiebee33]

If you were a real developer, you will