[Phaser]Phaser 的基本使用

時間 2021-02-13

標籤 html 前端 git github web npm canvas 函數 webgl this 欄目 HTML 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
  <!-- 引入 phaser -->
  <script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
</head>
  <body>
    <div id="game" class="game"></div>
    <script>
        let config = {
        type: Phaser.AUTO,
        parent: 'game',
        width: 750,
        height: 1464,
        transparent: false,
        backgroundColor: '#000000',
        scene: {
          preload: preload,
          create: create
        }
      }
      let game = new Phaser.Game(config)
      
      let preload = function () {
        this.load.image('key', 'url')
      }
      
      let create = function () {
        this.add.image(100, 100, 'key')
      }
    </script>
  </body>
</html>

以上就是一個簡單的 Phaser 小demohtml

Phaser.Game 實例是整個 Phaser 遊戲的主控制器。它負責處理啓動過程，解析配置值，建立渲染器以及設置全部全局相位器系統，例如聲音和輸入。完成後，它將啓動場景管理器，而後開始主遊戲。簡單來講，就是遊戲的總開關，用來啓動遊戲
config 是遊戲的配置前端
- type : number，渲染器類型（Phaser.AUTO, Phaser.CANVAS, Phaser.HEADLESS, Phaser.WEBGL），Phaser.AUTO 會優先選擇 webgl，若是不支持 webgl 則選擇 canvas
- parent : HTMLElement | string，遊戲畫布的父節點，若是不指定則直接插入body中
- width ：integer | string，遊戲畫布的寬度，以像素爲單位
- height ： integer | string，遊戲畫布的高度，以像素爲單位
- transparent ：boolean，設置遊戲畫布背景是否透明
- backgroundColor ： string | number，遊戲畫布的背景顏色
- scene ：Phaser.Types.Scenes.CreateSceneFromObjectConfig | Phaser.Scene | function | Array，添加到遊戲中的場景，若是有多個則顯示第一個git
  - preload ：場景的預加載回調函數
  - create：場景建立的回調函數，在 init 和 preload 以後調用此方法