この記事は 2023/12/15 に App Store でリリースされた iOS 対応モバイルゲーム「もの切り侍」の(事後の)開発ログのうち「アセット」に関する記録である。

「もの切り侍」は下の App Store のバナーから、無料でダウンロードできるので、興味があればぜひ遊んでみてほしい。



使用するアセットを検討する

この開発ログには、モバイルゲーム「もの切り侍」の開発にどのようなアセットをどのようにして用意したのかについて記録する。ちなみにアセットとは、ゲーム開発に関して言えば、使用する素材という意味で捉えて差し支えないだろう。

まずは、必要なアセットをリストアップし、時間的なコストも含めて、できるだけ低予算で用意する、というざっくりした方針で進めた。

ゲームで必要なアセットをリストアップした結果は以下のとおりだ。

  • キャラクターの画像
  • オブジェクト(落ち物)の画像
  • 背景画像
  • フォント
  • バックグラウンドミュージック(以下BGM)
  • サウンドエフェクト(以下SFX)

これらの素材について、ひとつずつ、どのように用意していったのかを細かく記していく。



キャラクターの画像

まず、プレイヤーキャラクターである侍の画像だが、実は開発当初は自分で描こうとしていた。というか、実際に少し描いてみた。2Dの絵だ。iPad の Procreate というアプリを使うと、アニメーションも同時に作成できる。これは使えそうだと思って描いてみた。

初期の自作のプレイヤーキャラクター:狐の面をつけた美少年風

ラフスケッチしか描かなかったが、しかし、それだけでどうにもしっくりこない感触があった。これは冷静ではないと思い、一晩じっくり脳みそを寝かせた。

大抵の場合、一晩寝かせると冷静な判断ができるようになる。案の定、翌日に自分で描いた絵を見て「こりゃだめだ」となった。まず、ラフから清書する時間的余裕がほぼ確実にない。また、カジュアルゲームには似つかわしくないクールな侍を描こうとしていた。もっとふざけなければならない、と思った。そして、「カジュアルゲームらしい」ビジュアルを模索することになった。最終的には itch.io で良い感じのドット絵の侍を見つけることができた。
itch.io - pixel art samurai

pixel art samurai である。これを使わせていただくことにした。ドット絵とカジュアルゲームはかなり相性が良いのではないかと思っている。



オブジェクト(落ち物)の画像

空から落下するオブジェクト(落ち物)は古今東西のあらゆる物、例えば、食べ物や乗り物、電子機器、食器、家具、化石、宝飾品、etc を用意しようと考えた。侍がその場所や時代にない物を切るというのが、なんともミスマッチでおかしみがあるように思ったのだ。

プレイヤーキャラクターの侍はドット絵にしたので、落ち物もドット絵にすると統一感が出そうではあったが、残念ながら、その案はボツにした。ゲームの内容とテンポを考えると、オブジェクトは 100 か 200 は用意しないとボリューム不足になると予想した。しかし、その数は、自分で描くにしては多すぎ、また itch.io などのアセットストアにも、そんなバラエティに富んだアセットはなく、ドット絵で表現しにくい落ち物も想定できた。であれば、いっそのこと実写にしようという結論に至った。ドット絵の侍と実写の落ち物のミスマッチもまたおかしみとして表現できるのではと考えたからだ。

まずは思いつく限りのあらゆる物をノートに書き出した。

開発ノード - オブジェクトリスト

数が多く、実物を用意できないものもあったで、自分で写真を撮るのは現実的ではない。予算もないので、なんとか無料で入手でき、使用できるものでなければならない。と、そこで見つけたのが Pixabay の Web サイトだ。このサイトには非常に助けられた。ノートに書き出した全ての物の写真があったわけではないが、その大半は見つかった。なにより自分が当初思いつかなかった物も見つかったのはまさに棚ぼたである。

ダウンロードした画像は、スマートフォンの画面に収まるようにそれぞれリサイズした。また、後日談になるが、最初にビルドして App Store で配信開始したとき、データ容量が異常に大きかった。このとき、すべての落ち物画像を .png フォーマットから .webp フォーマットに変換した。劇的にサイズが小さくなって驚いた。



背景画像

ゲームの背景画像には、当初、著作権切れの昔の絵、例えば北斎や広重の浮世絵なんかを使ったら雰囲気が出そうだと思った。

葛飾北斎の浮世絵

歌川広重の浮世絵

実際にそれらを集めて、プロトタイプのゲーム背景に当て込んでみた。すると、予想に反して、背景がごちゃごちゃとうるさい印象になってしまった。特にメインの侍と落ち物が目立たず、視認性が非常に悪くなってしまったのは致命的だった。そういうわけで、浮世絵の案はボツとなった。

