ゲームのスキルマップ画面のようなwebデザインの作り方

Q&A

現在フロントエンドの学習を行っており、気になったデザインを作成して勉強を行っています。
下記のようなゲームのスキルマップ画面を作ってみようと思っているのですが、
こういったデザインの作成の仕方がわからず、詰まってしまいました

こういったデザインを作成する際
・ボタンの配置を再現するにはどうしたらいいのか
・線で繋いでいるがこちらもどう再現するのか
など気になる点が多く、こういった点を教えていただきたいです。

最後まで読んでいただきありがとうございます
教えていただけますと幸いです。
何卒、よろしくお願いします。

3Answer

もっと具体的な質問にならないと、なかなか回答はされにくいと思いますが、とりあえず、取っ掛かりとして

・ボタンの配置を再現するにはどうしたらいいのか

positionのrelativeとabsoluteを駆使する

・線で繋いでいるがこちらもどう再現するのか

線もボタンと同じように画像で用意して配置する

という線で試してみてはいかがでしょうか。

1Like

@Kobayashi0620
Questioner
ご回答いただきありがとうございます。
relativeとabsoluteを駆使して位置を調整するのですね
ありがとうございます！ためしてみます

・ボタンの配置を再現するにはどうしたらいいのか

positionのabsoluteで位置を指定します。

・線で繋いでいるがこちらもどう再現するのか

線を繋ぐという考えよりも線を配置すると考えます。
ボタン間に線を配置して角度つければボタン同士が繋がってるように見えませんか？
つまりは線の位置、線の角度をjsで計算して動的に線を出してやればボタン同士が線でつながってスキルツリーのようにみえると思います。

1Like

@sechoge
サンプルです、学習の助けになれば幸いです。
@Kobayashi0620
Questioner
ご回答いただきありがとうございます
ソースコード読み解いて理解してみます
参考になるものをいただけてスムーズに学習が進みますありがとうございます！！

構造化したデータを元に図を作るんですよね？
もし、構造化したデータが頻繁に更新されるようであれば、それはライブラリを使った方がいいように思います。

1Like

@Kobayashi0620
Questioner
ご回答いただきありがとうございます。
こういったライブラリがあったんですね！
すごい参考になりますありがとうございます