Beginner's Guide Of Phaser
By Xavier Hertzog
Overview
If you're someone like me, this is probably your first time hearing about Phaser. As of right now, I am on the road to building my first-ever game, and about a week or two ago, I came across Phaser. This guide will help you learn about Phaser and the basics of how to use it.
What we'll talk about:
- About Phaser and how it's used
- How to get started
- Key features of Phaser
- What's implemented into Phaser and some starter code
- Why I chose Phaser
About Phaser
Phaser is a popular HTML5 gaming framework that allows developers to create 2D games using JavaScript or TypeScript. It provides pre-written tools for physics engines, animations, audio, and asset management, making it quick and easy to make browser-based games. And it is also beginner-friendly, with lots of tutorials, examples, and documentation you can learn from.
How To Get Started
Open a new file in VS Code
Run npm create vite@latest
- Choose Framework: Vanilla, and Variant: JavaScript or TypeScript
- Cd into the folder and run npm install
Run npm install phaser
And lastly, run npm run dev
And then you're good to go. Happy Building!
Key Features of Phaser
Alright, we just went over how to create a file using Phaser. So now, we will talk about the key features of Phaser and the many things we can build to make our very own video game.
Key Features
- Scene Systems - Splits games into modular scenes, like menus, levels, and cutscenes.
Physics Engines - Uses built-in support for more realistic and Arcade physics.
Asset Management - Loads and manages images, audio, spritesheets, and more.
Input Handling - Inputs all supported for keyboards, mouse, touch, and gamepads.
Animations - Used to easily create sprite animations.
Tilemaps - Uses Tiled maps to design levels and maps for platformers, top-down games, and more.
Camera & Viewport - Good for zooming in, panning, following the player, and applying effects.
Sound - Has built-in audio sounds supported with Web Audio API.
Beginner Code of Phaser
Phaser is a gaming framework, not a language, so you can't compare it to other languages. But when using Phaser.js, which is basically using Phaser with JavaScript, the code can look a little different.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Phaser Starter</title>
<!-- Make the game canvas fill the window -->
<style>
html,
body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
<!-- Phaser 3 (latest stable) -->
<script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.js"></script>
</head>
<body>
<!-- Main game code -->
<script>
/*=======================
Basic Phaser config
=======================*/
const config = {
type: Phaser.AUTO, // WebGL if available, else Canvas
width: 800,
height: 600,
// Your first (and only) scene for now
scene: {
preload,
create,
update,
},
};
/*=======================
Launch the game
=======================*/
const game = new Phaser.Game(config);
/*=======================
Scene functions
=======================*/
function preload() {
// Load a sample image from the Phaser Labs CDN
this.load.image(
"logo",
"https://labs.phaser.io/assets/sprites/phaser3-logo.png"
);
}
function create() {
// Add it to the center of the canvas
const img = this.add.image(config.width / 2, config.height / 2, "logo");
// A tiny tween, so you see movement
this.tweens.add({
targets: img,
angle: 360,
duration: 4000,
repeat: -1,
});
}
function update() {
/* Game loop runs ~60 fps.
Put per‑frame logic here */
}
</script>
</body>
</html>
Above is starter code for Phaser. As you can see, this is written in HTML, but if you see the code, it has words like game, preload, create, img, update, and many more, similar to what vocab would be used in a video game, and I'll go over what this means.
- Canvas is a game level/object editor for Phaser, and you can use it to create levels, reuse objects, layout sprites, and other cool things.
- Config is a JavaScript object that holds many settings of the game, such as rendering, dimensions, setting the background color, and scenes.
- The object is passed to a new Phaser.game(config), making a new game instance, telling Phaser how the game should behave, and what to put in it.
- preload() loads up assets like images and sound, create() is where you add features, like sprites, animations, and other things, and lastly update() runs continuously to handle game logic and user interactions.
Why I chose Phaser
Before I chose Phaser, I was thinking about choosing Unity, but when doing research, I knew that for slow learners, Phaser would be the best choice for me and others. Unity would have insisted on learning C++, which is another language I would've had to learn in a span of a few weeks. But for Phaser, it is beginner-friendly, which makes it easier to understand and get started with. Now, I'm not saying to always take the easy route, but when you only have a limited amount of time to get something done, the smartest choice may be to use resources that are easier to understand and less advanced, but can still get the job done.
Summary
Phaser is a cool way to become a developer and start your own video game, and I hope this documentation helped you learn and understand it more. Thank you for reading!
Links that helped me write this blog:
Top comments (0)