Polar Games
ガイド

HTML5ゲームのソースコード:実際のパッケージの中身を公開

Polar Gamesマーケットプレイスの実際のパッケージを開いてみました。フォルダ、ファイル、ビルド手順、ライセンス、購入前に確認したい質問をまとめています。

パンダのPolarzinhoが星模様のギフトボックスを開けると、光る波括弧や角括弧、ファイルフォルダ、虫眼鏡が中から浮かび上がってくるイラスト。

HTML5ゲームのソースコードという言葉は、3つの異なる意味で使われます。そのままアップロードできるビルド、編集するための開発者向けファイル、特定のエディタでしか開けないプロジェクトです。当社マーケットプレイスのソースコード付きHTML5ゲームテンプレートは、最初の2つをプレーンなWebファイルとして一緒に収めたものです。このガイドでは、実際のパッケージを開いて、その中身を見ていきます。

当社はこれらのテンプレートを販売しているので、市場を中立に調べた記事ではなく、自社パッケージのツアーとしてお読みください。いくつかのエディション(主にVelvet Pool、Puttide、Sunset Rally)を見て、公開マニュアルと利用条件を読み、箱の中身、動かすのに必要なもの、入っていないものを書き留めました。各マニュアルは商品ページからリンクされているので、支払う前に一行ずつ確認できます。

「HTML5ゲームのソースコード」が意味しうるもの

売り手は、ソースコードという言葉をゆるく使います。実際に何が売られているのかは、3つの問いで見分けられます。

ビルドか、開発者向けソースか、その両方か

ビルドとは、ブラウザが読み込む完成済みのゲームのことで、index.html、スクリプト、画像、音声ファイルからなります。そのままホストできます。開発者向けソースは、人が編集するために作られた版で、ファイルが役割ごとに分かれています。ビルドだけのパッケージは、アップロードはできても、気軽に変更はできません。ソースだけのパッケージは、動かす前にツールが必要になることがあります。このガイドのエディションは、両方を1つのZIPに収めています。たいていは、公開するgame/フォルダと、編集するsource/フォルダです(Ricopopでは、game/自体がソースです)。

読めるか、ミニファイされているか

ミニファイは、スクリプトを短い名前の密な数行に圧縮します。ダウンロードは速くなりますが、読むのはひどく困難です。難読化はさらに進んで、わざと名前を判読不能にします。どちらも公開中のサイトには害がありません。コードを変更するために買った場合は、どちらも障害になります。支払う前に、ライブデモのスクリプトを1つ、ブラウザの開発者ツールで開き、追いかけられるかを確かめてください。

プレーンなファイルか、エディタのプロジェクトか

テンプレートによっては、特定のゲームエディタ用のプロジェクトとして届き、そのエディタでしか開けません。それ以外は、どんなコードエディタでも開けるプレーンなWebファイルです。このガイドのエディションは後者で、HTML、CSS、JavaScript、JSONからなり、一部にはTypeScriptも使われています。

テンプレートを見る

Polar Gamesのパッケージの中身

8ボール・ビリヤードのエディション、Velvet Poolを例にしましょう。マニュアルには、ZIPの中の4つのフォルダが説明されています。

  • game/:アップロードできる状態のエディションで、公開する唯一のフォルダです。
  • source/:同じゲームを編集可能な開発者向けエディションにしたもので、README、package.json、テストが付きます。
  • documentation/:図入りのガイドとその画像が入っています。
  • THIRD-PARTY-LICENSES/:フォントのライセンス文とREADME.txtの要約が入っています。

ライブラリでは、同じパッケージが2つのダウンロードとして提供されます。完全版のパッケージ(ソースとマニュアル付き)と、ホストできる状態のゲームのみです。

Velvet Poolのゲームプレイ:上から見たビリヤード台で、CPUの対戦相手とのオープニングブレイクが並べられ、左にパワーバー、右にスピンのコントロールがある
このガイドで中身を見ていくエディション、Velvet Pool。CPU相手のオープニングブレイクで、パワーバーとスピンコントロールが見える。

