見出し画像

『ぶれいんぼむ』ゲーム制作備忘録〈3〉

0.はじめに

自作ゲーム第3弾『ぶれいんぼむ』の制作備忘録。
自サイト制作とフリーゲーム制作についてもちょっと触れる。

(ふりーむ!とノベルゲームコレクションにて公開、ティラノゲームフェス2020参加作品/PC・スマホ対応/作品登録:2020年6月)

プレイ時間は20~25分程度。例により作ってから時間が経っているので、少々うろ覚え。当たり前だけど、ちょくちょくネタバレしていく。

1.作り始めるまで、サイト制作

今年、2020年は世の中STAY HOMEな感じで、個人的にも予定が狂った関係もあり、ずっと作ろうと思っていた個人サイトを制作した。ここね。

htmlとCSSの勉強にもなるし、フリーゲームも2つは公開したし、pixivとか諸々を集めておこうと、そういう動機で。

あと、個人でやるつもりで、イベントに出展するでもなんでもないけど、サークル名的なのがあった方がいいかなということで、サイト名&サークル名として『左右空想計画』に。若干中二感ある『LR-BEBEL』はアルファベット表記あると便利だから。

『左右』はHNからとっている。(下上左右ってHNに意味はまるでなく、中学時代くらいのネタ帳で使ってなかった名前で、コマンドっぽいからいいか~と思ってテキトーに使った。今は若干後悔している)

『空想計画』ってなんぞって感じだが、『BABEL』の訳から。バベルの塔のバベルだけど、架空の計画、みたいな意味もあるそうな。バベルの塔ってことは創作的には縁起よくないのではという感じもするが、the pillowsの『バビロン 天使の詩』も元ネタの一つなので、それもコミでいいかなと。

スマホとPCどちらでも見やすいように考えつつ、配置や色も考えつつ、それを作るにはどうすればいいのかと、いちからぽちぽち打っていたので、短編のノベルゲームを作るよりも時間がかかったし、更にまだ手を加えたいが、それをやっていた。

ティラノスクリプトはAtomを使っているけど、サイトはVS Codeを使ってる。VS Codeはとてもいい。動作も軽い。配色の好みの関係で色味がほぼAtomと同じになったけど。

2.制限時間

サイトをとりあえず作って、今年もゲーム作りたいなぁとも思っていた。
今年はふりーむ!の『1分ノベルコンテスト』というのが気軽そうなのと、ティラノゲームフェス2020がいいかなと。

今回は友人もフリーゲームを作るとのことで、自分のものを作るより先にそれをテストプレイした。それが『1分』のテーマにすごく合っていて、これに勝てそうな『1分』って? と悩んだ。
(ちなみに、このふりーむ!の企画の『1分』は解釈緩めで、
“数分程度までが目安。面白すぎて体感時間1分など、1分は幅広く解釈可”
で、スマホブラウザで遊べるもの、というもの)

なんだかんだの結果、そこを主題にはしないことにした。
1つ作るとき、何か今までやってないことをやりたいというのが今回もあった。短編だろうとなんだろうとそこはこだわりたい。
ティラノスクリプトの機能デモを見ていて、『制限時間付き選択肢』はあまり使われてない気がするし、そこを1分に絡めていこう、という方向になったと思う。

個人的に制限時間付き選択肢で思い出すのは『サクラ大戦』だ。大変緊張感があり、答えがわかっていても瞬時に読めずミスって苦しんだ。
そういうゲームのプレイ経験がない人は動作デモをちょっと遊んでみればわかると思う。

この動作デモに出てくるのは某少年漫画のネタの選択。端的に言えば『誰を助けるか』というシンプルな問いで、『恋人』か『母親』かという基本的には2択
動作デモではここに『あかね』が加わって、3択になるわけだけど、
『恋人を助ける』『母親を助ける』『あかねを助ける』という選択肢が5秒のカウントダウンつきで同時に出てくる。
問題文の前提から『恋人』『母親』という選択肢は想定できていたとしても、第3の『あかね』という選択肢も増えつつ、『~を助ける』という文字も増えるので、これを5秒で認識して選択するのは難しいと思う。
(『~を助ける』を省略して名詞だけの選択肢にすると少し簡単になる)

