update ui

src/ui/Duel/extraMonsters.ts

@@ -6,7 +6,7 @@ export default (scene: BABYLON.Scene) => {
   const shape = CONFIG.CardSlotShape();
 
   for (let i in xs) {
-    const slot = BABYLON.MeshBuilder.CreateBox(
+    const slot = BABYLON.MeshBuilder.CreatePlane(
       `extraMonster${i}`,
       shape,
       scene
@@ -24,7 +24,10 @@ export default (scene: BABYLON.Scene) => {
       "extraMonsterMaterial",
       scene
     );
-    extraMonsterMaterial.diffuseColor = CONFIG.extraMonsterColor();
+    extraMonsterMaterial.diffuseTexture = new BABYLON.Texture(
+      `http://localhost:3030/images/card_slot.png`
+    );
+    extraMonsterMaterial.diffuseTexture.hasAlpha = true;
     slot.material = extraMonsterMaterial;
   }
 };

src/ui/Duel/magics.ts

@@ -7,7 +7,7 @@ export default (scene: BABYLON.Scene) => {
   const shape = CONFIG.CardSlotShape();
 
   for (let i = 0; i < 5; i++) {
-    const slot = BABYLON.MeshBuilder.CreateBox(`magic${i}`, shape, scene);
+    const slot = BABYLON.MeshBuilder.CreatePlane(`magic${i}`, shape, scene);
     // 位置
     slot.position = new BABYLON.Vector3(
       left + gap * i,
@@ -18,7 +18,10 @@ export default (scene: BABYLON.Scene) => {
     slot.rotation = CONFIG.CardSlotRotation();
     // 材质
     const magicMaterial = new BABYLON.StandardMaterial("magicMaterial", scene);
-    magicMaterial.diffuseColor = CONFIG.MagicColor();
+    magicMaterial.diffuseTexture = new BABYLON.Texture(
+      `http://localhost:3030/images/card_slot.png`
+    );
+    magicMaterial.diffuseTexture.hasAlpha = true;
     slot.material = magicMaterial;
   }
 };

src/ui/Duel/monsters.ts

@@ -7,7 +7,7 @@ export default (scene: BABYLON.Scene) => {
   const shape = CONFIG.CardSlotShape();
 
   for (let i = 0; i < 5; i++) {
-    const slot = BABYLON.MeshBuilder.CreateBox(`monster${i}`, shape, scene);
+    const slot = BABYLON.MeshBuilder.CreatePlane(`monster${i}`, shape, scene);
     // 位置
     slot.position = new BABYLON.Vector3(
       left + gap * i,
@@ -21,7 +21,10 @@ export default (scene: BABYLON.Scene) => {
       "monsterMaterial",
       scene
     );
-    monsterMaterial.diffuseColor = CONFIG.MonsterColor();
+    monsterMaterial.diffuseTexture = new BABYLON.Texture(
+      `http://localhost:3030/images/card_slot.png`
+    );
+    monsterMaterial.diffuseTexture.hasAlpha = true;
     slot.material = monsterMaterial;
   }
 };