日本語

English

日本語

English

外観

ゲームを公開する ​

bash
npm run build

npm run build はゲームを dist/ に書き出します。中身は index.html、あなたのコード、そしてゲームが使うアセットだけです。サイズレポートを表示し、dev 専用のコードがビルドに紛れ込んでいたら失敗します。dist/ は静的サイトなので、ファイルを配信できる場所ならどこでも動きます。

npm run build は、リンクをシェアしたときに見栄えよく表示されるための情報も追加します。Open Graph と Twitter のタグ、プレビュー画像（最初のシナリオのベースライン）、そしてプレイヤーがホーム画面にゲームをインストールできる Web アプリマニフェストです。index.html にすでにあるタグはそのまま残ります。詳細は debuff.config.ts で設定し、省略した項目は package.json から補われます。

ts
import { defineConfig } from "@debuffjp/cli";

export default defineConfig({
  launch: {
    title: "squish",
    description: "Swap jelly blobs, chain cascades, feel the squish.",
    url: "https://you.itch.io/squish", // プレビュー画像の絶対 URL に必要です
    icon: "assets/icon.png",
    background: "#11140d",
    orientation: "portrait",
  },
});

debuff ship でストアの準備をする ​

bash
npx debuff ship itch

debuff ship は dist/ を受け取り、ストアが求める条件をチェックして、ファイルを ship/ に書き出し、アップロードの手順を教えてくれます。代わりにアップロードしたりサインインしたりすることはありません。

  • itch：ship/itch.zip を作ります。index.html を最上位に置き、ソースマップは除外し、itch.io のファイル数とサイズの上限もチェックします。
  • wavedash：wavedash.toml が ./dist を指していることと、ゲームが Wavedash.init() を呼んでいることをチェックし、wavedash のコマンドを表示します。
  • press：ship/press/ に、プレスやストアページ向けのファクトシートと、シナリオのベースラインから作ったスクリーンショットを用意します。launch に author と links を追加すると中身が埋まります。

ship/ は .gitignore に追加しておきましょう（新しいプロジェクトには最初から入っています）。

プレイヤーにシェアしてもらう ​

ほとんどのプレイヤーは、友だちの紹介かクリップ動画でゲームに出会います。@debuffjp/share を使えば、その両方をゲームに組み込めます。

ts
import { ClipRecorder, challengeLink, clipFile, readChallenge, share } from "@debuffjp/share";

const challenge = readChallenge<{ seed: number; score: number }>(); // 友だちのリンクから開かれた？
const clips = new ClipRecorder(game.canvas); // 直近の約 12 秒を動画で
clips.start();

// 「シェア」ボタンで
const clip = await clips.clip();
await share({ text: `I scored ${score}. Beat it?`, url: challengeLink({ seed, score }), files: clip ? [clipFile(clip)] : [] });

share() はシステムの共有シートを開きます。共有シートがない環境では、テキストとリンクをコピーします。チャレンジリンクは URL にゲームの状態を載せるので、シード付きの game.random を使えば、友だちがあなたとまったく同じプレイに挑戦できます。

自分のサイトや静的ホスティングで ​

dist/ を好きな静的ホスティングにアップロードしてください。Cloudflare Pages、Netlify、GitHub Pages、Vercel、自前のサーバーなど何でも大丈夫です。サーバー側のコードは要りません。

itch.io ​

npx debuff ship itch を実行するか、dist/ の中身を自分で zip にします（index.html はフォルダの中ではなく、zip の最上位に置きます）。Kind of project: HTML でプロジェクトを作り、zip をアップロードして This file will be played in the browser にチェックを入れます。埋め込みサイズは、ゲームの解像度かその整数倍にしましょう。

ダウンロード版のデスクトップアプリについてはデスクトップ向けビルドを見てください。

ゲームポータル（Poki、CrazyGames など） ​

ポータルには、ブランディング、リンク、広告についてのルールがあります。申請の前に各ポータルの最新の要件を必ず読んでほしいのですが、debuff のゲームに関係するのは次のあたりです。

Poki ではスプラッシュをオフに

本番ビルドは短い「made with debuff」のカードで始まります。Poki はスプラッシュ画面を認めていない ので、オフにしましょう。

ts
const game = new Game({ canvas, width: 320, height: 180, splash: false });
  • スプラッシュ： Poki では、ゲームにスプラッシュ画面があってはいけません。ルール上、スタジオのロゴを出せるのはローディング画面だけです。ほかのポータルは短い「made with」カードなら気にしないかもしれませんが、どのポータルでも splash: false にしておくのが安全です。
  • ゲームの外へのリンク禁止： ポータルは、プレイヤーをほかのサイトへ飛ばすリンクを認めていません。debuff のスプラッシュにリンクや URL は入っていないので、スプラッシュが許されている場所なら問題ありません。ポータルが許可していない限り、メニュー、クレジット、エンド画面に自分でリンクや URL を入れないでください。たとえば CrazyGames は、メインメニューでのコミュニティへのリンク（Discord など）を認めています。ただし、それがメインの導線になっておらず、ゲームのプレイ可能なコピーにつながらないことが条件です。
  • 広告はポータルの SDK 経由で： ポータルは広告用の SDK を用意していて、一時停止や分析の機能もあることが多いです。ほかの広告システムは入れないでください。
  • すべてバンドルする： Poki は、承認されていない外部サーバーへのリクエストをブロックします。debuff のビルドはコードとアセットを dist/ にバンドルするので、素の debuff のゲームは外部へのリクエストをしません。その状態を保ち、フォントやスクリプトを CDN から読み込むのは避けましょう。
  • サイズが大事： ポータルは読み込みの速いゲームを好みます。npm run build のサイズレポートで、プレイヤーが起動時にダウンロードする量がわかります。

要件：Poki · CrazyGames

出荷の前に ​

  • npm test と npm run build が通り、ビルドが dev コードの漏れを報告していないこと。
  • 開発サーバーではなくビルドそのもの（npx vite preview）を、スマホとデスクトップで遊んでみること。
  • ポータル向けなら：Poki では splash: false、外へのリンクなし、ポータルの SDK を組み込み済みであること。