チュートリアル譜面の仕組み
2024-08-12
さすがにチュートリアルはつくらないといけないが、チュートリアルのためにシステム側にコードを追加したくない
……そうだ！！こいつ使ったろ！！
https://scrapbox.io/files/66ba12b760218b001d61c22e.png
ということで、この記事は実質的に「holorhysm カスタム関数の作例」です
カスタム関数とは？
1. セッション(音ゲープレイ)中、特定のタイミングで任意の関数を実行することができる仕組み
2. (1)で実行される関数
なんか演出のために譜面とか見た目とかいじれる仕組み用意したら面白いかなぁって思って作ったんですけど、初回使用がこれかい
どうする
こうする
code:chart.json
/* ︙(略) */
"function": [
/* ==== 準備 ==== */
{
/* 初期化 */
"main": "globalThis.CustomFuncStore={};",
"worker": "",
},
{
/* 字幕出すための関数 */
"main": "globalThis.CustomFuncStore.AppearSubtitle=(ratioX,ratioY,str,time)=>{const el=document.createElement('p');el.style.width='80vw';el.style.fontSize='1.17rem';el.style.color='#eee';el.style.textAlign='center';el.style.textShadow='0px 0px 6px #000';el.style.zIndex='65536';el.style.position='fixed';el.style.top=${ratioY}%;el.style.left=${ratioX}%;el.style.transform='translate(-50%,-50%)';el.textContent=str;_.containerDiv.appendChild(el);setTimeout(x=>el.animate({opacity:1},{opacity:0},{'duration':500,'fill':'forwards'}),time-500);setTimeout(x=>el.remove(),time);};", "worker": "",
},
/* ︙(略) */
/* ==== イントロ : 画面の見方 ==== */
{
"main": "globalThis.CustomFuncStore.AppearSubtitle(50,35,'holorhysmにようこそ！',(2)*24e4/153-100);",
"worker": "",
},
/* ︙(略) */
これで字幕が出せるというわけです
JSON(C)にJavaScriptのコードを直書きするの、ほんまに狂ってる