game/とsource/は同じ構成です。Velvet Poolのマニュアルは、source/でファイルを編集し、変更したものをgame/の同じパスにコピーするよう述べています。途中でコンパイルされるものはありません。

Velvet Poolエディションを見る

Velvet Poolの中:ファイルマップ

ファイルマップは、購入前にコードベースを判断するいちばん安い方法です。これはVelvet Poolのマニュアルにあるもので、パスはsource/またはgame/からの相対パスです。

  • src/core/physics.js:ボールのシミュレーション、スピン、クッションの反発。
  • src/core/rules.js:8ボールのルールとファウルの判定。
  • src/core/ai.js:CPUがどのショットを選ぶか。
  • src/game/controls.js:狙い、パワー、スピンの入力。
  • src/game/progress.js:実績、クロス、キュー、試合のスコア。
  • src/game/i18n.js:14言語のテキスト。
  • src/game/localRecords.js:ローカルのスコア履歴。
  • src/game/audio.js:効果音と音楽の再生。
  • css/style.cssとcss/fonts.css:テーマ、レスポンシブなレイアウト、フォントの宣言。
  • assets/:アート、音声、フォント。logo/サブフォルダがあります。

分け方に注目してください。ルール、物理演算、CPUはsrc/coreにあります。入力、セーブ、テキスト、音声はsrc/gameにあります。マニュアルは、一度に1つの機能だけを変更するよう求めており、この構成ならそれが現実的です。クッションの調整と翻訳の修正は、別々のファイルに触れるからです。

マニュアルはさらに、source/srcとgame/srcのコードは、ミニファイやバンドルされたファイルのない、整形済みの素のJavaScriptだと述べています。Velvet PoolはWebGL2上のVanilla JavaScriptで、Three.jsを含め、コードライブラリは使っていません。変更履歴もこれを裏付けます。バージョン1.0.1で、音声、翻訳、シェーダーの1行の長い文字列が、挙動を変えずに読みやすい行に分割されました。

Puttide:同じ構成に、ライブラリを加えたもの

3Dミニゴルフのエディション、Puttideは、同じ4つのフォルダを使い、ゲームが必要とする2つの第三者ライブラリを加えています。Three.js r186(MIT)とRapier 3D 0.21.0(Apache-2.0)がlib/three/とlib/rapier/にあり、index.htmlのインポートマップがブラウザにその場所を伝えます。PuttideのFAQは、CDNからは何も読み込まないと述べているので、ゲームに必要なのはご自身のホストだけです。マニュアルは、ライブラリのファイルは、挙動を変更せずに、読める形に整形されている、とも付け加えています。

ファイルマップは、これもsource/またはgame/からの相対パスです。

  • src/course/courses.js:コースの順序と、解放の条件。
  • src/course/holes.js:Ruinsコースの形状、パー、障害物。pier.js、ice.js、lava.js、sky.jsが、ほかの4コースを持っています。
  • src/sim/constants.js:物理演算の調整値。
  • src/game/economy.js:ボール、軌跡、衣装の定義と価格。
  • src/ui/i18n.jsと、さらに3つの辞書ファイル:言語のテキスト。
  • css/style.css:インターフェースの色、フォント、レスポンシブなスタイル。
  • fonts/とmusic/:ライセンス付きのWebフォントと、2曲の音楽。

新しいホールを作るためのマニュアルの手順は次のとおりです。適切なコースのファイルで定義を複製し、固有のidを付け、パー、ティー、カップの位置を設定し、コースに追加し、そのあと言語辞書に名前とヒントを追加します。購入前にこのような手順を読んでください。自分にできる作業に見えるなら、そのパッケージは向いています。

Puttideエディションを見る

ソースにビルド手順が必要なとき

