PR

【非公式 攻略】体力/パワーカード/チャージ管理アプリ作成(ChatGPT)

ChatGPT
記事内に広告が含まれています。

ゲームをしていて、

プレイ中男子
プレイ中男子

体力減らすの忘れた!

プレイ中女子
プレイ中女子

パワーカード、どこまで減らしたっけ?

チャージ<br>忘れ女子
チャージ
忘れ女子

チャージしたっけ?してないんだっけ?

トークン何個?
トークン何個?

ネメシストークン(激怒トークン含む)めっちゃ増えたけど、今何個?

 

果てはネメシスカードをめくり忘れることに・・・。

私はよくやらかしてました。

 

そこで、AIに体力を記録アプリ(手動)をつくってもらいました!
もちろん「非公式」です。

アプリを動かしたことによ料金は発生しません。(ChatGPT上で動く)

少々不具合もありますが、ゲームの補助には十分です(体感)。

セキュリティ面をAIに確認したので、裏でプログラムが動くとかはありません。

この記事の最後に紹介します!

 

アプリを作成した(してもらった)きっかけ

特に4キャラを1人でやると(ぼっちなのです)、考えることが多くて色々忘れがち。

そんなことはありませんか? 私はしょっちゅうです。

メーカーが「最適人数は2人(2キャラ)」といっているのは、

そういう意味もあると。

 

いろいろ覚えておくことが多いから、「あと何やるんだっけ」となるのです。

 

体力とか管理するアプリはないのかな、と調べましたが、どうも無い様子。

 

じゃあ「アプリを 作れないか」とChatGPTに相談しましたら、

・・・作ってくれました。

 

プロンプトを書けば作ってくれるようですね。

ChatGPT上で、CanvasをReact版で開いて、コードを作成してもらったものです。
(CanvasのReact版とは、
ChatGPTの中で、アプリっぽい画面を作って試せる場所のこと)

 

あくまで非公式のサンプルです。

「使うのが怖いなー」という場合は、
プロンプトをご自身で作成することで使えるようになります。

今回はそれも紹介します。

 

アプリに何ができるのか?

以下のことができます。

  • ターン順カードをボタンクリックでできる。
  • パワーカードが出現した時、パワーを設定して表示させる。
    ネメシスのターン順カードが出現するとパワーが減る。
  • 体力、チャージの記録をつけられる
  • ミニオンも体力を設定して表示できる。

 

アプリといっても、

例えば、
「出てきたアタックカードをアプリに読ませて、体力やトークンが自動的に増減する」
ことはできません(それができたらすごい)。

あくまで記録するためのものです。

「なーんだ」と思った方も、もう少しお付き合いいただければと思います。

 

アプリを立ち上げた後の設定画面イメージ

アプリを立ち上げると、以下のような画面が出てきます。

画面の説明

プレイヤー設定:プレイヤーの人数を決めます。
また、チャージ技の必要値も設定します。

ネメシス設定:ネメシスの体力を設定します。トークンを使う場合は初期設定できます。
(例:レイジボーン対戦時は1個)

ターン順カード設定:ターン順カードを設定します。

 

ゲーム開始後のイメージ

プレイ画面の説明

プレイヤー:
ネメシスやミニオンの攻撃で体力が減ったり、
チャージを貯めたりしたら、
数字の両側の+と-をクリックして増減します。

 

ネメシス:
ネメシスの行動やプレイヤーの攻撃に合わせて
体力を増減させます。

 

ターン順:「引く」でカードを引きます。完全乱数でランダムに出ます。6枚引いたら「ラウンド再構築」で山札がシャッフルされます。
ここで「次を引く」を押しても、シャッフル後の1枚目が表示されます。
「直前カードを山札上に戻す」は、カードをめくって確認してから戻す時に対応しています。

 

パワーカード:パワーカードが出現したら、「初期パワー」を設定してから「追加」します。その後、ネメシスのターン順カードが出るたびにパワーが1ずつ減ります。

ゼロになるとメッセージが出ます。

 

ミニオン:
ミニオンが出現したら追加します。
追加後に体力を設定したり、名前を入れたりできます。

捨て札:
各ターンのターン順カードが出た履歴を示します。

