打包

.babelrc

 {
   "presets": [
-    // ["@babel/preset-env", {
-    //   "targets": "> 0.25%, not dead"
-    // }],
+    ["@babel/preset-env", {
+      "targets": "> 0.25%, not dead"
+    }],
     "@babel/preset-typescript"
   ],
   "plugins": [
-    // ["@babel/plugin-transform-runtime", {
-    //   // "corejs": 3
-    // }],
+    ["@babel/plugin-transform-runtime", {
+      // "corejs": 3
+    }],
     ["@babel/plugin-proposal-decorators", { "legacy": true }],
     "@babel/plugin-proposal-optional-chaining",
     "./babel-plugins/babel-plugins-test.js"

README.md

+### 注意事项
+
+> useAni 默认会去 清除 子元素上的所有tween，所以，里面的tween 不要加 延时，否则会清除不掉
+
+> 装饰器 ts 推导有点问题 UseAni
+
+> 场景 这里怎么处理好呢， 怎么判定 是预加载，或者，预加载的时候，需要下层 场景呢
+> 场景需要切换的时候 带有动画呢，做锤子🔨
+
+new => RenderComponent => render => back
+
+ref <= didRendered
+
+new => FYGE.Container
+
+FYGE.Shape 画出来的  width 和height 外面又一层 20 ？？
+
+babel acorn => Javascript 编译器
+
+高级语言 =》 低级语言
+
+高级语言 更加符合 人类想的逻辑， 描述逻辑的语言特性，比如 分支，函数 循环，面向对象
+
+低级语言 更加 适合机器， 会操作寄存器，内存，需要开发熟悉计算机的工作原理， 比如汇编语言
+
+所以，分为了三步 parse =》 ast 抽象语法数， 你可以已经为是一个特殊的 数据结构，里面 摒弃了一些 无用的 显示字符， 比如 {},; 这样机器就知道了我们源码是什么意思
+
+词法分析和语法分析
+
+transform 去遍历，修改 ast 
+
+generate 修改了好了就用  去 生成我们源码
+
+[babel](https://astexplorer.net/#/gist/09113e146fa04044e99f8a98434a01af/0ff37c4d88c90f10a71897a8ebf021c55e1f3334)
+
+@babel/core 下面都有
+
+parser 阶段
+@babel/parser
+transfrom阶段
+@babel/traverse
+generate
+@babel/generator
+
+插件、 preset 预设 =》 插件集合
+
+默认只能解析 js 想 flow，ts jsx 需要特定的 语法插件 才能解析
\ No newline at end of file

package.json

@@ -5,8 +5,16 @@
   "main": "index.js",
   "scripts": {
     "dev": "node ./scripts/devServer.js",
+    "flushRes": "node scripts/flushRes",
+    "handleRes": "node scripts/delRel && node scripts/copyRes",
+    "upload": "node scripts/upload",
+    "prod": "npm run handleRes && npm run upload && npm run buildTS",
+    "buildWeb": "npm run handleRes && node scripts/upload 1",
+    "buildTS": "webpack --config webpack.prod.js && node scripts/mergeJs",
     "babelbuild": "babel src --out-dir dist --extensions .ts,.tsx",
-    "build": "webpack --config webpack.prod.js"
+    "build": "webpack --config webpack.prod.js",
+
+    "check-type": "tsc --watch"
   },
   "author": "",
   "license": "ISC",
@@ -21,11 +29,18 @@
     "@babel/preset-env": "^7.19.1",
     "@babel/preset-typescript": "^7.18.6",
     "babel-loader": "^8.2.5",
+    "del": "2.2.1",
     "ts-loader": "^9.4.1",
     "typescript": "^4.8.3",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1",
-    "webpack-merge": "^5.8.0"
+    "webpack-merge": "^5.8.0",
+
+
+    "ali-oss": "^4.11.4",
+    "chalk": "^2.3.0",
+    "co": "^4.6.0",
+    "progress": "^2.0.0"
   }
 }

project.json

+{
+    "type": "activity",
+    "name": "template"
+}
\ No newline at end of file

resource/res.json

 {
-	"groups": [],
+	"groups": [
+		{
+			"keys": "nx1.jpg,ny1.jpg,nz1.jpg,px1.jpg,py1.jpg,pz1.jpg",
+			"name": "skybox"
+		}
+	],
 	"path": "./resource/"
 }
\ No newline at end of file

scripts/copyRes.js

+var fs = require('fs');
+var path = require("path");
+
+function writeFile(p, text) {
+    fs.writeFile(p, text, function (err) {
+        // if (!err)
+        //   console.log("写入成功！")
+    })
+}
+
+//递归创建目录 同步方法  
+function mkdirsSync(dirname) {
+    if (fs.existsSync(dirname)) {
+        return true;
+    } else {
+        if (mkdirsSync(path.dirname(dirname))) {
+            // console.log("mkdirsSync = " + dirname);
+            fs.mkdirSync(dirname);
+            return true;
+        }
+    }
+}
+
+function _copy(src, dist) {
+    var paths = fs.readdirSync(src)
+    paths.forEach(function (p) {
+        var _src = src + '/' + p;
+        var _dist = dist + '/' + p;
+        var stat = fs.statSync(_src)
+        if (stat.isFile()) {// 判断是文件还是目录
+            fs.writeFileSync(_dist, fs.readFileSync(_src));
+        } else if (stat.isDirectory()) {
+            copyDir(_src, _dist)// 当是目录是，递归复制
+        }
+    })
+}
+
+/*
+ * 复制目录、子目录，及其中的文件
+ * @param src {String} 要复制的目录
+ * @param dist {String} 复制到目标目录
+ */
+function copyDir(src, dist) {
+    var b = fs.existsSync(dist)
+    //   console.log("dist = " + dist)
+    if (!b) {
+        // console.log("mk dist = ",dist)
+        mkdirsSync(dist);//创建目录
+    }
+    //   console.log("_copy start")
+    _copy(src, dist);
+}
+
+function createDocs(src, dist, callback) {
+    //   console.log("createDocs...")
+    copyDir(src, dist);
+    //   console.log("copyDir finish exec callback")
+    if (callback) {
+        callback();
+    }
+}
+
+
+createDocs("./resource", "./released/resource/", function () {
+    console.log("资源拷贝成功")
+})
\ No newline at end of file

scripts/createHtml.js

+var fs = require("fs");
+
+function createHtml(url) {
+    var js = `//yun.duiba.com.cn/db_games/${url}/output.js`;
+    var template = fs.readFileSync("./index.html").toString();
+    //写入released
+    fs.writeFileSync("./released/index.html", template.replace("output.js", js))
+}
+
+module.exports = createHtml

src/Dream/UI/index.tsx

@@ -45,7 +45,6 @@ function ScaleAni(t: number) {
     return new Promise(async (r) => {
       FYGE.Tween.removeTweens(c)
       c.scale.set(0, 0)
-      await new Promise(resolve => setTimeout(resolve, t))
       FYGE.Tween.get(c, {
         loop: true
       })
@@ -81,16 +80,19 @@ export class DreamDotAni extends Dream.RenderContainer {
 
   render() {
     return (
-      <FYGE.Container ref={el => this.cont = el}>
-        <FPShapeOfRectV2 type="rect" alpha={0.6} fillColor="#00000"></FPShapeOfRectV2>
+      <FYGE.Container inlineProps={{
+        x: 300,
+        y: 750
+      }} ref={(el: FYGE.Container) => {
+        this.cont = el
+      }}>
         {
           Array.from({
-            length: 1
+            length: 3
           }, (_, index) => {
             return (
               <DotAni inlineProps={{
-                x: 270 + 100 * index,
-                y: 780
+                x: 100 * index,
               }} delay={index * 150} radius={40}></DotAni>
             )
           })

src/Dream/development.ts

@@ -38,6 +38,7 @@ export function addChildFromParent(parent: FYGE.Container, children: ChildType[]
       }
     })
   } else {
+    // children 不可能是 RenderContainer
     if (children instanceof RenderContainer) {
       const node = children.render()
       node! && parent.addChild(node)
@@ -51,7 +52,7 @@ export function createElement<K extends new(p?: any) => ChildType, T extends Chi
   inlineProps: Record<string, any>,
   children: any[],
   ref?: (c: ChildType) => void,
-} & EventsMap, ...children: ChildrenTypeArray) {
+} & EventsMap, ...children: ChildrenTypeArray): FYGE.Container {
   if (typeof ConstructType === 'string') {
     throw TypeError('Dream create cannot effect for string element type')
   }
@@ -120,11 +121,6 @@ export function createElement<K extends new(p?: any) => ChildType, T extends Chi
     node.addEventListener(FYGE.Event.REMOVED_FROM_STAGE, () => {
       (eleins as RenderContainer).unMount()
     })
-    // Promise.resolve().then(() => {
-    //   // @ts-ignore
-    //   eleins.didRendered()
-    // })
-    // node && (eleins = node)
     return node
   }
   

src/Dream/renderContainer.ts

-type PropsWithRef<P extends Record<string, any>> = P & { ref?: (e: any) => any };
+// type PropsWithRef<P extends Record<string, any>> = P & { ref?: (e: any) => any };
 
 class T {}
 
+type ComponentTypes = 'preloadComponent' | 'component'
+
 export class RenderContainer<P extends Record<string, any> = any> extends T {
   readonly props: Readonly<P> & Readonly<{ children?: FYGE.Container[] }>;
 
+  dreamType: ComponentTypes
   isDidRendered: boolean
 
   constructor(props: Readonly<P> | P | Readonly<{ref?: (e: RenderContainer) => any} & P>) {

src/ResJson.ts

 export const ResJson = {
-	"groups": [],
-	"path": "./resource/"
+	"groups": [
+		{
+			"keys": "nx1.jpg,ny1.jpg,nz1.jpg,px1.jpg,py1.jpg,pz1.jpg",
+			"name": "skybox"
+		}
+	],
+	// eslint-disable-next-line
+	"path": "https://yun.duiba.com.cn/db_games/activity/template/1664529402/resource/"
 }
\ No newline at end of file

src/UI/Sprite.tsx

+import Dream from "../Dream";
+import { RES } from "../modules/RES";
+
+export class Sprite extends Dream.RenderContainer<{
+  src: string | FYGE.Texture
+}> {
+  render() {
+    const {
+      src
+    } = this.props
+
+    const sp = new FYGE.Sprite()
+
+    if (typeof src === 'string') {
+      RES.getResAsync(src, (d: FYGE.Texture) => {
+        sp.texture = d
+      })
+    } else {
+      sp.texture = src
+    }
+    return sp
+  }
+}
\ No newline at end of file

src/index.tsx

@@ -78,7 +78,10 @@ export class Main {
 	}
 
   onAddToStage() {
+		// const realSceneLayer = new FYGE.Container()
+		// this.stage.addChild(realSceneLayer)
     layers.init(this.stage)
+		// realSceneLayer.y = layers.stageOffsetY
 
 		SceneController.init(layers.sceneLayer)
 

src/modules/ModalControl.tsx

@@ -18,8 +18,8 @@ const defaultModalConfig:ShowModalType = {
   center: true,
   maskAlpha: 0.7,
   destroy: true,
-  showCall: fadeIn,
-  hideCall: fadeOut
+  // showCall: fadeIn,
+  // hideCall: fadeOut
 }
 
 function fadeIn(cont: FYGE.Container) {
@@ -56,7 +56,9 @@ function ModalWraper(ModalNode: any) {
       const ModalConfig = this.props._config
       if (ModalConfig?.center) {
         const body = this.ModalBody
-        this.ModalBody.position.set(layers.stageWidth / 2 - body.width / 2, layers.stageHeight / 2 - body.height / 2)
+        const sw = body.sw || body.width
+        const sh = body.sh || body.height
+        this.ModalBody.position.set(layers.stageWidth / 2 - sw / 2, layers.stageHeight / 2 - sh / 2)
       }
       
     }
@@ -146,6 +148,7 @@ export const ModalCtroller = (function() {
       const M = ModalWraper(ModalNode)
       const cont = new FYGE.Container()
       layers.popupLayer.addChild(cont)
+      console.log('new Modal render')
       Dream.VirtualRender(cont, <M
         {...props}
         _config={_config}
@@ -162,9 +165,15 @@ export const ModalCtroller = (function() {
       const _ = ModalMap.get(ModalNode)
       if (_) {
         await _.hideModal()
+        const {
+          destroy
+        } = (_.props._config as ShowModalType)
+        if (destroy) {
           _.ModalContainer.parent.removeChild(_.ModalContainer);
-        console.log('deeeee');
-        (_.ModalContainer as FYGE.Container).destroy()
+          (_.ModalContainer as FYGE.Container).destroy();
+          ModalMap.delete(ModalNode)
+        }
+        
         return
       }
     }

src/modules/UseDecorator/useAni.tsx

 import Dream from "../../Dream"
 import { Container } from "../../Dream/UI"
-
-type UseAniConfig = {
-  showCall?: (c: FYGE.Container, ...args: any[]) => Promise<any>
-  hideCall?: (c: FYGE.Container) => Promise<any>
-}
+import { UseAniConfig } from "../types";
 
 /**
  * 递归清除显示对象里面所有的Tween
@@ -56,7 +52,6 @@ export function UseAni(cfg: UseAniConfig) {
         }
         // 清楚 子级的 tween
         removeTweens(this.aniCont)
-        console.log('removeTween')
         this.aniCont.visible = false
       }
 

src/modules/UseDecorator/usePreload.tsx

@@ -4,10 +4,13 @@ import { createImperativePromise, ImperativePromise } from "../awesome-promise"
 import { ModalCtroller } from "../ModalControl"
 import { RES } from "../RES"
 
+type SingleLoader = (res: string, cb: (d: any, ...args: any[]) => any) => Promise<any>
+
 type UsePreloadType = {
   resList: string[]
-  resPreloadFunc: Record<string, (res: string) => Promise<any>>,
+  resPreloadFunc: Record<string, SingleLoader>,
   loadingComponent: any,
+  preAction?: () => Promise<any>
 }
 
 const defaultConfig: UsePreloadType = {
@@ -107,7 +110,7 @@ const loadResourceOnce = (function() {
  export function onPreloadResource(
   resouces: string[],
   parallelMode: boolean = false,
-  func?: { [x: string]: (res: string) => Promise<any> },
+  func: { [x: string]: SingleLoader },
   onProcess?: (loaded: number, total: number) => void,
   onLoaded?: (total: number) => void,
 ) {
@@ -162,16 +165,17 @@ export function UsePreload(cfg: Partial<UsePreloadType>) {
   const finalCfg = Object.assign({}, defaultConfig, cfg, {
     resPreloadFunc: Object.assign({}, defaultConfig.resPreloadFunc, cfg.resPreloadFunc)
   })
-  return function(Node: any) {
+  return function(Node: any): any {
     return class extends Dream.RenderContainer<{
       onLoaded?: () => any
     }> {
       RoleCont: FYGE.Container
-      type: string = 'preloadContainer'
+      dreamType: any = 'preloadComponent'
 
       render() {
         const LoadingCompent = finalCfg.loadingComponent
 
+        Promise.all([
           onPreloadResource(
             finalCfg.resList,
             true,
@@ -180,16 +184,19 @@ export function UsePreload(cfg: Partial<UsePreloadType>) {
   
             },
             () => {
+              
+            }
+          ),
+          finalCfg.preAction
+        ]).then(() => {
           this.props.onLoaded && this.props.onLoaded()
           ModalCtroller.closeModal(LoadingCompent)
           if (this.RoleCont) {
             this.RoleCont.addChild(<Node></Node>)
           }
-          }
-        )
+        })
 
         ModalCtroller.showModal(LoadingCompent, {}, {
-          maskAlpha: 0,
           center: false
         })
 

src/modules/animations/index.ts

+export function fadeInFactory(t: number) {
+  return function(cont: FYGE.Container) {
+    return new Promise(r => {
+      FYGE.Tween.removeTweens(cont)
+      FYGE.Tween.get(cont)
+        .set({alpha: 0})
+        .to({
+          alpha: 1
+        }, t, FYGE.Ease.quadIn)
+        .call(r)
+    })
+  }
+}
+
+export function fadeOutFactory(t: number) {
+  return function(cont: FYGE.Container) {
+    return new Promise(r => {
+      FYGE.Tween.removeTweens(cont)
+      FYGE.Tween.get(cont)
+        .to({
+          alpha: 0
+        }, t, FYGE.Ease.quadIn)
+        .call(r)
+    })
+  }
+}

src/modules/layers/ctrls.tsx

 import Dream from "../../Dream";
 import { RenderContainer } from "../../Dream/renderContainer"
+import { UseAniConfig, UsePreloadType } from "../types";
 
 type SignleContainer = FYGE.Container
 
@@ -13,16 +14,20 @@ interface FunctionComponent<P = {}> {
     (props: PropsWithChildren<P>): SignleContainer;
 }
 
-// class SceneCompent extends Dream.RenderContainer {
-
+interface SceneCompent {
+  destroy(): void
+}
 
-// }
+type SceneConfig = UsePreloadType & UseAniConfig
 
 function SceneWrapper(SceneNode: any) {
-  return class extends Dream.RenderContainer{
+  return class extends Dream.RenderContainer<{
+    onLoaded: (m: any) => any
+  }>{
     sceneContainer: FYGE.Container
     wrapperContainer: FYGE.Container
 
+    // 做锤子动画
     show() {
       // 做动画
       this.wrapperContainer.visible = true
@@ -32,11 +37,28 @@ function SceneWrapper(SceneNode: any) {
       this.wrapperContainer.visible = false
     }
 
+    destroy() {
+      const scene = this.wrapperContainer 
+      // 清除掉自己
+      scene.parent.removeChild(scene)
+      scene.destroy()
+    }
+
     render() {
+      const {
+        onLoaded, ...otherProps
+      } = this.props
       return (
         <FYGE.Container ref={(el: any) => this.wrapperContainer = el}>
           <FYGE.Container ref={(el: FYGE.Container) => this.sceneContainer = el}>
-            <SceneNode {...this.props}></SceneNode>
+            <SceneNode {...otherProps} ref={(el: any) => {
+              // 预加载组建的话 走onLoaded
+              if (el.dreamType !== 'preloadComponent') {
+                this.props.onLoaded(this)
+              }
+            }} onLoaded={() => {
+              this.props.onLoaded(this)
+            }}></SceneNode>
           </FYGE.Container>
         </FYGE.Container>
       )
@@ -46,32 +68,28 @@ function SceneWrapper(SceneNode: any) {
 
 export const SceneController = (function() {
   let controller: FYGE.Container
-  const SceneMap = new Map()
-  let preScene
+  let preScene: SceneCompent // 之前一个场景的
   return {
     init(cont: FYGE.Container) {
       if (!controller) {
         controller = cont
       }
     },
+    destroyScene(scene: SceneCompent) {
+      scene.destroy()
+    },
     changeScene(SceneNode: any, props?: Record<string, any>) {
       if (!controller) {
         throw new Error('没有场景controller')
       }
-      const _ = SceneMap.get(SceneNode)
-      if (_) {
-        // props ?
-        _.show()
-        return
-      }
       const S = SceneWrapper(SceneNode)
       const cont = new FYGE.Container()
       controller.addChild(cont)
       Dream.VirtualRender(cont, <S
         {...props}
-        ref={(el: { show: () => void; }) => {
-          SceneMap.set(SceneNode, el)
-          el.show()
+        onLoaded={(el) => {
+          preScene && preScene.destroy()
+          preScene = el
         }}
       ></S>)
     }

src/modules/types.ts

+export type UseAniConfig = {
+  showCall?: (c: FYGE.Container, ...args: any[]) => Promise<any>
+  hideCall?: (c: FYGE.Container) => Promise<any>
+}
+
+export type UsePreloadType = {
+  resList: string[]
+  resPreloadFunc: Record<string, (res: string) => Promise<any>>,
+  loadingComponent: any,
+}
\ No newline at end of file

src/scenes/home.tsx

 import Dream from "../Dream";
-import { DotAni, DreamDotAni, DreamSpriteV2 } from "../Dream/UI";
+import { DotAni, DreamDotAni, DreamSpriteV2, FPShapeOfRectV2 } from "../Dream/UI";
+import { fadeInFactory } from "../modules/animations";
+import { layers } from "../modules/layers";
+import { SceneController } from "../modules/layers/ctrls";
 import { ModalCtroller } from "../modules/ModalControl";
+import { RES } from "../modules/RES";
 import { UseAni } from "../modules/UseDecorator/useAni";
+import { UsePreload } from "../modules/UseDecorator/usePreload";
+import { Sprite } from "../UI/Sprite";
 import { PreloadeTest } from "./test";
 
-function fadeIn(cont: FYGE.Container) {
-  return new Promise(r => {
-    FYGE.Tween.removeTweens(cont)
-    FYGE.Tween.get(cont)
-      .set({alpha: 0})
-      .to({
-        alpha: 1
-      }, 500, FYGE.Ease.quadIn)
-      .call(r)
-  })
-}
-
-function fadeOut(cont: FYGE.Container) {
-  return new Promise(r => {
-    FYGE.Tween.removeTweens(cont)
-    FYGE.Tween.get(cont)
-      .to({
-        alpha: 0
-      }, 500, FYGE.Ease.quadIn)
-      .call(r)
-  })
-}
-
 @UseAni({
-  showCall: fadeIn,
-  hideCall: fadeOut
+  showCall: fadeInFactory(500),
+  hideCall: fadeInFactory(500)
 })
 class Test extends Dream.RenderContainer{
   render() {
-    console.log(this.props)
     return (
       <FYGE.Container>
         <DreamSpriteV2 src="http://qnpic.top/yoona2.jpg"></DreamSpriteV2>
@@ -42,6 +24,51 @@ class Test extends Dream.RenderContainer{
   }
 }
 
+@UseAni({
+  showCall: function(t) {
+    return new Promise(r => {
+      FYGE.Tween.removeTweens(t)
+      const oy = t.y
+      FYGE.Tween.get(t)
+        .set({y: oy + 400})
+        .to({y: oy}, 300)
+        .call(r)
+    })
+  }
+})
+class PT extends Dream.RenderContainer {
+  render() {
+    const props = this.props
+    return <FYGE.TextField onClick={() => {
+      props.closeModal && props.closeModal()
+      ModalCtroller.showModal(PT, {}, {
+        destroy: false
+      })
+    }} inlineProps={{
+      text: '???',
+      size: 100,
+      fillColor: '#000000'
+    }}></FYGE.TextField>
+  }
+}
+
+@UsePreload({
+  resList: [
+    'http://qnpic.top/yoona2.jpg'
+  ],
+  resPreloadFunc: {
+    // jpg: function(src, cb) {
+    //   console.log('我就来玩玩', src)
+    //   cb()
+    //   return new Promise<void>(r => {
+    //     r()
+    //   })
+    // }
+  },
+  preAction: async function() {
+    await RES.loadGroup('')
+  }
+})
 export class HomeScene extends Dream.RenderContainer {
   cont: FYGE.Container
 
@@ -54,32 +81,19 @@ export class HomeScene extends Dream.RenderContainer {
   }
 
   testModal() {
-    ModalCtroller.showModal(function(props: any) {
-      return <FYGE.TextField onClick={props.closeModal} inlineProps={{
-        text: '???',
-        size: 100,
-        fillColor: '#000000'
-      }}></FYGE.TextField>
-    }, {}, {
-      showCall: function(t) {
-        return new Promise(r => {
-          FYGE.Tween.removeTweens(t)
-          const oy = t.y
-          FYGE.Tween.get(t)
-            .set({y: oy + 400})
-            .to({y: oy}, 300)
-            .call(r)
-        })
-      }
+    // ModalCtroller.showModal(PT, {}, {
+    //   destroy: false
+    // })
+    SceneController.changeScene(PT, {
+      test: 123123
     })
   }
 
   render() {
+
     return (
       // <DreamSpriteV2 src="http://qnpic.top/yoona2.jpg"></DreamSpriteV2>
-      <FYGE.Container inlineProps={{
-        y: 200
-      }} ref={(el: any) => {
+      <FYGE.Container ref={(el: any) => {
         this.cont = el
       }}>
         <FYGE.TextField onClick={() => {
@@ -90,10 +104,7 @@ export class HomeScene extends Dream.RenderContainer {
           size: 90,
           fillColor: '#000000'
         }}></FYGE.TextField>
-        {/* <DreamDotAni></DreamDotAni> */}
-        <PreloadeTest onLoaded={() => {
-          console.log('123123')
-        }}></PreloadeTest>
+        {/* <Sprite src="http://qnpic.top/yoona12.jpg"></Sprite> */}
       </FYGE.Container>
     )
   }