今回は一応『1分』に沿った形にするので、60秒を各選択肢で分け合って、1つの選択肢の制限時間は15秒、それが4回出てくることに。
それにしても、制限時間があるもので爆弾っていうのは、あまりにもありふれたネタでは? ということで、脳内爆弾的な話になった。いや、ありふれていてもいいと思うが、差別化したいんじゃ。

画像10

そういうわけで、文字無しの選択肢になった。

「え、見慣れない。普通の選択肢がいい」ってお客サンもいると思うが、今回の俺の出すラーメンはこれだから。食ってみてくれ。短編のフリーゲームだからよ、たまにはこういう変わり種があってもいいんじゃねぇの? 普通の恋愛ADVが好き? はっはっは! そいつぁ、俺も好きさ。だが、そういうラーメンはヨソでも食えるだろ?
おっと、この文章読んでるくれぇだ、そんな好き者のお客サンは本編プレイ済だよな。ま、ぱっと見で意味わかんねぇし、制限時間まであるからな、最初は戸惑っただろうよ。特にこの右の選択肢なんだよ、なんか睡眠っぽいアイコンだが? と思って選ぶと本当に寝るっていうな。

選択肢は黄魅が干渉している部分で、紺助の気持ち的なところであるのでフィーリングで行こうぜ。少なくとも最初の1回くらいは素直に爆発(ゲームオーバー)するのがお作法か。初回は黄魅の罠度が高い。
今回は「こういうのにする」というのを先の友人に軽く話したところ、「そういうのだとコンテニューほしいわ」と言われ「せやな」と即決でコンテニューを最初から仕様に入れていたので、なんとか頑張ってくれたら嬉しい。

全力でフリーアイコン制作者さんのピクトグラムのユニバーサルデザイン的な部分に頼っていくスタイルだが、先に言ったように、数秒で選択肢を読むのは難しい。ただ、これを『黄魅』『寝るわ』とかにしてもあまり面白くない。(しいて言えば、全体がフラットなので選択肢部分にもう少し立体感出すと見やすいよね)

3.画面構成

個人的に早い段階でやりたいのが、どういう画面にするか、っていう作業。
PCでやるゲームだとまず、画面サイズ必要で、それによって各素材のサイズやらなんやらが変わってくる。
ノベコレ含む個人制作系のものはだいたい『960*640』の『3:2』が今も主流(『4:3』もか?)っぽい。フリー素材(背景・メッセージウィンドウなど)が一番手に入るから、っていうのが多分大きな理由なんじゃないかな。スマホのブラウザで遊ぶにしても、左右の両サイドが黒くなるだけで意外と普通に見られるので支障少ないし、そう簡単にはこの割合変わらないのかもしれない。

『1280*720』の『16:9』がティラノスクリプトのv5くらいからのデフォで、横長のワイド。ちょっと今風になる。スマホで全画面にするといい感じ。PCは環境によって差があるからあれだけど、それでも『960*640』よりデカいので当たり前だが色々見やすい。
スマホファーストで縦長にすると『640*960』の『2:3』くらいがフリーゲームだといいのかな、ビルダーのデフォからすると。

2020年10月現在、ふりーむ!もノベコレもサムネの画像比が横長にやさしくないので、表示箇所によっては、というか、ほぼほぼ左右が見切れるか、画像潰れるか等の表示になる。ふりーむ!のサムネはスクショ限定で、加工画像禁止だが、ノベコレで掲載する画像は処理OKなので、載せるときは画像アスペクト比を考えるといいと思う。

画像4

たとえば、単に上下をこうした画像を載せればいいと思うよ、っていう。

今回は立ち絵素材をCHARAT(キャラット)を使用。規約読んで、かわいいし、他とかぶりにくいし、差分チックなものも作成できて、サイズも悪くないので。立ち絵をこういうタッチのものにしたので、画面も少しポップな方向にまとめていく。

で、今回のベストな画面構成ってどんな感じかなとクリスタでざっと作る。
以下、没案の一部。(このやりとりはテストなので作中には出て来ない)

画像1
画像2

案Aも悪くはないけど、もう一捻りほしいし、このままではノベル寄りゲームっぽい。カウントダウンや選択肢のベストな位置も難しい。
案Bはもう少しこねくり回すにしても、別のゲーム向きなんじゃないかな。
とかやってて、

