udonariumのカード画像を追加してみた。

概要

ねこ卓やQuoridornでも遊んでいたので今回はudonariumで遊ぶ。

udonarium様のソースを少し変えて、
anubis様作の「HollowΦFlux」のカードを追加してみた。

以下のudonariumで、追加した結果がみれる。
ボード上で、右クリックすると山札を作成が右クリックメニューに出てくるのでそこから。

カード追加版udonarium

今回の変更を行った時点のソースコードは以下から。

この時点のソース

ソースの変更要点

createTrampを参考に、カードを追加した。
カード画像を追加して、それを作成するようにしたらすんなり。
カード画像はudonarium/src/assets/images/フォルダ配下に設置した。

/src/app/service/tabletop.service.ts

+  createHollow(position: PointerCoordinate): CardStack {
+    const cardStack = CardStack.create("HollowΦFluxカード一覧");
+    cardStack.location.x = position.x - 25;
+    cardStack.location.y = position.y - 25;
+    cardStack.posZ = position.z;
+
+    const back = "./assets/images/hollowflux_cardpng/card_back.jpg";
+    if (!ImageStorage.instance.get(back)) {
+      ImageStorage.instance.add(back);
+    }
+
+    [...Array(60).keys()].forEach(id => {
+      const url: string =
+        "./assets/images/hollowflux_cardpng/card_" + id + ".png";
+      if (!ImageStorage.instance.get(url)) {
+        ImageStorage.instance.add(url);
+      }
+      const card = Card.create("カード", url, back);
+      cardStack.putOnBottom(card);
+    });
+
+    return cardStack;
+  }

   makeDefaultTable() {
    let tableSelecter = new TableSelecter("tableSelecter");
     tableSelecter.initialize();
 

     let gameTable = new GameTable("gameTable");
     let testBgFile: ImageFile = null;
     let bgFileContext = ImageFile.createEmpty('testTableBackgroundImage_image').toContext();
-    bgFileContext.url = './assets/images/BG10a_80.jpg';
+    // 初期表示カスタマイズ
+    bgFileContext.url = "./assets/images/mat.png";
     testBgFile = ImageStorage.instance.add(bgFileContext);
     gameTable.name = '最初のテーブル';
     gameTable.imageIdentifier = testBgFile.identifier;
     gameTable.width = 20;
@@ -340,59 +512,87 @@ export class TabletopService {
     let testFile: ImageFile = null;
     let fileContext: ImageContext = null;
 
     testCharacter = new GameCharacter('testCharacter_1');
     fileContext = ImageFile.createEmpty('testCharacter_1_image').toContext();
     fileContext.url = './assets/images/mon_052.gif';
+    return;
+    // 初期表示なしにカスタマイズ

// 省略

  getContextMenuActionsForCreateObject(position: PointerCoordinate): ContextMenuAction[] {
     return [
       this.getCreateCharacterMenu(position),
       this.getCreateTableMaskMenu(position),
       this.getCreateTextNoteMenu(position),
       this.getCreateTrumpMenu(position),
       this.getCreateDiceSymbolMenu(position),
+      this.getCreateHollowMenu(position)
     ];
   }

+  private getCreateHollowMenu(position: PointerCoordinate): ContextMenuAction {
+    const subMenus: ContextMenuAction[] = [];
+
+    subMenus.push({
+      name: "カードパック",
+      action: () => {
+        this.createHollow(position);
+        SoundEffect.play(PresetSound.cardPut);
+      }
+    });
+    subMenus.push({
+      name: "構築済み１「氷壊摂理」",
+      action: () => {
+        this.createHollowSample1(position);
+        SoundEffect.play(PresetSound.cardPut);
+      }
+    });
+
+    return {
+      name: "HollowΦFluxの山札を作成",
+      action: null,
+      subActions: subMenus
+    };
+  }