見出し画像

フリーゲームを作ったので技術的な話をひけらかす【シークレット・ガーデン】

シークレット・ガーデンというノベルゲームを制作しました。

ゲームのストーリーとか世界観とかの説明は、作中で提示されている以上のことは考えていないのでしないけど、ゲーム世界を作るための技術的な話はしたいので記事を書きました。オレの話を聞け~~~

1.使用エンジン・ライブラリ

・ティラノスクリプト
・ParticleJS

1-1.ティラノスクリプト

html5ベースのノベルゲームエンジン。canvasではなくDOMに描画するのが特徴。
おかげで私のようなクソザコスクリプターにも凝った感じのゲームが作れます。

1-2.ParticleJS

html5 canvasによるパーティクルライブラリ。似たような名前の別ライブラリがあるのでややこしいけど、ICS mediaという日本の企業が作ったライブラリの方です。
GUIのパラメータ設定ツールがあったので採用。

2.コンセプト

作品への没入感を高める

そのために

画面の中の空気感を演出する

具体的には

・単純なBGMではなく、環境音を再生
・画面に動きを持たせ、情報量を増やす

とにかくアニメーションさせること、完全に画面が停止している状態にさせないことを考えました。

3.タイトル画面

プレイヤーがいちばん最初に見る画面です。掴みは重要
ということで、かなり気合を入れました。

画面構成
・各種ボタン(最初からとか続きからとか)
・パーティクル(下から上にフワァーッてなってるやつ)
・タイトルロゴ
 ├バラのイラスト
 └テキスト
・背景

3-1.パーティクル

タイトル画面に限らず、作品全体でパーティクルを使用しています。
単に画面に動きをつけるというだけでなく、空間の空気感を演出するのが目的です。

ゲームの画面サイズは1280×720ピクセルなのですが、このサイズのcanvasだと30fpsくらいでもかなり動作が重くなるので、canvas自体は320×180ピクセルで描画して、cssで実際の画面サイズまで引き伸ばすということをやっていました。

3-2.タイトルロゴ

ロゴは、テキスト部分と中央のバラのイラストに分解できます。
テキストとバラ、それぞれにキーフレームアニメーションで動きを加えました。

テキスト:上下動、ブラー
バラ:回転、ブラー

ブラーのアニメーションは、テキストもバラも同じものを適用させています。これにより統一感を損なうことなく、かといって整然としすぎないアニメーションになりました。

キーフレームアニメーションは、ティラノスクリプトのタグである[kanim]ではなく、外部cssにちまちま書いて[loadcss]で読み込ませています。
[kanim]タグで指定できるプロパティじゃ足りなくて…

3-3.背景

背景は特にアニメーションはさせていません。さすがにここまで動くとうるさすぎる

4.キャラクター立ち絵

ノベルゲームといえば魅力的なキャラクター、そしてそれを演出するのが立ち絵です。
表情差分にポーズ差分、ときにはLive2Dなどによるアニメーションでキャラクターの心情をビジュアルからも描く作品が昨今のノベルゲームでは主流となっています。

しかし今作では、キャラクターの立ち絵は各キャラ1種類のみ、それも↓にあるとおり、肌を黒塗りしたものとなっています。

画像1

ストーリーの演出上、こういった表現を選びました。
その分キャラクターの背景にある世界観を密に描写した感じです。密と疎のバランスは大事だってばっちゃが言ってた

5.メインシナリオ画面

画面構成
・ボタン系(選択肢、メニューボタンなど)
・メッセージ
・立ち絵
・パーティクル
・背景

背景、立ち絵については上で書いたとおりです。

5-1.パーティクル

やっていることはタイトル画面と同じです。
場面によってパーティクルの種類が違っています。粒の大きさとか流れの向きとか速さとかね

5-2.メッセージ

これは極力シンプルなものを目指しました。
わりとシリアスというか、暗め重めな雰囲気を出したかったので。
フォントもブラウザデフォルトのものではなく、明朝系のwebフォントを使用しています。

あと地味なところですが、クリック待ちのアイコン(台詞の後に出てくるバラ)もcssアニメーションさせています。

5-3.ボタン系

動画を見てのとおり、選択肢のボタンもうにょうにょ動いています。

cssのborder-radiusを複数指定すると、矩形をメタモンみたいな形にできるんですが、そのboder-radiusの値を変化させつつ、全体にブラーをかけています。

ボタンというか、クリッカブルな要素を動かすのはちょっとプレイヤーにやさしくないかなとも思ったのですが、上下10pxくらいならまあええやろ…

選択肢の表示中はゲーム自体停止していることになるので、そういう場面で画面そのものも静止させたくなかったというのもあります。

それから、コマンドボタン(メッセージ枠右上のやつ)とかメニューの表示/非表示のアニメーションとか、ほぼ自己満足の領域なんですが、こういうところに細かい動きをつけることでプレイヤーに「おっ」と思ってもらえるかな、と。

コマンドボタンのアニメーションは、大きさを変えたり単純なイーズイン・アウトくらいしかさせていませんが、タイミングとか調整して滑らかな動きを意識しました。

6.BGM

BGMはクラシックを使用しています。
最初にタイトル画面でパッヘルベルのカノンを使おうと決めて、作中のBGMはすべてクラシックで統一することにしました。

で、BGMの他に環境音をすべての場面で入れています。
だいたいBGM+環境音2つ、が常に流れているかんじです。
プレイ動画でも鳥の声とか風の音とか聞こえてると思います 聞こえててほしい

この、常に流れている環境音というのが思いのほか没入感を高めるのに一役買ってくれました。

そもそもBGMがクラシックの名曲なので耳に非常に心地がいい

場面に沿ったうるさすぎない環境音
||
最強

的な。

長く愛されるものには相応の理由があるのだなということを改めて理解できました。

最後に

以上、技術的なというか、演出的な話でした。

サスペンス恋愛ADV「シークレット・ガーデン」はノベルゲームコレクション他フリーゲーム投稿サイトで公開中!
win/macのほか、スマホからも遊べるよ!!!!!

そしてティラノスクリプト/ティラノビルダー製ゲームの祭典、ティラノゲームフェス2019も開催決定!!参加してます!!!!

8月末の応募締め切りまでにもう一本ゲームを投稿予定です。
そちらの技術的な話もできたら、また今度。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

サポートをしていただけると私がたいへんよろこびます。 ちなみに欲しい物リストはこちら→https://www.amazon.jp/hz/wishlist/ls/2DBRPE55L3SQC?ref_=wl_share

いっぱいちゅき♡
13
情緒不安定な腐女子。 OL(おっさんずラブではない)しながらBL小説やエロいテキストを書いています 自サイト:https://skt-pnt.netlify.com/
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。