見出し画像

企画開始から1ヶ月でゲームを製作、コンテストに応募した話【かなりあは唄わず】

先日、「かなりあは唄わず」というフリーゲームをリリースしました。

そんでもって、ティラノゲームフェスにエントリーしました。

今回はこのゲーム制作にまつわるよもやま話をしていきます。

コンセプト

ティラノスクリプトで絵本を作れないか、というのが最初に考えたことです。

ビジュアル的なイメージとしては、レオ・レオニやエリック・カールのような、かわいらしいキャラクターを鮮やかな色彩で描いたもの。

システム的なイメージは、飛び出す絵本、仕掛け絵本のような、ただ文字を追うだけでなく読者がある程度能動的に動けるもの。

今回、【絵本】がテーマということで、ゲームブックのような分岐ではなく、シーン単位での仕掛けの部分でゲーム性を出そうと考えました。

目的

ティラノゲームフェスのエントリー締切が8月中だったので、8月中にリリースを目指しました。

前述のコンセプトを思いついたのが、7月の末か8月の頭くらいだったと思います。
ティラノゲームフェスにはロスタイム(エントリー締め切り後も1ヶ月程度ゲームのアップデートができる)があるのですが、ロスタイムを使うにしてもエントリーができる程度にはゲームの形にしなければなりません。
そのため、必要でない機能はざくざく削っていきました。

結果的に残した機能、削った機能は以下の通り

【残した】
・セーブ/ロード
・タイトルに戻る
 →本はいつでも閉じられるように
【消した】
・バックログ
 →絵本なので、ページをめくって前のシーンに戻れるようにした
・コンフィグ
 →設定項目がBGM音量くらいしかなかったので
・回想、リプレイ
 →短編かつ一本道、スチルなどもなかったので
・オート、スキップ
 →後述する会話表現のため、あってもそれほどプレイヤーのストレスが減るわけではないので

とりあえずノベルゲームによくあるシステムだけ挙げてみましたが、ほかにもわりと細かい調整はぶん投げています。
細部にそれほど心血を注がなくても石投げられないのでフリゲは良い文化 いやもちろん細かく気を配るのはいいことなんですが

外注

イラスト、特に背景やキャラクターに関しては、自分で絵を描くより得意な人に頼った方が望むものが出来上がるなと思ったので、(あと単純に作業時間も足りなかったので)今回イラストは絵師さんに外注することにしました。

TwitterとSKIMAで募集をかけて、思ったよりたくさんのご応募をいただきました。ありがてえ
で、サンプルイラストや納期などの条件で選考した感じです。

おかげで素敵なイラストでゲームが彩られました。
私個人としても、発注用に資料作ったりして勉強になりました。

使用ツール・ライブラリ

・ティラノスクリプト
・えもふり(e-mote)
・ParticleJS

ティラノスクリプト

ティラノゲームフェスはティラノスクリプト(またはティラノビルダー)製のゲームであることが必須条件なので、ゲームエンジンは自動的に決まります。
GUI操作ができるビルダーではなくスクリプトの方にしたのは、スクリプトの方が頭の中身をそのまま出力できてやりやすいからです。あとティラノ本体のカスタマイズやりたがりマンだからというのもある

えもふり

Live2Dのような、2Dイラストをアニメーションさせるライブラリです。e-moteが正式名称でえもふりは無料版
Live2Dに比べるとモデル製作が容易なのが売りらしいですが、私はLive2D使ったことないのでどれくらい違うのかよくわからん
とりあえずテンプレートに沿った立ち絵を作る分には、エディタの操作諸々含めて割とすぐにできたと思います。

ParticleJS

↑のnoteでも書いてるんですが、パーティクルアニメーションのライブラリです。基本的な使い方は前回と同じ

1.ビジュアル面

1-1.えもふり(e-mote)