「ビルド手順なし」は、あるエディションには当てはまり、ほかには当てはまりません。ストアではなく、エディションごとに確認してください。当社の5つを、定価とともに並べます。当社のストアでは現在、各商品ページに表示される「スタジオ直販」の特典として、定価の10%引きになっています。たとえばVelvet Poolは、$39ではなく$35.10と表示されます。

  • Velvet Pool、定価$39:WebGL2上の素のJavaScriptモジュール。source/を編集してgame/にコピーします。Node.js 20以上は任意のテスト用のみ。
  • Puttide、$39:lib/にThree.jsとRapierを持つ素のJavaScriptモジュール。ビルド手順なし。Node.jsは任意で、ライブラリのバージョン管理のためだけです。
  • Ricopop、$39:素のHTML、CSS、JavaScriptモジュールで、game/自体がソースです。任意の開発者向けツール(Node.js 20以上):ローカルサーバー、レベルのチェックツール、テスト。
  • Pinloop、$24:TypeScriptとVite。game/フォルダには読めるJavaScriptとCSSがあります。Node.js 22.12以上とnpmは、ソースの編集と再ビルドにだけ必要です。
  • Sunset Rally、$39:TypeScript、Three.js r184、Vite。game/フォルダはビルド済みで、ミニファイされていません。Node.jsは再ビルドする場合のみ。

Sunset Rallyのマニュアルは、Node.js 24 LTSを推奨しています。source/の中で、npm ci、npm run typecheck、npm run buildを実行し、dist/の中身だけを公開します。また、配布されるランタイムは読みやすいよう整形されているため、再ビルドの際はminifyとcssMinifyをオフのままにするよう求めています。アップロードするのは成果物で、node_modules/ではありません。

Sunset Rallyエディションを見る

ホストする:「静的」が実際に意味すること

静的ホスティングとは、ホストがファイルを配信するだけ、ということです。Velvet PoolとPuttideのマニュアルは、インストールの全体を3つの手順で示しています。

  1. ZIPを展開する。
  2. game/の中身をすべて、FTPまたはホストのファイルマネージャーで、サイトのフォルダ(たとえばpublic_html/velvet-pool/)にアップロードする。サブフォルダはそのまま保つ。
  3. そのアドレスをブラウザで開く。

npm、ターミナル、ビルド手順、PHP、データベース、アカウントは関係しません。同じマニュアルによると、つまずきやすい点は次のとおりです。

  • index.htmlをダブルクリックしないでください。ブラウザはfile://でゲームのモジュールをブロックします。ローカルテストでは、game/の中でpython -m http.server 8765を実行し、http://localhost:8765/ を開いてください。
  • サーバーは、.jsファイルをJavaScriptのMIMEタイプで、.wasmをapplication/wasmとして送る必要があります。MIMEタイプが間違っていると、モジュールが拒否されたというエラーとして現れます。
  • 公開のホスティングにはHTTPSを使ってください。
  • セーブは、ブラウザのオリジン(プロトコル、ホスト、ポート)に紐づきます。ゲームを別のドメインに移すと、プレイヤーはゼロから始まります。
  • ページを新しく読み込むにはやはりホストが必要なので、インストール可能なオフラインアプリではありません。

ロゴ、色、ルール、翻訳の場所

どのマニュアルにもカスタマイズの節がありますが、扱う内容はエディションによって異なります。それぞれの記述は次のとおりです。

Velvet Pool

  • ロゴとブランド:assets/logo/のファイルを置き換え、CSSの対応するサイズを調整します。
  • クロスとキューのスタイル:定義はprogress.jsにあります。保存された装飾品が機能し続けるよう、アイテムIDは変えないでください。
  • CPUの挙動はai.js、物理演算はphysics.js。ルールや物理演算を変更したあとは、8ボールのテストを実行してください。
  • 翻訳:src/game/i18n.js。言語の一覧はLANGSにあります。

Puttide

  • 色とフォント:css/style.css。
  • 物理演算:src/sim/constants.js。装飾品の価格:src/game/economy.js。既存のIDは保ってください。
  • 音楽:ライセンスのあるファイルをmusic/にコピーし、src/audio/audio.jsのトラックの割り当てを更新します。
  • ホール、パー、解放:上で説明したコースのファイル。

GridsparkとSunset Rally

Gridsparkでは、商品のFAQによると、インターフェースのテキストはsrc/locales.js、ルールの定数とパレットはsrc/config.js、パズルのルールはgame.js、board.js、generator.js、shapes.jsにあります。Sunset Rallyでは、キャンペーンの試合と星の条件がCampaign.ts、ロケーションがPlaces.ts、物理演算がphysics.ts、採点がmatch.tsにあります。英語とポルトガル語の文字列はsrc/i18n.ts、残りの12言語はsrc/locales/にあります。

