Polar Games
ガイド

ミニゴルフゲームのソースコード：ホール・物理・3Dコース

Puttide が 30 ホールをどう収めているか、Three.js と Rapier の置き場所、そして購入者が自分のホールを追加する方法。

Puttide のアートワーク：石の遺跡とヤシの木のあいだのグリーンを、ゴルフボールが赤い旗に向かって転がる。背景の海には小さな島々。

ミニゴルフゲームのソースコードの良し悪しは、ひとつの作業で決まります。ホールの追加です。ブランドコースや季節限定ステージを作りたい、クライアントのロゴをグリーンに入れたいという購入者は、まずレベルファイルを開きます。そこでホールがエンジンのコードに埋もれていたら、プロジェクトは止まってしまいます。私たちの 3D ミニゴルフテンプレート Puttide では、コースごとに素の JavaScript で書かれたホールファイルがあり、マニュアルでホールの追加手順を順を追って説明しています。

このガイドは、開発者がパッケージを開いたときの順番に沿って進みます。フォルダ、ライブラリ、コースファイル、変更の順序、公開方法、ライセンスです。ファイル名はゲームに同梱の購入者ガイドに基づいています。

先に結論を知りたい方へ。Puttide は整形済みの JavaScript で、描画に Three.js、ボールの物理演算に Rapier を使い、どちらも同梱されています。ビルド工程も CDN もサーバー側のコードも不要です。

このミニゴルフゲームのソースコードに含まれるもの

Puttide は完成済みのゲームで、5 つの島のコースに計 30 ホールがあります。Sunlit Ruins、Lantern Pier、Frost Peaks、Cloud Garden、Volcano Forge の各 6 ホールです。スロープ、ポータル、バンパー、風車が、ホールをちょっとしたパズルに変えます。各ホールでは星が 3 つ（ホールアウト、パー以下、隠しコイン）もらえ、好スコアには銅・銀・金のメダルが贈られます。

コースに加えて、条件が変わるデイリーチャレンジ（強風、凍ったグリーン、重いボール、よく弾む壁、コインラッシュ、バーディーハント）、コインでボールや軌跡などの見た目アイテムを買える Locker（ロッカー）、そして 1 台の端末で 2〜4 人が交代でプレイできるラウンドがあります。インターフェースは 14 言語に対応しています。

  • game/：そのままアップロードできるビルド。公開するのはこのフォルダだけです。
  • source/：同じゲームの開発者向けエディション。README と package.json 付き。
  • documentation/：図解ガイド 1 冊（英語とポルトガル語）。
  • THIRD-PARTY-LICENSES/：ライブラリとフォントのライセンス文書。
  • バージョン 1.1.0、2026 年 10 月 22 日更新。

Puttide の商品ページへ：デモ、マニュアル、価格

Three.js、Rapier とその他の構成

ボールの動きは WebAssembly として動く Rapier 3D 0.21.0 でシミュレーションし、シーンは Three.js r186 で描画します。どちらもライセンスファイルと一緒に lib/three/ と lib/rapier/ に置かれ、index.html の import map がゲームからの参照先を指定しています。マニュアルにあるとおり、ライブラリファイルの動作は変更しておらず、読みやすいように整形しただけです。

これには 2 つの意味があります。まず、CDN から読み込むものが一切ないので、セキュリティポリシーの厳しいポータルやクライアントでも、許可が必要なのはあなたのサーバーだけです。次に、ライブラリの更新は手作業で意図して行う手順になります。source/package.json に正確なバージョンが書かれているので、新しいモジュールファイルを対応する lib/ フォルダに上書きし、import map のパスはそのまま維持します。

  • Three.js r186：MIT ライセンス。
  • Rapier 3D compat 0.21.0（WebAssembly 埋め込み）：Apache-2.0 ライセンス。
  • Rubik と Fredoka の Web フォント：SIL Open Font License 1.1。
  • BGM 2 曲：music/menu.mp3 と music/play-1.mp3。

ホール、コイン、テキストの置き場所

パスは source/ と game/ で共通です。コースデータは島ごとに分かれていて、どのファイルも一度に読み切れる長さです。

  • src/course/courses.js：コースの順番と解放条件。
  • src/course/holes.js：Sunlit Ruins のホール。形状、パー、障害物を含みます。
  • src/course/pier.js、ice.js、lava.js、sky.js：残り 4 コースのホール。
  • src/sim/constants.js：物理パラメーターの調整。
  • src/game/economy.js：ボール、軌跡、衣装とその価格。
  • src/ui/i18n.js と関連ファイル：14 言語の辞書。ホール名とヒントも含みます。
  • src/game/localRecords.js：ブラウザに保存されるコース記録。
  • src/audio/audio.js：効果音と BGM の割り当て（probeTracks 内）。
  • css/style.css：UI の配色、フォント、レスポンシブ用スタイル。

ホールを追加する手順

購入者がいちばんよく行う変更で、マニュアルでは数行で説明されています。ここでは私たち自身が実際に踏む順番に広げて紹介します。

  1. 新しいホールを入れるコースファイルを選びます。たとえば Volcano Forge なら lava.js です。
  2. 作りたいものに近い既存のホール定義を複製します。
  3. 重複しない id を付けます。id を使い回すと、保存された進行状況が混乱します。
  4. パー、ティーの位置、カップの位置を設定し、障害物を移動または置き換えます。
  5. courses.js で、そのホールをコースに追加します。
  6. リリースするすべての言語の辞書に、表示名とヒントを追加します。
  7. 実際にプレイして、当たり判定、OB からの復帰、隠しコインを含む星 3 つすべてを確認します。