モデル作成はそんなに苦労しなかったんですが、ティラノスクリプト上でえもふりモデルをそのまま表示させるとだいぶ重かったので、ちょっとカスタマイズしました。
PC買い替え後は、スペックもだいぶ上がったので処理落ちすることはまずなくなったんですが、その分低スペック環境でのテストができなくなってしまった…
あと、えもふりについてはこの記事とは別にあとでnoteにまとめようと思ってます。

1-2.cssアニメーション

流れ星のアニメーションと本をめくるアニメーション、あと鉄の蝶のアニメーションに使用。

流れ星

ネットでさがせば腐るほど出てくる流れ星のCSSアニメーションとやり方は同じです。

本をめくる

普通のスプライトアニメーション。

鉄の蝶

正直CSS書くより素材のイラスト書く方が時間かかってるっていう…(絵師さんに発注するの忘れてたので自分で描いた)
アニメーション自体はスプライトアニメーション+移動だけです

1-3.パーティクルアニメーション

地平線の明かりに使用。
えもふりとParticleJS、どっちもCanvas系のライブラリだからか相性がよくないっぽい?
けっこうむりやり動かしてる感ある

2.システム面

2-1.全体の構成

・タイトル
・システム系画面(セーブ画面とか)
・シナリオ本編
 ・1シーン目
 ・2シーン目
 ・…

絵本のページをめくるように、1シーン目→2シーン目→3シーン目と進行していきます。
各シーン間の遷移は、戻る操作も含めてプレイヤーが自由にできます。
ただし、1シーン目から3シーン目に飛ぶことはできません。やりたかったけどプレイヤー的にはそんなにうれしくないかなと思ってやめた

2-2.ページ単位の構成

【構成要素】
・背景1
・背景2
・キャラクター
・システムボタン
・クリッカブル要素

背景1

今回、背景は2層構造になっています。
塔のシーンで言うと、窓からの景色が背景1にあたります。
背景2の窓部分は透過されているので、その下に背景1を敷いて表示させている感じです。
流れ星とか地平線の明かりとかも背景1のグループに入ってます。

背景2

建物内部の背景が背景2です。窓の部分が透過されていて、背景1が見える。
内部的には背景ではなく前景画像と同じ扱い

キャラクター

えもふりによる立ち絵です。

システムボタン

前述の通り厳選したシステムボタンを画面上に配置
マウスホバーでツールチップ画像表示とかやってる

クリッカブル要素

キャラクターとかをクリックすると会話が聞けたりするんですが、このときクリックするボタンはキャラクターの立ち絵そのものではなく、その上に配置した透明画像になっています。
キャラクター立ち絵をボタン化するのがめんどくせ~というのもあったんですが、透明画像ボタンをかぶせる手口はわりと汎用性高いのでちょいちょい使います。

2-3. 会話表現

今作では、主に2通りのメッセージ枠を使っています。

・ナレーション用メッセージ枠
・セリフ用メッセージ枠

ナレーション用メッセージ枠

いわゆる地の文ってやつだ
この枠自体は位置固定で普通に表示させるんですが、表示が終わったら画面外に退避させています。
バックログ機能はありませんが、同ページ内でならこのナレーションは再表示できるようになっています。
この地の文をキャラのセリフと共存させつつ保持しておくのにひと工夫いりました。

セリフ用メッセージ枠

キャラとかをクリックしたときに表示されるメッセージ
キャラの位置に追従して吹き出しが表示されます。
これは何度も再表示させられます。

総括

時間の限られた中での製作で、機能の優先度を比較しつつの開発となりました。
ティラノスクリプトデフォルトの機能でまかなえる部分もあったのかなと思いますが、やっぱりやりたいことを思い切りやろうとすると少々のカスタマイズが必要になってくる。
そういう工夫もまた楽しいです。

最後に

ティラノゲームフェス2019、まもなく開催(たぶん)!
私も2作品エントリーしています、ぜひプレイしてみてください!!



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

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

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

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