Puttideの設定パネル。言語のドロップダウン、音楽と効果音のスライダー、振動、モーション軽減、狙いのヒント、色覚サポートのスイッチがある
Puttideの設定:言語、音量、振動、モーション軽減、狙いのヒント、色覚サポート。言語のテキストは、上に挙げた辞書ファイルにあります。

マニュアルが触れていない点にも注目してください。Puttideのマニュアルは色、物理演算、ホール、価格、音楽を扱っていますが、ロゴを差し替える手順はなく、Sunset Rallyのマニュアルには専用のブランド設定の節がありません。最初に変更するのがブランドなら、購入前にお尋ねください。

Gridsparkエディションを見る

自動テスト:何を確認し、何を確認しないか

Velvet Poolのsource/フォルダには、テストスイートが含まれています。Node.js 20以上で、source/の中でターミナルを開き、npm testを実行します。これはnode tests/run.jsと同じです。依存関係のインストールは不要です。マニュアルによると、このスイートは物理演算、8ボールのルール、CPU対戦、翻訳キーの一貫性を確認し、ブラウザや実機でのテストの代わりにはなりません。

翻訳キーのチェックは、14言語のゲームに必要なテストです。ある言語でキーを追加して別の言語で忘れると、人間は何週間も気づかないかもしれません。

すべてのエディションにテストがあるわけではありません。Puttideのマニュアルは、手動の確認だけを説明しています。PinloopとBeep Outは、開発者向けコマンドとしてnpm testを挙げており、Ricopopの開発者向けツールには、レベルのチェックツールがあります。

ライセンス、第三者の表示、変更履歴

ストアの利用条件では、1回の購入ごとに、エディションを最終製品1つ(ご自身のもの、またはクライアント1社のもの)で使うための、永続的かつ非独占的なライセンスが付与されます。その中でコード、アート、音声を変更でき、プレイヤーは無料または広告を通じて利用できます。テンプレート、そのソース、アセットを、単体で、テンプレート、キット、アセットパックとして、または開発者向けの別の製品の中で、再販・共有・再配布することはできません。ライセンスは、サポートが終わっても失効しません。

第三者の部品にはそれぞれのライセンスが適用され、その表示は製品とともに保管します。Velvet Poolでは、SIL Open Font License 1.1のフォント2つ、ManropeとFraunces、その文面はTHIRD-PARTY-LICENSES/とフォントの隣にあります。Puttideの一覧には、Three.js(MIT)、Rapier(Apache-2.0)、RubikとFredokaのフォント(OFL 1.1)が加わります。

変更履歴を見ると、パッケージがどう手入れされているかが分かります。Velvet Pool 1.0.1(2026年10月18日)は、長い文字列を読みやすい行に分割し、ライセンス表示を1つのフラットなフォルダにまとめました。バージョン1.1.0(2026年10月22日)では、インターフェースが14言語になりました。これらの記載は商品ページにあります。利用条件では、同じエディションのアップデートは公開された時点でライブラリに表示されるとしており、一定期間のアップデートはお約束していません。

購入したゲームのコードを1時間で読むには

これは提案する手順であり、所要時間の保証ではありません。Velvet Poolの構成に沿い、パッケージが提供するものだけを使います。

  1. 0〜10分:ZIPを展開し、source/のREADMEとマニュアルのファイルマップにざっと目を通す。index.htmlを開き、どのスクリプトとスタイルシートを読み込むかを確認する。
  2. 10〜20分:source/の中でnpm test(Node.js 20以上)を実行して、緑の基準を得る。
  3. 20〜35分:src/gameより先にsrc/coreを読む。rules.js、ai.js、physics.jsの順に。これがゲーム本体です。コントロール、進行、テキスト、音声は、その周りの配管です。
  4. 35〜40分:アイテムIDとセーブのキーは安定させておく必要があることを覚えておく。そうしないと、プレイヤーが保存した装飾品を失います。
  5. 40〜55分:progress.jsのクロスの定義など、小さな変更を1つ加える。ファイルをgame/の同じパスにコピーし、game/をpython -m http.server 8765で配信して結果を見る。file://では絶対に開かないこと。
  6. 55〜60分:もう一度テストを実行する。

