見出し画像

MZ制ノベルゲーをブラウザ公開する

2024/10/05 インディーゲームWEBオンリー開催。

ええ~っ!

インディーゲームとその天才作家たちが
たくさん集まるだけでも神なのに、
その興奮が自宅で味わえちゃうんですか~!?
でも私、開発中だし……動くやつないし……えっペーパーだけでもOK!?

……というわけで、ハードルの低さに釣られて参加を決意しました。

で、急に体験版を飾りたくなりました。

開催に向けてチラシや没イベント集なんかを準備していたら、やっぱり動くものを展示したくなりました。

イベント2日前のことです。

しかし手元にあるのは、ゲムダンで展示したデモだけ。
遊べるには遊べるのですが、これはデパートの試食と同じ。
1周5分程度のイベントシーンをバラバラに読めるだけ。

お忙しい展示の場で試遊いただくには丁度いいのですが、
WEBオンリーの配布物……ダウンロードコンテンツとして
この3cm角つまようじ付のゲームをお持ち帰りいただくのは
なんとなく忍びない。

ちゃんとした体験版作りなよ。
というわけで、当日限定で遊べる状態にしようと考えました。

バーチャルイベント会場、ブラウザで。

Itch.io挫折

まず最初に私は名前を知っていたブラウザゲーム配布サービス、Itch.ioでの期間限定配信を試みました。
イベントに合わせてページを開け閉めしようかなって。

結論から申し上げますと、挫折しました。

ツクールMZ制のゲームをブラウザで動かしたいので、 ツクールMZでデプロイメントしたフォルダをそのまま圧縮したZIPをアップロードします。
中に入ってるindex.htmlのおかげでブラウザ動作するっぽいんですけど、自分には分かりません。

このindex.htmlはローカルで実行したところ、
Your browser does not allow to read local files. というエラーが出ましたが、これは正式な挙動のようです。

Itch.ioにアップロードするゲームは1GB以内でないといけないそうです。
大作は大人しくSteamに上げた方がいいかもしれません。

また、実際にゲームをプレイしようとしたところ、複数のエラーにぶつかりました。

エラー例

・ごめん先にメアド確認して。
  ←すみませんでした。

・中のファイルが1000個超えてるよ!
  ←不要なファイルを削除対応

・解凍したゲームが524MB以上だよ!
  ←軽量化で対応

・UTF-8ではないファイル名が含まれているよ!
  ←不自然なファイル名を探したが見つからず挫折

エラーが一つずつ出るので正直対応が難しかったです。

Itch.ioでアップロードするうえで大事なこと

あとから見つけましたが、こちらのドキュメントに注意事項がまとめて書いてありました。

・ZIP解凍後に1000を超えるファイルがあってはいけない
・パスを含むファイル名が240文字を超えてはいけない
・解凍後、容量が500MBを超えてはならない
・それぞれのファイルが200MBを超えてはならない
・ファイル名はUTF-8でエンコードされなくてはならない

先ほど1GB以上のゲームはアップできないと書きましたが、実際にはその半分を目安にすると良さそうです。
また、ファイル数が1000以上あると駄目なので、ツクールのアセットをフルに使ったような作品は難しいですね。

かつてツクールにはRTPというものがあってな……

軽量化、データ削減については後で詳しく書きます。

また、ゲーム制作全体に言えることですが、日本語や記号を含むファイル名を避けましょう。
ただ、ファイル名については元々気を使っていたため、何がひっかかったのか正直よく分かりませんでした。

対応してもよいのですが、とにかく早くブラウザでの動作を確認したかったので今回は別サービスの利用に移りました。

Plicy編

https://plicy.net/

実はPlicyには明るくないのですが、
最近遊んだゲームがここで動作していたこと、
ツクールMZ制のゲームがアップできるらしいとのことで選びました。
さいはて駅はいいぞ。

画像
しれっとすごいことが書いてある

Plicyは下記のエンジンに対応しているようです。

・ツクール2000、MV、MZ
・Unity
・ティラノS/B
・WRエディター
・WWA Wing
・HTML/WebGLで動作するもの
・Clickteam Fusion 2.5
・Construct
・ラノゲツクール
・Light.vn
・HSP
・Cocos 2D
・GameMaker
・GDevelop
・GODOT
・emscripten

多すぎる。
知らないエンジンもたくさんある……

ゲームの最適化はItch.ioの時に済ませたので、
アップロードもスムーズに完了しました。
アップロードのあとサイト側の処理としてコンバートが行われますが、
これも数十分後にページを更新すると完了しています。
日本語ファイル名も使えるらしく、
ファイル名で怒られることはありませんでしたね。

容量は1GBまでなので、容量制限も少し緩めでしょうか。
アップデート機能を利用して継ぎ足すと、もっといけるそうです。

無関係のビルドミスで4回アップしなおした馬鹿
1日10回もアップロードできるから大丈夫……

画像
画像

動いた!
Live2Dもムービーも動いてる!

ツクールMZのゲームがブラウザで動く~?
プラグインもりもりの魔改造ツクールは別なんじゃないの~?
とかスカしててすみません。
HTML舐めてました。
HTMLが何かも分からないまま舐めていました。

