TypeScript + PixiJS でマラソン（競プロ）ビジュアライザを作る

概要

長期間のマラソンコンテストでは，公式にビジュアライザが提供されることが多いが，これでは不十分な場合がある．たとえば AHC001 のように，焼き鈍した最終結果のみを描画するのではなく，焼き鈍しの経過を描画したほうが，考察に役立つ，というような状況がある．

そのような状況でビジュアライザを作る場合，TypeScript + PixiJS という構成で作ると，型の恩恵を受けつつ，WebGL の恩恵を受けつつ，という感じでビジュアライザを作れるので，嬉しい．

テンプレート

ゲームを作る例ではあるものの，便利なテンプレートがあるので，これを使うとスタートダッシュを切ることができる．

• TypeScript+Pixi.jsで快適なゲーム制作ライフを送ろう！ | 作っちゃうおじさん制作記録
• hothukurou/pixi_game_ts: pixi.js v5.3.7 +typescriptで作ったサンプルゲーム

他の実装例として，こんなものもある．

• 2048もどきをPixi.js + Typescript で作ってみた - くろいねこのーと
• kuroneko8960/2048: 2048 clone made with pixi.js

PixiJS

WebGL が簡単に扱える．入門には以下の記事が良さげ．

• 初心者による超初心者のためのPixiJS入門 - Qiita

webpack

bundler として webpack を使う．設定とかは以下のページが参考になるかも．

• webpack 4 の入門メモ - Qiita

諸々の設定なんかは，下記あたりが参考になるかも？

• TypeScript チュートリアル - Qiita
• webpackでTypeScriptをトランスパイルする - Qiita

ESLint + Prettier

Linter が欲しいので，ESLint + Prettier を使う．

• ESLint 最初の一歩 - Qiita
• TypeScript + Node.jsプロジェクトにESLint + Prettierを導入する手順2020 - Qiita
• ESLint - Prettier連携のやり方と仕組み - Qiita

---

以上