ESモジュールは、必要なものをimport行に書くので、ページが最初に読み込むスクリプトから、つながりを追いかけられます。素のファイルのエディションを、このペースで読める理由です。

ソースコードを買う前に確認したい質問

  • 支払う前に、マニュアルを読み、デモを遊べますか。当社のエディションでは、どちらも商品ページからリンクされています。
  • ホストできる状態のビルドと、別の開発者向けソースはありますか。
  • コードは読めますか、ミニファイされていますか。スクリプトを1つ開いて見てください。
  • Node.js、npm、PHP、データベースは必要ですか。必要ならバージョンは。
  • ゲームは、CDNやほかのサイトから何かを読み込みますか。
  • どの第三者ライブラリが入っていて、どのライセンスですか。
  • 何個のプロジェクトで使えますか。再配布は可能ですか。
  • サポートはいつまでで、何が対象ですか。当社の場合は6か月、またはチェックアウトで延長を選んだ場合は12か月で、ファイルのインストールと使い方に関するご質問と、再現可能な不具合が対象です。
  • 何が含まれていませんか。
  • 変更履歴と、最近のリリースはありますか。
  • 返金のルールは何ですか。当社の場合:テンプレートはデジタル商品のため、返金は、まだテンプレートをダウンロードしていない場合、または当社が修正できない不具合がある場合に限ります。ライセンス番号を添えて、スタジオにご連絡ください。

これらのエディションに含まれないもの

一部のエディションには、任意のおまけが付きます。RicopopとZabumには、初期状態でオフの、1ファイルのPHPランキングが含まれます。スコアをファイルに保存する、気軽に使える共有スコアボードで、不正対策のあるランキングではなく、ライブのマルチプレイヤーでもありません。

サポートが対象とするのは、提供されたファイルのインストールと使い方に関するご質問、および提供されたゲームで再現できる不具合の修正です。これは境界線であり、初日にそれを知っておくほうがよいと考えています。

FAQ

gameフォルダとsourceフォルダの違いは何ですか

game/は、ホストにアップロードするビルドです。source/は、同じゲームの編集可能な開発者向けエディションです。Velvet PoolとPuttideでは同じ構成なので、source/で編集したファイルは、game/の同じパスにコピーします。Sunset RallyのようなTypeScriptのエディションでは、source/は再ビルドするプロジェクトで、新しく出力されたものを公開します。

ゲームを使うのに、npmやNode.jsは必要ですか

ホストするだけなら不要です。Node.jsが出てくるのは、Velvet Poolの任意のテスト(20以上)か、Sunset Rally(24 LTS推奨)やPinloop(22.12以上)のようなTypeScriptのエディションを再ビルドする場合だけです。

ソースコードはミニファイされていますか

ここで扱ったエディションではされていません。Velvet PoolとPuttideは整形済みの素のJavaScriptで、どちらもバージョン1.0.1で、1行の長い文字列が読みやすい行に分割されました。Sunset Rallyのランタイムは、ミニファイをオフにして、整形された状態で配布されます。

1回の購入を、複数のプロジェクトやクライアントに使えますか

ライセンスは、ご自身またはクライアント1社の最終製品1つが対象です。2つ目の製品は範囲外です。

ソースコードを再販したり共有したりできますか

できません。単体でも、テンプレート、キット、アセットパックとしても、開発者向けの別の製品の中でも不可です。ご自身の最終製品の中では、コード、アート、音声を変更できます。

購入前にマニュアルを読めますか

はい。各商品ページから、マニュアルと、同じエディションのプレイ可能なデモにリンクしています。

買う前に、パッケージを開いてみる

エディションを選び、商品ページからマニュアルを開き、デモを遊び、ファイルマップを上の質問と照らし合わせてください。マニュアルがそれに答えているなら、パッケージも答えているはずです。答えていないなら、支払う前にスタジオへご連絡ください。

すべてのテンプレートを見る