画像3

こうなった。ぱっと見、割と普通っぽいけども。
実際に作ってみると、オーソドックスなADV形式を『16:9』(横長)にしづらいなって感じる。
何気なく遊んでいるだけだとあまり感じないと思うけど、『左右の両サイドが余計』になりがち。立ち絵というか、キャラが動くにしても、基本は文字ベースで進行するので、文字は中央寄りにして視線を集中させたい。単純に、横長に文字を表示させると読みづらくなる。読むのに時間がかかる。目が滑る。
と思って、スマホでリリースされているゲーム見ると、実際、メッセージウィンドウが左右が画面端までないやつって結構ある。だよなぁと一人で納得する。あと、画面の両端に目一杯メッセージウィンドウがあるものでも、右側はほとんど余白的存在になりがちだ。手の位置的にもボタンは右側に置きやすい。(左利きの人たちはどう感じているのだろう)

画面が横長になると、立ち絵にも影響が出る。表示されるキャラが一人だと画面の左右両サイドが余計に寂しくなるのもあるし、キャラも横長画面の方が等身高めなものが必要になったり、カメラとの距離が遠くなったりとか、まるまま同じようには行かない感触。

今回素材の関係もあってメッセージウィンドウの両端カット作戦は使用しない。メッセージウィンドウも透けない。(理由は察してほしい)
左のスペースにはキャラの顔が表示されるゲームというのもあるが、今回はそれもしないので、メッセージウィンドウの左上に乗り出しがちなキャラ名表示を置いてみた。
読み方がわからなくなるようなキャラ名だが、色に応じているので、キャラ毎に固有色になる仕様だけでも見やすいかなと。別にそこが主役ではないし。今回は表情差分がそこそこあるのと、総プレイ時間を短めにしたいこともあり、地の文も少なめにしている。文字数の調整があるので、こういうのは最初に決めておきたいなっていう。

システムボタン(セーブ・ロード・オート・スキップ等)は便利ではあるんだけど、常時置くと画面がごちゃつきかねないデメリットもある。
長編ではないので、今回はメニューボタン1個でシンプルに。

画像5

メニュー画面ものすごくシンプルだけど、メッセージスキップがこの位置にあればスキップもそんなに苦にはならない気がした。Ctrlキー押すという手もある。戻るボタンはデフォの右上にあると不便なので、これだけは右下に置きたかった。

他のシステム系画面は色変えたくらいで、

画像6
画像7

そこまで凝ったことはしていないが、今までこの辺りを自分で変えてはいなかった(他の人の配布UIを設定していた)ので、今回こそは、というのをクリアした。もう少し差を出してもいいけど、とりあえず全体の統一感はほしいよね。

上記のアイコンなどで爆弾感を盛り、

画像8

この選択肢の表示される黒い円も爆弾感を少し出したかったのでこうなった。ちなみに、カウントダウンの数字が2桁から1桁になるところで表示のバランス上、少々問題が発生したが、力業で解決している。

クリック待ちグリフ(文が表示されるところに出る、ぴょこぴょこするアレ)は小さいけど時限爆弾アイコンだよ。ここが丸いので、メニューボタンが四角い。横棒3本線のアイコンなのにメニュー画面が横並びの丸系じゃん、リストみたいなやつじゃないのかよ!というツッコミないと思うけど、これが結局一番マッチしたんだ……。わかりやすさも大事。

ノベコレ版のバッジも爆弾つながりである。爆発しろってスラングが死語かどうかわからない。

4.キャラについて

ビジュアルが先行。見た目が好みの感じになったかもしれない。
紫乃、緑果、祈赤、紺助、黄魅、という順番で作った。

紫乃さんは色っぽいおねぇさんいいなっていう感じで生まれた。そこはかとなく色っぽいと思う。恋愛感情がどこかに行ってる紺助が一番ドキドキする相手なのが紫乃さんなのは仕方ない。薄着だけど、多分ショールか何か見えない位置にあるんだと脳内補完してる。