私が舐めたHTMLは虚像であって、その舌は輪郭にさえ届いていなかった。

人の子よ、漢字でGOがツクールと知れ。

最適化、軽量化について

ここが今回の本題かもしれません。
今回ブラウザでゲームを配布するために行った軽量化措置を軽く書いていきます。
RPGツクールMZでノベルゲームを作るピンポイントな層に刺さると思います。

PNG画像インデックス化

画像
画像

画像の色モードをRGBからインデックスにします。
よく分からないけど、色数を256まで減らしているっぽい?
色数が256と聞くと致命傷に聞こえるのですが、
このゲームはもともとモノクロ調だったためか自然になる場合が多かったです。
ノベルゲームではスチルや背景など大きな画像がたくさんあるので、これを削減できるのは助かりました。

画像
透明を黒に置き換えて分かりやすくしたもの

透過画像にも使えるようですが、画像のとおりグラデーションが失われてしまいます。
透明は1色しかないねん。
透過画像でインデックスを使う時は、透過がはっきりした画像がいいでしょう。

不要なアセットの削除

画像

地味に大事でした。
いやどう見ても大事なんだけど、正しい使い方が分からないから
全然消えないじゃん!って思ってた。

画像

RPGツクールMZにはご存知のとおり、誰でもRPGを作れる豊富なアセットと、それを使用したデータベースが揃っています。
残念ながら今回作るのはノベルゲームなので、これら公式素材のほとんどは使用しません。

画像
公式アセット0になってしまった画面

残念ですが、公式素材はデプロイメントの際に消えていただくことになります……

デプロイメントのオプション、未使用ファイルを除外するはゲーム全体のイベントやデータベースを参照し、ゲームに使われなかったファイルを削除してくれる神機能です!

そう、データベースから。

画像
画像

歩かないダンジョンのチップと、
使ってない魔法120種がデータベースにあったら、そりゃ消えないわな……

この不使用アニメーションをデータベースから消すことで、
エフェクト画像や効果音などのデータを大きく削減できました。

この未使用ファイルの除外の注意点ですが、
スクリプトやプラグインで使用した画像、音声も一緒に消されてしまうことがあります。

画像
プラグインによってimg内に追加したフォルダはよく消える。
画像
スクリプトで表示してるピクチャもよく消える。

デプロイメント後に手動で追加するファイルはマニュアルにまとめるとよいです。

あと、自分は古いファイルに「OLD」と命名する癖があるので、OLDで検索して一括削除します。

Live2Dの最適化

画像
水色がはみ出し部分

ゲームの容量ではなく動作の軽量化ですが。
Live2Dでは子デフォーマやアートメッシュが親デフォーマをはみ出すと、動作が重くなるそうです。
これをガッツリやっちゃっていたので、全部修正しました。

既にパラメータを設定してしまったデフォーマの修正に際して、
Romp of dump の作者ザクロスケさんから情報をいただきました!
本当にありがとうございます……

いただいたリンクが現在消えていたので、うろ覚えの手順をここに残しておきます。

Live2DではCtrlを押しながらデフォーマを変形することで、中身をそのままでデフォーマのみの形を変形することができます。

ウニで例えると身はそのままで、殻だけが伸び縮みするイメージですね。



しかし既にキーが打っているデフォーマをCtrlで変形した場合、基準となる形が崩れ、他キーでの形状が大きく崩れてしまいます。
よってLive2Dでは設定済デフォーマのはみ出しに気づいても、デフォーマごと作り直さなくてはいけませんでした。

しかし下記の手順により、デフォーマのキーを新規デフォーマに移植できるそうです。(バックアップ推奨)

画像

変更したいデフォーマを選ぶ。

画像

元と同じ条件のデフォーマを新規に作成し、移植先とする。
同じ過ちを犯さないように、子要素のキーフォームを考慮にチェックを入れる。(任意)

画像

移植先デフォーマを移植元デフォーマの子とし、移植元のデフォーマに
デフォーマを子要素に適用をする。

画像
画像

これで新しいデフォーマにキーが移植されました。
さっぱり分からないけど。
変形もそこまで違和感ないです。
Live2Dってすごいや。

ちなみに、刑死のためのカウンセルのモデルは一人あたり
ポリゴン5000以内、テクスチャは2048×2048が一枚です。

もしブラウザ版を遊んで重いと感じたら、これよりテクスチャサイズを小さく作成するとよいと思われます。

その他ゲムダンからの変更点

・ギル(細長い男)のイベントが変更。カスの高説を垂れるようになった。
・クレジット追加
・タイトル画面でPVを流さないようにした(容量削減のため)

反省点

画像
はみ出る

フルスクリーンのゲームをブラウザで遊ばせるのは正直しんどいと思いました。


インディーゲームWEBオンリー、楽しみですね。
今日これを書いたのも、イベントが楽しみすぎたからだったりします。

アップロードしたゲームはイベント中限定で公開しておくつもりなので、よろしければ遊んでください。

https://plicy.net/GamePlay/190091

美味い部分だけちょっと食べられる3cm角切仕様となっております。

いいなと思ったら応援しよう!