Develop HTML5 mini-games

HTML 5 games,

Before introducing the mini-game, take a look at a framework Phaser. The Phaser framework is a fast, free and open source HTML5 game development framework that provides Canvas and WebGL rendering and is compatible with PC and mobile browsers.

Phaser versions

Before starting a Phaser Game, you need to define an instance of the Phaser.game object and pass the configuration information to it: var Game = phaser.game (config). In Phaser2, a global variable is defined and acts as an entry point to almost all systems or scenarios. However, after upgrading to Phaser3, global variables are no longer used to store game instances.

Phaser2Version before

// Phaser.Game(
// width,
// height,
// renderer,
// parent,
// state,
// transparent,
// antialias,
// physicsConfig
// );
Phaser.Game(800.600.'Phaser.AUTO'.'game');
Copy the code

Phaser3After the version

const config = {};
Phaser.Game(config);
Copy the code

Ii. Game configuration Config

const config = {
    type: 'Phaser.AUTO'.title: "Starfall".width: 800.height: 600.parent: "game".backgroundColor: "#18216D".scene: [WelcomeScene, PrizeScene, GameScene, ScoreScene],
    transparent: false.antialias: true.loader: {
        baseURL: 'https://raw.githubusercontent.com/wqjiao/phaser-prize/master/'.// The basic address of the resource
        crossOrigin: 'anonymous'
    }
    physics: {
        default: "arcade".arcade: {
            debug: false}}},Copy the code

Phaser.AUTO Automatically tries to use WEBGL, and if the browser or device does not support it, it falls back to CANVAS parent node: The Canvas element generated by Phaser is added directly to the node in the document where the script is called, and a parent container can also be specified in the game configuration.
2. Title Game interface title
The default canvas size generated by Phaser is width — 800, height — 600
4. Parent Custom Phaser generates the parent container of the canvas (game interface)
5. BackgroundColor specifies the backgroundColor of the game interface, a Phaser3 configuration item

What’s the scene of the game

A single scenario

