ゲーム（仮称）

とりあえず...

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

所持金

所持してるアイテムとか、その数とか(別テーブル)

ステータス系

別テーブルだけど。

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

stateを直接変更するためのメソッド。常に引数としてstateを持つのが基本。

actions

非同期処理が使える。

APIを呼んで処理が終わった後にmutationsを呼んで処理を行なったりできる

同じ名前で定義することで、どのmutationsを呼ぶかが明確になるメリットがある。

app.js

App.vue

computedで現在のstate.isInBattleを取得

...mapState(['isInBattle'])// Vuex store.jsの状態を取得

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を呼び出すことができるようにするメソッド

テキスト部分

敵表示部分

味方表示・味方コマンド選択部分みたいなイメージ。

→まずはタイトル画面から遷移できる、メニュー画面を作る

これが作れたら他の部分にたくさん流用できる知識がつくはず。

Menu.vueを作って、その中の子要素にadventure, shop, skillを作る。

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');

mountedはDOMに依存する処理を書く時に使う。

todo

戦闘シーンの実装を考える

本編に来た感がある

戦闘画面

Battle.vue(モンスターの画像、味方のステータスとかが並んでいる)

https://scrapbox.io/files/66d324fa7cdd23001c42dd45.jpeg

上記なら、なんとか実装のイメージはできる

この辺の表示をステータスによって変えるわけだ

敵が現れたという戦闘開始ステータス（クリックでコマンドに遷移）

コマンド選択ステータス

1人目選択ステータス

コマンドを指定した後、敵を選択するステータスに遷移させる

2人目選択ステータス

3人目選択ステータス（確定する場合は、そこで確定の処理を入れる）

実行ステータス

選択情報を配列とかjsonで渡して実行処理をする。

敵の数 + 自分たちの数の分だけ表示を出す。

? この辺りは考える必要がありそう。どうやって順々に結果を出すのかとか。

裏で処理は終えて、その結果とかを配列にまとめてjsに渡す→クリックで1件ずつ表示させていくとかでいいかも。

ここもステータス処理なのか...?

この時点で敵を倒していなければ、コマンド選択ステータスに戻す。

敵を倒したという戦闘終了ステータス。必要なら結果リザルトも。

とりあえず

簡単にサンプルを作る方が手っ取り早い

レイアウト作成

ステータス整理

コマンドについて

data()で定義しておき、その値を格納させるのが楽かも。

通信タイミング

Battle.vueが映った時、

ユーザーに紐づくパーティーの情報

パーティー

フィールドに基づく敵の情報を取得する

マイグレーション時に考慮する要素とか

テーブルを用意する

中間テーブルは一旦考慮しない

$ php artisan make:migration create_rpg_parties_table

$ php artisan make:migration create_rpg_roles_table

$ php artisan make:migration create_rpg_enemies_table

$ php artisan make:migration create_rpg_skills_table

中間テーブル作る

table:中間(イメージ)

id rpg_party_id rpg_skill_id skill_level

1 2 5 2

2 2 6 2

中間テーブルの命名規則はまちまち。規則に従うというより、以下に中間テーブルであることがすぐわかるかが大事そう。なので、

$ php artisan make:migration create_rpg_party_learned_skills_table

モデル

$ php artisan make:model /Game/Rpg/Party

$ php artisan make:model /Game/Rpg/Role

$ php artisan make:model /Game/Rpg/Enemy

$ php artisan make:model /Game/Rpg/Skill

$ php artisan make:model /Game/Rpg/PartyLearnedSkill

戦闘画面

最初の画面（タイトル・あらすじ・キャラクリ画面）

メニュー画面色々作る

リファクタリング

リレーションの命名規則がめちゃくちゃだ

スネークケース・小文字で統一する。

なんかmain反映後、api部分がエラーになった

エラーログも出ない。

gitの問題？リネームだけしてpushしたら解消した。

ひと段落した

なんか他にも戦闘部分色々バグっとるな

DB関連かなー

状態異常の実装とかにまとめて直す

スキル振り分け画面・スキルツリー・自由パラメータ|スキルポイント関連実装

todo

街に帰ってきた時の画面のレイアウトを調整する

サブメニューに飛ぶと左のバーが広がったりする

ログインしてなかったらリダイレクトさせる感じで。結構良いかも。

store.jsとかのコードをリファクタリングできないだろうか？

セーブデータ作る時に、アイテムとかを持たせてあげる？

boot creatingで

コントローラをシチュエーション別に分けたほうがいいかも

攻撃バランスの調整

現状物理攻撃と防御の関係が極端すぎる。HPの伸びを高くして、防御の価値を下げたい

魔導士とかがすぐ死にすぎである

敵のスキル処理実装

ボスを固定の動きにする

やり込むときに運要素にならなくなるのでいいと思う。あと意図的に難しくしやすい。

モンスター図鑑を作る

セーブデータごとに遭遇した敵を保管するテーブルを作ればできる

属性攻撃の実装

状態異常の実装(いるのか？）

あった方が絶対幅が広がる！が...

武器ドロップ、装備の実装

npcのページ作るとか

ショップの仕組みを考える

どういう画面遷移にするかだけ決めとかないと、丁寧に作れない

クリア時とステージ解放フラグの設定

簡素な分、フレーバーテキストは少し頑張る

冒険掲示板