ionicを試す １９日目 ゲームブックとionic
だいぶ手間取りましたが、セーブ・コンティニュー・統計情報等を除き、HTML版ゲームブックの再現成功しました。
ひとしきり、コーディングして思った点は３つあります。
・ionic用のデータはHTML表示を中心に考えると作業が楽
・その意味でゲームブックはionicに適した分野である。
・ただしHTML絡みの部分は、可能な限り、ionic提供の機能に頼るべき
今回のゲームブックアプリは、ブック全体およびページグループ毎の設定を記述した"Book.json"と各ページの記述をしている"Page.json"の2つのデータを使っています。
ブック全体の情報は、タイトルや著者、その他の情報です。
ページグループは、ボタンや各種テキストの表示を初期値として決めておくデータです。
複数視点のゲームブックなどでは使えるかもと思っていますが、新しいシナリオ書くところまで手が伸ばせていません。
各ページのデータは、ページをキーとして、ページのタイプと各種データが記載されています。
ページのタイプは
・'Select'：選択肢を選んで次のページを決める
・'Judgement'：サイコロを振り、基準値との大小比較で次のページが決まる
・'Multiple'：サイコロの出目により、それぞれ次のページが決まる
・'Attack'：”敵”と戦い、その勝敗により次のページが決まる
・'Flagcheck'：所持しているフラグの有無により次のページが決まる
・'Statuscheck'：HP、AP、GPの値と基準値を比較して次のページが決まる
ですので、HTMLの方には各ページタイプごとの領域を設け、その表示・非表示を"Type"で制御すれば良いので、極論を言えば指定ページのデータを読み込むだけでゲームブックっぽいナニカは出来る訳です。
この辺りはionicとAngularの機能に大変助けられました。
ただ逆に、例えば戦闘時の勝敗結果により背景色を独自コードで変えようとすると、多分ハマります。
少なくとも私はだいぶハマりましたが、『可能な限り、ionic提供の機能に頼るべき』と言うのがおそらく正解なんでしょう。
上記の例で言えば、ionicが用意している"ion-modal"コンポーネントを勝ち負け(あるいは判定成功・失敗)ごとに2種類用意しました。
ion-modal
https://ionicframework.com/docs/ja/api/modal
単純な基本の例
------------------------------------------
<!-- Default -->
<ion-modal [isOpen]="true">
<ng-template>
<ion-content>Modal Content</ion-content>
</ng-template>
</ion-modal>
------------------------------------------
※注意点
上記の例ですと、バックのどこかをクリックするとモーダル画面が閉じます。
この場合は、モーダル画面上のボタンクリック時のみ、次のページに移行したいので、
' backdropDismiss="false"'と言うオプションをつける必要があります。
------------------------------------------
<ion-modal [isOpen]="true" backdropDismiss="false">
------------------------------------------
次回からは、ゲームブックの大まかな処理の内容について説明していきたいと思います。
それが終わればAndroidStudioのインストールと実機でのテストの予定です。
