はじめに
Stardew Valleyで農場を作っていると、
「この建物をここに置いたらどうなるだろう？」
「畑や道を作る前に全体のレイアウトを確認したい」
と思うことがあります。
ゲーム内ですべて配置してから作り直すのは大変なので、ブラウザ上で農場レイアウトを試せるPlannerを作りました。
Stardew Valley Planner
https://stardewvalleyplanner.art/
作りたかったもの
目標は、実際のゲーム内で農場を変更する前に、Web上でレイアウトを試せることです。
例えば、
- Farm Mapを選ぶ
- 建物を配置する
- 作物や装飾を配置する
- 道を作る
- レイアウト全体を確認する
といった作業をブラウザ上で行えるようにしています。
Farm Plannerで難しかったこと
通常のWebページとは違い、Farm Plannerはユーザーが大量のオブジェクトを自由に配置するEditorに近いUIになります。
そのため、
- オブジェクトの配置
- 移動
- 選択
- レイヤー管理
- マップとの位置関係
- 大量のアイテム表示
などを考える必要がありました。
ゲームマップ上へのオブジェクト配置
建物や作物などを単純なHTML要素として表示するだけではなく、ゲームマップ上の座標と対応させる必要があります。
特に重要だったのは、
「画面上の位置」と「Farm上の位置」を分けて考えることでした。
これによって画面サイズが変わっても、Farm上の配置情報を維持しやすくなります。
Plannerとしての操作性
ユーザーはWebアプリを使いたいのではなく、
「自分のFarmを考えたい」
ので、Editor自体の操作が邪魔にならないことを意識しました。
できるだけ、
「アイテムを選ぶ → Farmに置く → 動かす」
という直感的な操作で使えるようにしています。
実際に作ったもの
こちらです。
Stardew ValleyのFarm Layoutをブラウザ上で試せるPlannerです。
実際にゲーム内で建築や移動を始める前に、Farm全体の構成を考える用途を想定しています。
今後
Farm Plannerは、普通のWebサイトよりEditorに近いため、まだ改善できる部分がたくさんあります。
今後も、
- Plannerの操作性
- Farm設計機能
- レイアウト確認
- 保存・再利用の体験
などを改善していきたいと思っています。
同じようなEditor系Webアプリを開発している方の参考になれば嬉しいです。