预加载

c_client/babel.config.js

@@ -7,5 +7,6 @@ module.exports = {
       framework: 'react',
       ts: false
     } ]
-  ]
+  ],
+  sourceType: 'unambiguous'
 }

c_client/minigame/package.json

@@ -4,6 +4,6 @@
   "main": "",
   "license": "MIT",
   "dependencies": {
-    "fyge": "2.0.43"
+    "fyge": "2.0.50"
   }
 }

c_client/minigame/yarn.lock

@@ -2,7 +2,7 @@
 # yarn lockfile v1
 
 
-fyge@2.0.43:
-  version "2.0.43"
-  resolved "http://npm.dui88.com:80/fyge/-/fyge-2.0.43.tgz#0e587104e4050772014810f85d01a7bed4f1482f"
-  integrity sha1-DlhxBOQFB3IBSBD4XQGnvtTxSC8=
+fyge@2.0.50:
+  version "2.0.50"
+  resolved "http://npm.dui88.com:80/fyge/-/fyge-2.0.50.tgz#50c680b490d6055bfe70a9c1873c3a31c944ab90"
+  integrity sha1-UMaAtJDWBVv+cKnBhzw6MclEq5A=

c_client/package.json

@@ -74,6 +74,7 @@
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^1.6.1",
     "style-resources-loader": "^1.4.1",
-    "stylelint": "9.3.0"
+    "stylelint": "9.3.0",
+    "fyge": "2.0.50"
   }
 }

c_client/src/app.js

@@ -8,9 +8,12 @@ import './taro-ui.scss'
 import config from './config/config'
 import './utils/mdProxy'
 import { cloundAlarm } from './utils/dingTalk'
+const FYGE = require('./utils/fyge.min.js');
+const output = require('./utils/output.js');
 
 const { env, tornadoAPI, defaultActivityId, requestType } = config
 
