husky21st/touchlyricworld

TextAlive App APIとPixiJSを用いたブラウザで遊べるリズムゲーム #mm2021procon

TouchLyricWorld

初音ミク「マジカルミライ2021」プログラミング・コンテスト応募作品

歌詞に楽しく触れるをコンセプトにしたリズムゲームです.

P.S. 本コンテストで優秀賞を頂きました．ありがとうございます．

内容

歌詞が歌われるタイミングに合わせて歌詞をなぞっていくゲームです.
また，曲自体にも積極性を持たせるためにビートに合わせて操作し，リズムに乗って楽しむ要素もあります.

URLにクエリパラメータ ta_song_url={楽曲のURL} を追記することでsongle上にある曲なら全て遊べます.
↑仕様変更により遊べなくなりました

パソコンでもスマホでも同じ体験が得られるように，できるだけ幅広い機種でのレスポンシブ対応をしています.

開発

環境

• Node.js
  • v12.*
• npm
  • v7.*

ローカルで起動

git clone [email protected]:husky21st/TouchLyricWorld.git
cd TouchLyricWorld
touch .env
echo 'NEXT_PUBLIC_API_TOKEN = YourToken' >> .env
npm i .
npm run dev

* GitHub PagesではGitHub上でSecrets情報の登録を行なっています

ビルド

npm run build

主要ライブラリ

PixiJS
GSAP 3
TextAlive App API

TextAlive App API

TextAlive App API は、音楽に合わせてタイミングよく歌詞が動くWebアプリケーション（リリックアプリ）を開発できるJavaScript用のライブラリです。

TextAlive App API について詳しくはWebサイト TextAlive for Developers をご覧ください。

クレジット

• Cheering Miku Picture : ねこみん
• Menu&Result Graphic: つぼ
• Roses and Flower: AukAwIt

注意事項

画像素材の改変，二次配布は固く禁じます.

touchlyricworld's Issues

Memory Leak in safari on macOS

Audio on youtube is cut off due to insufficient memory.
It doesn't happen in chrome.