開發 HTML5 小遊戲

時間 2019-11-17

標籤開發 html5 html 遊戲欄目 HTML5 简体版

原文原文鏈接

在介紹小遊戲以前，先看一個框架 Phaser。 Phaser 框架是一個快速、免費且開源的 HTML5 遊戲開發框架，它提供了 Canvas 和 WebGL 兩種渲染方式，兼容 PC 端與移動端瀏覽器。git

1、Phaser 版本

在啓動 Phaser 遊戲前，須要定義一個 Phaser.Game 對象實例，並同時將配置信息傳至該實例：var game = Phaser.Game(config)。在 Phaser2 版本中，定義的是一個全局變量，並做爲幾乎所有的系統或者場景的入口。但升級至 Phaser3 版本以後，再也不使用全局變量來存儲遊戲實例了。github

Phaser2 版本以前

// Phaser.Game(
// width,
// height,
// renderer,
// parent,
// state,
// transparent,
// antialias,
// physicsConfig
// );
Phaser.Game(800, 600, 'Phaser.AUTO', 'game');
複製代碼

Phaser3 版本以後

const config = {};
Phaser.Game(config);
複製代碼

2、遊戲配置 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/', // 資源基本地址
        crossOrigin: 'anonymous'
    }
    physics: {
        default: "arcade",
        arcade: {
            debug: false
        }
    },
}
複製代碼

1.type 遊戲使用的渲染環境可選值： Phaser.AUTO、Phaser.WEBGL、Phaser.CANVAS 推薦值： Phaser.AUTO 自動嘗試使用 WebGL，若是瀏覽器或設備不支持，它將回退爲 Canvas 父節點： Phaser 生成的畫布元素 canvas 將徑直添加到文檔中調用腳本的那個節點上，也能夠在遊戲配置中指定一個父容器 parent。canvas
2.title 遊戲界面標題瀏覽器
3.width、height Phaser 生成的畫布尺寸，即遊戲界面的分辨率默認：width -- 800、height -- 600服務器
4.parent 自定義 Phaser 生成畫布(遊戲界面)的父容器框架
5.backgroundColor 遊戲界面的背景顏色，Phaser3 版本配置項函數

6.scene 遊戲場景測試

單場景

const config = {
    scene: {
        preload: preload, // 預加載
        create: create, // 生成遊戲界面
        update: update, // 更新遊戲界面
    },
}
複製代碼

多場景

// 遊戲配置
const config = {
    scene: [welcomeScene, gameScene],
}
// 場景1
let welcomeScene = new Phaser.Class({
    Extends: Phaser.Scene,
    initialize: function welcomeScene() {
        Phaser.Scene.call(this, {key: 'welcomeScene'});
    },
    // 預加載資源
    preload: function () {
        this.load.image('wheel', 'assets/wheel.png');
    },
    // 生成遊戲界面
    create: function () {
        // 遊戲界面跳轉
        this.input.on('pointerdown', function () {
            this.scene.start('gameScene');
        }, this);
    },
    // 更新遊戲界面
    update: function () {
        console.log('update')
    },
});
// 場景2
let welcomeScene = new Phaser.Class({
    Extends: Phaser.Scene,
    initialize: function gameScene() {
        Phaser.Scene.call(this, {key: 'gameScene'});
    },
    // 預加載資源
    preload: function () {
        this.load.image('pin', 'assets/pin.png');
    },
    // 生成遊戲界面
    create: function () {
        // 遊戲界面跳轉
        this.input.on('pointerdown', function () {
            this.scene.start('welcomeScene');
        }, this);
    },
    // 更新遊戲界面
    update: function () {
        console.log('update')
    },
});
複製代碼

以上是 Phaser3 版本的配置，可是在 Phaser2 版本中的場景設置是放在 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() {
        // 點擊畫布 -- 場景跳轉
        game.input.onDown.add(function () {
            game.state.start('main');
        }, this);
    };
};
game.States.main = function() {
    this.create = function() {};
    this.update = function() {};
};
複製代碼

7.transparent 是否設置遊戲界面爲透明，默認 false，Phaser2 版本配置項
8.antialias 是否顯示圖片抗鋸齒，默認 true
9.loader 表示加載器 baseURL -- 資源的基礎地址
10.physics 遊戲物理引擎配置

3、Phaser API

如下分三個階段(preload、create、update)作 Phaser3 API 的介紹

一、preload

preload 表示預加載函數，經過調用 Phaser 中的 Loader 加載器預先加載所須要的各類資源圖片、視頻、雪碧圖等。

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');
}
複製代碼

this.load.setBaseURL(basePath) 修改服務器基本路徑 basePath -- 基本路徑地址(資源位置的服務器地址),若是全部場景的圖片路徑均一致，能夠在 config 的加載器 loader 中預先配置可是本地運行時，須要注意環境搭建，能夠在本地搭建一個服務，或者資源放在遠程服務。
this.load.setCORS([crossOrigin]) 設置加載文件時使用的跨源資源共享值
this.load.setPath('assets/') 設置資源路徑，與 this.load.setBaseURL(basePath) 相似
this.load.image(key, [url]) 預加載圖片 key -- 表示資源的key，這個字符串是一個連接，指向已加載的資源，在生成遊戲對象中使用。 url -- 表示圖片路徑
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
    }
});
複製代碼

key -- 雪碧圖的key url -- 雪碧圖路徑 frameConfig -- 框架配置對象，至少有一個icon的寬高屬性 frameWidth、frameHeight xhrSetting -- XHR設置配置對象。用於替換加載器的默認XHR設置，不經常使用。

this.load.audio(key, [urls]) 預加載音頻
this.load.bitmapFont(key, [url]) 預加載字體圖像文件

this.load.bitmapFont({
    key: 'goldenFont',
    textureURL: 'images/GoldFont.png',
    fontDataURL: 'images/GoldFont.xml'
});
複製代碼

textureURL -- 加載字體圖像文件的絕對或相對 URL fontDataURL -- 加載字體 xml 數據文件的絕對或相對 URL

二、create

create 表示生成/建立函數，生成遊戲對象，好比在 preload 函數中預加載的圖片，在該函數中生成顯示在畫布中

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);
}
複製代碼

this.add.image(x, y, [key]) 添加圖像 x,y -- 圖像座標；key -- 在 preload 中預加載圖片的key 注意：圖片的添加順序是有層疊性的
this.add.sprite(x, y, [key]) 添加雪碧圖 x, y -- 圖像座標；key -- 在 preload 中預加載圖片的key 注意：能夠設置動畫 this.anims.create([config])

// 向左走
this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});
// 轉身
this.anims.create({
    key: 'turn',
    frames: [ { key: 'dude', frame: 4 } ],
    frameRate: 20
});
// 向右走
this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
});
複製代碼

setOrigin(originX, originY) 設置圖像的原點位置 (0, 0) || (0) -- 圖像左上角 (0.5, 0.5) || (0.5) -- 圖像中心在 Phaser2 版本中使用 anchor 錨點作設置 anchor.set(0.5)
this.add.text(x, y, [text]) 添加文本內容 x,y -- 文本座標；text -- 文本內容注意：能夠經過 imgText.text = '測試文本' 設置文本內容
this.add.button(x, y, [key], function () {}, this) 添加按鈕
this.input.on('pointerdown', function () {}, this) 點擊畫布
this.scene.start([scene]) 場景跳轉 scene -- 場景名稱