ログ:
行動の履歴です。
「どこまでやったっけ?」を少し防ぎます。
普段は閉じていますので、
必要に応じて開いて確認できます。

 

(PR)「体力はダイスで」という方へ↓

ChatGPTへのプロンプトは?

以下のプロンプトで、大体同じものができます。

ChatGPTにコピペして調整

React + TypeScript + Tailwind で、Aeon’s End 用の「非公式コンパニオンアプリ」を 1ファイルで作成してください。ChatGPT の Canvas の React 版でそのまま動く完成コードを、最初から最後まで全文出力してください。

【出力条件】

  • コンポーネント名は AeonsEndCompanion
  • export default function AeonsEndCompanion() で出力
  • 1ファイル完結
  • React hooks は useState, useEffect を使う
  • TypeScript の型を明示する
  • Tailwind で実装する
  • 外部ライブラリは使わない
  • localStorage に保存・復元する
  • 保存データが壊れていても初期状態にフォールバックできるようにする
  • 補助関数として uid, clamp, shuffle を作る
  • Canvas の React 版でそのまま動くことを優先する

【アプリ概要】
Aeon’s End のプレイ補助アプリです。
「設定画面」と「プレイ画面」を分けて、以下の情報を管理できるようにしてください。

  • プレイヤー
  • ネメシス
  • ターン順カード
  • パワーカード
  • ミニオン
  • ログ

【設定画面の要件】

  1. プレイヤー人数を 1〜4 人で設定できる
  2. 各プレイヤーの初期HPを設定できる
  3. 各プレイヤーのチャージ最大値を設定できる
  4. ネメシスHPを設定できる
  5. ネメシストークンを設定できる
  6. ターン順カードの枚数をカードごとに設定できる
  7. 設定対象のカードは P1, P2, P3, P4, N, W
  8. 「ゲーム開始」ボタンでプレイ画面へ移動
  9. 「初期化」ボタンあり

【プレイ画面の要件】

1.プレイヤー表示

  • 1人1行の圧縮レイアウト
  • 例: P1 | HP 10 [-][+] | Ch 3/4 [-][+] | READY | Reset
  • HPとChは小型Stepperで増減
  • Stepperは h-8 w-8 程度の小さめ正方形ボタン
  • プレイヤーごとに Reset ボタンがあり、チャージを0にできる
  • 全員Chリセットボタンは不要
  • チャージが最大値以上なら READY 表示

2.ネメシス表示

  • ネメシスHPを小型Stepperで増減
  • ネメシストークンを小型Stepperで増減

3.ターン順カード

  • 山札は設定画面の deckTemplate をシャッフルして開始する
  • プレイ画面では山札の中身は見せない
  • 山札は「残り枚数のみ」表示する
  • 「引く」ボタンで1枚引く
  • 引いたカードは捨て札に移動する
  • 捨て札は表示する
  • 捨て札の各カードを押すと、そのカードを山札の上に戻せる
  • さらに専用ボタンとして「直前を戻す」を用意し、直前に引いたカードを山札の上に戻せる
  • 「再構築」ボタンで山札と捨て札をまとめてシャッフルし直せる

4.パワーカード

  • パワーカード追加前に、初期パワー数を設定できるUIを用意する
  • 例: 初期パワー 2 を指定してから追加
  • 追加後は remainingmax を持つ
  • パワーバーを表示する
  • -+ で remaining を増減できる
  • 廃棄ボタンあり
  • ネメシスカード N を引いた時、先頭のパワーカードの remaining を1減らす
  • パワーカードの remaining が 0 になったら、
    ⚠️ パワーカードのパワーがゼロになりました
    という警告メッセージを表示する
  • その警告メッセージは × ボタンで閉じられる
  • 警告はパワーカード欄の上部に表示する

5.ミニオン

  • ミニオンを追加できる
  • 初期HPは 6
  • 名前は後から入力・編集できる
  • HPは小型Stepperで増減
  • 削除ボタンあり

