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

Music Credits: Chill Abstract by Coma-Media

[PhaserYouTube]

This is great! Thank you for helping out the community, we really appreciate it :)

[marcholman]

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!

[Yesnomaybeso]

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

[joeypunkrock]

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

[RobertHardy-qt]

Thanks for this quick and simple intro! Well done.

[kiransagar]

your channel is wonderful, i wonder why u don't have that many subs. u deserves more.

[richiebee]

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

[Textra]

This was an incredibly helpful tutorial. Thank you. :)

[InsectorXY]

Just found your channel. This tutorial is VERY helpful. Good job!

[hojatghasemi]

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 👍🏽

[SammyGarcia]

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

[НикаВерман-дв]

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

[adotinthecosmos]

Great video. Well done keeping it concise

[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 😂

[xariallev.]

Hi, thanks so much for this tutorial.

[AutMouseLabs]

Liked and subscribed. Thank you for your excellent work!

[editsLn]

Thanks you very much for this tutorial, it's helped me to make a lot of other game with this base source🤗🤗🤗🤗

[hossamfathi]

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

[arjuno]

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?

[henoknigatu]

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