自分で浮世絵風の背景を描くことも検討したが、どうにもクオリティが担保できないことは明らかだった。しかし、なんとしても背景で和風テイストを出したかった。侍や落ち物を邪魔せずに、和風テイストを醸し出す背景とはなんなんだ、と一瞬頭を抱えたが、和柄のパターンテクスチャを思いついた。カジュアルゲームなので背景の細部にこだわる必要はないし、むしろ和柄のテクスチャが画面全体のデザインをオシャレな印象にしてくれそうだ。

さっそく和柄のパターンを探してみた。 Bg-Patterns というWeb サイトが見つかった。
サイトイメージ: Bg-Patterns

ここには和柄のパターンが数多く用意されていた。早速いくつかをダウンロードして実際のゲーム画面に当てはめてみた。これは予想通りいい感じにハマった。
実際のゲーム画面のサンプル1

実際のゲーム画面のサンプル3

最終的に 200 のステージ分のパターンテクスチャをダウンロードし、色、柄そして醸し出される雰囲気が落ち物に合うように、各ステージに割り当てていった。

もし、「もの切り侍」を最後までプレイしていただけたならば、最後のレベル 10 は、ラスボス感のような雰囲気が漂っていることを感じていただけるはずだ。



フォント

フォントもまた、和風のテイストを表現するのに重要なアセットの一つだ。ゲームのローカライズは、最低でも英語版と日本語版の 2 言語は対応させたいと考えていたので、どちらの言語にも対応しているフォントで和風なものを選定する必要があった。もちろん予算はほぼないので、無料で使用できるものを探した。

ゲームのタイトルやメニュー画面のタイトル、当たり判定の「一本」「技あり」など、大きめに画面に表示する文字には明確に和風な楷書体フォントが良いと考えた。そして、玉点堂 - 玉ねぎ楷書無料版 というフォントを見つけた。日本語、英語ともにゲームの雰囲気にピッタリのフォントだったので、こちらを利用させていただくことにした。

実際のゲーム画面のサンプル4

実際のゲーム画面のサンプル5

チュートリアルの説明文など、小さめの文字には解星オプティ のフォントを利用させていただくことにした。こちらも雰囲気のあるフォントで、モダンでありつつ和風テイストも醸し出す絶妙なフォントである。非常に良いフォントに出会えたと思った。

実際のゲーム画面のサンプル2

実際のゲーム画面のサンプル6



BGM

BGM もまた和風の音楽で雰囲気を出したいと考えた。そんなに都合よくかっこいい和風の、しかもゲームでループさせやすい音楽なんて無料で利用できるものがあるのだろうか、さすがに生成AIにお願いするなり、和風ではないもので我慢するしかないのではないか、と思った。しかし、それはあった。無料で利用可能で、かつとんでもなくクオリティの高い和風の楽曲は音の園 にあった。
サイトイメージ:音の園

正直言って、「もの切り侍」のゲームのクオリティは音の園の楽曲なくして成立しなかったとさえ思っている。特にレベル 1 で使用している「脇差」という曲は、このゲームの印象を決定づけていると言っても過言ではない。

音の園の作曲者 ANDY 氏にはこの場を借りて感謝申し上げる。



SFX

ゲームで使用する効果音はさまざまだ。「もの切り侍」では以下の効果音を用意したいと考えた。

  • 侍の足音
  • 侍が飛び上がる音
  • 侍が着地する音
  • 侍が刀で切る音(複数)
  • 侍が刀を鞘に収める音
  • 侍が倒れる音
  • 侍がダメージをくらう音
  • 落ち物が出現する音
  • 盛り上げるための和楽器の音(尺八、太鼓、拍子木など)
  • 確認ボタンの音
  • キャンセルボタンの音
  • 選択する音
  • 選択できない時のビープ音

リサーチする前は複数の場所から少しずつ必要な効果音をかき集めたり、場合によっては自作する必要があると思っていたが、これらは 効果音ラボ でほとんど全て見つけることができた。一つのサイトで欲しい効果音がほぼ全て見つかるなんて驚きである。

サイトイメージ:効果音ラボ



おわりに

ということで、今回は「もの切り侍」のアセットをどのようにして用意したのかをまとめた。無料 = 無断使用 OK ではない、ということには十分注意したい。商用利用が OK なのか、禁止事項に抵触していないか、ライセンス表記はどうなっているか、などなど、無料で利用させていただくからこそ、権利に関わる部分はきっちり対応する必要がある。

この開発ログがどなたかのゲーム開発の一助になれば幸いだ。



リファレンス

pixel art samurai
Pixabay
Bg-Patterns
音の園
効果音ラボ