6.ログ

  • 操作ログを保存する
  • ログ欄は折りたたみ式
  • 「開く / 閉じる」で表示切替
  • 直近100件程度を保持する
  • 例として以下の操作はログに残す
  • ゲーム開始
  • ターン順カードを引いた
  • 山札再構築
  • 直前カードを戻した
  • パワーカード追加
  • パワーカード廃棄
  • ミニオン追加
  • ミニオン削除
  • プレイヤーのチャージリセット

7.画面遷移

  • プレイ画面から「設定へ戻る」で設定画面に戻れる
  • 「全初期化」で全データを初期状態に戻せる

【UI要件】

  • 全体をコンパクトにする
  • カード風UIだが余白は少なめ
  • rounded-xl, p-2, text-xs, text-sm を中心に使う
  • プレイヤー欄は縦長にならないよう最優先で圧縮
  • ログは初期状態で閉じておく
  • スマホでも押しやすいサイズ感にする
  • 設定画面では number input を使ってよい
  • プレイ画面では基本的に直接入力ではなくボタン操作中心にする

【免責事項】
画面上部に、次の文章を省略せずそのまま表示してください。
「このアプリは非公式の補助ツールです。公式製品・公式サポートではありません。ゲームの正式なルール、裁定、カード効果の確認は、必ず公式ルールブックや公式情報をご参照ください。本アプリの内容の正確性、完全性、継続的な提供は保証されません。」

【実装上の注意】

  • 型は Player, Nemesis, PowerCard, Minion, AppState などを定義する
  • phase"setup" | "play" で持つ
  • localStorageキーも定義する
  • できるだけシンプルで読みやすい実装にする
  • TypeScript エラーが出にくいようにする
  • 説明は最小限にして、完成コードを全文出力する

使いにくいところはChatGPTに調整をお願いしましょう。

うまく開かない場合はReact版で開いてもらうようにしましょう。

だいたいこんな感じで作りました。作る時の参考にどうぞ。
レイアウトが変わることや、指示の抜けは出るかと思うので、
ここも調節が必要です。

※「ターン順カードを見て順番を入れ替える」機能は実装していません。

 

「アナログさが良いのに」という方へ

アナログ感が失われる、と感じる方もおられると思います。

確かにそうだと思います。

みんなでワイワイやるときは、アプリは無くてもいいかもしれません。

 

「気にならないよ」という方へ

使ってみると、結構楽ですよ。いろんなトークンが不要になります。
ターン順カードのログが地味によいです。

 

 (PR)プレイを円滑にするグッズ↓

「セキュリティは大丈夫?」という方へ

セキュリティ上でどうしても心配な方もいらっしゃると思います。
自作することもできます。
ChatGPTへのプロンプトも載せましたので参考になればと思います。

(レイアウトなどは変わってしまう可能性があります。)

 

(PR)ゲームしたいけど、集まる場所がないときは↓

1時間から借りられるレンタルスペース【スペースマーケット】

【非公式】ターン順、パワー、体力管理アプリを紹介

最後に、実際のアプリのリンクを紹介します。

使う時の注意点:ChatGPTのアプリ版ではおそらく動きません。ブラウザ版で使用しましょう。

免責事項

このコードは Aeon’s End 用の非公式コンパニオンアプリのサンプル実装です。

OpenAI によって自動生成・整理された参考用コードであり、公式製品・公式ルール実装・公式サポートを提供するものではありません。

ゲームルール、カード効果、キャンペーン進行、拡張セット固有の挙動については、必ず公式ルールブックや正規の情報源を確認してください。

このコードの利用・改変・再配布・運用は利用者自身の責任で行ってください。

保存データの破損、表示不整合、ブラウザ依存の動作差異、将来的な互換性問題が発生する可能性があります。

本コードを利用したことにより生じたいかなる損害についても、作成者および提供者は責任を負いません。

 

Aeon’s End 用補助アプリ

ChatGPT上で使える、Aeon’s End の進行補助アプリです。
ターン順カードの山札と捨て札、パワーカード、ログ管理などをまとめて扱えます。

アプリを開く

非公式の補助ツールです。正式なルール確認は公式資料をご確認ください。
ChatGPTへのサインインが必要な場合があります。

ゲーム中のプレイヤーやミニオンのトークン管理にお困りの方はどうぞ!
(免責事項は読んでね) 

 

ではまたっ!

コメント