Merge branch 'feat/ui/hands/button' into 'main'

Feat/ui/hands/button

See merge request !36

package-lock.json

@@ -30,6 +30,7 @@
       },
       "devDependencies": {
         "@babylonjs/core": "^5.29.0",
+        "@babylonjs/gui": "^5.35.1",
         "@types/google-protobuf": "^3.15.6",
         "@types/three": "^0.144.0",
         "@typescript-eslint/eslint-plugin": "^5.40.1",
@@ -1982,6 +1983,15 @@
       "integrity": "sha512-1gua7RJ52baX34R2uoO4HeF3l0y4s8nUU5BCbWkmDUPomqbBKaQE0nrvTHkrsHnwzdqZv8bO3Nb2h7SXsMesEA==",
       "dev": true
     },
+    "node_modules/@babylonjs/gui": {
+      "version": "5.35.1",
+      "resolved": "https://registry.npmjs.org/@babylonjs/gui/-/gui-5.35.1.tgz",
+      "integrity": "sha512-CuL32j07JNu4Jpa8y+lfoAecMR6mairpvmboAay6Bp2J1fYCNQesAYX60Xh8v6kFoFs2zjiEdrwMaQ6ykUzBPg==",
+      "dev": true,
+      "peerDependencies": {
+        "@babylonjs/core": "^5.22.0"
+      }
+    },
     "node_modules/@bcoe/v8-coverage": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
@@ -17056,6 +17066,13 @@
       "integrity": "sha512-1gua7RJ52baX34R2uoO4HeF3l0y4s8nUU5BCbWkmDUPomqbBKaQE0nrvTHkrsHnwzdqZv8bO3Nb2h7SXsMesEA==",
       "dev": true
     },
+    "@babylonjs/gui": {
+      "version": "5.35.1",
+      "resolved": "https://registry.npmjs.org/@babylonjs/gui/-/gui-5.35.1.tgz",
+      "integrity": "sha512-CuL32j07JNu4Jpa8y+lfoAecMR6mairpvmboAay6Bp2J1fYCNQesAYX60Xh8v6kFoFs2zjiEdrwMaQ6ykUzBPg==",
+      "dev": true,
+      "requires": {}
+    },
     "@bcoe/v8-coverage": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",

package.json