+
 cloud.init({ env })
 
 Taro.onError(msg => {
@@ -22,10 +25,16 @@ class App extends Component {
     console.log('options :>> ', options)
     const { activityId } = options.query || {}
     const app = getApp()
+    console.log(JSON.stringify(output))
+   
     app.cloud = cloud
     app.tornadoAPI = tornadoAPI
     app.activityId = activityId || defaultActivityId
     app.isOnlineAct = !!activityId
+
+    my.PreLoader = output.PreLoader
+    my.GDispatcher = output.GDispatcher
+    my.NewGame = output.Main
   }
   // 页面后台切前台
   componentDidShow () {}

c_client/src/components/_miniprogram/canvasComp/canvasComp.js

-import {
-  Main
-} from './output';
+// import {
+//   Main,
+//   GDispatcher
+// } from '../../../utils/output.js';
 /**
  * 直接取，app
  */
@@ -25,16 +26,17 @@ Component({
       my.createCanvas({
         id: 'canvas',
         success: (ccc) => {
-          const dpr = my.getSystemInfoSync().pixelRatio
-          const windowWidth = my.getSystemInfoSync().windowWidth;
-          const windowHeight = my.getSystemInfoSync().windowHeight;
+          // const dpr = my.getSystemInfoSync().pixelRatio
+          // const windowWidth = my.getSystemInfoSync().windowWidth;
+          // const windowHeight = my.getSystemInfoSync().windowHeight;
           // ccc.width = windowWidth * dpr + dpr; //重新修改会有误差
           // ccc.height = windowHeight * dpr + dpr;
           // console.log(Main)
-          console.log(ccc.width, ccc.height)
+          // console.log(ccc.width, ccc.height)
           if (!this.main) {
             try {
-              this.main = new Main(ccc)
+              this.main = new my.NewGame(ccc)
+              my.GDispatcher.addEventListener("GameSceneReady", self.gameSceneReady, self)
               //添加事件，为了和main里的通信
               this.main.addGlobalEvent("onMessage", self.onMessage, self)
             } catch (err) {
@@ -44,6 +46,9 @@ Component({
         }
       })
     },
+    gameSceneReady() {
+      my.GDispatcher.dispatchEvent("GameStart")
+    },
     //和main通信的方法，接收main的信息
     onMessage(e) {
       //接口名字

c_client/src/pages/index/index.jsx

 import React, { useRef, useState, useEffect } from 'react'
-import { View, Image } from '@tarojs/components'
+import { View, Image, Canvas } from '@tarojs/components'
 import { useShareAppMessage, useDidShow, getApp, showToast } from '@tarojs/taro'
 import classnames from 'classnames'
 import { SHARE_CONFIG } from '@/const.js'
@@ -15,12 +15,16 @@ import JackpotModal from '@/components/_tb_modal/JackpotModal'
 import Auth from '@/components/_tb_modal/Auth/Auth'
 import styles from './index.module.less'
 import tbcc from 'tbcc-sdk-ts'
+import { useAudio } from '@/hooks/useAudio'
+import { CLOUD_OBJ, BGMUSIC_URL } from '@/const'
+
+
+const FYGE = require('@/utils/fyge.min.js')
 const { navigateTo, openDetail, showSharePanel } = tbcc.tb
 const { getImgShareUrl, checkIsMember, validateActivityStatus } = tbcc.utils
 
-import {useAudio} from '@/hooks/useAudio'
 
-import {CLOUD_OBJ, BGMUSIC_URL} from '@/const'
+
 
 const INDEX_CONFIG = {
   bg: '', // 背景 cloud://C4015B7CEC23CF013A78247E2852524F//火箭待机小球抖动.json
@@ -41,29 +45,29 @@ function Index() {
   const { activityInfo, setActivityInfoAndStatus } = useActivityInfoModel()
   const { loginInfo } = useLoginInfoModel()
 
-  const [ memberVisible, setMemberVisible ] = useState(false)
-  const [ doHelpModalVisible, setDoHelpModalVisible ] = useState(false)
-  const [ ruleModalVisible, setRuleModalVisible ] = useState(false)
-  const [ tasksModalVisible, setTasksModalVisible ] = useState(false)
+  const [memberVisible, setMemberVisible] = useState(false)
+  const [doHelpModalVisible, setDoHelpModalVisible] = useState(false)
+  const [ruleModalVisible, setRuleModalVisible] = useState(false)
+  const [tasksModalVisible, setTasksModalVisible] = useState(false)
   // 中奖弹窗
-  const [ prizeModalVisible, setPrizeModalVisible] = useState(false)
+  const [prizeModalVisible, setPrizeModalVisible] = useState(false)
   // 分享图
   const SHARE_IMG = useRef('')
   // 助力弹窗类型
-  const [helpType,setHelpType] = useState(HELP_MODAL_TYPE.HELP)
+  const [helpType, setHelpType] = useState(HELP_MODAL_TYPE.HELP)
   // 助力弹窗类型
-  const [helpInfo,setHelpInfo] = useState({})
+  const [helpInfo, setHelpInfo] = useState({})
   // 助力弹窗标识
   const showHelp = useRef(false)
   // 用户信息
-  const [ userInfo, setUserInfo] = useState({})
+  const [userInfo, setUserInfo] = useState({})
 
-  const fetchActivityInfo = async() => {
+  const fetchActivityInfo = async () => {
     const { success, data } = await API.getActivityBaseInfoById()
-    if(success) {
+    if (success) {
       const { startTime, endTime, rule } = data
       setActivityInfoAndStatus({
-        startTime, endTime,  rule
+        startTime, endTime, rule
       })
       // 判断活动未开始 且 app.isOnlineAct = false
     }
@@ -73,12 +77,37 @@ function Index() {
     const { success, data } = await API.getUserInfo()
     success && setUserInfo(data)
   }
-  useEffect(() =>{
-    fetchActivityInfo()
+  useEffect(() => {
+    setTimeout(async () => {
+      let c = await my.createOffscreenCanvas()
+      console.log("2222222")
+      FYGE.initedByTbCanvas(c)
+      console.log("123123123132", c)
+      try {
+        await my.PreLoader()
+      } catch (e) {
+        console.error(e)
+      }
+
+      fetchActivityInfo()
+    }, 2000);
     // getImgShareUrl('cloud://CEFE74AE67921906B5AF842150646D35/share.png').then(url => {
     //   SHARE_IMG.current = url
     // })
-  },[])
+  }, [])
+
+  const onLoadingCanvasReady = async () => {
+    FYGE.setEnv(FYGE.EnvType.tb)
+    // let c = FYGE.createCanvas()
+    // console.log("有没有：", c.createImage)
+    console.log("1111111111111")
+    my.createCanvas({
+      id: 'loadingCanvas',
+      success: async (c) => {
+
+      }
+    })
+  }
   // 授权登录完成
   const { isLogin, authInfo } = useLogin(async (info) => {
     handleVisibleModal(info)
@@ -86,7 +115,7 @@ function Index() {
   // 查看是否有助力信息
   const getShareInfo = async () => {
     const { success, data } = await API.getShareInfo()
-    if(success && data && data?.inviteCount) {
+    if (success && data && data?.inviteCount) {
       setHelpInfo(data)
       setDoHelpModalVisible(true)
       setHelpType(HELP_MODAL_TYPE.REWARDS)
@@ -110,9 +139,9 @@ function Index() {
     const { inviteId } = info
     const isVip = await checkIsMember()
     // 是否为助力弹窗
-    if(inviteId && !showHelp.current) {
+    if (inviteId && !showHelp.current) {
       setDoHelpModalVisible(true)
-      setHelpType(isVip? HELP_MODAL_TYPE.FAIL: HELP_MODAL_TYPE.HELP)
+      setHelpType(isVip ? HELP_MODAL_TYPE.FAIL : HELP_MODAL_TYPE.HELP)
       showHelp.current = true
       return;
     }
@@ -128,17 +157,17 @@ function Index() {
     setMemberVisible(false)
   }
 
-  const onHandleClose = () => { 
+  const onHandleClose = () => {
     setDoHelpModalVisible(false)
-    if(loginInfo.newUser) {
+    if (loginInfo.newUser) {
       handleVisibleModal(loginInfo)
     }
-    if(helpType === HELP_MODAL_TYPE.REWARDS) {
+    if (helpType === HELP_MODAL_TYPE.REWARDS) {
       fetchUserInfo()
     }
   }
 
-  const onHandleIndex = (type,updateActInfo) => {
+  const onHandleIndex = (type, updateActInfo) => {
     const Fn = {
       'updateUserInfo': () => {
         fetchUserInfo()
@@ -158,62 +187,63 @@ function Index() {
 
   return (
     <>
+      {/* <canvas id="loadingCanvas" type="2d" ></canvas> */}
       <ContainerFit hasFitPsd={true} bg={INDEX_CONFIG.bg}>
         <View className={styles.rule} style={{ backgroundImage: `url(${INDEX_CONFIG.ruleButton})` }} onClick={() => setRuleModalVisible(true)}>活动规则</View>
         <View className={styles.my_prize} style={{ backgroundImage: `url(${INDEX_CONFIG.myPrizeButton})` }} onClick={() => onHandleIndex('prize')}>我的奖品</View>
         <View className={styles.tasks} onClick={() => setTasksModalVisible(true)}>任务</View>
-        <View className={styles.games} onClick={() =>onHandleIndex('game') }>游戏</View>
+        <View className={styles.games} onClick={() => onHandleIndex('game')}>游戏</View>
         <View className={styles.bemember} onTap={() => setMemberVisible(true)}>入会</View>
 
         <View className={styles.comps} onClick={() => onHandleIndex('comps')}>组件预览</View>
 
-        <View className={styles['prize_modal_btn']} onTap={()=>setPrizeModalVisible(true)}>中奖弹窗</View>
+        <View className={styles['prize_modal_btn']} onTap={() => setPrizeModalVisible(true)}>中奖弹窗</View>
       </ContainerFit>
       {/* 中奖弹窗 */}
       {
         prizeModalVisible &&
-          <JackpotModal 
-            closePostion='bottom'
-            bg=''
-            width='600'
-            height='700'
-            top='45%'
-            prizeItem={prizeItem}
-            onClose={() => setPrizeModalVisible(false)}
-          />
+        <JackpotModal
+          closePostion='bottom'
+          bg=''
+          width='600'
+          height='700'
+          top='45%'
+          prizeItem={prizeItem}
+          onClose={() => setPrizeModalVisible(false)}
+        />
       }
       {
         tasksModalVisible &&
-          <TasksModal
-            onUpdate={() => { console.warn('任务数据更新了')}}
-            onClose={() => setTasksModalVisible(false)}
-          />
+        <TasksModal
+          onUpdate={() => { console.warn('任务数据更新了') }}
+          onClose={() => setTasksModalVisible(false)}
+        />
       }
       {
         ruleModalVisible &&
-          <RuleModal
-            closePostion='bottom'
-            bg=''
-            width='500'
-            height='300'
-            rule={activityInfo.rule}
-            onClose={() => setRuleModalVisible(false)}
-          />
+        <RuleModal
+          closePostion='bottom'
+          bg=''
+          width='500'
+          height='300'
+          rule={activityInfo.rule}
+          onClose={() => setRuleModalVisible(false)}
+        />
       }
       {
         doHelpModalVisible &&
-          <DoHelpModal
-            closePostion='bottom'
-            bg=''
-            width='500'
-            height='500'
-            top='45%'
-            newVip={false}
-            onClose={() => setDoHelpModalVisible(false)}
-          />
+        <DoHelpModal
+          closePostion='bottom'
+          bg=''
+          width='500'
+          height='500'
+          top='45%'
+          newVip={false}
+          onClose={() => setDoHelpModalVisible(false)}
+        />
       }
       {<member-modal expend={memberVisible} onClose={onClose} onAuthFail={onAuthFail} onAuthSuccess={onAuthSuccess} />}
-      {authInfo?.visible && <Auth clickAuthBtn={authInfo.onHandleSetting} /> }
+      {authInfo?.visible && <Auth clickAuthBtn={authInfo.onHandleSetting} />}
       {false && <canvas-comp />}
     </>
   )