これ。さくらの勉強会 フロントエンドナイト - connpass 質問。sli.do。Z347で入る。
bc_rikko。ダーシノ(@bc_rikko)さん | Twitter これらを勉強。Game Tutorial
ゲームはループ処理。JS。
- setTimeout
- setInterval
- requesetAnimaitonFrame
三番目がゲーム開発によく使われる。ブラウザの負荷により、自動的に実行間隔を調整してくれる。ただし、負荷がかかると、敵の動作が遅くなる。なので、遅延が一定以上だと、フレームをスキップするコードを描いた。ゲームの中の時間を一気に進める、と。
レンダリング 背景に、登場者とかを重ねる。24~30fpsとかだと、映画みたいになる？ 背景に、オフスクリーンを活用する。描いておいて、それを最後に使う。
ユーザー入力受付 webアプリと同じ。addEventListnerを使う。
回転させる、衝突を判定する 衝突は、衝突していない状態を考えるといい。
フロントエンドやっていたが、最近はバックエンド。Goとかで。
描画エンジン。PixiJS。生で触ると面倒なwebGL、Canvasを使いやすくしてくれる。
- PixiJS v4
- PIXI.jsで描画を行う（HTML5でブラウザゲームを作る） - Qiita
- そのアイデア、PixiJSがあれば大丈夫。インタラクション満載のWebサイト | BACKYARD
- 生canvasだと必要な、function repaint()の中身は不要。
- Flashみたいなもの。
スプライト
- キャラクタの一単位。
- Aseprite。1400円。
- spritesheet.js。npmで。複数画像を一枚に。必要なところを、切り取って使う。jsonを作成。どこに目的の画像があるのか、明記。
フォント作った、タイルマップ作った。
- 美咲フォント。ドットの読める。もとは、google fonts
シェーダ
- GLSLでフィルタを書く。C言語みたいなの。
その他
- 音楽はPixiJS。
- qiitta。ジェネレーター。switch地獄、callback地獄を避ける。
- JavaScriptでゲームシナリオを快適に実装する（デモ有） - Qiita
- そのアイデア、PixiJSがあれば大丈夫。インタラクション満載のWebサイト | BACKYARD