feat: reimplement live2d story reader

[K-bai]

Description

Totally re-implemented live2d story reader for current version of sekai.best.

Related Issue

#369

Motivation and Context

I NEED MORE CARD STORIES FOR MAFUYU!!!

How Has This Been Tested?

• Chrome (Desktop)
• Chrome (Mobile)
• Firefox (Desktop)
• Firefox (Mobile)
• Safari (Desktop, optional)
• Safari (iPhone, optional)
• Safari (iPad, optional)

Screenshots (if appropriate):

features

• support basic scenario (talk, bgm, live2d motions)
• all necessary resource preloaded
• responsive layout and full screen support

TODO (not mecessary for current version)

• bgm fade in and out
• VoiceId more than one
• more SpecialEffectType.PlayScenarioEffect (current 56% effects are implemented) (need help!!!)
• SnippetAction.CharacterLayoutMode
• find SekaiIn/Out sound effect (need help!!!)
• NOT IMPLEMENT YET:
  • SpecialEffectType.PlaceInfo
  • SpecialEffectType.Movie
  • SpecialEffectType.42
  • SpecialEffectType.41
  • SpecialEffectType.43
  • SpecialEffectType.40
  • SpecialEffectType.FullScreenText
  • SpecialEffectType.27
  • SpecialEffectType.SimpleSelectable
  • SpecialEffectType.28
  • SpecialEffectType.0
  • SpecialEffectType.44
  • SpecialEffectType.38
  • SpecialEffectType.39

[dnaroma]

Thank you for this PR! It looks pretty good and works well.

I did some simple tests and found some points to improve:

1. Event stories will load SE named like "se_event_xxx_xxx_001", this should be found under "event_story/event_xxx_xxx/scenario_se_rip". Current state: failed to load this file and it stucks. Code example:

            const identifer = soundData.Se;
            const isEventSe = soundData.Se.startsWith("se_event");
            const baseDir = isEventSe
              ? `event_story/${soundData.Se.split("_").slice(1, -1).join("_")}`
              : "sound/scenario/se";
            const seBundleName = soundData.Se.startsWith("se_event")
              ? "scenario_se"
              : soundData.Se.endsWith("_b")
                ? "se_pack00001_b"
                : "se_pack00001";
            const url = `${baseDir}/${seBundleName}_rip/${soundData.Se}.mp3`;

2. Unload everything when user leaves the page. Current state: BGM and SE continues after leave.
3. You can play expression and motion one by one to avoid conflict.
4. Stop last voice/se if user clicked and a new one is played/triggered. Current state: voice line keeps playing even user clicked for the next one.
5. No motion loop. Current state: motion loops and it looks weird.

I'd like to merge it for an alpha version if you can fix some of them, especially the first one.

[K-bai]

Thank you for this PR! It looks pretty good and works well.

I did some simple tests and found some points to improve:

1. Event stories will load SE named like "se_event_xxx_xxx_001", this should be found under "event_story/event_xxx_xxx/scenario_se_rip". Current state: failed to load this file and it stucks. Code example:

            const identifer = soundData.Se;
            const isEventSe = soundData.Se.startsWith("se_event");
            const baseDir = isEventSe
              ? `event_story/${soundData.Se.split("_").slice(1, -1).join("_")}`
              : "sound/scenario/se";
            const seBundleName = soundData.Se.startsWith("se_event")
              ? "scenario_se"
              : soundData.Se.endsWith("_b")
                ? "se_pack00001_b"
                : "se_pack00001";
            const url = `${baseDir}/${seBundleName}_rip/${soundData.Se}.mp3`;

2. Unload everything when user leaves the page. Current state: BGM and SE continues after leave.

3. You can play expression and motion one by one to avoid conflict.

4. Stop last voice/se if user clicked and a new one is played/triggered. Current state: voice line keeps playing even user clicked for the next one.

5. No motion loop. Current state: motion loops and it looks weird.

I'd like to merge it for an alpha version if you can fix some of them, especially the first one.

1. ok
2. ok
3. That's the way it is in the current version, and causes the motion playback lag a bit
4. ok
5. can't find any settings in pixi-live2d-display that control the weird motion loop... use custom libs...?

[K-bai]

The majority of the effects have been implemented! Ready to be merged, and please review!

[LazytownSpo666]

The majority of the effects have been implemented! Ready to be merged, and please review!

@dnaroma is currently unable to review at this time. He may be pursuing on other project. And i can't review yours as well.

[dnaroma]

The majority of the effects have been implemented! Ready to be merged, and please review!

Thanks, I will review it ASAP, probably after new year :)

[LazytownSpo666]

The majority of the effects have been implemented! Ready to be merged, and please review!

Thanks, I will review it ASAP, probably after new year :)

Still waiting...

[dnaroma]

It looks good, but has still some small bugs. I will merge it and fix it myself.

[LazytownSpo666]

This issue is now merged, but the live2d option is greyed out.

EDIT: nvm, it is no longer greyed out thanks to 1.14.0 update