crisp-game-lib

上のスクリーンショットをクリックすると、対応するゲームをブラウザですぐに遊べます。

English | 日本語

crisp-game-libはブラウザゲームを素早く簡単に作るための JavaScript ライブラリです。

• crisp-game-lib を使ったゲームの作り方をステップバイステップで説明

• crisp-game-lib のリファレンス

• Crisp Game Lib ガイド - crisp-game-lib の包括的な開発ガイド。完全な API リファレンス、動作するサンプル、ベストプラクティスを含む。LLM による開発支援にも対応

• サンプルゲームとサンプルコード

始め方

1. docs/getting_started/index.htmlをダウンロードします。

2. index.htmlをテキストエディタで開き、<script>エレメントにあなたのゲームのコードを書きます。

3. index.htmlをブラウザで開き、ゲームを遊びます。

4. index.htmlをあなたの Web サーバに置くことで、あなたのゲームを公開することもできます。

ゲームの書き方（コード補完と自動リロード付きで）

1. このリポジトリをクローン、もしくはダウンロードします。

2. npm install

3. docs/_templateディレクトリをコピーしdocs/[あなたのゲームの名前]にリネームします。

4. docs/[あなたのゲームの名前]/main.jsをエディタで開き（VSCodeを推奨）、あなたのゲームのコードを書きます。

5. npm run watch_games

6. http://localhost:4000?[あなたのゲームの名前]の URL をブラウザで開くとゲームで遊べます。このページはコードを書き直すと自動的にリロードされます。

ゲームの公開

1. main.js、docs/bundle.js、docs/index.htmlを、Web サーバに下記のディレクトリ構成で配置します。

┝ [ゲームのルートディレクトリ（任意の名前）] ┝ [あなたのゲームの名前] │ └ main.js ┝ bundle.js └ index.html

1. [ゲームのルートディレクトリのアドレス]/index.html?[あなたのゲームの名前]の URL をブラウザで開きます。

バンドラーを使う

ゲームをバンドラー（例 Vite）を使ってビルドしたい場合は、以下のようにして下さい。

1. npm install crisp-game-libをプロジェクトのディレクトリで実行する。

2. docs/_template_bundler/index.htmlとdocs/_template_bundler/main.jsをプロジェクトのディレクトリにコピーする。

3. ゲームのコードをmain.jsに記述する。

4. バンドラーを使ってビルドする。

TypeScript を使いたい場合は、main.jsをmain.tsにリネームして下さい。

機能紹介デモ

描画 / 衝突判定 / 入力判定 / 音

関連記事

• Super HexagonやVVVVVVの開発者であるTerry Cavanaghのcrisp-game-lib に関する記事（英語）も参照ください

• Juno Nguyenのチュートリアル記事、Guide to getting started with CrispGameLib（英語）には、crisp-game-libを使ってゲームを作るために、どのようなコードを書けばよいか、どのようにデータを持つべきか、などの有益な情報があります

• crisp-game-libを使うための準備の詳細については、@cat2151によるcrisp-game-lib でゲームをつくるための手順も参照ください

• 残りゲーム制作体力 10%な人のためのずぼらゲームライブラリ crisp-game-lib

Tips

• color("transparent")で描画することで、形を描画することなく衝突判定を行うことができます。
• 衝突判定は描画履歴に基づいて行われます。ですので、形が背景色で上書きされたとしても、その形の衝突判定は消えません。
• 音の生成に使われるランダムシードの基本値は、titleとdescriptionの文字列を元に計算されます。オプションのseedを使った生成される音の調整は、titleとdescriptionを決定した後に行った方が良いです。
• ゲームのパフォーマンスを改善するためには、下記を実施ください（主にモバイルデバイス向け）：
• simpleもしくはdarkテーマを使いましょう。pixi.js を使うテーマ（pixel, shape, shapeDark, crt）は、WebGL のポストエフェクトの影響でパフォーマンスが低下する場合があります。
• 棒、ライン、円弧の描画は最小限にしましょう。これらは四角の組み合わせで描画されるため、衝突判定処理に負荷がかかります。
• モバイルデバイスで快適に遊べるゲームを作るためには、下記の操作方法を採用することをお勧めします。
• ワンボタン
• 左右へのスライド操作
• 画面上のタップ
• ワンボタンゲームをどのように作れば良いかについては、次の記事も参照ください：ワンボタンゲームをたくさん作ったので、その作り方をおさらいしたい
• sounds-some-sounds ライブラリを使って音楽を再生できます。MML で記述された音声を再生するには、sss.playMml() 関数を使います。
• crisp-game-lib で作られたゲームを M5Stack や Adafruit PyBadge などの小さなデバイスで動作させたい場合は、C 言語で実装されたcrisp-game-lib-portableの利用も検討ください。