游戏学习

.vscode/settings.json

+{
+  "cSpell.words": [
+    "FYGE"
+  ]
+}
\ No newline at end of file

config/webpack.common.config.js

@@ -194,6 +194,10 @@ module.exports = function (isProd) {
                 name: (entrypoint) => `runtime-${entrypoint.name}`,
             },
         },
+        // 外部扩展
+        externals: {
+            'fyge': 'FYGE'
+        }
     };
 
 

public/index.html

@@ -6,9 +6,6 @@
 	<meta name="theme-color" content="#000000">
 	<title>首页</title>
 	<style>
-		body {
-			background-color: #ffdbba;
-		}
 
 		/* 这里会导致手机上input 无法输入 所有用not */
 		*:not(input,textarea){
@@ -28,7 +25,7 @@
 	<script src="//yun.duiba.com.cn/js-libs/rem/1.1.3/rem.min.js"></script>
 	<script src="//yun.duiba.com.cn/h5/lib/zepto.min.js"></script>
 	<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
-	<script crossorigin="anonymous" src="//yun.dui88.com/ /jimu/source/icbc_core1.js"></script>
+	<script src="//yun.duiba.com.cn/db_games/libs0924/fyge2040.min.js" crossorigin="anonymous"></script>
 	<script>
 		function getApp() {
 			return {

src/components/game/Main.js

+
+export default class Main {
+  // 舞台
+  stage
+
+  // 画布
+  canvas
+
+  constructor(canvas) {
+    this.canvas = canvas;
+    const stageWidth = this.stageWidth = document.documentElement.clientWidth
+    const stageHeight = this.stageHeight = document.documentElement.clientHeight
+    window['stage']= this.stage = new FYGE.Stage(
+      canvas,
+      750,
+      1624,
+      stageWidth,
+      stageHeight,
+      FYGE.RENDERER_TYPE.WEBGL,
+      true, // 视图居中裁剪
+      false, // 定宽高
+    );
+    this.stage.addEventListener(FYGE.Event.INIT_STAGE, this.INIT_STAGE, this)
+    this.loop()
+  }
+
+  ADDED_TO_STAGE() {
+    console.log('addedToStage')
+    
+  }
+  async INIT_STAGE() {
+   
+    this.addText()
+    this.addImage()
+  }
+
+  // TODO 循环刷新 必须调用，否则导致页面添加图像不显示 
+  loop=()=>{
+    FYGE.Tween.flush()
+    this.stage.flush()
+    requestAnimationFrame(this.loop)
+  }
+
+  addText() {
+    const text = new FYGE.TextField();
+    this.stage.addChild(text);
+
+    //设置显示文本
+    text.text = 'this is text'
+
+    //设置大小
+    text.size = 40;
+
+    //设置是否加粗
+    text.bold = true;
+
+    //是否有边框
+    text.border = true;
+
+    //设置文本宽高
+    text.textHeight = 200;
+    text.textWidth = 300;
+
+    //设置文本剧中
+    text.textAlign = FYGE.TEXT_ALIGN.CENTER
+    text.verticalAlign = FYGE.VERTICAL_ALIGN.MIDDLE
+
+    //设置描边
+    text.strokeColor = '#222222';
+    text.stroke = 4;
+  }
+
+  addImage() {
+    const src = "//yun.duiba.com.cn/aurora/assets/abe23575ef1f27286df1a6364b8d3968d5f2fc78.png";
+    const sprite = new FYGE.Sprite(FYGE.Texture.fromUrl(src));
+    this.stage.addChild(sprite);
+
+    //设置图片锚点，这里是设置了纹理锚点0.5的位置
+    sprite.anchorTexture.set(0.5, 0.5);
+    sprite.position.set(255, 275);
+
+    FYGE.Tween.get(sprite, { loop: true })
+        .to({
+            rotation: 360
+        }, 2000).wait(1000).to({
+          x:sprite.x+300
+        },5000).wait(3000)
+  }
+
+}
\ No newline at end of file

src/components/game/game.jsx

+import React, { useRef } from 'react';
+import { useEffect } from 'react';
+import Main from './Main'
+import './game.less'
+
+export default function game() {
+  const containerRef =  useRef(null);
+  
+
+  // 初始化canvas
+  function initCanvas() {
+    const main = new Main(createCanvas())
+  }
+
+  // 创建canvas
+  function createCanvas() {
+    const canvas = document.createElement('canvas');
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    canvas.width = document.documentElement.clientWidth * (window.devicePixelRatio || 1)
+		canvas.height = document.documentElement.clientHeight * (window.devicePixelRatio || 1)
+    containerRef?.current.appendChild(canvas);
+    return canvas;
+  }
+
+  useEffect(()=>{
+    initCanvas()
+    return ()=>{}
+  },[])
+
+
+  return (
+    <div ref={containerRef} className="gameSceneBox" key="gameSceneBox"> </div>
+  )
+}

src/components/game/game.less

+.gameSceneBox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  -webkit-overflow-scrolling: auto;
+
+  canvas {
+    display: block;
+  }
+}
\ No newline at end of file

src/index.jsx

@@ -5,7 +5,9 @@ import "./index.less"
 import Modal from './modal/modal'
 import './md-index'
 //此处为spark-cli动态生成
-import HomePage from "@src/pages/homePage/homePage"
+// import HomePage from "@src/pages/homePage/homePage";
+import GamePage from "@src/pages/gamePage/gamePage";
+
 
 
 @observer
@@ -13,7 +15,7 @@ class Index extends Component {
 	render() {
 		return (
 			<div>
-				<HomePage/>
+				<GamePage/>
 				{/* <Modal/> */}
 			</div>
 		)

src/pages/gamePage/gamePage.jsx

+import React, { Component } from 'react';
+import './gamePage.less';
+
+import Game from '@src/components/game/game'
+
+export default class gamePage extends Component {
+  render() {
+    return (
+      <div>
+        <Game />
+      </div>
+    )
+  }
+}

src/pages/homePage/homePage.jsx

 import React, { Component } from 'react';
 import './homePage.less'
-
+import * as fyge from 'fyge'
+console.log('fyge',fyge)
 export default class homePage extends Component {
 	render() {
 		return (

src/store/index.js

+import { makeAutoObservable } from 'mobx';
+
+export default class Root {
+  constructor() {
+    makeAutoObservable(this)
+  }
+}
\ No newline at end of file