egret+react框架搭建

2020-01-19 本文已影响0人前端进城打工仔

选用的游戏框架

egret
为什么选egret？因为目前看来比较成熟，社区活跃度也有。

react 基础框架如何引入egret

引入库

手动引入egret的库放在了libs/modules/目录下，在index.html中引入

    <script src="../libs/modules/egret/egret.js"></script>
    <script src="../libs/modules/egret/egret.web.js"></script>
    <script src="../libs/modules/game/game.js"></script>
    <script src="../libs/modules/tween/tween.js"></script>
    <script src="../libs/modules/assetsmanager/assetsmanager.js"></script>
    <script src="../libs/modules/promise/promise.js"></script>

创建游戏

创建一个游戏需要有dom元素，如下代码中className为egret-player的DOM元素。

点击开始游戏，调用egret.runEgret的方法开始，这只是demo，在正常的游戏开发中，开始游戏的按钮和游戏页面经常不在一个页面里，所以这个部分的代码&逻辑按需求放到对应的地方。

import React from 'react'
import './index.scss'
import Main from '@/game/Main'

class Game extends React.Component {
  componentDidMount() {
    egret.registerClass(Main, 'Main')
    window['Main'] = Main
  }

  start = () => {
    egret.runEgret({ renderMode: 'webgl', audioType: 0 })
  }

  render() {
    return (
      <div>
        <div onClick={this.start}>开始游戏</div>
        <div
          className="egret-player game-demo"
          data-entry-class="Main"
          data-orientation="auto"
          data-scale-mode="noScale"
          data-frame-rate="60"
          data-content-width="640"
          data-content-height="960"
          data-show-paint-rect="true"
          data-multi-fingered="2"
          data-show-fps="true"
          data-show-log="false"
          data-log-filter=""
          data-show-fps-style="x:0,y:0,size:20,textColor:0x00c200,bgAlpha:0.8"
        />
      </div>
    )
  }
}

export default Game

注意的tips：
对应react网页应用来说，期望的是根据路由能够控制页面的生命周期，但是由于目前的用的egret不支持销毁重新开始，所以多次玩游戏的，只是把游戏页面隐藏再展示。也就是说以下代码的Game class需要被放到最外层的App.tsx里面直接渲染。然后在Game页根据当前的URL来判断是否展示游戏。

import React from 'react'
import { withRouter, RouteComponentProps } from 'react-router-dom'
import Main from '@/game/Main'
import { gameState } from './GameConfig'

import './index.scss'

class Game extends React.Component<RouteComponentProps> {
  componentDidMount() {
    egret.registerClass(Main, 'Main')
    // tslint:disable-next-line:no-string-literal
    window['Main'] = Main
  }

  render() {
    const { history } = this.props
    const isHidden = !history.location.pathname.includes('/game')
    if (isHidden && gameState.clearGame) {
      gameState.clearGame()
    }
    return (
      <div
        className="egret-player game-demo"
        data-entry-class="Main"
        data-orientation="portrait"
        data-scale-mode="noScale"
        data-frame-rate="60"
        data-content-width="640"
        data-content-height="960"
        data-show-paint-rect="true"
        data-multi-fingered="1"
        data-show-fps="false"
        data-show-log="false"
        data-log-filter=""
        data-show-fps-style="x:0,y:0,size:20,textColor:0x00c200,bgAlpha:0.8"
        hidden={isHidden}
      />
    )
  }
}

export default withRouter(Game)

手机浏览器兼容

使用rem

目前设计师是按照375*609设计的，所以使用rem的方式就如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello World</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="full-screen" content="true" />
    <meta name="screen-orientation" content="portrait" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="360-fullscreen" content="true" />
    <script>
      ;(function(doc, win) {
        var docEl = doc.documentElement,
          resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
          recalc = function() {
            var clientWidth = docEl.clientWidth
            if (!clientWidth) return
            if (clientWidth >= 375) {
              docEl.style.fontSize = '100px'
            } else {
              docEl.style.fontSize = 100 * (clientWidth / 375) + 'px'
            }
          }

        if (!doc.addEventListener) return
        win.addEventListener(resizeEvt, recalc, false)
        doc.addEventListener('DOMContentLoaded', recalc, false)
      })(document, window)
    </script>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

px转rem

使用了 postcss-loader 和 postcss-plugin-px2rem
postcss.config.js的配置如下：

module.exports = {
  plugins: [
    require('autoprefixer')(),
    require('cssnano')(),
    require('postcss-plugin-px2rem')({
      remValue: 200,
      mediaQuery: true,
      propBlackList:['font-size'],
      exclude: /(node_module)/,
    }),
  ],
}

propBlackList:['font-size’]这是为了排除font-size被转成rem，但是后面考虑到适配不同的手机，font-size如果不转的话，会出现有些地方字体太小或太大，所以后来删掉了。

其他

enzyme + jest测试框架
husky加Git hook
stylelint样式风格检查
tslint代码风格检查
babel + webpack编译打包（区分不同的环境）

基础的代码框架在egret-react-framework