ゲーム（仮称）
ーーーーーーーーーーーーーーーーーーーーーーーーー
25.1.27 忘れた時
おろかにもサボって色々忘れた時に見返す。
実装するもの忘れたとき
Vueの文法忘れた時とか
ーーーーーーーーーーーーーーーーーーーーーーーーー
vue-routerなどの知識
Laravel側
ベースの画面までのMVCを作る。
$ php artisan make:controller /Game/Rpg/IndexController
購入できるアイテムのマイグレーションファイルを作る。
$ php artisan make:migration create_rpg_items_table
? モデルも一緒に作りたいので別のマイグレーションファイル作る時に検証しとく。
アイテムの詳細(一旦)
id
name
price
description
マイグレーション
$ php artisan migrate
$ php artisan migrate:rollback --step=1
モデル作成
$ php artisan make:model /Game/Rpg/Item
ショップ処理を軽く作りたいので、セーブデータDBを作る
id
user_id
所持金
一旦汎用的なmoneyにしておこうか
未振り分けのスキルポイントとか unspent_skill_points
所持してるアイテムとか、その数とか(別テーブル)
ステータス系
別テーブルだけど。
health, max_health, inventory(所持アイテムリスト), equipped_item(装備アイテム）,abillities(スキル),
プレイ時間play_time,
難易度 difficulty
$ php artisan make:migration create_rpg_savedatas_table
モデルも一緒に作ろう
正確には、モデル作成と一緒にマイグレーションファイルを作ることができる
$ php artisan make:model /Game/Rpg/SaveData -m
これだとテーブル名など指定はできない。じゃあモデルと個別で作った方が良さそうだ。
モデル作成
$ php artisan make:model /Game/Rpg/SaveData
戦闘のイメージを考える
冒険へ行く→ステージ選択→戦闘画面へ
ステージ画面作る
$ php artisan make:migration create_rpg_fields_table
status側にステージ解放フラグがあってもいいかも。
$ php artisan make:model /Game/Rpg/Field
? 状態を管理する必要がある。
vuexで実現ができる。
今の画面構成
メニュー画面
フィールド選択
ショップ
スキル振り
バトル画面 みたいな感じ。だいたい合ってるか？
タイトル画面も作ったら結構ページ全体のイメージが掴めそう。作ってみよう
冒険→戦闘画面遷移への現状の流れのイメージ
store.js
Vuexストアを作成し、状態を定義する
mutationsとactionsの関係
同じメソッド名を使うことが多い。
mutations
stateを直接変更するためのメソッド。常に引数としてstateを持つのが基本。
actions
mutationsをコミット（呼び出し）するためのメソッド
非同期処理が使える。
APIを呼んで処理が終わった後にmutationsを呼んで処理を行なったりできる
同じ名前で定義することで、どのmutationsを呼ぶかが明確になるメリットがある。
app.js
定義したvuexストアをアプリ全体で使えるようにインジェクトする(app.use(store))
App.vue
computedで現在のstate.isInBattleを取得
...mapState(['isInBattle'])// Vuex store.jsの状態を取得
これによってコンポーネント内でthis.isInBattleとしてstore.jsのstate.isInBattleにアクセスできる
これで戦闘中かどうかをv-ifで判定できるようになった。
Battle.vue
コンポーネントからisInBattleの状態を操作している
code:js
export default {
created() {
// app.useで"store"として定義したvuexのactionsをdispatchで呼んでいる
this.$store.dispatch('startBattle');
},
methods: {
endBattle() {
// 同様に"store"や"router"として定義したメソッドを呼んでいる
this.$store.dispatch('endBattle');
this.$router.push('/game/rpg/shop');
}
}
}
タイトル画面を作ってみる
store.jsで定義
stateとしてタイトル画面であること
mutationsとしてタイトル画面であることを表すメソッド
actionsでコンポーネント側からmutationsを呼び出すことができるようにするメソッド
currentScreenの構成を考える
/game/rpg:タイトル
/game/rpg/menu: メニュー画面
/game/rpg/menu/adventure: フィールド選択
/game/rpg/menu/shop: ショップ
/game/rpg/menu/skill: スキル振りなど、ステータス画面
/game/rpg/battle/:field_id: 戦闘画面
テキスト部分
敵表示部分
味方表示・味方コマンド選択部分みたいなイメージ。
→まずはタイトル画面から遷移できる、メニュー画面を作る
これが作れたら他の部分にたくさん流用できる知識がつくはず。
Menu.vueを作って、その中の子要素にadventure, shop, skillを作る。
これはルーティングでchildrenを定義することで実現ができる。
code:js
{
path: '/game/rpg/menu',
name: 'game.rpg.menu',
component: Menu,
children: [
{
path: 'adventure',
component: Adventure
},
{
path: 'shop',
component: Shop
},
{
path: 'Skill',
component: Skill
}
]
},
終わったら、各コンポーネントでstateを変える処理を書いていく。
this.$store.dispatch('setScreen', 'menu');
created()とmounted()の違い
mountedはDOMに依存する処理を書く時に使う。
vuexの操作はDOMに依存しないので、ステータス変更などはcreated()に書けば良い。
戦闘画面
最初の画面（タイトル・あらすじ・キャラクリ画面）
メニュー画面色々作る
スキルについて
リファクタリング
SaveDataモデルをSavedataモデルにしたい
リレーションの命名規則がめちゃくちゃだ
SaveDataHasItemだのItemだのuserだのbattle_stateだの...
スネークケース・小文字で統一する。
なんかmain反映後、api部分がエラーになった
エラーログも出ない。
SaveDataモデルをSavedataとリネームしてpushしたが反映されていなかった。
gitの問題？リネームだけしてpushしたら解消した。
ひと段落した
なんか他にも戦闘部分色々バグっとるな
DB関連かなー
状態異常の実装とかにまとめて直す
スキル振り分け画面・スキルツリー・自由パラメータ|スキルポイント関連実装
store.jsとかのコードをリファクタリングできないだろうか？
store.jsをページ別に分けたい
階層構造にすれば良さそう。
した
Vueにいちいち書いているimport jqueryとかをまとめたい
これはjsでは当たり前の書き方らしい。中規模になると設計を考える必要があるが、小規模なら構わない
Vue側で付与されているthisを要点でしか使わないようにする
例えばhtmlのコンポーネントでは{{ }}で括れば書かなくて良いので書かない
基本的に<template>側ではthisは書かないらしい。
消した！
街に帰ってきた時の画面のレイアウトを調整する
サブメニューに飛ぶと左のバーが広がったりする
調整した
todo
Menu.vueなどに、ログインチェックのAPI処理をcreated()時などに流す
ログインしてなかったらリダイレクトさせる感じで。結構良いかも。
セーブデータ作る時に、アイテムとかを持たせてあげる？
boot creatingで
コントローラをシチュエーション別に分けたほうがいいかも
rpg/api/menucontrollerみたいな感じで。
モンスター図鑑を作る
セーブデータごとに遭遇した敵を保管するテーブルを作ればできる
属性攻撃の実装
状態異常の実装(いるのか？）
あった方が絶対幅が広がる！が...
武器ドロップ、装備の実装
ショップの仕組みを考える
どういう画面遷移にするかだけ決めとかないと、丁寧に作れない
広場（npcから情報収集するページ）作る
冒険掲示板
図書館
簡素な分、フレーバーテキストは少し頑張る
25.4.5 これやれればベータ版リリースとして扱えそうなこと
キャラ選択画面のステータスの説明を出す
キャラのイラスト・スキル用意
（敵がスキルを使う）
（ボスの行動を決める）
（売る画面の実装）
くらいか！
経験値テーブルについて
序盤はすぐ上がるようにして（楽しんでもらう）
中盤は育ててる感を出し、終盤は重くするのがいいらしい。
25.4.24 URLカードを作る
Twitterとかで宣伝した時に、かなり弱めである
OGタグについて
25.5.12
デモ版を実装してみて感じたこと
クリックが疲れる
カーソル移動も大変。キーボード操作をjsで実現できればいいけどブラウザゲームって都合上厳しいかもな〜
敵が単体の時は自動選択して欲しい ✅
基本的に、最初の3人が選ばれることが多い ✅
つまり、おすすめのパーティがあるなら最初の3人にしておけば良い
今はスト、メディ、パラなのでいい感じかも
ステータスポイント、スキルポイントの再振り分けシステム実装✅
何回も遊んでもらえるような形にしたけど、やっぱり基本1度しか遊ばない
いろんなパーティ編成もあるが、相当好きでもない限り、1プレイだけ
なので、スキルや自由ステータスの再振り分けはできるようにしてやる
1フィールドが長くて大変 🚩
草原が1-6までは長いので、テキパキ進めるようにする
3ステージとか、2ステージとかにして小さく広げていく
そこでクリアしたら図書館に本が増えたりアイテム増やしたりしてご褒美を増やして進めてもらえるようにする
長すぎると初見の人が折れちゃう
あと敵をたくさん考えるのも結構大変...
ステータス振り分けの時、全部ボタンがあってもいい✅
これよさそう。追加した。
25.5.15 これやればリリースできるだろうという実装一覧
必須
敵のスキル処理 ✅
ボスの行動順を決定させる処理 ✅
中心広場の実装 ✅
ステージクリアしたら開放するものを入れて、ご褒美にする(その処理が大変だ)
リフレッシュ場（ポイント再振り分け施設）
図書館（ストーリーを仄めかす）⭐
冒険者掲示板
バイト（1クリックで1G稼げるとかそういうしょうもないの）
アイテム ✅
最大所持数を10個までとかにして、制限をつけたい ✅
売る機能 ✅
To Do
LUCに意味を持たせる✅
効果一覧
ショップで売っているものが安くなる
購入と売却処理は、アイテムの値段ではなくJSから渡された値で判断している
なので、jsの表示値を調整するだけで実現ができる。
ダメージにいくつかばらつきが出るようになる
そうした ✅
会心の一撃が出やすくなるとか
そうした ✅
? TODO: 会心の一撃を出した時、クリティカル！とログに出す。 ✅
? TODO: アイテムのダメージ計算時にもLUCが考慮されてしまうので、調整する ✅
一旦このままでいいかな？
敵の攻撃を避けるとか
ややこしいので一旦無しかな（強くなりすぎる気がする）
フィールドの小分け化✅
サクサククリアできるようにする
敵のIDを定数にした方が絶対に良さそうだ〜
した
ついでにFieldについてもEnumにした
enemies.apper_field_idが不要だから消す
$ php artisan make:migration drop_appear_field_id_from_rpg_enemies_table
小分けにして、売られるアイテムや図書館の内容も小分けにしていく
フィールドによって背景が変わるようにする
$ php artisan make:migration add_column_to_rpg_fields_table
すぐできた。
とりあえず暇な時にやれること
敵
イラスト
ステータス
所持スキル
味方
職業スキル
code:txt
格闘家
トランスフォーム
ラピットフィスト
タイタンブレイク (最遅行動)
治療師
クイックリジェネ
クリアリブート (むずそう)
リザレクション
アドバンスドライフ (むずそう)
重騎士
カースエッジ
ブラッディムーン
ガードアップ（全体の）
魔導師
マジカルスマッシュ
（くらいかな）
弓馭者
バリスタシュート
スコルピオンアロー
ケルベロスフォース
理術師
パワーエント
フォースメント
プロテクション
マジックエンハンス
スピーダー
グッドフォーチュン
フィールド
背景イラスト
敵プリセット・レベルバランス調整
砂漠・火山・海岸などのプリセットの分け方
魔法に弱い・物理に弱い・どちらもぼちぼちという形にしよう
砂漠作った。クリアレベル: Lv7程度 (重魔狩)
海岸作った。これもLv6-7でクリア
火山作った 多分おんなじくらい
氷雪・湿霧・常夜もそれで良い
氷雪: 物理
執務: 魔法
常夜: どちらも
耕作地・城下町はバランス
古城もバランス
茫洋は特殊。
中央広場
図書館の書籍用意する
? マジカルスマッシュの書籍調整する
ボスの表示を大きくしたい✅
画面サイズにずれが生じるので、調整する
720pxより大きくすると、backgroundImageの画像などの変わってきてしまうが、なんとかなった
特殊スキルの実装✅
リザレクション
まず、現時点でも戦闘不能の味方は選択できる（ありがたい）
is_target_enemyで敵味方を選択するかは決まるので、ここもfalseとすることで解決
アドバンスドライフ
HPのバフはどう設定しようかな？
通常のバフは、actualStatusValueで計算をしている
今からやるのは大変かも。時間ができて、作れそうなら作ろう。
ラピッドフィスト
できた
タイタンブレイク
is_slowフラグを作る
$ php artisan make:migration add_column_to_rpg_skills_table
できた
バリスタシュート
これもslowかな。
戦闘中にバフスキルの詳細が見えるようにする✅
クリアしたステージごとのデータベース情報をseederにしておきたい
テストプレイが絶対楽になるやろなと言う感じ
ただ実装が大変っぽいので、なるべくレベルごとのステータスをメモしていくことにしよう
ストーリーを考える✅
ステージクリアフラグは必要。それに準じて書籍を開放していく
$ php artisan make:migration add_columns_to_rpg_savedatas_table
と思ったけど、クリアした情報はrpg_savedata_cleared_fieldsで確認できる。
なら、Library側にクリアしなければならないフィールドのIDを格納するカラムを作れば良い
$ php artisan make:migration add_columns_to_rpg_libraries_table
これで作っていく
でかい敵を作る✅
$ php artisan make:migration add_column_to_rpg_enemies_table
本の既読機能を作る✅
$ php artisan make:migration create_rpg_savedata_read_libraries
$ php artisan make:model /Game/Rpg/SavedataReadLibrary
Adventure.vueの仕様チェック
<tr v-for="field in fieldList" :class="{ 'cleared-row': field.is_cleared }" @click="showConfirmModal(field)">というように、フラグで付与classを管理している
同じように管理
セーブデータ削除時の処理も書く。✅
? jobがバグってる気がするので直す(Grade部分かな。） ✅
耕作地、茫洋の地の表示条件を考える ✅
耕作地 ✅
まあ今まで通り途中で出して、難しくするといい（こりゃ現状じゃクリアできん！と）
茫洋の地 ✅
古城クリア && 耕作地クリア && 書籍を読んだら、という感じかな。
required_clears = 11とした(全てクリアしても開放されない)
ただし、
その書籍は耕作地をクリアすると表示される。
古城をクリアする書籍を読む。
という条件で開くようにしている
もうちょいわかりやすくやりたい
URLを指定して、解放していないフィールドにアクセスできないようにする ✅
こういうのを制御する
メニューの一番最初のどこに向かうか？のフォントがでかい ✅
戦闘中に次のレベルアップEXPを見れた方がいい ✅
バフ画面とかでかな。
→結構調整が大変そうなので、以下のログのところに挟むとよさそう
敵を倒した！10Gとそれぞれ経験値5を獲得。
本を読む時、モーダルの外をクリックしても既読がつくようにしたい ✅
エンディングの実装 ✅
新しいメニューを追加する。「財宝の確認」
フラグで表示の有無をつける
クリアフラグは欲しい
$ php artisan make:migration add_column_to_rpg_savedatas_table
スキルを増やそう
敵スキルの追加について
Definition追加
SkillTableSeeder追加
EnemyLeanedSkillTableSeeder追加
Skill.php追加
BattlesState.php追加(特殊なら)
アイテムを増やそう
敵の詳細を書いていこう
バグ見つけた✅
code:txt
------------------------------------------------【ターン終了】------
スコーピオの攻撃！致命の一撃！パラは30のダメージを受けた！
リザードの攻撃！ストは24のダメージを受けた！
ロックリザードの攻撃！ストは50のダメージを受けた！
パラは代償として、114の自傷ダメージを受けた！
ロックリザードに150のダメージ！
パラのカースエッジ！自身の生命力を捧げ、その刃を奮わせる！
パラは気力を取り戻し、戦線に復帰した！
メディはリザレクションを唱えた！聖なる力が味方を包み込む...
ストのステータスが向上！
ストのトランスフォーム！守りを捨て、全ての力を解放する！
------------------------------------------------【ターン終了】-------
スコーピオの攻撃！致命の一撃！メディは31のダメージを受けた！
リザードの攻撃！ストは6のダメージを受けた！
ロックリザードの攻撃！メディは11のダメージを受けた！
パラは倒れてしまった！
パラは代償として、114の自傷ダメージを受けた！
ロックリザードに146のダメージ！
パラのカースエッジ！自身の生命力を捧げ、その刃を奮わせる！
メディは防御の構えを取った！
ストは防御の構えを取った！
パラが前ターンで、カースエッジを使って倒れた
次のターンでもカースエッジを使っている（リザレクションで生き返った瞬間にカースエッジを撃っている)
行動をリセットされるようにする必要がある
チェック
毎回、行動した処理が残っている
それをコマンド選択で上書きして行動を決定している感じ
リザレクションすると、その行動が残っていて実行される
なので、戦闘ターン終了時に状態をリセットしよう
対応した
code:php
// TODO: 敵も必要な場合(蘇生とかで)、この値が必要かチェックする
Debugbar::debug('コマンドデフォルト設定対応 ------------------------');
敵の蘇生も必要なら、実装する
蘇生アイテムの用意 ✅
結構死んでストレスだと思うし、値段は安くしようかな。
リザレクションと同じ処理。ジャンルはSpecial
できた！
プロローグ味方選択バグ ✅
理術士→弓御者と選ぶと、理術士がもう一回選択できてしまう。
決定ボタンのsetPlayerData()
投げたら直してくれて、すごい...
バグ発見✅
バフ系アイテムの戦闘時の詳細が表示されない
修正。敵側は修正してないので（アイテムを使わないので）、使うようにしたら調整しようね
スキル確認
デバフの対象ステータス、参照ステータスが正しいか
攻撃時に考慮するステータスが正しいか、最後に目視チェックしておくといい。
console.logの調整
本番では出さないようにする。viteの設定できるらしいが。
25.9.1 TODO
どちらでも
インチキの修正
ブラウザで戦闘で開きっぱにしといて別のタブで進める
Lv1の方で逃走すると、Lv1に巻き戻る。
フィールドのイメージボード
世界地図っぽいのを用意しておく（ゲームでも使うなら、図書館に置いておけばいい）
タイトルロゴ(いる？）
メニューの背景※作るなら作る