miso_soup3 Blog

主に ASP.NET 関連について書いています。

楽譜で音ゲー ver.2 のイメージ動画を作成した

音符池 Music

次に作ってみたい音ゲーのイメージ動画を作成した。

youtu.be

BGM提供 : Hagall https://hagall.info/

  • 譜面は左右の2に分かれ、左・右・左・右と移っていく
  • ノーツは動かない

なぜこのかたちになったか

前回の音ゲーは目が疲れる

前回作った音ゲー↓ で、一つ困る点があったのでそこを変更した。

youtu.be

前回：ゲーム「楽譜で音ゲー」を Unity で作った話 - miso_soup3 Blog

困る点

  • ノーツが横に流れて目が疲れてしまう
    • フレームレートや作りが良くないかもしれない
    • そもそも楽譜は動くものではなく静止している
    • 音の長さは音符で表しているので、動くことでタイミングを示す必要性はない
    • → ノーツは動かないようにした
テキストストリーミングを試してみたい

また、ピアノを演奏していて、”今の小節のところに視線を合わせるのが疲れる”と思い、そういえば、Spritz サービスのテキストストリーミングという方法を思い出し、楽譜にも適用できるのではないかと思った。

文字を次々に表示させ、まるで話すようなテンポで文章を読み進めていけるようにする技術が「Spritz」です。

単語が目に飛び込んできてすごい速度で文章を読めるようになる「Spritz」 - GIGAZINE

そこで、楽譜を1小節ずつ表示してみることにした。その動画はこちら↓

youtu.be

しかし、1小節だと次の小節の予測ができず、演奏が辛いことが分かった。そこで、2小節で表示してみることにした。その動画はこちら↓

youtu.be

2小節だと良い感じに思えた。ただどの早さで演奏すればいいのか分からず、前の小節に戻ることもできないので、演奏の練習には向かないと思った。そこで音ゲーにしようと思った。

ただ、この2小節の方法だと、”次は右なのか左なのか？”という迷いが生じる。そこで、方向は固定にしてスライドさせる、ところてん方式を試してみた↓

youtu.be

うーん、楽譜が動くとやはり気になってしまう。アニメーションの改善で良くなるかもしれない。

ということで、今のところ冒頭の右・左・右・左の方式が一番になっている。

Angular の Unit Test で style が増え続ける問題を回避すると、実行時間が約半分になった

Angular

追記 2021/12/3 : Angular v13 からは、この問題は発生しないようです: 詳細

SharedStylesHost isn't cleaning up styles between Karma test specs · Issue #31834 · angular/angular

↑この Issue にあるように、Angular の Karma を使ったテストで、<style>要素が増え続ける問題がある模様。実際に Headless ではなくブラウザでテストを実行し、DevTools で中をみていると<head>の中で<style>が増加している様子を確認できました。

fix(docs-infra): speed up ng test by cexbrayat · Pull Request #39866 · angular/angular

回避策として、Angular のドキュメントに対する↑この PR のコードのように、test.ts（ng test の --mainで指定している entry-point のファイル）にて、ɵDomSharedStylesHostのngOnDestroy()を挟むようにすると、<style>要素が削除されている様子を確認できました。さらに、テストの実行時間が約半分になりました。

約半分と書きましたが、推測するに、改善具合はテストの数に依存していそうです。PR では1,000を超えるテストで大幅に効果があったようです。

経緯

テストを書いていると、HeadlessChrome 0.0.0 (Mac OS X x.x.x) ERROR Disconnectedundefined の出力で、テストが途中で終わってしまい、その原因を調査していました。

We experienced the same and for us the cause was a memory leak in our tests which was causing these seemingly random errors while in reality we where sometimes hitting the memory limit. Running large test sets with chrome headless · Issue #137 · karma-runner/karma-chrome-launcher

memory leak を解消したら直ったとあります。確かにブラウザを強制終了させたら同じログが出ます。書いていたテストを見直すと、余計な Component や Module をインポートしていたのでそれを修正すると解消しました。

調査中に、以下の Angular のテストを早くする方法の記事を発見しました。今回の style 要素の削除の件も取り上げてられています。