ガストロの料理画面案を組んでいます【記：あおたく】

こんばんは、あおたくです。

ガストロは戦闘まわりが一段落して後は細かいところを直すだけのところまで来たので、料理画面を組みはじめました。
細部を詰めはじめると無限に時間がかかるので、こういうのは後回しにしたほうがよいことが経験的にわかっています（なお後回しにするとやることを忘れるのであらかじめ何をやるかだけは書き出しておいたほうがよいです）。

さて、料理画面なんですが、figma でプロトタイプを組んであるのでほぼそのまま起こせばいいなと思って試しに組んでみたものの、実際に組んでみると UI としてわかりにくい部分が出てきました。

ガストロの料理システムは、レシピごとに要求する材料が最大四種類あって、各材料ごとに要求数が設定されている、というものを想定しています。
材料の選択欄では要求数と現在の所持数、材料の選択状態をそれぞれわかるようにしなければいけません。もちろん、プレイヤーが項目を選択できる、ということもわかるようになっている必要があります。

これらを踏まえて、プロトタイプを元に起こしたのがこちら。

材料を枠で囲って、ここに材料を入れるということがわかるようにしています。選択済みなら枠と文字を濃く、未選択なら薄く表示して区別できるようにしています。

これでもいいんですが、この画面を組みながら完成品と材料選択はそれぞれ別のウインドウにしたほうがもっとわかりやすいんじゃないかということに気付きました。

ウインドウをわけるとこうなります。

ウインドウをわけたので、材料選択欄はシンプルに表組みにしています。このほうが他の画面との整合性が取れそうですし、実装もウインドウごとに処理を書けるようになって単純化できそうです。

ひとまずはウインドウをわけたほうのレイアウトで組んでみる予定です。が、次は料理画面を組む前にメニュー画面案を組んでいきます。