クイーンズ：システム設計紹介 枠・フレーム編

今回は開発中のゲーム：クイーンズのリアクションシステムの紹介記事です！
ゲームシステム紹介の観点もありますが、どちらかというとコーディング・設計寄りの内容になります。
こういう作り方もあるんだな～　と、クリエイターさんやゲーム制作に興味がある方へサクッと楽しんで頂ける記事を目指して書いています。

いつものごとくかわいさ補充のためにコノハちゃんにコメントをお願いしています。よろしくね

可変解像度

クイーンズ、解像度が可変のゲームです！
最低・最高の大きさはありますが、その間で無段階にウィンドウサイズを変えられます。
これはWeb体験版を出す前提で作ったので、快適に遊んでいただくために必要な設計でした。

このウィンドウサイズの変化に沿って、一部のボタンやUIはサイズを変えなければなりません。

サイズを変えるとどう困るのか

アスペクト比や解像度の変化に、枠とかフレーム用画像が耐えられなくなります。
枠用の画像を直接はめ込む形式でやると、こんな感じになっちゃいます。

つまり、「このパネルやボタンがどんなサイズで描画されようとも、いい感じに動作する仕組み」が必要なんですね。

border-image-slice

このゲームを作り始めるまで全然知らなかったんですが、CSSにもこれを実現するいい感じの技術がすでにありました。

https://developer.mozilla.org/ja/docs/Web/CSS/border-image-slice

フレーム用の画像を9分割して、四隅はそのまま、辺に当たる部分はニューっと伸びたり、繰り返しタイル状に並べたりできます。

これを使ってフレーム用の画像にこんなものを用意して...

  background-color: #313371;
  border-image-source: url("/images/queens/frames/button.png"); 
  border-image-slice: 16;
  border-image-width: 16px;
  border-image-outset: 4px;
  border-image-repeat: repeat;

こんなようなCSSをあてれば...

どんなサイズでも自然に見えるボタンが作れるんですね。

あとはちょっとこれを応用して、キャラ選択画面で選択中のキャラ枠を大きくしても崩れない作りににできたりしますね。

体験版触ってみてね

今回の記事で触れた技術が動いている様子はWeb体験版で確認できます！

https://jyllsarta.net/queens_trial

引き続きご意見大募集中です。感想もいただければ力の入れるべきところがわかるので大変ありがたいです。

ということで、今回はCSSのプロパティ一個で一本記事書いちゃいました！
今後も不定期で技術紹介やキャラの掘り下げ記事を書いていこうと思います。

次回更新は 6/2(日), 進捗報告の予定です。おたのしみに！