Skip to content

fix #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9adfca0
fix
MakinoharaShoko Jul 18, 2025
3c1cf60
delete useless files
MakinoharaShoko Jul 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 53 additions & 10 deletions src/.vuepress/sidebar/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,20 @@ export const enSidebar = sidebar({
"getting-started",
"resources",
"config",
"publish",
{
text: "Deploy or Publish My Visual Novel?",
link: "publish/",
collapsible: true,
prefix: "publish/",
children: [
"web",
"desktop",
"android",
]
},
Comment on lines +12 to +22
Copy link

@gemini-code-assist gemini-code-assist bot Jul 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The file src/en/webgal-script/spine.md was added, containing updated documentation for Spine scripting. However, the sidebar configuration still points to the old src/en/spine.md file. Also, the new spine.md file is not included in the "WebGAL Script Tutorial" group.

Update the sidebar to point to the new documentation file, or merge the content from the new file into the old one to avoid confusion. Having two different documents, one of which is unlinked, is not ideal.

"faq",
"live2D",
"spine",
"migration",
"derivative",
],
Expand All @@ -20,15 +31,47 @@ export const enSidebar = sidebar({
text: "WebGAL Script Tutorial",
prefix: "webgal-script/",
children: [
"base",
"dialogue",
"bg-and-figure",
"audio",
"video",
"scenes",
"variable",
"animation",
"special-effect",
{
text: "Basic Features",
collapsible: true,
children: [
"base",
"dialogue",
]
},
{
text: "Visual Content",
collapsible: true,
children: [
"bg-and-figure",
"animation",
"special-effect",
]
},
{
text: "Audio & Video",
collapsible: true,
children: [
"audio",
"video",
]
},
{
text: "Interaction & Flow",
collapsible: true,
children: [
"scenes",
"variable",
]
},
{
text: "Advanced Features",
collapsible: true,
children: [
"intro",
"other-features",
]
},
]
},
{
Expand Down
63 changes: 53 additions & 10 deletions src/.vuepress/sidebar/ja.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,20 @@ export const jaSidebar = sidebar({
"getting-started",
"resources",
"config",
"publish",
{
text: "ビジュアルノベルをデプロイまたは公開する？",
link: "publish/",
collapsible: true,
prefix: "publish/",
children: [
"web",
"desktop",
"android",
]
},
Comment on lines +12 to +22
Copy link

@gemini-code-assist gemini-code-assist bot Jul 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The file src/ja/webgal-script/spine.md was added, containing updated documentation for Spine scripting. However, the sidebar configuration still points to the old src/ja/spine.md file. Also, the new spine.md file is not included in the "WebGAL Script チュートリアル" group.

Update the sidebar to point to the new documentation file, or merge the content from the new file into the old one to avoid confusion. Having two different documents, one of which is unlinked, is not ideal.

"faq",
"live2D",
"spine",
"migration",
"derivative",
],
Expand All @@ -20,15 +31,47 @@ export const jaSidebar = sidebar({
text: "WebGAL Script チュートリアル",
prefix: "webgal-script/",
children: [
"base",
"dialogue",
"bg-and-figure",
"audio",
"video",
"scenes",
"variable",
"animation",
"special-effect",
{
text: "基本機能",
collapsible: true,
children: [
"base",
"dialogue",
]
},
{
text: "視覚コンテンツ",
collapsible: true,
children: [
"bg-and-figure",
"animation",
"special-effect",
]
},
{
text: "音声・映像",
collapsible: true,
children: [
"audio",
"video",
]
},
{
text: "インタラクション・フロー",
collapsible: true,
children: [
"scenes",
"variable",
]
},
{
text: "高度な機能",
collapsible: true,
children: [
"intro",
"other-features",
]
},
]
},
{
Expand Down
51 changes: 42 additions & 9 deletions src/.vuepress/sidebar/zh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export const zhSidebar = sidebar({
},
"faq",
"live2D",
"spine",
"migration",
"derivative",
],
Expand All @@ -30,15 +31,47 @@ export const zhSidebar = sidebar({
text: "WebGAL 脚本教程",
prefix: "webgal-script/",
children: [
"base",
"dialogue",
"bg-and-figure",
"audio",
"video",
"scenes",
"variable",
"animation",
"special-effect",
{
text: "基础功能",
collapsible: true,
children: [
"base",
"dialogue",
]
},
{
text: "视觉内容",
collapsible: true,
children: [
"bg-and-figure",
"animation",
"special-effect",
]
},
{
text: "音视频",
collapsible: true,
children: [
"audio",
"video",
]
},
{
text: "交互与流程",
collapsible: true,
children: [
"scenes",
"variable",
]
},
{
text: "高级功能",
collapsible: true,
children: [
"intro",
"other-features",
]
},
]
},
{
Expand Down
126 changes: 126 additions & 0 deletions src/en/spine.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,3 +98,129 @@ Furthermore, the WebGAL project team expressly disclaims any responsibility for
In summary, if you choose to integrate or use Spine functionality in WebGAL, you must ensure that you have legally obtained a Spine Editor license and commit to complying with all relevant license terms and regulations. Otherwise, all risks, liabilities, and consequences arising therefrom shall be borne by you or your organization and are unrelated to the WebGAL project team.

By using this software, you acknowledge that you have read, understood, and agreed to all contents of the above disclaimer. If you do not agree to these terms, please immediately cease using the WebGAL version integrated with Spine functionality.

## Spine Animation Usage Guide

After completing the above license requirements and technical integration, you can follow the instructions below to use Spine animation functionality in WebGAL.

### File Format

Spine animations typically include the following files:
- `.skel` - Skeleton data file (binary format)
- `.json` - Skeleton data file (JSON format)
- `.atlas` - Texture atlas description file
- `.png` - Texture image files

### Basic Usage

#### Setting Spine Figures

Use the `.skel` file extension or `type=spine` parameter to specify Spine animation:

``` ws
changeFigure:character.skel;
changeFigure:character.json?type=spine;
```

#### Setting Spine Backgrounds

Spine animations can also be used as backgrounds:

``` ws
changeBg:background.skel;
changeBg:background.json?type=spine;
```

#### Figure Position Settings

Spine figures support preset positions, same as regular figures:

``` ws
changeFigure:character.skel -left;
changeFigure:character.skel -right;
changeFigure:character.skel; // Default is center position
```

### Animation Control

#### Switching Actions

You can use the `-motion` parameter to switch Spine animations, just like Live2D:

``` ws
changeFigure:character.skel -motion=idle;
changeFigure:character.skel -motion=walk -left;
```

#### Custom ID Spine Figures

You can specify custom IDs for Spine figures and then use the `-motion` parameter to control animations:

``` ws
changeFigure:character.skel -id=mainCharacter -left;
changeFigure:character.skel -id=mainCharacter -motion=happy;
```
Comment on lines +144 to +162
Copy link

@gemini-code-assist gemini-code-assist bot Jul 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

There's an inconsistency in how to control Spine animations. This section suggests using changeFigure with the -motion parameter (e.g., changeFigure:character.skel -motion=walk -left;). However, src/en/webgal-script/spine.md suggests using the setAnimation command (e.g., setAnimation:walk -target=fig-left;).

Clarify which is the correct method and ensure all related documentation is consistent to prevent user confusion.


### Animation Behavior

- When Spine animation loads, it automatically plays the first available animation
- If a specific animation is specified in the state, it will be played preferentially
- Spine animations automatically scale to fit the screen

### Usage Examples

``` ws
; Set main character figure
changeFigure:mainCharacter.skel -id=hero -center;

; Play walking animation
changeFigure:hero.skel -motion=walk -id=hero;

; Set side character figure
changeFigure:sidekick.skel -left;

; Set dynamic background
changeBg:forest.skel;
```

### Integration with Other Features

Spine animations can be combined with other WebGAL features:

``` ws
; Combined with voice playback
Character Name:Hello! -V1.ogg -figureId=hero;
changeFigure:character.skel -id=hero -motion=speaking;

; Combined with scene switching
changeFigure:character.skel -id=hero;
changeFigure:character.skel -id=hero -motion=idle;
changeScene:next_scene.txt;
```

### Performance Considerations

1. **Memory Usage**: Spine animations use more memory than static images
2. **Loading Time**: Initial loading may take longer
3. **Compatibility**: Requires browser WebGL support

### Troubleshooting

#### Common Issues

1. **Animation not playing**: Check if animation name matches the name defined in the Spine file
2. **File loading failed**: Ensure `.skel`, `.atlas`, and texture files are in the same directory
3. **Display abnormalities**: Check Spine version compatibility

#### Debug Tips

- Use browser developer tools to check console logs
- Check network panel to confirm all files are loaded correctly
- Verify Spine file export settings are correct

### Important Notes

- Animation names must match the animation names defined in the Spine file
- Figures maintain aspect ratio and scale to fit the screen
- Backgrounds stretch or scale to fill the entire screen
- Please ensure compliance with all Spine license requirements
15 changes: 9 additions & 6 deletions src/en/webgal-script/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,23 @@

## Table of Contents

### Basic Features
- [Base](base.md)

- [Dialogue](dialogue.md)

### Visual Content
- [Background and Figure](bg-and-figure.md)
- [Animation Effects](animation.md)
- [Special Effects](special-effect.md)

### Audio & Video
- [Audio](audio.md)

- [Video](video.md)

### Interaction & Flow
- [Scenes and Branches](scenes.md)

- [Variables](variable.md)

- [Animation Effects](animation.md)

- [Special Effects](special-effect.md)
### Advanced Features
- [Intro Presentation](intro.md)
- [Other Features](other-features.md)
Loading