"How to Make a Website" was retired on March 24, 2020. You are now viewing the recommended replacement.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Game Development with Phaser

Well done!

You have completed Game Development with Phaser!

Sign up for Treehouse Back to Library

What Is Phaser?

2:43 with Richard Oliver Bray

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 up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up