初めに
先日初めてニコ生ゲームを制作し、公開することができました!
その名も 「ギャンブルクッキークリッカー」 というゲームです。
Twitchのチャンネルポイントと皆さんお馴染みの 「クッキークリッカー」 にインスパイアされたゲームです。
簡単に説明すると、
画面左上に表示される クッキー をクリックして
増やしたクッキーを使ってアイテムを購入して生産性を向上しつつ、ひたすら連打してクッキーを増やすという 「クッキークリッカー」 要素に、
主が選択肢を提示し、自分が思う選択肢に、自分が持っているクッキーを投票し、それに見事的中するとオッズの分だけクッキーが増えて帰ってくるという 「ギャンブル」 要素を加えた作品を作りました。
コードは下記のgithubから、遊びたい場合は私の放送に来てね。
初めてのゲーム制作だったので、詰めが甘いところも多々あるのですが、まあその内改善していこうと思います。
その中で詰まったことを紹介していきます。
0.前提として(参考になるリンク集)
この記事は以下のリンクで解説されていること以外を解説しています。
必読のAkashic Engine公式ドキュメント
公式ドキュメントはとても参考になります。特にAkashic Engine入門は慣れるまでとてもお世話になると思います。
とは言え、このドキュメントはリンクがあまり良くなく迷宮のようになっています。改善してくれないかな。
ラックさんのドキュメント
ニコ生ゲームを作る時に参考になるコードの解説が充実しています。
こういう機能を実装したいけど、手が動かないというときはラックさんのドキュメントを覗くとヒントが得られるかもしれません。
お役立ちのヒント
ちょっと深掘りした記事ですが、詰まったときに参考になるかも。
1. エラーの見つけ方
意外とこの情報が公式ドキュメントに乗っていないので、紹介したいと思います。
エラーがあるとこんなポップアップが出ますよね。
このときゲーム画面が表示されているタブのディベロッパーツールを開き、Sourcesのlocalhost:3300/content/0/content/script/main.jsを開くと、自分が書いていたソースコードが出現します。
スクロールすると分かるのですが、エラー箇所は赤線が引かれます。
エラー箇所が分からないときは、ディベロッパーツールを見よう。
2.akashic serveなどのコマンドが通らない。
このシステムではスクリプトの実行が無効になっているため ~~~かくかくしかじか~~
というエラーが出ます。node.jsに慣れている人ならササッと回避できるのですが、初心者の人のために書いておくとこのエラーはPowershellでコマンドを実行するとエラーが出るというものです。
なので、cmdというコマンドを打ち、Powershell環境からコマンドプロンプト環境に移動 してから、akashic serveなどのコマンドを打つとエラーが消えます。
3.Labelが更新されないとき
scene.onUpdate.add(() => {
++rect.x;
rect.modified();
});
Akashic Engineで描画を更新するときに使われるmodified()ですが、画像や図形(rect)などに対して使えますが、
文字だけ はmodified()ではなく、invalidate() です。
Label.modified()と書かないように注意しましょう。
4. フォントの画質がなんか悪い時
公式チュートリアルのfontの箇所にあるこんなコードを
const font = new g.DynamicFont({
game: g.game,
fontFamily: "sans-serif",
size: 15
});
そのまま引用してきていませんか？
このコードにsize: 15という箇所がありますが、labelの方のフォントのサイズをfontSize: 25,としていると、引き伸ばされて表示されてしまうので画質が荒くなっています。
フォントの画質が荒いときは、fontのsizeの数字を上げよう。
ちなみに私はなんとなく50にしています。
5.マルチのゲームの仕組みが良く分からないとき
ラックさんのこのドキュメントを読むとイメージが掴めるようになります。
マルチゲームを作るときは、公式ドキュメントとラックさんのドキュメントの2つを必ず読むことをおすすめします。
6.マルチゲームでユーザーネームの取得系でバグが起こる場合
とりあえずむじゅりんさんの記事を読むことをお勧めします。
ニコ生ゲームのマルチの仕組みにも触れられているので、マルチゲームを作る方はとりあえず目を通しておくことをお勧めします。
7.エラーログがないのに固まったり、エラー箇所が良く分からない場合
vscodeのデバッグを利用するとエラー箇所が分かります。
launch.jsonを以下のようにします。
{
"version": "0.2.0",
"configurations": [
{
"type": "node-terminal",
"request": "launch",
"name": "プログラムの起動",
"command": "akashic serve"
}
]
}
この状態でデバッグを開始すると、ブラウザが立ち上がりゲーム画面が表示されます。
直前までターミナルでサーバーを起動していた場合はターミナルでサーバーを終了してからゲームを起動しましょう。
ブラウザにゲームが表示されたら、vscodeの左下のブレークポイントの2つのチェックマークにチェックを入れましょう。
サーバー起動時になぜかエラーを吐きまくるので、サーバーが起動し終わったらチェックマークを入れるようにしましょう。
この後は、いつも通りゲームの動作確認をするとエラー箇所でプログラムが止まるはずです。
8.ニコ生ゲーム投稿フォームからゲームを投稿するときにエラーが発生する。
ニコ生ゲーム投稿フォームからゲームを投稿するときに、エラーが発生しました。しばらく時間が経ってからやり直してくださいと表示される場合があります。
game.jsonがおかしい可能性があります。
スペルミスなどjsonの中にバグがないか確認してみてください。
分からない点はこちらへ
毎日配信しているので、生放送のコメントで教えてもらえると対応がしやすいです。
(同時配信をしているので、どちらかお好きな方でコメントを）