画像・音・ライブラリが読み込めないときの直し方

自分のパソコンでは動いていたのに、CraftNovaに投稿したら「画像が出ない」「音が鳴らない」「画面が真っ白のまま」。 そんなときは、ゲームがCraftNovaでは読み込めないものを使っている可能性が高いです。

このページでは、CraftNovaのゲームで使えるもの・使えないものと、使えないものを使っていたときの直し方を説明します。

なぜ読み込めないものがあるの？

CraftNovaには、いろいろな人が作ったゲームが集まっています。遊ぶ人が安心して遊べるように、ゲームはインターネットと自由に通信できない、守られた場所の中で動いています。

そのおかげで、ゲームが遊んでいる人の情報をどこかへ送ったり、知らないサイトから勝手にファイルを読み込んだりすることはできません。そのかわり、ゲームを作る側から見ると「外から読み込む」ことに制限があります。

使えるもの・使えないもの

かんたんに言うと、「ゲームに必要なものは、すべてHTMLファイル1つの中に入れる」のが基本です。例外は、決められた場所（cdnjs・jsDelivr・Google Fonts）から読み込むライブラリとフォントだけです。

よくある症状と原因

画像が出ない・四角や透明のまま

インターネット上の画像を読み込もうとしている可能性があります。AIは「ここに好きな画像のURLを入れてください」という形でゲームを作ることがありますが、CraftNovaではそのURLは読み込めません。

音が鳴らない

音声ファイルを読み込もうとしているか、スマホで音を鳴らすための準備が足りていない可能性があります。スマホでは、画面をタップしたあとでないと音を鳴らせないきまりがあります。投稿ページのガイドラインに、そのための書き方が入っています。

画面が真っ白のまま・何も始まらない

ライブラリが読み込めず、ゲームのプログラムが止まっている可能性があります。決められた場所以外からライブラリを読み込んでいたり、import 文を使っていたりすると、こうなりやすいです。

原因を調べる方法（パソコン）

パソコンのChromeやEdgeなら、原因をかんたんに確かめられます。

1. CraftNovaでゲームの画面を開く
2. キーボードの F12（Macは Option＋Command＋I）を押す
3. 出てきた画面の「Console（コンソール）」タブを開く

赤い文字で Content Security Policy や violates という言葉が出ていたら、読み込めないものを使っているサインです。そのメッセージをコピーしてAIに見せると、どこを直せばいいか教えてくれます。

直し方

いちばん確実なのは、投稿ページの「ゲーム作成ガイドライン」を最初にAIへ渡して作ることです。ガイドラインには、CraftNovaで使えるライブラリや、素材をコードで作る方法がまとめて書いてあります。

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

このゲームを、外部のファイルやURLを一切読み込まずに動くように直してください。
・画像はCanvasで描くか、Base64のdata URLにしてHTMLに埋め込むこと
・音はWeb Audio APIで作ること
・ライブラリは cdnjs.cloudflare.com か cdn.jsdelivr.net から
  <script src> で読み込み、import文は使わないこと
・ライブラリのバージョンは数字で固定すること（latest は使わない）
・ゲームの中身やルールは変えないこと

まとめ

• CraftNovaのゲームは、遊ぶ人を守るためにインターネットと自由に通信できない
• ゲームに必要なものは、HTMLファイル1つの中に入れるのが基本
• ライブラリは cdnjs と jsDelivr、フォントは Google Fonts から読み込める
• うまくいかないときは、F12のコンソールに出るメッセージをAIに見せる

画面がはみ出すときの直し方は「ゲームの画面がはみ出す・下までスクロールできないときの直し方」で説明しています。