ゲーム（仮称）
とりあえず...
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から情報収集するページ）作る
冒険掲示板
図書館
簡素な分、フレーバーテキストは少し頑張る