ニコ生ゲー作る時に詰まったことを集めてみた

# 初めに
先日初めてニコ生ゲームを制作し、公開することができました!
その名も **「ギャンブルクッキークリッカー」** というゲームです。
Twitchの**チャンネルポイント**と皆さんお馴染みの **「クッキークリッカー」** にインスパイアされたゲームです。
簡単に説明すると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/158bf26e-b6cd-0957-bc78-a7029debbd2b.png)
画面左上に表示される **クッキー** をクリックして
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/ae9fa7bb-354f-6420-dfb9-277ab85af8d4.png)
増やしたクッキーを使ってアイテムを購入して生産性を向上しつつ、ひたすら連打してクッキーを増やすという **「クッキークリッカー」** 要素に、
主が選択肢を提示し、自分が思う選択肢に、自分が持っているクッキーを投票し、それに見事的中するとオッズの分だけクッキーが増えて帰ってくるという **「ギャンブル」** 要素を加えた作品を作りました。

>コードは下記のgithubから、遊びたい場合は私の放送に来てね。

https://github.com/boxfish-jp/GambleCookieClicker

https://www.nicovideo.jp/user/98746932

初めてのゲーム制作だったので、詰めが甘いところも多々あるのですが、まあその内改善していこうと思います。

その中で詰まったことを紹介していきます。

# 0.前提として(参考になるリンク集)
この記事は以下のリンクで解説されていること以外を解説しています。

## 必読のAkashic Engine公式ドキュメント

https://akashic-games.github.io/

https://akashic-games.github.io/tutorial/v3/

https://akashic-games.github.io/shin-ichiba/

公式ドキュメントはとても参考になります。特にAkashic Engine入門は慣れるまでとてもお世話になると思います。
とは言え、このドキュメントはリンクがあまり良くなく迷宮のようになっています。改善してくれないかな。

## ラックさんのドキュメント
https://nicorakku.hatenablog.com/entry/ar1979578

ニコ生ゲームを作る時に参考になるコードの解説が充実しています。
こういう機能を実装したいけど、手が動かないというときはラックさんのドキュメントを覗くとヒントが得られるかもしれません。

## お役立ちのヒント

https://isobe-yaki.hateblo.jp/entry/2023/05/14/222730

https://qiita.com/mujurin/items/9bb3a6d114d6b62bbe53

ちょっと深掘りした記事ですが、詰まったときに参考になるかも。

# 1. エラーの見つけ方
意外とこの情報が公式ドキュメントに乗っていないので、紹介したいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/f11c4446-62e0-9945-2e1c-1948f156d4d9.png)
エラーがあるとこんなポップアップが出ますよね。
このときゲーム画面が表示されているタブの**ディベロッパーツール**を開き、**Sources**の`localhost:3300/content/0/content/script/main.js`を開くと、自分が書いていたソースコードが出現します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/d03f9c08-618c-56c0-2e7b-7bf689d72b8e.png)
スクロールすると分かるのですが、エラー箇所は赤線が引かれます。

:::note info
エラー箇所が分からないときは、ディベロッパーツールを見よう。
:::

# 2.akashic serveなどのコマンドが通らない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/b75ddb53-812a-4497-7eee-db733bb792ad.png)
``` 
このシステムではスクリプトの実行が無効になっているため ~~~かくかくしかじか~~
```
というエラーが出ます。node.jsに慣れている人ならササッと回避できるのですが、初心者の人のために書いておくとこのエラーはPowershellでコマンドを実行するとエラーが出るというものです。
なので、`cmd`というコマンドを打ち、**Powershell環境からコマンドプロンプト環境に移動** してから、`akashic serve`などのコマンドを打つとエラーが消えます。

# 3.Labelが更新されないとき
``` modified.js
scene.onUpdate.add(() => {
  ++rect.x;
  rect.modified();
});
```
Akashic Engineで描画を更新するときに使われる`modified()`ですが、画像や図形(rect)などに対して使えますが、

::: note warn
**文字だけ** は`modified()`ではなく、**invalidate()** です。
:::
`Label.modified()`と書かないように注意しましょう。

# 4. フォントの画質がなんか悪い時
公式チュートリアルのfontの箇所にあるこんなコードを
``` font.js
const font = new g.DynamicFont({
  game: g.game,
  fontFamily: "sans-serif",
  size: 15
});
```
そのまま引用してきていませんか？
このコードに`size: 15`という箇所がありますが、labelの方のフォントのサイズを`fontSize: 25,`としていると、引き伸ばされて表示されてしまうので画質が荒くなっています。

:::note info
フォントの画質が荒いときは、fontの`size`の数字を上げよう。
:::
ちなみに私はなんとなく50にしています。

# 5.マルチのゲームの仕組みが良く分からないとき
https://nicorakku.hatenablog.com/entry/ar2015939

ラックさんのこのドキュメントを読むとイメージが掴めるようになります。
マルチゲームを作るときは、公式ドキュメントとラックさんのドキュメントの2つを必ず読むことをおすすめします。

# 6.マルチゲームでユーザーネームの取得系でバグが起こる場合
とりあえずむじゅりんさんの記事を読むことをお勧めします。

https://qiita.com/mujurin/items/9bb3a6d114d6b62bbe53

ニコ生ゲームのマルチの仕組みにも触れられているので、マルチゲームを作る方はとりあえず目を通しておくことをお勧めします。

# 7.エラーログがないのに固まったり、エラー箇所が良く分からない場合
**vscodeのデバッグ**を利用するとエラー箇所が分かります。
launch.jsonを以下のようにします。
``` launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node-terminal",
      "request": "launch",
      "name": "プログラムの起動",
      "command": "akashic serve"
    }
  ]
}
```
この状態でデバッグを開始すると、ブラウザが立ち上がりゲーム画面が表示されます。
>直前までターミナルでサーバーを起動していた場合はターミナルでサーバーを終了してからゲームを起動しましょう。

ブラウザにゲームが表示されたら、vscodeの左下のブレークポイントの2つのチェックマークにチェックを入れましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3245561/9bde8f3a-3897-95e0-4068-35c9a9c02a4e.png)
> サーバー起動時になぜかエラーを吐きまくるので、サーバーが起動し終わったらチェックマークを入れるようにしましょう。

この後は、いつも通りゲームの動作確認をするとエラー箇所でプログラムが止まるはずです。

# 8.ニコ生ゲーム投稿フォームからゲームを投稿するときにエラーが発生する。
ニコ生ゲーム投稿フォームからゲームを投稿するときに、`エラーが発生しました。しばらく時間が経ってからやり直してください`と表示される場合があります。

::: note warn
**game.json**がおかしい可能性があります。
:::
スペルミスなどjsonの中にバグがないか確認してみてください。

# 分からない点はこちらへ
毎日配信しているので、生放送のコメントで教えてもらえると対応がしやすいです。

https://www.nicovideo.jp/user/98746932/

https://www.twitch.tv/boxfish_jp/videos

(同時配信をしているので、どちらかお好きな方でコメントを）