public/bluebey-studio: 鼻ちょうちんの追従とひげを修正

鼻ちょうちんの位置が、カメラ移動やポーズ変更のあとに飛ぶ問題を修正。位置はボーン局所座標で持ち、スライダーのオフセットは体の向きに追従させた。寝ている動きでは鼻ちょうちんを自動で表示する。

ひげは「猫」に左右の間隔スライダーを追加し、太さを変えずに大きくできるようにした。カイゼルは先をダリ風のカールにした。

1 files changed, 19 insertions, 7 deletions

diff --git a/public/bluebey-studio/src/panel.js b/public/bluebey-studio/src/panel.js
index 255e6cf..72718bc 100644
--- a/public/bluebey-studio/src/panel.js
+++ b/public/bluebey-studio/src/panel.js
@@ -1003,7 +1003,7 @@ export function buildPanel(app, root) {
       onInput: (v) => { state.face.eyes.snot.offsetY = v; app.actions.refresh('face'); },
     }),
     offsetZ: slider({
-      label: 'おくゆき', min: -160, max: 160, step: 1, value: 0, format: (v) => `${Math.round(v)}`,
+      label: 'おくゆき', min: -10, max: 160, step: 1, value: 0, format: (v) => `${Math.round(v)}`,
       onInput: (v) => { state.face.eyes.snot.offsetZ = v; app.actions.refresh('face'); },
     }),
   };
@@ -1038,9 +1038,9 @@ export function buildPanel(app, root) {
       label: '大きさ', min: 0.4, max: 2.4, step: 0.01, value: 1, format: (v) => v.toFixed(2),
       onInput: (v) => { state.face.eyes.beard.size = v; app.actions.refresh('face'); },
     }),
-    offsetX: slider({
-      label: 'よこの位置', min: -200, max: 200, step: 1, value: 0, format: (v) => `${Math.round(v)}`,
-      onInput: (v) => { state.face.eyes.beard.offsetX = v; app.actions.refresh('face'); },
+    spacing: slider({
+      label: '左右の間隔', min: 0, max: 240, step: 1, value: 0, format: (v) => `${Math.round(v)}`,
+      onInput: (v) => { state.face.eyes.beard.spacing = v; app.actions.refresh('face'); },
     }),
     offsetY: slider({
       label: 'たかさ', min: -160, max: 160, step: 1, value: 0, format: (v) => `${Math.round(v)}`,
@@ -1049,7 +1049,7 @@ export function buildPanel(app, root) {
   };
   faceSection.add(beardSliders.size.el);
   const beardBox = details(faceSection.body, 'こまかい設定（位置・色）');
-  beardBox.add(beardSliders.offsetX.el);
+  beardBox.add(beardSliders.spacing.el);
   beardBox.add(beardSliders.offsetY.el);
   const beardColor = colorField({
     label: 'ひげの色', value: '#3a2a4a',
@@ -1057,7 +1057,8 @@ export function buildPanel(app, root) {
     onChange: (v) => { state.face.eyes.beard.color = v; app.actions.refresh('face'); },
   });
   beardBox.add(beardColor.el);
-  beardBox.add(hint('鼻の下に、ちょびひげ・カイゼル・エプロン・ねこ、の髭を描きます。'));
+  beardBox.add(hint('鼻の下に、ちょびひげ・カイゼル・エプロン・ねこ、の髭を描きます。'
+    + '「左右の間隔」は「ねこ」の左右の髭の間を広げます。'));
 
   // --- mouth
   faceSection = section(tabFace, '口');
@@ -1331,7 +1332,18 @@ export function buildPanel(app, root) {
       { value: 'sleep', label: 'ねている' },
     ],
     value: 'off',
-    onChange: (value) => { state.anim.mode = value; app.animator.reset(); app.needsRender = true; },
+    onChange: (value) => {
+      state.anim.mode = value;
+      // Sleeping always shows the snot bubble, so the motion reads without having
+      // to switch the bubble on as well.
+      if (value === 'sleep') {
+        state.face.eyes.snot.enabled = true;
+        snotToggle.set(true);
+        app.actions.refresh('face');
+      }
+      app.animator.reset();
+      app.needsRender = true;
+    },
   });
   moveSection.add(motionSegment.el);
   for (const widget of Object.values(animWidgets)) moveSection.add(controlRow(null, widget.el, { wide: true }));