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

作品名: バブルバス

対象楽曲: 密かなる交信曲 - 濁茶 さん

作品のプログラムは審査希望曲以外でも動作します。

推奨環境: Chrome

作品のアピールポイント:

• TextAliveとP5.jsを利用して、作成するカジュアルゲームです。
• バブル全体をはずみます。
• クリックタイミングはchorusに決定します。
• クリックタイミングが合えば、近いバブルを消すことができます。
• 消す範囲はクリックタイミングに影響します。
• テーマ色はValenceArousal値に決定します。
• 一部Android(chrome) / iOS(safari)デバイスを対応します。

About this app

This is a Web application for 初音ミク「マジカルミライ 2021」プログラミング・コンテスト.

https://developer.textalive.jp/events/magicalmirai2021/

The AIM of this application is to use TextAlive API to build a relax & casual game.

The design theme is bath bubbles

• Lyrics bubbles will rebounce all over the screen
• Users are able to click the bubble and clean out near bubbles
• Click timing is according to music chorus
• Color theme decided by ValenceArousal value
• Compatible with some Android(chrome) / iOS(safari) devices.

Song url

Place song url at ta_song_url={song URL} can access the song you like

Supported song url can be find in TextAlive API web page.

❗ Recommend browser: Chrome Version 94.0.4606.61 (Official Build) (64-bit).

Demo song: 密かなる交信曲 - 濁茶 さん

Demo song: 嘘も本当も君だから - 真島ゆろ さん

Demo song: First Note - blues さん

Develop environment setup

With node.js installed, run below commends to build dev environment in local.

npm install
npm run dev

❗ Recommend nodejs version v14.17.4, version 16+ may cause build failure in my experience.

❗ You may also reference for building dev environment TextAlive API example.

Build for production

Build production files at /docs

npm run build

Information from TextAlive App API

TextAlive App API is the JavaScript API for developing "lyric apps" (cf. lyric videos) that show lyrics synchronized with the music playback.

For more details on the TextAlive App API, please visit the website TextAlive for Developers.

License

Sound effect

bubble-9.wav by Glaneur de sons

https://freesound.org/people/Glaneur%20de%20sons/sounds/104948/

Attribution 3.0 Unported (CC BY 3.0)

Sketch library

https://p5js.org/