ヘルプTOP / 使い方ガイド / Webゲーム

Webゲーム

HTMLファイル1つで完結する小さなゲームをモデルに書いてもらいます。完成したものはその場で遊べて、あとから改造もできます。この画面の下にあるビジュアルノベルも、同じ流れで作れます。

Webゲームの作成画面。左に種類・お題・ライブラリ・モデルの設定、右に生成されたゲームのプレビューが表示されている
左が設定、右がプレビュー。完成したゲームはこの画面の中でそのまま動きます。

1. 種類とお題

ゲームの種類は3つです。それぞれ、モデルに要求する操作と仕組みが決まっています。

横スクロールアクション走る、跳ぶ、障害物を越えるゲーム。左右移動、ジャンプ、重力、得点またはゴールを求めます。
タップ回避タップで浮かび、障害物の間を抜けるゲーム。押すたびに上昇する動きと、通過得点を求めます。
スクロールシューティング敵を避けて撃ち、得点を伸ばすゲーム。移動、発射、複数の敵、当たり判定を求めます。

お題は種類ごとに用意された6件のプリセットから選びます。自由記述はありません。文章が変わると条件が変わってしまい、モデル同士を同じ土俵で比べられなくなるためです。「おまかせ」を選ぶと、世界観と主人公はモデルが考えます。

2. ライブラリ「なし」と「あり」

ここがこの画面の比較軸です。同じお題を、下の2つの条件で作って見比べられます。

なしゲームループ、キー入力、音、HUDまで全部モデルが書きます。素の実力が出ます。
あり共通エンジンMFXGameを渡します。ループ・入力・音・HUD・ステージ・ボスはエンジンが受け持ち、モデルはゲームの中身だけを書きます。

「あり」のエンジンは配布されるHTMLにも同梱されるので、書き出したファイルは単体で動きます。「なし」と「あり」は別の条件として扱われ、作品管理では別のグループになります。土台が違うものを同じ列に並べないためです。

3. モデルとやり直し

モデルを1つ選びます。追加やり直しは0〜3回で、既定は2回です。初回と合わせて最大3回試します。イラストやアイコンより既定が多いのは、ゲームは1回で完成しないことが多いためです。

コンテキスト長も選べます(既定32,768)。生成ボタンの下にある「コンテキスト長」から変更してください。長いコードになるほど大きな値が要りますが、そのぶん時間とメモリを使います。ゲームは4種類のなかで一番長いHTMLを書くので、やり直しのときに前回のHTMLを送り返すぶんまで含めて余裕が要ります。

選んだモデルと回数はゲーム画面の分としてブラウザーに残ります。

作られたゲームが表示されるまで

  1. モデルがHTMLを1つ書く

    <!doctype html>から始まる完全な1ファイルを書いてもらいます。画像も音も外部から読み込みません。

  2. 保存前に中身を検査する

    外部からの読み込み、通信、動的なコード実行が入っていないか、容量とJavaScriptの文法に問題がないかを調べます。ここで失敗すると、検出した理由と前回のHTMLを同じモデルへ渡して書き直してもらいます。

  3. 隔離した枠の中で動かす

    検査を通ったHTMLだけを、権限を絞った枠(iframe sandbox="allow-scripts")で開きます。読み込んだ直後にエラーで落ちた場合や、時間内に始まらず固まった場合は、その内容をモデルへ伝えて自動で作り直します。

キーボードで操作するとき ゲーム画面にマウスを重ねるか、ゲーム画面をクリックしてからキーを押してください。ゲームは隔離された枠の中で動いているので、その枠に入力先が移っていないとキーが届きません。「大きく遊ぶ」で全画面にもできます。画面内のタッチ用ボタンはそのまま使えます。

作ったあとの改造

完成して動作確認まで通った版には、改造ボタンが3つ出ます。

改造は1つずつ積み上がります。BGMを足した版にボスを足す、という重ね方ができます。作った版は上部のタブで切り替えられるので、改造前と後を見比べられます。改造で壊れたら、前の版のタブへ戻ればそのまま遊べます。

改造した版は、モデル同士の比較グループには入りません。比べているのは元のゲームを作る力なので、そこへ改造後の版を混ぜないためです。

オートプレイ(自動で遊ばせる)

完成して動作確認まで通った版には「オートプレイを作る」が出ます。そのゲームを書いたのと同じモデルに、自分のゲームを自動で遊ぶ攻略スクリプトを書かせる機能です。「自分の書いたコードを理解して遊べるか」という第2のものさしになります。

作品管理の比較詳細では、オートプレイを2件以上作ると「オートプレイで比較」が使えます。選んだ分を同じ大きさで一斉に再生し、モデルごとの遊び方を横に並べて見比べられます。録画機能はありません。並べた画面はOS標準の画面録画(Windowsは Win+G、macOSは Shift+Command+5)で撮ってください。5枠以上を同時に動かすときは、端末の性能に注意してください。

動かないときの救済

実行時エラーで落ちるプレビューがエラーを検知すると、その内容を自動でモデルへ渡して作り直します。操作は要りません。
やり直しを使い切った「やり直しを+N回追加して続ける」が出ます。直前の試行のHTMLと失敗した理由を引き継いで、続きから作り直します。最初からやり直しにはなりません。
エラーは出ないが遊べない「うまく遊べない → 作り直す」から理由を選びます。操作が効かない/ジャンプできない/すぐ終わる/動かない/その他の5つで、選んだ理由をモデルへ伝えて直してもらいます。
コンソールエラーの表示ゲームが出したエラーの件数と内容を赤で表示します。これは自動では直しません。「動いてはいるが壊れている」ことに気づくための目印です。

検査が見ているのは「エラーで落ちる・固まる・規格違反」までです。文法も動作も問題ないのに、地面に足が着かずジャンプできない、といった作りの不具合はすり抜けます。だから最後は人が遊んで判断する形にしてあります。

安全のしくみと書き出し

ビジュアルノベル

Webゲームのすぐ下にある、もう1つの作成導線です(サイドメニューの「Webゲーム → ビジュアルノベル」)。同じ2カラムの画面で、ジャンル・表現・モデルを選んで作ります。

モデルが書くのは物語と分岐だけです 人物のシルエット、背景、分岐やBGMを持つノベルエンジンはMorphifexが用意します。そのため絵の差は出ません。差が出るのは話の作りと分岐の構造です。完成したノベルはその画面でそのまま読めます(クリックかスペースキーで進みます)。

遊べない構造は保存しません。登場人物にいない話者がしゃべる、最初の場面からたどり着けない場面がある、といったものは検査で落とし、理由を伝えて書き直してもらいます。実例は作例集にあります。

できたノベルは他の作品と同じように保存され、同じ条件で比べるの対象になります。作品ギャラリーへ載せると、書き出したサイトの上でもそのまま読めます。

うまくいかないとき