What is Phaser? ko
Phaser is game framework for desktop and mobile via html5.
Phaser can be used based on JavaScript or TypeScript.
Phaser uses canvas and WebGL renderer which makes more easier to use both desktop and mobile.
However, if you want to make game in modile environment not using mobile web browser, you should look for 3rd party app.
For more details about Phaser 3, you can see below references
Phaser Website: https://phaser.io
Phaser API docs: https://photonstorm.github.io/phaser3-docs/index.html
Phaser Examples: https://phaser.io/examples
Why Phaser?
You many wonder why i talk about Phaser instead of Unity or other game engines. Here are some reasons why people use Phaser.
- Using Phaser, you can make single game working on both Desktop and Mobile easily
- This is Open Source Framework so you can use it freely and contribute to Phaser GitHub to improve it
- Unless you use third party app or other frameworks, only you need to run Phaser game is web browser like chrome or safariw
How to prepare for using Phaser?
Before prepare for phaser
Before prepare for using Phaser, you may need local webserver to run Phaser game because of security issue or CORS problem. In that case, prepare your favorite local webserver environment.
After setting up environment
You can use CDN in script or install phaser by using npm or download at website or GitHub. Below is phaser archive link you can choose specific version you want. If you download necessary files or use npm for installation, now you are ready to dive in phaser world! (of course, you can use CDN instead)
Phaser Archive: https://phaser.io/download/archive
Using CDN
<script src="//cdn.jsdelivr.net/npm/phaser@3.51.0/dist/phaser.js"></script>Basic stucture of Phaser game
Below is basic structure using HTML, script and CDN. If you want to know each statement's meaning, please look for below additional topics
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.jsdelivr.net/npm/phaser@3.51.0/dist/phaser.js"></script>
</head>
<body>
<script>
var config = {
type: Phaser.AUTO,
width: 800, // define canvas width
height: 600, // define canvas height
physics: {
default: 'arcade', // choose physics engine among arcade, matter and impact
arcade: {
gravity: { y: 100 } // physics engine configuration
}
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload (){
}
function create (){
}
</script>
</body>
</html>
How to make phaser game?
You can make various kinds of game like 2D-scroll game, puzzle game... etc. For starter, I recommend you to refer Phaser website game examples
Additional Topics about Phaser 3
I'd like to talk about some feature, differences and other interesting topics may be helpful for your programming. Belows are my suggest!
Phaser Scene cycle
Phaser Physics: arcade & matter
Caution
This project is basically based on Phaser 3.24.1
Docs were meant to treat about foundamental part of Phaser 3 which would not change. But if there are huge gap between latest version, please let us know.