source/ で編集し、変更したファイルを game/ の同じパスにコピーしてから、HTTP でフォルダを配信してテストします。package.json には serve スクリプトがあり、python -m http.server 8765 を実行しても構いません。Node.js は任意で、npm でライブラリのバージョンを管理したい場合にだけ必要です。

そのほかの変更は、この順番で

  1. ブランドと配色：css/style.css でロゴ、色、フォントを変更します。ホワイトラベルが認められているので、私たちのブランドをあなたのものに置き換えられます。
  2. Locker の価格：economy.js。見た目アイテムを安くすればカジュアルなサイトで親しみやすくなり、高くすれば長期キャンペーンを引き延ばせます。
  3. テキスト：i18n ファイルで文言とヒントを変更します。
  4. 音楽：同梱の 2 曲は、ライセンスを持っている音源に差し替えられます。ファイルをコピーし、audio.js の明示的な割り当て（probeTracks）を更新します。シーン用の BGM はゲームプレイ曲にフォールバックします。
  5. 物理：constants.js は最後に、少しずつ変更します。すべてのホールが現在の値に合わせて調整されているためです。

同じく素の JavaScript で書かれ、3D ライブラリを一切使わない関連プロジェクトとしては、ビリヤードのテンプレートが同じ作りになっています。

Velvet Pool：素の JavaScript と WebGL2 で作ったエイトボール

Sunset Rally：9 試合のキャンペーン付き 3D 卓球

公開、MIME タイプ、アプリ化

game/ の中身をすべて public_html/puttide/ などのフォルダにアップロードし、サブフォルダ構成を保ったまま、HTTPS でアドレスを開きます。サーバーに npm、PHP、データベース、アカウントは不要です。ディスクから index.html を直接開いても動きません。file:// ではブラウザがモジュールをブロックするためです。

Puttide には 2D ゲームにはない公開時の注意点がひとつあります。物理演算が WebAssembly で動くことです。サーバーは .js を JavaScript の MIME タイプで、.wasm を application/wasm で返す必要があります。ここを誤ったサーバーでは画面が真っ白になるかモジュールエラーが出るので、初日に確認してください。

  • ブラウザ要件：JavaScript、ES モジュール、WebAssembly、WebGL2。
  • ポータルの iframe では fullscreen と autoplay を許可します。
  • タッチ操作：ドラッグで狙いを定めてパット、2 本指でカメラを回転、ピンチでズーム。
  • インストール型のオフラインアプリではありません。読み込むたびにあなたのサーバーにアクセスします。

ネイティブアプリのプロジェクトは含まれていません。ストアでの配信を考えているなら、ラッパーと実機テストの予算を見込んでください。古い端末では、3D の物理ゲームはカードゲームより重くなります。

含まれないもの、そしてライセンス

これはローカルのブラウザ版です。オンライン対戦やオンラインルーム、オンラインランキング、クラウドアカウント、広告 SDK、ネイティブアプリ、ホスティングは含まれません。コース記録、デイリーの進行状況、同じ端末でのラウンドはプレイヤーのブラウザ内に残り、スコアは一切送信されません。セーブデータはブラウザのオリジンに紐づくため、別のドメインに移すとプレイヤーは最初からになります。

Puttide の定価は $39 です。2026 年 11 月 30 日まではブラックフライデーのセールで $33.15 になり、1 回の注文でテンプレートを 2 点以上購入すると、さらに 5%〜20% のまとめ買い割引が付きます。ライセンスは永続・非独占で、1 つの最終製品（あなた自身のもの、または 1 社のクライアントのもの）に使えます。ブランドの変更、コード・アート・音声の改変、無料または広告付きでの提供は可能ですが、テンプレートやそのコード単体での再販はできません。サポートは 6 か月、延長オプションで 12 か月です。カスタムホール、外部連携、ホスティングは個別にお見積もりします。

ライセンス、サポート、返金の規約全文

よくある質問

このミニゴルフのソースコードは TypeScript ですか？

いいえ。Puttide は source/src と game/src にある整形済みの素の JavaScript で、私たち自身のコードに圧縮やバンドル済みのファイルはありません。

自分のホールやコースを追加できますか？

できます。コースファイルでホールを複製し、重複しない id を付け、パー、ティー、カップを設定して courses.js に追加し、名前とヒントを言語ファイルに加えます。

Three.js は CDN から読み込みますか？

いいえ。Three.js、Rapier、フォント、音楽はすべて game/ 内にあり、ゲームに必要なのはあなたのサーバーだけです。

サーバーで画面が真っ白になるのはなぜですか？

たいていは MIME タイプが原因です。.js を JavaScript、.wasm を application/wasm で配信し、HTTP(S) でゲームを開き、WebGL2 が有効か確認してください。

友だちと一緒に遊べますか？

はい。1 台の端末で 2〜4 人が交代でプレイできます。オンラインプレイはこのエディションには含まれていません。

あなたに合ったミニゴルフのベースか

Puttide が向いているのは、ファミリー向けやスポーツ系のポータル、1 社のクライアント向けにブランドコースを作るエージェンシー、そして Three.js と Rapier の連携を読みやすいコードで確かめたい開発者です。最初からオンラインラウンドや共有ランキングが必要なプロジェクトにはあまり向きません。

まずスマートフォンでデモのコースを 1 つ最後までプレイし、マニュアルのホール追加の章を読んでみてください。その章が午後半日で片付く作業に見えたなら、ゲームの残りの部分はもう出来上がっています。

Puttide のデモを遊んでライセンスを購入