はじめに
サークルのメンバーと「アンナのお菓子な大冒険」とういうゲームを制作しました。
プロジェクト自体は3年前にはじまったのですが、チームでゲームを作るノウハウが無かったため、すぐに頓挫しました。その後、仕切りなおすも、授業や別のゲーム制作、就活などでみな忙しく、かなり断続的な開発になってしまいました。
複数人で作るというのはなかなか大変で、反省点も山ほどあるのですが、Siv3Dアドカレなのでここでは省略。この記事では主に技術的なことを雑に紹介していきたいと思います。
まとまりのない記事ですがよろしくお願いします。
遠くの背景を白くする
背景に遠近感を出すため、後ろに行くほど背景ブロックが白くなるようにしています。
透明なRenderTextureに「描画された最大のアルファ成分を保持するブレンドステート」で背景を書き込み、通常のブレンドステートで画面いっぱいの半透明の白い四角形を描画するということを繰り返すことで、遠くの背景ほど白くなります。
const ScopedRenderTarget2D target{ backgroundRenderTexture.clear(ColorF{0.6,0}) };
//遠くの背景から順に描画する
for (int32 i = 0; i < backgrounds.size(); ++i)
{
{
// 描画された最大のアルファ成分を保持するブレンドステート
// https://siv3d.github.io/ja-jp/tutorial3/render-texture/
// 52.3透過レンダーテクスチャへの書き込み
const ScopedRenderStates2D blend{ MakeBlendState() };
backgrounds[i].draw();
}
//全体を白くする(既に背景が書き込まれたところだけ白くなる)
Scene::Rect().draw(ColorF{ Palette::White,0.25 });
}
ライティング
ステージによっては、画面の一部分だけを明るくし、雰囲気を出しています。これはBlendState::Multiplicativeを用いて、ゲーム画面とライトとを乗算することによって実現しています。詳しくは2023のSiv3Dアドカレに書いてあります。
影を付ける
背景とステージが見分けやすいように、ステージとエンティティには影を付けました。
Siv3Dのチュートリアルをもとに影を付けただけなのですが、結構雰囲気がでました。今後も活用していきたいと思います。
ステージエディタ
ステージを制作するため、ブロックを配置できるステージエディタを作りました。
クリックした場所にブロックを置けるだけのシンプルなものです。
編集したステージはJSONで保存され、ゲームで読み込まれます。
モーションシステム
キャラクターは独自のモーションシステムで動いています。
独自のモーションシステムなど大変そうで作りたくなかったのですが下のリンクの先輩に脅されやむを得ずつくりました。
キャラクターのボーン情報を保存しているJSONとモーションを記述している独自のスクリプト(?)があり、JSONのボーン情報をもとにキャラクターを構築し、独自のスクリプトで関節を回したりしています。
基礎部分は僕がつくりましたが、Siv3Dアドカレ5日目に記事を書いている
やっさんが色々機能追加を行っているので僕はもうあまり理解していません。(画像はやっさんが作ったエディタ)
UIシステム
設定等のUIには自作のBunchoUIを用いました。
しかし、もともとカーソルだけで操作する前提で制作したライブラリだったためボタン操作に対応するのが面倒でした。
また、Dialogの使い勝手が悪かったりと、問題点が色々とでてきたので今後時間があるときに改善していきたいと思います。
キーやコントローラのボタンを表示する
キーやコントローラのボタンの画像を文章の中に表示したかったのでフォント化しました。
①画像(SVG)を用意
キーやコントローラの画像はKENNYという無料アセットを配布しているサイトのInput-Promptsというアセットを使用しました。
②文字コードを決める
もちろんキーやコントローラのボタンに対応した文字コードはありません。
しかし、Unicodeには自分で自由な文字を登録できる私用領域があります。
Siv3DのIcon(Material Design IconsやFont Awesome)も私用領域を使用しているため、 文字コードが被らないように気を付けて私用領域を使用します。
今回はキーボードのキーの文字コードは0x100000+Input::code()、コントローラのボタンの文字コードは0x100100+Input::code()としました。
③画像(SVG)のフォント化
IcoMoonという無料で使えるフォント作成ツールを使い画像をフォントにしました。
ただ、カラーフォントには対応していないようなので、キーに色を付けたい場合は別のフォント作成ツールを使う必要があります。
④プログラムでフォントを使う
作成したフォントをFont::addFallback()で通常のフォントにフォールバックしておきます。
そして、下のようなコードでInputからキーに対応した文字コードに変換します。
すべてのキーに対応できているわけではないので、Font::hasGlyph()でそのキーのフォントがあるか確認しています。なければアイコンの代わりにキーの名前Input::name()を返します。
String GetKeyIcon(const Input& input)
{
if (input.deviceType() == InputDeviceType::Keyboard)
{
const char32 code = 0x100000 + input.code();
if (FontAsset{U"Keyboard"}.hasGlyph(code))
{
return String{ 1,code };
}
else
{
return input.name();
}
}
else if (input.deviceType() == InputDeviceType::XInput)
{
const char32 code = 0x100100 + input.code();
return String{ 1,code };
}
return input.name();
}
おわりに(宣伝)
アンナのお菓子な大冒険、ぜひ遊んでみてください！
ふりーむ！で配信中です！ ↓
ちなみに宣伝動画もSiv3Dで無理やり作ったものだったりします。 ↓