Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Game Development with Phaser!
You have completed Game Development with Phaser!
Preview
Understand how Phaser, a popular game engine, renders games directly to the browser, allowing for easy deployment and accessibility.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In the last video, we got a brief
overview of what a game engine is, and
0:00
in this video we're going
to focus on Phaser.
0:04
Phaser is a free open-source JavaScript
game engine used to create 2D games.
0:09
Now, Phaser isn't the only
JavaScript game engine out there.
0:16
There are many others like Babylon.js,
PlayCanvas, and PixiJS.
0:20
But Phaser is one of the more popular
game engines, which means there's loads
0:26
of documentation out there for it, as well
as lots of example projects and tutorials.
0:31
Let's go through how Phaser renders and
handles physics.
0:37
Rendering is the process of
drawing graphics onto the screen.
0:41
When it comes to rendering, Phaser has
two main systems, Canvas and WebGL.
0:46
These are both technologies that
allow the engine to create 2D or
0:52
3D graphics in the browser.
0:57
Canvas is a 2D drawing API
that can draw shapes and
0:59
images in a specific
rectangular area called Canvas.
1:04
It's great for creating simple games,
animations, and other interactive content.
1:09
WebGL, on the other hand,
is an API that can be used to draw 2D and
1:16
3D graphics inside a Canvas element.
1:21
Unlike Canvas, however, WebGL uses
the power of the graphics processing unit,
1:25
or GPU for short, to render graphics.
1:30
This makes it faster than Canvas, but it's
not as widely supported in all browsers.
1:34
Luckily for us, Phaser does a good job of
choosing the best rendering systems for
1:41
the user.
1:46
Let's move on to physics.
1:48
Phaser has two different built-in
physics engines, Arcade and Matter.
1:50
Arcade is a simple physics
engine that's great for
1:55
games that don't need
advanced physics features.
1:58
Matter uses the matter.js physics library,
and this supports more advanced
2:02
physics features such as friction,
constraints, and more complex collisions.
2:07
As you'd expect, Arcade Physics is
best for simple games and Matter for
2:14
more complex ones.
2:18
We'll talk about physics in a bit
more detail later on in this course.
2:20
There are many more features in
Phaser that I could talk about.
2:24
From audio, to animations, to particle
systems, to input management, and
2:27
even plugin support.
2:32
But I think this is a good place to stop.
2:34
In the next video,
I'm going to go through the tools and
2:37
extensions I use in my code editor.
2:40
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up