表示調整
閉じる
挿絵表示切替ボタン
▼配色
▼行間
▼文字サイズ
▼メニューバー
×閉じる

ブックマークに追加しました

設定
0/400
設定を保存しました
エラーが発生しました
※文字以内
ブックマークを解除しました。

エラーが発生しました。

エラーの原因がわからない場合はヘルプセンターをご確認ください。

ブックマーク機能を使うにはログインしてください。
35/61

ionicを試す 18日目 画像やデータ、(自作)外部関数の保管場所

さてだいぶ回り道をした気もしますが、ionicとAngular、JavaScript(TypeScript)に慣れたと思えば必要な時間だったと思えます。


もちろん、まだまだ奥が深い技術ではありますが、目標としているゲームブックアプリを作るのに必要最低限な技術は集まったと言えそうです。


目標とする筆者自作のJavaScript版ゲームブック

https://aticlab.com/app/gamebook/book.html


初めてのAndroidアプリ制作としてGooglePlay登録するところまで行ったアプリ

https://play.google.com/store/apps/details?id=start.gamebook.sample0000


あと具体的に必要な技法は以下の部分でしょうか。


・サイコロ等の画像を保存利用する方法

・ゲームブックのページデータなどを別ファイルで保存する方法

・今後別なアプリでも使えるような関数を別ファイルで利用する方法

・コンティニューやセーブデータの実装方法


最後のコンティニューやセーブデータについては、(まったく試していないので)後回しにする予定です。


さて画像データですが、プロジェクトフォルダ内の下記の場所に置けば、問題なく利用できます。

(Androidアプリに変換しても問題なし)


"src\assets"


特に理由が無ければ上記フォルダに入れればよいと思います。


画像の利用については、"src\app\home\home.page.html"で以下のように扱いました。


---------------------------------------------------------------

<img src="../../assets/cube1.gif" class="imgDice" *ngIf="Dice1Value=='1'">

<img src="../../assets/cube2.gif" class="imgDice" *ngIf="Dice1Value=='2'">

<img src="../../assets/cube3.gif" class="imgDice" *ngIf="Dice1Value=='3'">

---------------------------------------------------------------


あらかじめ必要な数のサイコロ画像を用意して、サイコロの値"Dice1Value"により表示・非表示をコントロールしました。


最初から確実に読み込ませておくには、[hidden]=trueの方法が良いかも?


次にゲームブックに使うページデータや乱数用関数などの保管場所です。


上記のアプリでは以下の2つのフォルダを新規に作って保管場所としましたが、どちらも問題ないようです。


"src\app\home\MyWork"

"src\app\MyData"


なんとなく画像データも行けそうな気がしますが、わざわざ試す必要はないかもしれませんね。


次回からゲームブックの作成に取り掛かります。


評価をするにはログインしてください。
ブックマークに追加
ブックマーク機能を使うにはログインしてください。
― 新着の感想 ―
このエピソードに感想はまだ書かれていません。
感想一覧
+注意+

特に記載なき場合、掲載されている作品はすべてフィクションであり実在の人物・団体等とは一切関係ありません。
特に記載なき場合、掲載されている作品の著作権は作者にあります(一部作品除く)。
作者以外の方による作品の引用を超える無断転載は禁止しており、行った場合、著作権法の違反となります。

この作品はリンクフリーです。ご自由にリンク(紹介)してください。
この作品はスマートフォン対応です。スマートフォンかパソコンかを自動で判別し、適切なページを表示します。

↑ページトップへ