惚れ込んだアートをSpriteStudioで!東方Project二次創作『3rd eye』 | GameBusiness.jp

惚れ込んだアートをSpriteStudioで!東方Project二次創作『3rd eye』

インディーズゲームの原点、同人ゲームとして最も歴史あるムーブメント『東方Project』。今回は、SpriteStudioの採用事例として、その『東方』を題材にしたモチーフにした、ちょっとコミカルな2Dホラーゲーム『3rd eye』を、SpriteStudio採用事例としてご紹介します。

ゲーム開発 ミドルウェア
インディーズゲームの原点、同人ゲームとして最も歴史あるムーブメント『東方Project』。今回は、SpriteStudioの採用事例として、その『東方』を題材にしたモチーフにした、ちょっとコミカルな2Dホラーゲーム『3rd eye』を、SpriteStudio採用事例としてご紹介します。

『3rd eye 制作委員会』とは?


――『3rd eye 制作委員会』の皆さんの自己紹介と、サークルの成り立ちを教えてください


ことイナリ氏イラストを担当しております、”ことイナリ”です。普段はフリーのイラストレータです。1日1枚イラストを描いてSNSにアップするというのをライフワークにしています。
筆者注:ことイナリ氏は、性別も含めて謎の存在なのです


うさまた氏2Dアニメーションとサイト制作を担当しています、”うさまた”です。本業で所属しているゲーム制作会社で、SpriteStudioを触り始めて5年です。


さい氏プログラム担当の”さい”です。本業もプログラマーなんですが、どちらかというとサーバーとか基盤技術寄りで。趣味がこうじて以前から同人ゲームの開発に参加していたりします。


いってつ氏シナリオ担当の“いってつ”と申します。サークルの成り立ちの話もお話しますと...この場には、いらっしゃらないんですが、サウンド担当のニシム監督さんが、ご自身制作のCDのジャケットイラストを、ことイナリさんに依頼したところから始まります。その流れから、映像作品を作りたい、いっそゲームを作りたいという話になりました。

さい氏ただ、その段階では、ゲームのイメージは漠然としていました。

いってつ氏そこで、ニシム監督さんの目に止まったのが、ことイナリさんのイラスト。”ホラーの世界観に東方Projectのキャラクター”というものでした。その後、ゲームとして膨らませていく上で、今のメンバーが賛同して、集まっていった感じです。

――さっそく聞いてしまうのですが、『3rd eye』のテイスト、ことイナリさんの作風は、どのように形成されていったものでしょうか...?

ことイナリ氏エドワード・ゴーリーやチャールズ・アダムスが好きで。真似て描くところから始まって、徐々に今の作風に至りました。



いってつ氏とは言え、このイラストを動かすとなると大変だぞーと。最初は、手書きのアニメーションも検討したんですが、素直にゲーム向けの2Dアニメータの方を探すことにしました。そこで、Twitterに『アニメータ募集!』と呼びかけたところ、SpriteStudioさんの公式アカウントが拡散してくださいまして。

うさまた氏手を上げました。ことイナリさんのイラストを見て、惚れ込んだというのが本音です。これを動かしたい! って。

――『3rd eye 制作委員会』の成り立ちに、SpriteStudioの公式ツイートがお役に立てたんですね!

『3rd eye』というゲーム



いってつ氏”2Dホラー探索アドベンチャー”です。ことイナリさんの世界観を「東方Project」のキャラが歩き回り、たくさんの”不思議な出来事”を体験するという。主人公の”こいし”は他人の心を読むことができる「第三の目」を持っているのですが、この「第三の目」というのは、人の心が読めたり、動物と会話が出来たり、そこから、”裏の世界”を見ることができる...というゲームになっています。

――「東方Project」のキャラクターをホラーの世界観で...なんでまた、”東方でホラー”なんでしょうか

ことイナリ氏「東方」は、”何かを表現したい人”にはとても親しみやすい題材なんです。

――親しみやすい、確かに。SpriteStudioがキッカケで出会った方々にも、「東方」のファンの方が大勢いらっしゃいますね

独特の絵柄と世界観




――先程、この作風に惚れこまれたとのことですが、ことイナリさんの作風は、決して”アニメーションさせやすい”ではないようですが...

うさまた氏普段のお仕事では決して動かす機会がない、見たこと無い絵柄だったんです。これは是非動かしたいと思えるような。また、普段からイラストレータの方とのやり取りには苦労するんですが、ほとんど説明することなく、パーツの分割から塗り足しまでを、ことイナリさんの方で担当してくださって。

ことイナリ氏アニメーションを意識したイラストではありませんでしたが、動かすためにキャラクターをバラバラにすることに対しての抵抗感は、無かったですね。

――ご自身が描かれた可愛いキャラクターなのに?

ことイナリ氏大丈夫なんです、妖精だから。

――妖精だから、大丈夫...

一同:(笑)

印象的なイベントシーンの元となったイラスト

その印象的なイベントシーンをアニメーションの落とし込むための指示書