const config = {
    scene: {
        preload: preload, / / preload
        create: create, // Generate the game interface
        update: update, // Update the game interface}},Copy the code

Many scenarios

// Game configuration
const config = {
    scene: [welcomeScene, gameScene],
}
/ / scenario 1
let welcomeScene = new Phaser.Class({
    Extends: Phaser.Scene,
    initialize: function welcomeScene() {
        Phaser.Scene.call(this, {key: 'welcomeScene'});
    },
    // Preload resources
    preload: function () {
        this.load.image('wheel'.'assets/wheel.png');
    },
    // Generate the game interface
    create: function () {
        // The game interface jumps
        this.input.on('pointerdown'.function () {
            this.scene.start('gameScene');
        }, this);
    },
    // Update the game interface
    update: function () {
        console.log('update')}});/ / scenario 2
let welcomeScene = new Phaser.Class({
    Extends: Phaser.Scene,
    initialize: function gameScene() {
        Phaser.Scene.call(this, {key: 'gameScene'});
    },
    // Preload resources
    preload: function () {
        this.load.image('pin'.'assets/pin.png');
    },
    // Generate the game interface
    create: function () {
        // The game interface jumps
        this.input.on('pointerdown'.function () {
            this.scene.start('welcomeScene');
        }, this);
    },
    // Update the game interface
    update: function () {
        console.log('update')}});Copy the code

This is the Phaser3 version configuration, but in Phaser2 the scene Settings are placed in States:

var game = new Phaser.Game(240.400, Phaser.CANVAS, 'game');

game.States = {};

game.States.preload = function() {
    this.preload = function() {
        game.load.image('wheel'.'assets/wheel.png');
        game.load.image('pin'.'assets/pin.png');
    };
    this.create = function() {
        // Click canvas -- Scene Jump
        game.input.onDown.add(function () {
            game.state.start('main');
        }, this);
    };
};
game.States.main = function() {
    this.create = function() {};
    this.update = function() {};
};
Copy the code

Transparent Specifies whether to make the game interface transparent. The default value is false. Phaser2 configuration item
8. Antialias Specifies whether to display image anti-aliasing. The default value is true
9. Loader indicates the baseURL — the base address of the resource
10. Physics Game physics engine configuration

Third, Phaser API

The Phaser3 API is described in three phases (Preload, Create, and Update)

1, the preload

Preload represents a preload function that preloads the required images, videos, Sprite images, and so on by calling the Loader in Phaser.

function preload () {
    this.load.setBaseURL('https://raw.githubusercontent.com/wqjiao/phaser-prize/master/');
    this.load.setCORS('anonymous');
    this.load.setPath('assets/');
    this.load.image('sky'.'sky.png');
    this.load.spritesheet('dude'.'dude.png', { frameWidth: 32.frameHeight: 48 });
    this.load.image('btnStart'.'assets/btn-start.png');
}
Copy the code

This.load. setBaseURL(basePath) Changes the basic path of the server basePath — The basic path address (the server address of the resource location). If the image paths of all scenes are the same, It can be pre-configured in the loader of config, but when running locally, you need to pay attention to environment setup. You can set up a service locally, or put resources in a remote service.
This.load.setcors ([crossOrigin]) sets the value of cross-source resource sharing to use when loading files
SetPath (‘assets/’) sets the resource path, similar to this.load.setBaseurl (basePath)
This.load. Image (key, [URL]) Preloaded image key — Represents the key of the resource. This string is a link to the loaded resource and is used in generating the gameobject. Url – represents the image path
this.load.spritesheet(key, [url], [frameConfig], [xhrSetting]);

this.load.spritesheet({
    key: 'bot'.url: 'images/robot.png'.frameConfig: {
        frameWidth: 32.frameHeight: 38.startFrame: 0.endFrame: 8}});Copy the code

FrameWidth, frameHeight xhrSetting — XHR Set configuration object. Used to replace the loader’s default XHR setting. Not used often.

This.load. Audio (key, [urls]) preloads the audio
This.load. BitmapFont (key, [URL]) preloads the font image file

this.load.bitmapFont({
    key: 'goldenFont'.textureURL: 'images/GoldFont.png'.fontDataURL: 'images/GoldFont.xml'
});
Copy the code

TextureURL — Absolute or relative URL to load font image files fontDataURL — Absolute or relative URL to load font XML data files

2, create

Create represents a build/create function that generates game objects, such as images preloaded in the preload function, where they are generated to display on the canvas

function create () {
    let sky = this.add.image(400.300.'sky');
    sky.setOrigin(0.0);
    let dude = this.add.sprite(32.48.'dude');
    let imgText = this.add.text(60.70.' ');
    this.add.button(200.300.'btnStart'.function () {
        this.scene.start('GameScene');
    }, this);
}
Copy the code

This.add. Image (x, y, [key]); Key – Preloads the key of the image in preload note: the order in which images are added is hierarchical
This.add.sprite (x, y, [key]) Note: you can set the animation this.anims.create([config]).

/ / left
this.anims.create({
    key: 'left'.frames: this.anims.generateFrameNumbers('dude', { start: 0.end: 3 }),
    frameRate: 10.repeat: - 1
});
/ / turn
this.anims.create({
    key: 'turn'.frames: [{key: 'dude'.frame: 4}].frameRate: 20
});
/ / right
this.anims.create({
    key: 'right'.frames: this.anims.generateFrameNumbers('dude', { start: 5.end: 8 }),
    frameRate: 10.repeat: - 1
});
Copy the code

SetOrigin (originX, originY) set up the image’s origin (0, 0) | | (0) – (0.5, left upper corner of the image 0.5) | | (0.5) – image center in Phaser2 version using anchor setting anchor. The anchor do set (0.5)
This.add.text (x, y, [text]) add the text content x,y — text coordinates; Note: you can set the text content with imgtext. text = ‘test text’
This.add. button(x, y, [key], function () {}, this
This.input. on(‘pointerdown’, function () {}, this) click on the canvas
This.scene. start([scene]) Scene jump scene — scene name

3, the update

Update represents an update function that can be executed by focusing on the canvas

Phaser related sites

Phaser website
Phaser environment configuration
Phaser — Github
Chinese phaser3 API
Channingbreeze blog
Phaser station

Phaser versions

Ii. Game configuration Config

Third, Phaser API

1, the preload

2, create

3, the update

Phaser related sites

Related Posts

API Monitoring: What should you Measure?

Remember a reflection on the release of a hybrid cloud API

The world’s top programmers tell you: These are the books you should read