husky21st / TouchLyricWorld

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

Home Page:https://husky21st.github.io/TouchLyricWorld/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TouchLyricWorld

output

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

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

内容

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

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

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

開発

環境

ローカルで起動

git clone git@github.com: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

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

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

クレジット

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

注意事項

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

About

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

https://husky21st.github.io/TouchLyricWorld/

License:MIT License


Languages

Language:TypeScript 99.1%Language:CSS 0.7%Language:JavaScript 0.2%