一番書きやすかったのは緑果。ちなみに緑河緑果のことだけ、紺助は苗字呼びする。距離感大事。攻略してみたかったランキングあれば緑河が一番の可能性。割とリアルにいそうな性格してると思う。フレンドリーな大学サークルだとこれくらいの距離感あるんじゃないかな。ちなみになんのサークルかは特に本筋に関係ないので明言していない。
冒頭で『――ずっと好きな人がいた。それだけのこと。』という文が出てくるが、これに唯一当てはまらないのが緑河。

メインヒロインがなんで祈赤になったかというと、主に見た目が好きだからですね。目とか表情とか。そして幼なじみが勝利する話にしてみたかったのでそういう関係性に。

ぴこぴこ祈赤

表情によって触覚が動くのである。ただ無口でコミュ力低そうなだけだと、見た目とか付き合いの長さだけの子だが、ちゃんと考えてるのでそわそわしつつも、先に告白する、非受け身系。無口無表情系は露骨に笑わなくていいという宗教により、紫乃さんみたいな笑顔は見せない。その代わり、頬は赤くなる。

紺助は男キャラも作ってみたらなんかいい感じだったので、顔出しあり主人公になった。笑顔が眩しいが、この顔の表情差分は祈赤の前でしか見せない。紫乃さんが気にしている部分である。
作る側としては『紺助の立ち絵表示無し』かつ『紺助が喋る』シーンが地味に面倒で、力業で解決している。一番バグりやすい。
他のキャラ攻略できねぇのかよ、というのについては、紺助の性格も一因かも? 今回はそういうラーメンじゃないので……恋愛がテーマだけど恋愛ゲームかというと怪しいのである。トゥルー以外もう少し何かあってもいいが、プレイ時間めっちゃ延びそうだよね。

黄魅は話をわかりやすくしてくれるキャラ。あやかしなので……人間と違うので……という理由で泣き顔はない。不憫っぽいが、平たく言うと、フラれた腹いせに嫌がらせしてるし、あわよくば自分を選ばせようとしている、あやかし思考。プレイヤーにとっても匂わせレベルでしか伝わらない上、紺助にもまったく伝わっていないし、実らないなら忘れてほしいタイプ。
黄魅だけ和風な曲で、これが冒頭シーンなのでタイトル画面に合う曲が見つからず、ちょっとタイトル画面寂しくなって「あれ? このゲーム音楽ある?」みたいになったのはアレ。

画像14

あと、今回は各キャラにイメージBGMと色がある。(キャラ毎に音楽変わるのはギャルゲにはよくあるけど、乙女ゲーもそうなの?)
色はキャラ名表示のところと、選択肢の矢が刺さったハート、エンディング名の色、エンドロールの背景のところで共通している。ちなみに、各色は名前があるものを使っている。(自サイトも基本的にそうしている)

【紺助】群青色(#4c6cb3)
【祈赤】撫子色(#eebbcb)
【紫乃】藤紫(#a59aca)
【緑果】萌黄(#aacf53)
【黄魅】淡黄(#f8e58c)

みんな和色。アイドルみたいだ。

5.おまけ(謎の隠れ仕様)

そして、絶対誰も気づかないだろう隠れ仕様がある。
紺助の立ち絵が表示される際の位置に注目してほしい。

画像11
画像13
画像12

……おわかりいただけただろうか。
髪型の関係でわかりにくいが、実はキャラ毎に距離感が違うのである。
緑果と紫乃に対する紺助の位置は固定だが、紫乃さんは緑果より30紺助に近い位置。紺助は他の二人より110も祈赤に近く、祈赤も紫乃さんより10紺助に近い(祈赤と緑果は40差がある)。黄魅はそもそも隣に紺助が表示されることがない。そーしゃるでぃすたんす。謎のこだわりが仕込まれていた。

あと、なんとなく自分で作って、使おうかな? と思ったけど、雰囲気に合わないので没になった音源はこちら。

もっとポップなノリだったらいけた気もするが、立ち絵の絵柄の割に生真面目に恋愛感情とは何か議論してる気がしたので。


プレイしてくれた方と、ここまで読んでくれた方、ありがとうございます。



この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
左右空想計画(下城サユウ)

よろしければサポートお願いします!いただいたサポートはクリエイターとしての活動費に使わせていただきます!