@tbminiapp/egret-appx-component v0.1.21

项目介绍

白鹭引擎(egret)小程序组件。可在支付宝/淘宝小程序环境下运行白鹭游戏。

如何使用egret 小程序组件

• Step1: 使用小程序IDE，创建工程

• Step2: 打开app.json，添加如下配置

{
  "window": {
    "enableSkia": "true"
  }
}

• Step3: 安装egret组件

npm i @tbminiapp/egret-appx-component --by=yarn --save

• Step4: index.json中添加如下配置使用egret组件:

  "usingComponents": {
    "egret": "@tbminiapp/egret-appx-component/es/index"
  }

• Step5: 在axml中声明egret标签:

<view class="container">
  <egret
    onComponentReady="onComponentReady"
  />
</view>

• Step6: 引入白鹭游戏逻辑js文件，在onComponentReady生命周期函数中调用egret#runEgret启动游戏:

  require('path/to/game/js');// 确保game已绑定到$global变量上，名称为Main

  ...
  onComponentReady() {
    const {window} = $global;
    const {egret} = window;

    egret.runEgret({
      entryClassName: 'Main',
      orientation: 'auto',
      frameRate: 30,
      scaleMode: 'showAll',
      contentWidth: 480,
      contentHeight: 800,
      showFPS: false,
      fpsStyles: 'x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9',
      showLog: false,
      maxTouches: 2,
      //----auto option end----
      renderMode: 'canvas',
      audioType: 0,
      calculateCanvasScaleFactor: function(context) {
        var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio || context.backingStorePixelRatio ||
            1;
        return (window.devicePixelRatio) / backingStore;
      }
    });
  },