CraftNovaに投稿したゲームを遊んでみたら、「画面の下が切れていてボタンが押せない」「下にスクロールしようとしても動かない」ということはありませんか？ AIに作ってもらったゲームでは、実はよくあるトラブルです。

このページでは、運営が実際に出会ったケースをもとに、なぜこうなるのか、どうすれば直せるのかを説明します。直し方はAIに頼むだけなので、プログラミングがわからなくても大丈夫です。

どんな状態になるの？

よくある症状は次のようなものです。

  • スタートボタンや選択肢が画面の下にかくれていて、押せない
  • 指やマウスホイールでスクロールしようとしても、画面が動かない
  • 自分のパソコンで開くと全部見えるのに、CraftNovaに投稿すると下が切れる
  • スマホだと切れるけれど、パソコンだと大丈夫（またはその逆）

なぜ起きるの？

CraftNovaでは、ゲームを決まった大きさの「わく」の中で動かしています。そして、遊んでいるときに画面がずれて操作しにくくならないように、ページ全体のスクロールは止めています。

そのため、ふつうのWebページのように「縦に長く続いていて、下にスクロールして読む」作りのゲームだと、わくに入りきらなかった部分が見えなくなってしまいます。

原因として多いのは、次の3つです。

1. 縦に長い「Webページ型」の作りになっている

文章や選択肢がたくさんあるノベルゲーム・RPG・クイズなどで起こりやすいパターンです。AIが「ゲーム」ではなく「Webページ」のつもりで作ると、内容が下へ下へと続く作りになります。 運営が実際に見たケースでも、ゲームの中身はとてもよくできていたのに、選択肢が画面の下にかくれて先に進めなくなっていました。

2. 画面の大きさを数字で決めている

width: 400px や height: 700px のように、大きさを数字で決めていると、画面の小さいスマホでははみ出してしまいます。スマホやパソコンによって、ゲームを表示できる広さはちがうからです。

3. スマホのアドレスバーの分を考えていない

スマホのブラウザでは、画面の上や下にアドレスバーが出たり消えたりします。100vh という書き方で高さを決めていると、アドレスバーの分だけ下がはみ出すことがあります。

直し方

いちばんかんたんなのは、投稿ページの「ゲーム作成ガイドライン」をAIに渡して作り直してもらうことです。ガイドラインには、CraftNovaのわくにぴったり収まるための注意書きが入っています。

すでにできあがったゲームを直したいときは、ゲームのHTMLといっしょに、次のようにAIへ頼んでみましょう。

アクション・パズルなど、1画面で遊ぶゲームの場合

このゲームを、スクロールなしで画面にぴったり収まるように直してください。
・画面の大きさは window.innerWidth と window.innerHeight から計算して、数字で決めないこと
・body は margin: 0、height: 100dvh、overflow: hidden にすること
・ゲームの中身やルールは変えないこと

ノベル・RPG・クイズなど、文章や選択肢が多いゲームの場合

内容をどうしても1画面に収められないときは、ページ全体ではなく、ゲームの中に「スクロールできる場所」を作るのがコツです。わくの中に作ったスクロール場所なら、CraftNovaでもちゃんとスクロールできます。 

このゲームはページ全体をスクロールする作りになっていますが、
ページ全体のスクロールが使えない環境で遊べるように直してください。
・html と body は height: 100%、overflow: hidden にすること
・文章や選択肢が表示される部分を、overflow-y: auto のスクロールできる場所にすること
・画面が切り替わったときは、そのスクロール場所を一番上に戻すこと
・ゲームの中身やルールは変えないこと
直してもらったHTMLは、マイページの「編集する」から貼りかえられます。ゲームを投稿し直す必要はありません。

投稿する前にチェックしよう

はみ出しは、投稿する前の確認で多くを防げます。

  • ブラウザの窓を小さくしてみる：パソコンで開くときに、窓を細く・低くしても全部見えるか確かめる
  • スマホでも開いてみる：縦向きで、ボタンや選択肢が全部押せるか確かめる
  • 最後の画面まで進めてみる：はじめの画面は大丈夫でも、途中の画面だけ長くなっていることがある

非公開で投稿すれば、ほかの人には見えない状態でCraftNova上での動きを確かめられます。うまく動くのを確認してから公開にするのがおすすめです。

まとめ

  • CraftNovaでは、ページ全体のスクロールは使えない
  • 縦に長いWebページ型の作りや、大きさを数字で決めた作りだと、下が切れやすい
  • 直すときは、ガイドラインを渡して作り直すか、上の頼み方をAIに伝える
  • 文章が多いゲームは、ゲームの中にスクロールできる場所を作る

それでも直らないときは、お問い合わせから気軽に相談してください。