ｽﾀｯｸﾁｬﾝの顔こと moddable-avatarを動かしてみた
ｽﾀｯｸﾁｬﾝの顔部分はmoddable-avatarというm5stack-avatarのmodabble移植版から構成されています。
来たる？Walkermanに向けてmoddable-avatarを単独で動かした。
— STC (@stc1988) 2021年11月19日
ということで単独でリポジトリのmain.ts動かすためのメモです。
構築
Typescriptで実装されているので、Moddableを環境構築の上、Typescriptをインストールしておく。
リポジトリをcloneしたらnpm install で開発ツール類をインストールします。moddableでのビルド自体には必須ではなさそう。
ここでビルドをすると、以下問題が発生します。
- piuの型定義を解消できない
- piu/Timelineの定義ファイルが不足している
- 起動時に
mainモジュールが見つからない- 2023/8/1時点で本件は解消されました。
manifest.json でincludeとmoduleを修正。
"build": {},
- "include": ["$(MODDABLE)/examples/manifest_base.json", "$(MODDABLE)/examples/manifest_piu.json"],
+ "include": ["$(MODDABLE)/examples/manifest_base.json","$(MODDABLE)/examples/manifest_piu.json","$(MODDABLE)/examples/manifest_typings.json"],
"resources": {
"*": ["./assets/images/*"],
"*-alpha": ["./assets/fonts/*"]
},
"modules": {
- "*": ["./main", "./avatar", "./marquee-label", "./balloon", "./emoticon"]
+ "*": ["./src/main", "./src/avatar", "./src/marquee-label", "./src/balloon", "./src/emoticon"]
},
piu/Timelineの型定義ファイルをstack-chanのリポジトリから$(MODDABLE)/typings/piuに移動します。
https://github.com/meganetaaan/stack-chan/blob/main/firmware/typings/piu/Timeline.d.ts
これで、main.tsが動くようになります。
また、ユーザからのインタラクションも不要であれば、シミュレーターでも動作します。
Avatarクラスのパラメータ
| Arguments | Type | Description |
|---|---|---|
| primaryColor | color | 目の色 |
| secondaryColor | color | 顔の色 |
primaryColor : 'white', secondaryColor :'black' とすると、いつもと顔色が変わります。
| Arguments | Type | Default value | Description |
|---|---|---|---|
| gaze.x | number | 0 | 視線の座標x(setGazeで使う) |
| gaze.y | number | 0 | 視線の座標y(setGazeで使う) |
| breath | number | 3 | 呼吸してるように上下に揺れる動きの距離(実装未使用?) |
| eyeOpen | number | 0 | 未実装？ |
| eyebrowOpen | number | 0 | 未実装？ |
| mouthOpen | number | 0 | 未実装？ |
| gazeInterval | number | 4000 | 眼振動作の有無 (おそらく2回目以降は1~3秒間隔?) |
| blinkInterval | number | 4000 | 瞬き動作の間隔(おそらく2回目以降は1~3秒間隔?) |
| autoUpdateBlink | boolean | true | 瞬き動作の有無 |
| autoUpdateBreath | boolean | true | 呼吸動作の有無 |
| autoUpdateGaze | boolean | true | 眼振動作の有無 |
| emotion | Emotion | Emotion.NEUTRAL | 喜怒哀楽などの６種定義があるが未実装 |
delegate event
startSpeech
口をパクパク動かす
stopSpeech
startSpeechの動作を止める
setGaze(x, y) setFocusPoint(x, y)
画面の(x, y)座標方向に視線を向ける