@@ -51,6 +51,7 @@
   },
   "devDependencies": {
     "@babylonjs/core": "^5.29.0",
+    "@babylonjs/gui": "^5.35.1",
     "@types/google-protobuf": "^3.15.6",
     "@types/three": "^0.144.0",
     "@typescript-eslint/eslint-plugin": "^5.40.1",

src/config/ui.ts

@@ -61,6 +61,10 @@ export const HandHoverScaling = () => {
 export const HandHoverOutScaling = () => {
   return new BABYLON.Vector3(1, 1, 1);
 };
+export const HandInteractShape = () => {
+  return { width: 0.4, height: 0.1 };
+};
+export const HandInteractFontSize = 300;
 
 // 怪兽区
 export const MonsterColor = () => {

src/ui/Duel/simpleDuel/hands.ts

 import * as BABYLON from "@babylonjs/core";
+import * as BABYLON_GUI from "@babylonjs/gui";
 import * as CONFIG from "../../../config/ui";
 import { Card } from "../../../reducers/duel/util";
 
@@ -10,39 +11,94 @@ export default (hands: Card[], scene: BABYLON.Scene) => {
       handShape,
       scene
     );
-    // 位置
-    hand.position = new BABYLON.Vector3(
-      item.transform.position?.x,
-      item.transform.position?.y,
-      item.transform.position?.z
+    // 位置&旋转
+    setupHandTransform(hand, item);
+    // 材质
+    setupHandMaterial(hand, item, scene);
+    // 互动选项
+    setupHandInteractivity(hand, item, idx, scene);
+    // 事件管理
+    setupHandAction(hand, item, idx, scene);
+  });
+};
+
+function setupHandTransform(mesh: BABYLON.Mesh, state: Card) {
+  mesh.position = new BABYLON.Vector3(
+    state.transform.position?.x,
+    state.transform.position?.y,
+    state.transform.position?.z
   );
-    hand.rotation = new BABYLON.Vector3(
-      item.transform.rotation?.x,
-      item.transform.rotation?.y,
-      item.transform.rotation?.z
+  mesh.rotation = new BABYLON.Vector3(
+    state.transform.rotation?.x,
+    state.transform.rotation?.y,
+    state.transform.rotation?.z
+  );
+}
+
+function setupHandMaterial(
+  mesh: BABYLON.Mesh,
+  state: Card,
+  scene: BABYLON.Scene
+) {
+  const handMaterial = new BABYLON.StandardMaterial(
+    `handMaterial${state.meta.id}`,
+    scene
   );
-    // 材质
-    const handMaterial = new BABYLON.StandardMaterial("handMaterial", scene);
   // 材质贴纸
   handMaterial.diffuseTexture = new BABYLON.Texture(
-      `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${item.meta.id}.jpg`,
+    `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${state.meta.id}.jpg`,
     scene
   );
-    hand.material = handMaterial;
+  mesh.material = handMaterial;
+}
 
-    // 事件管理
-    hand.actionManager = new BABYLON.ActionManager(scene);
+function setupHandInteractivity(
+  mesh: BABYLON.Mesh,
+  state: Card,
+  handIdx: number,
+  scene: BABYLON.Scene
+) {
+  const interactShape = CONFIG.HandInteractShape();
+  const interact = BABYLON.MeshBuilder.CreatePlane(
+    `handInteract${handIdx}`,
+    interactShape,
+    scene
+  );
+  interact.parent = mesh;
+  interact.position.x = CONFIG.HandShape().width / 2 + interactShape.width / 2;
+
+  const advancedTexture =
+    BABYLON_GUI.AdvancedDynamicTexture.CreateForMesh(interact);
+  const button = BABYLON_GUI.Button.CreateSimpleButton(
+    `handInteractButtion${handIdx}`,
+    "test"
+  );
+  button.fontSize = CONFIG.HandInteractFontSize;
+  button.background = "gray";
+  button.onPointerClickObservable.add(() => {
+    console.log(`<Interact>hand ${handIdx}`);
+  });
+  advancedTexture.addControl(button);
+}
+
+function setupHandAction(
+  mesh: BABYLON.Mesh,
+  state: Card,
+  handIdx: number,
+  scene: BABYLON.Scene
+) {
+  mesh.actionManager = new BABYLON.ActionManager(scene);
   // 监听点击事件
-    hand.actionManager.registerAction(
+  mesh.actionManager.registerAction(
     new BABYLON.ExecuteCodeAction(
       BABYLON.ActionManager.OnPickTrigger,
       (event) => {
-          console.log(`<Click>hand: ${idx}`, "card:", item, "event:", event);
+        console.log(`<Click>hand: ${handIdx}`, "card:", state, "event:", event);
       }
     )
   );
   // 监听`Hover`事件
-    hand.actionManager.registerAction(
+  mesh.actionManager.registerAction(
     new BABYLON.CombineAction(
       { trigger: BABYLON.ActionManager.OnPointerOverTrigger },
       [
@@ -50,7 +106,7 @@ export default (hands: Card[], scene: BABYLON.Scene) => {
           {
             trigger: BABYLON.ActionManager.OnPointerOverTrigger,
           },
-            hand,
+          mesh,
           "scaling",
           CONFIG.HandHoverScaling()
         ),
@@ -58,22 +114,33 @@ export default (hands: Card[], scene: BABYLON.Scene) => {
         new BABYLON.ExecuteCodeAction(
           BABYLON.ActionManager.OnPointerOverTrigger,
           (event) => {
-              console.log(`<Hover>hand: ${idx}`, "event: ", event);
+            console.log(`<Hover>hand: ${handIdx}`, "event: ", event);
           }
         ),
       ]
     )
   );
   // 监听`Hover`离开事件
-    hand.actionManager.registerAction(
+  mesh.actionManager.registerAction(
+    new BABYLON.CombineAction(
+      { trigger: BABYLON.ActionManager.OnPointerOutTrigger },
+      [
         new BABYLON.SetValueAction(
           {
             trigger: BABYLON.ActionManager.OnPointerOutTrigger,
           },
-        hand,
+          mesh,
           "scaling",
           CONFIG.HandHoverOutScaling()
+        ),
+        // TODO: 这里后续应该加上禁用可操作按钮的处理
+        new BABYLON.ExecuteCodeAction(
+          BABYLON.ActionManager.OnPointerOutTrigger,
+          (event) => {
+            console.log(`<Hover Out>hand: ${handIdx}`, "event:", event);
+          }
+        ),
+      ]
     )
   );
-  });
-};
+}