うさまた氏ことイナリさんとのやり取りも、特段悩むこともなく円滑でした。しいて挙げるなら...

ことイナリ氏パーツの接続箇所の塗りをボカすかボカさないか? それくらいでした。アニメーションについては、早い段階から、うさまたさんにお任せしても大丈夫だなと。

――特に印象的なイベントシーン、首に縄をかけて...世界観を表す象徴的なシーンですが、イラスト側の思惑どおりのムーブなんでしょうか。

うさまた氏一応制作中に確認をしながら...『間違いなく首を吊るんですか?』って。いいのかな、って。そうしたら、

ことイナリ氏『そうです』と。

一同:(笑)

間違いなく、吊っている

JavaScriptベースの自作ゲームエンジン



――さてその独特な世界観をゲームとして成立させている、構造のお話を。

さい氏開発に使用したフレームワークは、JavaScriptベースのオリジナルのものです。本業の方でゲームエンジンに触っていないのと、JavaScriptでゲームを開発した経験があったということ。 また、普段から仕組みを理解するのに、ゼロから構造を作るのを重視しているというのがあります。ただ、家庭用ゲーム機への移植を考えて、Unityなどへのコード移植を覚悟しています。

――自作ゲームエンジンを作った上に、Unityへの移植まで! すごいですね。

うさまた氏...残念ながら他のメンバーにその驚きを共感できるものがおらず...

いってつ氏他の同人ゲーム作家から、「(さい氏は)すごいプログラマーだよ」と言われたんですが、どうすごいのか...

一同:(笑)

――『3rd eye』の制作進行役もご担当されたとか?

さい氏本業でもプロジェクトリーダーやマネージャもやってるので、その知見を『3rd eye』でも活かせたら、というキモチではありました。



うさまた氏さいさんに「こういう表現は実現できませんか」と相談するんですが、そうすると「なんでもできます」と回答がくるので頼りにしました!

さい氏「技術的にはできるんですが、工数が掛かります」とお返しすることもありました。うさまたさんからの相談で実現できなかったことと言えば、SpriteStudioで作った”頂点変形”を実現するのにコストがかかりそうだったので見送ったことでしょうか...
筆者注:『3rd eye』に利用された”SS5PlayerForHTML5”では、開発当時にブラウザのパフォーマンスを鑑みて、未実装だった。尚、現在2019年4月にリリースした、”SS6PlayerForWeb”では、SpriteStudio Ver.6から搭載された、ボーン・メッシュなどの機能にも対応している

うさまた氏頂点変形もそうなんですが、ボーンやメッシュを使えるのなら、『3rd eye』で言うところの”裏の世界”、気持ち悪い表現をもっと気持ち悪く作れたのかなーと思っています。

――先程、家庭用への移植も予定されているとのことでしたが、そのタイミングで”SS6PlayerForWeb”へ移行していただけたら...

さい氏ボーンやメッシュを使った新しい表現ができるようになるかもしれませんね!

――本日は、ありがとうございました!


『3rd eye』頒布開始!


来たる 2019年5月。東京ビッグサイトで開催される、第十六回 博麗神社例大祭 にて、完成版の『3rd eye(Win/Mac)』を出展・頒布開始とのこと。例大祭では、メロンブックスさんで通販予約開始している『豪華セット版』の他、各種グッズや、ことイナリさんの新刊画集の頒布も予定しているとのこと。

■第十六回 博麗神社例大祭:https://reitaisai.com/rts16/
■公式Twitterフォロー&リツイートキャンペーン:https://twitter.com/3rdeye_pj/status/1117415295767814144
■公式ページ:http://3rdeye.sai-chan.com/

ブラウザゲーム向け! ”SS6PlayerForWeb”、リリース!


SpriteStudio Ver.6 から搭載された、ボーン・メッシュ等の新機能に対応したブラウザ用プログラム、”SS6PlayerForWeb”をリリースしました。今回の『3rd eye』のような例はもちろんのこと、大手ブラウザアプリプラットフォームでリリースされているタイトルでの採用実績もある、期待のプログラムです。

■SS6PlayerForWeb:https://github.com/SpriteStudio/SS6PlayerForWeb
■OPTPiX SpriteStudio:https://www.webtech.co.jp/spritestudio/

株式会社ウェブテクノロジでは、『クリエイターを笑顔に』をモットーに、開発メンバーを募集しています。お気軽にご応募ください。

■株式会社ウェブテクノロジ キャリア採用:https://www.webtech.co.jp/company/career.html

好評につき期間延長!OPTPiX SpriteStudio 10%OFFセール実施中!


Ver.6.3のリリース記念、プロフェッショナルライセンス新規購入10%OFFキャンペーンを9/30まで延長いたします。プロフェッショナルライセンス 12か月サブスクリプションの新規・追加購入限定です。詳しくは公式サイトにてご確認ください。

《烏丸》

関連ニュース

特集

人気ニュースランキングや特集をお届け…メルマガ会員はこちら