Phaser 3 Starter Snippets

Game Config File

Description:This is a config file example to pass to the game object

Example:var config = { type: Phaser.AUTO, width: 480, height: 640, parent: 'phaser-game', scene: [SceneMain] };

var config = {
        type: graphics_mode,
        width: game_width,
        height: game_height,
        parent: 'div-tag-name',
        scene: [nameOfScene]
    };

Game Object

Description:Create the Phaser Game

Example:var game = new Phaser.Game(config);

var game = new Phaser.Game(config);

Blank Scene

Description:Create the Phaser Game

Example:class SceneMain extends Phaser.Scene { constructor() { super('SceneMain'); } preload() { } create() {} update() {} }

class SceneMain extends Phaser.Scene {
    constructor() {
        super('SceneMain');
    }
    preload()
    {
    	
    }
    create() {
        console.log("Ready!");
    }
    update() {}
}

Html File

Description:Basic Html Set up for Phaser

Example:

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Game Title Here</title>
    <script src="js/phaser.min.js">  
    </script>
    <script src="js/main.js"></script>
    <script src="js/sceneMain.js"></script>
</head>
<body>



</body>
</html>

Different Configs for Mobile/Desktop

Description:Detect Mobile/Desktop and make config files accordingly

Example:

var isMobile = navigator.userAgent.indexOf("Mobile");
if (isMobile == -1) {
    isMobile = navigator.userAgent.indexOf("Tablet");
}
if (isMobile == -1) {
    var config = {
        type: Phaser.AUTO,
        width: 480,
        height: 640,
        parent: 'phaser-game',
        scene: [SceneMain]
    };
} else {
    var config = {
        type: Phaser.AUTO,
        width: window.innerWidth,
        height: window.innerHeight,
        parent: 'phaser-game',
        scene: [SceneMain]
    };
}
var game = new Phaser.Game(config);

meta tag

Description:Sets the page scale

Example:

<meta name="viewport" content="user-scalable=0, initial-scale=1,minimum-scale=1, maximum-scale=1, width=device-width, minimal-ui=1">