概要
- crisp-game-lib は、ミニマムなゲームを作るのに向く魅力的なライブラリです。ブラウザゲームを手軽に作れます。
- インストールからWeb公開までの手順は全て公式に書かれていますが、ある程度関連技術に慣れている人向けです。
- この記事では、慣れていない人向けに、より噛み砕いた手順を提供します。大部分は、git や GitHub や npm や VS Code の既知の手順です。
前提
- ※記事中で、ある程度は説明します
- 公式や、残りゲーム制作体力10%な人のためのずぼらゲームライブラリcrisp-game-libをある程度読んでいること
- GitHubとのcloneとpush、GitHub Pagesで静的ページをWeb公開、まで一度は経験済みであること
- Node.jsインストール済みで、npm install が使えること
- VS Codeインストール済みで、PATHが通っており、
code .とタイプするとVS Codeでカレントディレクトリが開けること
手順
先にGitHubにリポジトリの作成と、GitHub PagesのWeb公開まで済ませておく
- GitHubのご自分のアカウントで、新規リポジトリを作成します。
- リポジトリ名はお好きなものをどうぞ。
- 以降は仮に「mygames」として説明します。
- Add a README fileを選びます。
- Choose a licenseでMIT Licenseを選びます。
- Create repositoryボタンを押します。
- リポジトリ名はお好きなものをどうぞ。
- GitHub PagesのWeb公開の設定を済ませておきます。
- SettingのGitHub pagesの「Check it out here!」をクリックし、Sourceにmain の /docs を選び Saveボタンを押します。
- ※この段階ではindex.htmlがないため404になります
- 「mygamesを」ローカルにcloneします。
- まず後述の「ハマりポイント」をお読みください。
- gitクライアントは、gitコマンドほかお好みでどうぞ。
- 例
- Codeボタンを押し、SSHタブをクリックし、コピーボタンを押し、「Copied!」表示されたことを確認します。
- それをgitクライアントのclone欄に入力し、SSH認証でcloneします。
- ハマりポイント
- GitHubは2021年8月13日にリポジトリのパスワード認証を廃止しました。gitクライアントの設定がパスワード認証のままだとハマります。SSH認証にしましょう。
- GitHubのSSH認証はPuTTyでなくOpenSSHです。gitクライアントの設定がPuTTyのままだとハマります。OpenSSHにしましょう。
- OpenSSHでSSH認証する設定まで済ませてから、cloneしましょう。でないとGitHubへのpush時に認証エラーになってハマります。
公式を開く
downloadする
- Codeボタンをクリックします。
- Download ZIP を選びます。
- crisp-game-lib-master.zip がダウンロードされたことを確認します。
ファイルを配置する
- cloneした「mygames」に、crisp-game-lib-master.zip の内容をコピーします。
- ただしLICENCE.txt と README.md はコピーしないでください。
- docs/ ディレクトリ配下の多数のサンプルゲームのディレクトリは、ひとまず
_template/を残して削除します。自分のディレクトリとテンプレートだけにしてわかりやすくするためです。再入手できますので、サンプルゲームを読むのは当記事の手順を一通り終わらせてからにしましょう。 -
_template/をコピーし、hello/を作成します。
npm installする
-
mygames/配下にて、npm installします。 -
mygames/node_modulesが生成されたことを確認します。
自動ビルド状態にする
-
npm run watch_gamesします。 - ブラウザで
http://localhost:4000?helloを開きます。 - 左上に
0、右上にHI 0が表示されることを確認します。
VS Codeでコードを書き、自動ビルドする
-
mygames/配下にて、code .し、VS Codeでmygamesが開かれることを確認します。 - VS Codeのエクスプローラー機能で、docs/hello/main.jsを開きます。
- VS Codeのmain.jsのupdate()の
if (!ticks) {}ブロック内に、play("eを書きます。 - VS Codeのコード補完で、自動的に explosion が表示されることを確認します。
- ENTERでexplosionを入力し、残りの
;を入力します。 -
play("explosion");が入力できたことを確認します。 - ブラウザで開いていたhelloの画面をクリックし、音が鳴ることを確認します。
- （もしさっきクリック済みなら、保存するとすぐに音が鳴ることを確認します。）
- VS Codeで
play("explosionを");をplay("coin");に書き換え、保存します。 - 保存するとすぐに（コンソールやブラウザを操作せずとも自動で）音が鳴ることを確認します。
README.mdを更新する
http://あなたのアカウント名.github.io/mygames/?hello
を追加します。これでブラウザでGitHubのmygamesリポジトリを開いたとき、リンクをクリックすればhelloをプレイできます。
コミットとpushする
- お好みのgitクライアントでコミットとpushします。
- この場合gitクライアントとしてVS Codeを使うのも楽です。
GitHub Pagesで公開結果を確認する
- GitHubでご自分のGitHubリモートリポジトリ
mygamesを開き、Environments の github-pages リンクをクリックします。 - Deployments / History の表示を読み、問題なく Deployed されていることを確認します。
- View deployment ボタンをクリックし、白紙の画面が表示されることを確認します。
- ブラウザのアドレスバーのURLの末尾に、パラメータ
?helloを追加します。 - タイトル画面が表示されることを確認します。
- 画面をクリックし、coinの音が鳴ることを確認します。
- ブラウザでGitHubの mygame のREADME.md の hello のリンクをクリックします。
- タイトル画面が表示され、画面をクリックするとcoinの音が鳴ることを確認します。
2つめのサンプルを作って公開する
- ローカルリポジトリの mygames/docs/ 配下に、
_templateをコピーしてhello2などお好みのディレクトリを追加し、開発し、同様にWeb公開できてプレイできることを確認します。- つまり一つの
mygamesリポジトリにて、複数のゲームを開発して発表できます。1つのディレクトリに1つのゲームです。
- つまり一つの
公式に戻る
- おめでとうございます！あなたはcrisp-game-libを使ってゲームづくりを楽しむ一歩を踏み出しました。
- 公式には様々な楽しみにあふれたゲームづくりへの道が書かれています。お読みください。
- また、公式からリンクのある、Juno Nguyen氏のCrispGameLib入門チュートリアルも入門向けの素晴らしい記事です。
おまけ
自動化
- 今日の日付のディレクトリを作って
_templateからコピーし、ブラウザでゲーム画面を開き、VS Codeで今日のソースファイルを開く、までの手順は自動化できます。 - mygames/docs/ 配下に以下のbatを置き、実行してください。
- あとはVS Codeにコードを書いたり、サンプルからコピペしたりすれば、自動的にブラウザでゲームが動きます。
createTodayDir.bat
@echo off
setlocal
set BASE=.\
set TODAY=%date:~0,4%%date:~5,2%%date:~8,2%
rem copy
xcopy /ID %BASE%_template %BASE%%TODAY%
rem watch
start npm run watch_games
rem browser
start http://localhost:4000?%TODAY%
rem vscode
code %BASE%%TODAY%\main.js
ウィンドウ配置
- 「公式やチュートリアルなどコードのお手本」「VS Codeのmain.js」「ブラウザゲーム画面」を重ならないように並べると楽です。もし3つが重なって隠れている場所を見るためにウィンドウ切り替え操作をすると時間をロスしがちですが、3つを重ならないように並べれば防止できます。
サンプルコードを楽に実行する
- コードをコピーして、VS Codeに貼り付けて、保存して…という操作が手間になってきたら、GitHubのコードブロック右上コピーボタンをサンプル実行ボタンのように使うを実行しておくと楽です。