前言

這近在跟APP對接介面，在等待對接的空隙中，讓我想起了被我遺忘的HybridApp技術 ionic ，于是就有了今天這篇新手級的教程，

當初使用的是ionic 3 ，現在升級到了ionic 6.x，變化比較大，支持Angular、Vue、React或其它任意JS框架，它甚至可以使用簡單的腳本獨立使用，無需任何前端框架

有關 ionic 的使用本文不詳細描述，請查閱官網地址：https://ionicframework.com/docs

安卓除錯環境

幾年前寫過一篇ionic 3 的安卓除錯環境配置，但是不適合現在 ionic 6.x

1、安裝 Android Studio
2、安裝 Android SDK，基本上勾上API Level 16 以上的就行了

3、配置環境變數

4、驗證安裝
執行adb ,如果不報錯，則配置成功

PS: （此步驟不是必須）一般情況，以前配置可以完成 Android 除錯打包，如果有以上配置還是無法除錯安卓，安裝 JDK 1.8 +，然后配置對應的環境變數
JAVA_HOME = C:\Program Files\Java\jdk1.8.0_171 （JDK 安裝目錄）
PATH = %JAVA_HOME%\jre\bin

安卓手機環境（不是必須，H5也能調測）

準備一臺安卓手機進行真機運行，啟動開發者模式，打開USB 除錯，打開USB 安裝

ionic 環境安裝

使用 npm 安裝 Ionic CLI，使用 ionic 驗證

npm install -g @ionic/cli

撰寫ionic 專案

使用初始化一個angular 的 ionic tabs 專案

 ionic start 

等待完成之后會，會在檔案夾創建一個以專案名為檔案夾的專案，主體結構如下，此處不就一一介紹了，

現在切到檔案夾根目錄，執行下面命令就可以在web中運行

 ionic serve

效果如下圖

引入游戲框架

Phaser 是一個開源的桌面和移動 HTML5 2D 游戲開發框架，支持 JavaScript 和 TypeScript，

使用npm 安裝

npm i phaser

修改 tsconfig.json 的編譯選項，添加一下兩處修改

{
	...
	"compilerOptions":{
		...
		"lib": ["es2018", "dom","scripthost"],
		"allowSyntheticDefaultImports": true, //允許默認從沒有默認匯出的模塊匯入，這不會影響代碼發出，只會影響型別檢查，
		...
	}
	...
}

接下來正片開始，撰寫一個簡單游戲，修改tab1.page.html 頁面如下

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>
<!-- 添加游戲頁面容器元素 game -->
<ion-content>
  <div id="game"></div>
</ion-content>

修改tab1.page.ts ， 詳細講解查看注釋，主要是利用Phaser 框架新建靜態場景和動態角色，添加觸碰按鈕，控制角色移動，

import { Component, OnInit } from '@angular/core';
import Phaser from 'phaser';

let player;
let platforms;

class GameScene extends Phaser.Scene {
  constructor(config) {
    super(config);
  }

  preload() {
    // 引入本地檔案到游戲容器中
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('left', 'assets/left.png');
    this.load.image('turn', 'assets/turn.png');
    this.load.image('right', 'assets/right.png');

    this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
  }

  create() {

    // 使用圖片，這里使用sky 作為背景
    this.add.image(400, 100, 'sky');

    // 構建靜態物理游戲場景組
    platforms = this.physics.add.staticGroup();

    // 創建一個新的游戲物件并將其添加到該組中,縮放以適應游戲的寬度
    platforms.create(window.innerWidth - 20, 400, 'ground').setScale(2).refreshBody();

    // 新建玩家
    player = this.physics.add.sprite(100, 250, 'dude');

    player.setBounce(0.2); //設定這個身體的反彈值，彈跳是身體與另一個物體碰撞時的恢復量或彈性，值為 1 意味著它將在回彈后保持其全速，值為 0 表示它根本不會反彈
    player.setCollideWorldBounds(true); //設定這個身體是否與邊界碰撞，

    // 創建左轉影片效果
    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
    });

    this.physics.add.collider(player, platforms);//Arcade Physics Collider 將在每一步自動檢查兩個物件之間的碰撞或重疊，如果發生碰撞或重疊，它將呼叫給定的回呼

    // cursors = this.input.keyboard.createCursorKeys(); 創建鍵盤鍵

    // 用為作為App，沒有鍵盤，需要定義上、左、右三個按鈕來操控人物行動，同事監聽事件觸發上面定義的相對應影片及行走距離
    const button = this.add.sprite(200, 500, 'turn')
      .setInteractive()
      .on('pointerdown', () => {
        player.setVelocityX(0);
        player.anims.play('turn');
        player.setVelocityY(-330);
      });
    const rightButton = this.add.sprite(300, 500, 'right')
      .setInteractive()
      .on('pointerdown', () => {
        player.setVelocityX(160);
        player.anims.play('right', true);
      })
      .on('pointerup', () => {
        player.setVelocityX(0);
      });
    const leftButton = this.add.sprite(100, 500, 'left')
      .setInteractive()
      .on('pointerdown', () => {
        player.setVelocityX(-160);
        player.anims.play('left', true);
      })
      .on('pointerup', () => {
        player.setVelocityX(0);
      });
  }

  update() {

  }
}

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})



export class Tab1Page implements OnInit {

  phaserGame: Phaser.Game;
  config: Phaser.Types.Core.GameConfig;

  winH = window.innerHeight;
  winW = window.innerWidth;

  constructor() {
    this.config = {
      type: Phaser.AUTO,
      width: this.winW,
      height: this.winH,
      physics: {
        default: 'arcade',
        arcade: {
          gravity: { y: 300 },
          debug: false
        }
      },
      parent: 'game',
      scene: GameScene
    };
  }

  ngOnInit(): void {
    this.phaserGame = new Phaser.Game(this.config);
  }
}

web 頁面運行如下

真機除錯（僅Android）

前面說到安卓手機環境配置，現在我們打開配置，連接USB，輸入一下命令，查看是否讀到設備

adb devices

如下圖所示，已讀到設備，

設備調整后，代碼需要添加編譯成Android 原始碼操作，執行一下命令，第一次執行需要一些時間，

ionic capacitor add android

執行成功后，根目錄多了一個android 檔案夾，這就是編譯后的android 原始碼，可以直接在Android Studio 中運行

ionic 6 版本真機除錯，需要在 android\app\src\main\AndroidManifest.xml 中application 節點下添加 android:usesCleartextTraffic=“true” 屬性，不然真機會找不到網頁

查看capacitor.config.json 檔案，可以修改appId 、appName 等屬性；同時，可以看到真機運行依賴www web檔案夾，所以我們需要先build 出www檔案夾

運行以下命令

npm run build

執行自動生成了www 發布檔案

接下來就是執行命令，真機除錯了，執行這個命令需要等待幾分鐘，同時注意手機是否有彈框提示確認安裝，

ionic capacitor run android -l --external

本次只是簡單講解怎么使用ionic開發游戲，至于游戲的畫面的兼容性，這些都是沒有考慮在內的，更多的資料可以查閱 ionic 、Phaser ，
最后，看一下真機的運行效果（Redmi note 9 5G）:

該專案原始碼地址：https://github.com/CacoCode/ionic-phaser