マップの表示と移動範囲の表示アルゴリズムの実装ができてきた。
C++の頃はinterafaceなんてなかったから基本はクラスだけだったけど
TypeScriptだとinterafaceに加えてtypeもあるし
何をどう使ってどうすみ分ければいいのかというのを混乱しながらも
手探りで進めている。
開発環境
Windows 10
Node.js v24.18.0.
vite ^8.1.1
その他ツール
Aseprite(ドット絵編集ソフト)
Tiled(マップデータ作成ソフト)
フォルダ構成
FE-modoki-project
┣ Aseprite ... ドット絵
┣ Tiled ... マップデータ
┣ doc ... ドキュメント(主に開発メモ)
┗ app ... アプリケーション開発環境
ドット絵はフリー素材をお借りしつつ、ちょっと足りないモノや加工をAsepriteで行っている。
Asepriteで作成、加工したマップチップテクスチャを使って
Tiledでマップデータを作成し、そのデータをTypeScriptで読み込んで表示という流れ。
Asepriteでテクスチャ編集
Tiledでマップ作成
ブラウザで表示
開発環境のフォルダ構成
ここら辺は迷いつつ右往左往しながらやっている。
app/data
ここにはマスターデータっぽいやつをcsvで定義したただのデータを置いている。
app/scripts
ここは実行前に動かすscript系の処理を置いておくばしょ
AsepriteやTiledで作成した外部リソースをAPPフォルダの所定位置にコピーしたり
app/dataにある各種csvをtsで読み込めるjson形式のデータに変換したり
必要な型ファイルを自動生成したりしている。
src
ここがメインのソースコード置き場
src/assets
ここには画像だったり、*.jsonだったり静的なデータが置いてある
app/script/*.tsを実行するとだいたいここにデータが作られるという寸法だ
src/common
プロジェクトにかかわらず共通で使えそうなhelperだったり
src/defs
プロジェクト全体から見える位置に置きたい定数や型定義はここに置くようにしている
src/logic
いわゆるビジネスロジックとかドメインとか言われる層なのかな？
SE界隈のルールはよくわからないが、ただのロジックが置かれる
ほぼここに色んな処理が集約されることになるだろう
src/resrouces
ここはsrc/assetsにあるjsonファイルを扱う処理が集約される
生jsonだと扱いにくいので、jsonを読み込んで扱いやすい形に加工したり
リソースから値を導出する関数からの読み取り、導出に関する処理のみを置く
src/views
見た目の制御、フロント、dom操作をする処理は全部ここ
大まかな方針
実行前:
src/scriptsを動かすことで外部で作成したリソースをプロジェクトに取り込む
だいたいsrc/assetsにデータが作られる
実行時:
1.src/resourcesでsrc/assets/にあるアセット群を読み込む
2.読み込んだリソース(データ)を元にsrc/logicで演算を行う
3.演算された結果のデータをもとにsrc/viewsが表示をする
ざっくりとした思想はこんな感じである
resrouces.load(assets)
↓
logic.calculate(resrouces)
↓
views.draw(logic.resultData)
ユーザー操作などのイベント検知はviewsで行われるが
例えばクリックされたときの処理などはlogic側が持っている
views.addClickEvent(logic.onClick);
みたいな感じでviewsにlogicがコールバックを渡しておくようなイメージ
Reactは使ってないのでイベントがあるたびにviews.update()的なことを
明示的にやる必要はあるが、俺はその方がわかりやすいのでヨシとする
いまのところイベントドリブンでこと足りているが
キャラクターを動かしたり、戦闘アニメーションを流したりなどするようになったとき
毎フレームの更新処理をどうやろうかということはまだ決めていない
timerでやるのか
requestAnimationFrameでやるのか
cssアニメーションでやるのか
正直timerはあんまり使いたくないので
requestAnimationFrameかcssアニメーションのどちらかで考えている
案外cssアニメーションでも結構やれるんじゃないかという想像をしている。