Update doc for 1.4 #2509
Update doc for 1.4 #2509
Conversation
WalkthroughThis pull request involves comprehensive documentation updates for Spine animations across multiple files in both English and Chinese documentation. The changes primarily focus on improving clarity, consistency, and readability of documentation related to Spine animation usage in the Galacean engine. Key modifications include restructuring sections, updating terminology, clarifying instructions, and introducing new content about templates and examples. Changes
Sequence DiagramsequenceDiagram
participant User
participant SpineResource
participant Entity
participant SpineAnimationRenderer
User->>SpineResource: Load Spine Animation
SpineResource-->>User: Resource Loaded
User->>SpineResource: instantiate()
SpineResource->>Entity: Create Entity
Entity->>SpineAnimationRenderer: getComponent()
User->>SpineAnimationRenderer: Configure Animation
SpineAnimationRenderer-->>User: Animation Ready
Possibly related PRs
Suggested Labels
Suggested Reviewers
Poem
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
the
documentation
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #2509 +/- ##
==========================================
+ Coverage 68.53% 68.54% +0.01%
==========================================
Files 957 957
Lines 100041 100015 -26
Branches 8546 8544 -2
==========================================
- Hits 68562 68555 -7
+ Misses 31223 31204 -19
Partials 256 256
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (10)
examples/spine-physics.ts (1)
33-37: Update to use the new 1.4 API features correctly.The changes align with the 1.4 API updates, using
instantiate()andpremultipliedAlpha. However, consider using double quotes for string literals to maintain consistency.- spine.defaultConfig.animationName = 'wind-idle'; + spine.defaultConfig.animationName = "wind-idle";🧰 Tools
🪛 eslint
[error] 37-37: Replace
'wind-idle'with"wind-idle"(prettier/prettier)
examples/spine-mix-and-match.ts (1)
32-36: Update string literals to use consistent quotes.While the implementation correctly uses the new 1.4 API features, the string literals use inconsistent quote styles.
- spine.defaultConfig.skinName = 'full-skins/girl'; - spine.defaultConfig.animationName = 'idle'; + spine.defaultConfig.skinName = "full-skins/girl"; + spine.defaultConfig.animationName = "idle";🧰 Tools
🪛 eslint
[error] 35-35: Replace
'full-skins/girl'with"full-skins/girl"(prettier/prettier)
[error] 36-36: Replace
'idle'with"idle"(prettier/prettier)
docs/zh/graphics/2D/spine/other.md (1)
24-24: Fix typo in Chinese text.There's a duplicate period in the sentence.
- 4. 尽可能少地使用atlas page textures。即，导出是贴图的数量尽可能控制在一张。。 + 4. 尽可能少地使用atlas page textures。即，导出时贴图的数量尽可能控制在一张。docs/zh/graphics/2D/spine/example.md (1)
14-14: Convert bold text to proper markdown headingsThe document uses bold text (
**...**) for section headings. For better accessibility and consistency with markdown standards, these should be proper headings.Convert the bold text to proper markdown headings:
-**动画控制** +### 动画控制 -**动画过渡与混合** +### 动画过渡与混合 -**混搭换装** +### 混搭换装 -**动态局部换肤** +### 动态局部换肤Also applies to: 19-19, 24-24, 29-29
🧰 Tools
🪛 Markdownlint (0.37.0)
14-14: null
Emphasis used instead of a heading(MD036, no-emphasis-as-heading)
docs/en/graphics/2D/spine/example.md (1)
15-15: Convert bold text to proper markdown headingsSimilar to the Chinese version, the document uses bold text for section headings. Convert these to proper markdown headings for consistency and accessibility.
Convert the bold text to proper markdown headings:
-**Animation Control** +### Animation Control -**Animation Transition and Blending** +### Animation Transition and Blending -**Mix and Match Outfits** +### Mix and Match Outfits -**Dynamic Partial Skin Switching** +### Dynamic Partial Skin SwitchingAlso applies to: 20-20, 25-25, 30-30
🧰 Tools
🪛 Markdownlint (0.37.0)
15-15: null
Emphasis used instead of a heading(MD036, no-emphasis-as-heading)
docs/zh/graphics/2D/spine/editor.md (1)
Line range hint
12-12: Standardize HTML break tag usageThe document uses inconsistent HTML break tags. For better maintainability, standardize the usage.
Standardize break tags:
-</br></br> +<br/><br/>Also applies to: 62-62, 136-136
docs/en/graphics/2D/spine/editor.md (1)
64-64: Minor grammatical improvement needed.Remove the colon after "including" as it's not needed when using this preposition:
-Once uploaded, you will see the uploaded Spine assets in the assets panel, including: <b>SpineSkeletonData assets</b> +Once uploaded, you will see the uploaded Spine assets in the assets panel, including <b>SpineSkeletonData assets</b>🧰 Tools
🪛 LanguageTool
[typographical] ~64-~64: Do not use a colon (:) before a series that is introduced by a preposition (‘including’). Remove the colon or add a noun or a noun phrase after the preposition.
Context: ...oaded Spine assets in the assets panel, including: SpineSkeletonData assets, Spi...(RP_COLON)
docs/en/graphics/2D/spine/runtime.md (1)
63-64: Inconsistent type casing in code example.The loader type should be consistently capitalized:
- type: 'spine', // Specify the loader type as Spine + type: 'Spine', // Specify the loader type as Spineexamples/spine-change-attachment.ts (1)
29-33: Configuration style consistency neededWhile the logic is correct, the string literals should use consistent quotation marks as per the linter:
- spine.defaultConfig.skinName = 'full-skins/girl'; - spine.defaultConfig.animationName = 'idle'; + spine.defaultConfig.skinName = "full-skins/girl"; + spine.defaultConfig.animationName = "idle";🧰 Tools
🪛 eslint
[error] 32-32: Replace
'full-skins/girl'with"full-skins/girl"(prettier/prettier)
[error] 33-33: Replace
'idle'with"idle"(prettier/prettier)
examples/spine-full-skin-change.ts (1)
35-36: Maintain consistent string literal styleUpdate string literals to use double quotes consistently:
- spine.defaultConfig.skinName = 'full-skins/girl'; - spine.defaultConfig.animationName = 'idle'; + spine.defaultConfig.skinName = "full-skins/girl"; + spine.defaultConfig.animationName = "idle";🧰 Tools
🪛 eslint
[error] 35-35: Replace
'full-skins/girl'with"full-skins/girl"(prettier/prettier)
[error] 36-36: Replace
'idle'with"idle"(prettier/prettier)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
docs/en/graphics/2D/spine/editor.md(1 hunks)docs/en/graphics/2D/spine/example.md(1 hunks)docs/en/graphics/2D/spine/other.md(1 hunks)docs/en/graphics/2D/spine/overview.md(1 hunks)docs/en/graphics/2D/spine/runtime.md(3 hunks)docs/zh/graphics/2D/spine/editor.md(2 hunks)docs/zh/graphics/2D/spine/example.md(1 hunks)docs/zh/graphics/2D/spine/other.md(1 hunks)docs/zh/graphics/2D/spine/overview.md(1 hunks)docs/zh/graphics/2D/spine/runtime.md(7 hunks)examples/spine-animation.ts(3 hunks)examples/spine-change-attachment.ts(3 hunks)examples/spine-follow-shoot.ts(4 hunks)examples/spine-full-skin-change.ts(3 hunks)examples/spine-mix-and-match.ts(3 hunks)examples/spine-performance.ts(3 hunks)examples/spine-physics.ts(4 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/zh/graphics/2D/spine/overview.md
🧰 Additional context used
🪛 eslint
examples/spine-animation.ts
[error] 26-26: Delete ,
(prettier/prettier)
[error] 57-57: Insert ⏎
(prettier/prettier)
examples/spine-change-attachment.ts
[error] 26-26: Delete ,
(prettier/prettier)
[error] 32-32: Replace 'full-skins/girl' with "full-skins/girl"
(prettier/prettier)
[error] 33-33: Replace 'idle' with "idle"
(prettier/prettier)
[error] 47-47: Insert ⏎
(prettier/prettier)
examples/spine-full-skin-change.ts
[error] 29-29: Delete ,
(prettier/prettier)
[error] 35-35: Replace 'full-skins/girl' with "full-skins/girl"
(prettier/prettier)
[error] 36-36: Replace 'idle' with "idle"
(prettier/prettier)
[error] 60-60: Insert ⏎
(prettier/prettier)
examples/spine-performance.ts
[error] 40-40: Insert ⏎
(prettier/prettier)
examples/spine-mix-and-match.ts
[error] 29-29: Delete ,
(prettier/prettier)
[error] 35-35: Replace 'full-skins/girl' with "full-skins/girl"
(prettier/prettier)
[error] 36-36: Replace 'idle' with "idle"
(prettier/prettier)
[error] 206-206: Insert ⏎
(prettier/prettier)
examples/spine-physics.ts
[error] 37-37: Replace 'wind-idle' with "wind-idle"
(prettier/prettier)
[error] 51-52: Replace ············);⏎······ with ········
(prettier/prettier)
[error] 53-53: Insert ··
(prettier/prettier)
[error] 54-54: Insert ··
(prettier/prettier)
[error] 55-55: Replace ········ with ··········
(prettier/prettier)
[error] 56-56: Replace } with ··}⏎······
(prettier/prettier)
[error] 60-60: Insert ⏎
(prettier/prettier)
examples/spine-follow-shoot.ts
[error] 26-26: Delete ,
(prettier/prettier)
[error] 50-51: Replace ·····);⏎············const·targetBone·=·skeleton.findBone('crosshair' with ·······const·targetBone·=·skeleton.findBone("crosshair"
(prettier/prettier)
[error] 52-52: Insert ··
(prettier/prettier)
[error] 53-53: Insert ··
(prettier/prettier)
[error] 54-54: Insert ··
(prettier/prettier)
[error] 55-55: Insert ··
(prettier/prettier)
[error] 56-56: Insert ··
(prettier/prettier)
[error] 57-57: Insert ··
(prettier/prettier)
[error] 69-69: Insert ⏎
(prettier/prettier)
🪛 Markdownlint (0.37.0)
docs/en/graphics/2D/spine/runtime.md
69-69: null
Bare URL used
(MD034, no-bare-urls)
70-70: null
Bare URL used
(MD034, no-bare-urls)
71-71: null
Bare URL used
(MD034, no-bare-urls)
87-87: null
Bare URL used
(MD034, no-bare-urls)
88-88: null
Bare URL used
(MD034, no-bare-urls)
38-38: null
Images should have alternate text (alt text)
(MD045, no-alt-text)
376-376: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
393-393: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
docs/zh/graphics/2D/spine/example.md
14-14: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
19-19: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
24-24: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
29-29: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
docs/en/graphics/2D/spine/example.md
15-15: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
20-20: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
25-25: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
30-30: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
37-37: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
42-42: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
47-47: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
52-52: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
57-57: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
62-62: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
docs/zh/graphics/2D/spine/runtime.md
74-74: null
Bare URL used
(MD034, no-bare-urls)
75-75: null
Bare URL used
(MD034, no-bare-urls)
76-76: null
Bare URL used
(MD034, no-bare-urls)
39-39: null
Images should have alternate text (alt text)
(MD045, no-alt-text)
95-95: null
Bare URL used
(MD034, no-bare-urls)
96-96: null
Bare URL used
(MD034, no-bare-urls)
🪛 LanguageTool
docs/en/graphics/2D/spine/runtime.md
[style] ~86-~86: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...same directory as the atlas file.
- If the custom uploaded asset lacks file ex...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[uncategorized] ~178-~178: Loose punctuation mark.
Context: ... takes three parameters: - TrackIndex: Animation track index - animationName...
(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~213-~213: Loose punctuation mark.
Context: ...fic animations } } ``` - defaultMix: Default duration for transitions betwee...
(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~228-~228: Loose punctuation mark.
Context: ...d takes four parameters: - TrackIndex: Animation track - animationName: Name...
(UNLIKELY_OPENING_PUNCTUATION)
[typographical] ~246-~246: If you want to indicate numerical ranges or time ranges, consider using an en dash.
Context: ...ll transition starting at 0.8 seconds (1 - 0.2). When delay < 0, the next animat...
(DASH_RULE)
[uncategorized] ~266-~266: Loose punctuation mark.
Context: ...ion control. For example: - timeScale: Controls the playback speed of the anim...
(UNLIKELY_OPENING_PUNCTUATION)
[style] ~279-~279: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...arts, the Start event is triggered. - When an animation is removed from the queue ...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~280-~280: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...rupted, the End event is triggered. - When an animation finishes, regardless of wh...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
docs/zh/graphics/2D/spine/editor.md
[uncategorized] ~136-~136: 数词与名词之间一般应存在量词，可能缺少量词。
Context: ...ild/)流程，导出编辑器项目。
下一章节：[在代码中使用](/docs/graphics/2D/spine/runtim...
(wa5)
docs/zh/graphics/2D/spine/example.md
[uncategorized] ~21-~21: 您的意思是"设置"过度""？
Context: ..." /> 动画过渡与混合 该模板通过展示了 Spine 动画如何设置过渡以及不同轨道之间的动画混合： <img src="https://mdn.ali...
(DU3_DU4)
docs/en/graphics/2D/spine/editor.md
[uncategorized] ~26-~26: Consider adding a hyphen.
Context: ...rt panel in Spine editor" /> 2. In the upper left corner of the export window, select **B...
(TOP_LEFT_CORNER)
[grammar] ~26-~26: The verb ‘recommended’ is used with the gerund form.
Context: ...f the export window, select Binary (recommended to export in binary format instead of JSON format...
(ADMIT_ENJOY_VB)
[typographical] ~64-~64: Do not use a colon (:) before a series that is introduced by a preposition (‘including’). Remove the colon or add a noun or a noun phrase after the preposition.
Context: ...oaded Spine assets in the assets panel, including: SpineSkeletonData assets, Spi...
(RP_COLON)
[uncategorized] ~98-~98: Consider adding a hyphen.
Context: ... Add Click the quick add button in the upper left corner and select 2D Object > `SpineA...
(TOP_LEFT_CORNER)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: build (22.x, windows-latest)
- GitHub Check: e2e (22.x)
- GitHub Check: codecov
🔇 Additional comments (20)
examples/spine-physics.ts (2)
21-21: LGTM! Camera position adjustment aligns with 1.4 changes.The camera position change from 2000 to 50 units brings the view to a more reasonable range, consistent with other example files.
49-52: Verify the world position calculation.The z-coordinate in
screenToWorldPointshould match the camera's z-position for accurate cursor tracking.✅ Verification successful
The world position calculation is correctly implemented.
The z-coordinate (50) in
screenToWorldPointmatches the camera's z-position, which ensures accurate cursor tracking. This implementation is consistent with other spine examples in the codebase.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check for consistency in z-coordinate usage across example files rg -l "screenToWorldPoint.*new Vector3.*position\.x.*position\.y.*\d+" | xargs rg "transform\.position.*new Vector3.*0.*0.*\d+"Length of output: 4443
🧰 Tools
🪛 eslint
[error] 51-52: Replace
············);⏎······with········(prettier/prettier)
examples/spine-follow-shoot.ts (3)
21-21: LGTM! Camera position adjustment is consistent.The camera position change to 20 units aligns with other example files and provides appropriate viewing distance.
29-31: LGTM! Proper use of new 1.4 API.The changes correctly implement the new instantiation method and position adjustments.
51-52: Consider adding null check for bone lookup.The
findBoneoperation could return null if the bone name doesn't exist.🧰 Tools
🪛 eslint
[error] 52-52: Insert
··(prettier/prettier)
examples/spine-mix-and-match.ts (1)
24-24: LGTM! Camera position is consistent.The camera position change to 20 units maintains consistency with other example files.
docs/zh/graphics/2D/spine/other.md (1)
9-15: LGTM! Clear documentation of 1.4 changes.The documentation clearly explains the API changes and new features in version 1.4, including:
- New instantiation method
- Configuration updates
- Scale handling changes
- Premultiplied alpha support
docs/en/graphics/2D/spine/overview.md (1)
9-22: Well-structured overview with clear advantages!The overview effectively explains Spine animation's purpose and advantages, with clear formatting and logical flow.
docs/en/graphics/2D/spine/other.md (1)
9-33: Excellent documentation of 1.4 changes and performance recommendations!The documentation clearly outlines:
- API changes in version 1.4
- Migration instructions
- Detailed performance optimization tips
The structure and content effectively guide users through the upgrade process while providing valuable performance insights.
docs/en/graphics/2D/spine/editor.md (3)
9-11: Well-written introduction and clear section reference!The introduction effectively communicates the purpose and benefits of the Spine integration, while maintaining consistent terminology in the section reference.
48-50: Great addition of file descriptions!The explanation of each exported file's purpose helps users understand the role of each component in the Spine animation system.
124-129: Clear and well-structured property documentation!The properties are well-organized and clearly explained, making it easy for users to understand the configuration options.
docs/zh/graphics/2D/spine/runtime.md (1)
411-413: Excellent technical explanation of dynamic atlas loading!The explanation of dynamic atlas loading and its benefits for performance optimization is technically accurate and well-presented.
docs/en/graphics/2D/spine/runtime.md (1)
419-425: Excellent documentation of advanced feature!The explanation of dynamic atlas loading and attachment replacement is thorough and includes important performance considerations.
examples/spine-performance.ts (3)
18-18: Camera position adjustment aligns with other examplesThe camera position change from 110 to 50 units provides a more consistent viewing distance across all Spine examples.
27-29: Improved entity instantiation patternThe new instantiation method using
resource.instantiate()is more idiomatic and provides better encapsulation of Spine entity creation.
33-33: Verify clone positioning impactThe new positioning formula
(-3 + i * 4, -1 + j * 4, 0)creates a different layout compared to the previous(8 * i, 8 * j, 0). Please verify that this doesn't affect the performance testing objectives.✅ Verification successful
Layout change improves visual presentation while maintaining benchmark validity
The new positioning formula creates a more compact and centered grid layout while preserving all performance testing aspects:
- Same number of instances (10x10 grid)
- Identical animation testing ("walk")
- Unmodified performance monitoring via Stats component
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if this example is referenced in any performance benchmarks rg -l "spine-performance" --type mdLength of output: 35
Script:
#!/bin/bash # Examine the spine-performance example file cat examples/spine-performance.ts # Search for related test or benchmark files rg -l "spine-performance" --type tsLength of output: 1493
examples/spine-animation.ts (2)
21-21: Camera position provides closer viewThe camera position change from 100 to 20 units provides a closer view of the animation, which is appropriate for this demonstration example.
29-31: Streamlined entity setup with proper scalingThe changes improve the setup process by:
- Using the idiomatic
instantiate()method- Adjusting the position scale from -18 to -1.8 to match the new camera distance
examples/spine-full-skin-change.ts (1)
32-36: Verify skin change functionality with new configurationThe transition from
defaultStatetodefaultConfiglooks correct, but please verify that the skin change functionality works as expected with the new configuration pattern.✅ Verification successful
Skin change functionality verified and working correctly
The new configuration pattern is properly implemented and thoroughly tested across multiple examples, including full skin changes, mix-and-match compositions, and individual attachment modifications. The implementation maintains proper state management and animation transitions during skin changes.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check for any other examples using defaultConfig with skin changes rg "defaultConfig\.skinName" --type tsLength of output: 311
Script:
#!/bin/bash # Get full context of the example files echo "=== spine-full-skin-change.ts ===" cat examples/spine-full-skin-change.ts echo -e "\n=== spine-mix-and-match.ts ===" cat examples/spine-mix-and-match.ts echo -e "\n=== spine-change-attachment.ts ===" cat examples/spine-change-attachment.tsLength of output: 11227
🧰 Tools
🪛 eslint
[error] 35-35: Replace
'full-skins/girl'with"full-skins/girl"(prettier/prettier)
[error] 36-36: Replace
'idle'with"idle"(prettier/prettier)
|
|
||
| 如果你的 Spine 资产未通过 Galacean 编辑器进行上传，而是通过三方平台上传至 CDN，同样能够通过 Galacean Spine 运行时加载器进行加载。 | ||
| ```typescript | ||
| const resource = await engine.resourceManager.load( | ||
| { | ||
| url: 'https://your.spineboy.json', // 自定义上传的资产 | ||
| type: 'spine', // 必须指定加载器类型为 spine | ||
| type: 'pine', // 指定加载器类型为 Spine |
docs/zh/graphics/2D/spine/runtime.md
Outdated
| ], // 自定义上传的资产 | ||
| type: 'spine',// 必须指定加载器类型为 spine | ||
| ], | ||
| type: 'spine',// 指定加载器类型为 Spine |
docs/zh/graphics/2D/spine/runtime.md
Outdated
| 'https://your.spineboy1.png', // 对应 a.png | ||
| 'https://your.spineboy2.png' // 对应 b.png | ||
| ], | ||
| type: 'spine',// 指定加载器类型为 Spine |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (10)
examples/spine-performance.ts (1)
24-24: Fix formatting issuesAddress the following formatting issues:
- Remove trailing comma after
"Spine"- Add newline at end of file
Also applies to: 40-40
🧰 Tools
🪛 eslint
[error] 24-24: Delete
,(prettier/prettier)
examples/spine-animation.ts (1)
26-26: Fix formatting issuesAddress the following formatting issues:
- Remove trailing comma after
"Spine"- Add newline at end of file
Also applies to: 57-57
🧰 Tools
🪛 eslint
[error] 26-26: Delete
,(prettier/prettier)
examples/spine-change-attachment.ts (1)
26-26: Fix formatting issuesAddress the following formatting issues:
- Remove trailing comma after
"Spine"- Use double quotes for string literals
- Add newline at end of file
Also applies to: 32-32, 33-33, 47-47
🧰 Tools
🪛 eslint
[error] 26-26: Delete
,(prettier/prettier)
examples/spine-full-skin-change.ts (1)
35-36: Fix string quote style.Use double quotes for string literals to maintain consistency.
- spine.defaultConfig.skinName = 'full-skins/girl'; - spine.defaultConfig.animationName = 'idle'; + spine.defaultConfig.skinName = "full-skins/girl"; + spine.defaultConfig.animationName = "idle";🧰 Tools
🪛 eslint
[error] 35-35: Replace
'full-skins/girl'with"full-skins/girl"(prettier/prettier)
[error] 36-36: Replace
'idle'with"idle"(prettier/prettier)
examples/spine-physics.ts (1)
37-37: Fix string quote style.Use double quotes for string literals to maintain consistency.
- spine.defaultConfig.animationName = 'wind-idle'; + spine.defaultConfig.animationName = "wind-idle";🧰 Tools
🪛 eslint
[error] 37-37: Replace
'wind-idle'with"wind-idle"(prettier/prettier)
examples/spine-mix-and-match.ts (1)
35-36: Fix string quote style.Use double quotes for string literals to maintain consistency.
- spine.defaultConfig.skinName = 'full-skins/girl'; - spine.defaultConfig.animationName = 'idle'; + spine.defaultConfig.skinName = "full-skins/girl"; + spine.defaultConfig.animationName = "idle";🧰 Tools
🪛 eslint
[error] 35-35: Replace
'full-skins/girl'with"full-skins/girl"(prettier/prettier)
[error] 36-36: Replace
'idle'with"idle"(prettier/prettier)
docs/zh/graphics/2D/spine/runtime.md (1)
73-77: Fix bare URLs in documentation.Wrap URLs in angle brackets or use Markdown link syntax for better formatting.
-- 当传递参数为 url 时，<b>需要保证文件在相同目录下</b>，即：<br> -https://your.spineboy.json <br> -https://your.spineboy.atlas <br> -https://your.spineboy.png <br> +- 当传递参数为 url 时，<b>需要保证文件在相同目录下</b>，即：<br> +<https://your.spineboy.json> <br> +<https://your.spineboy.atlas> <br> +<https://your.spineboy.png> <br>🧰 Tools
🪛 Markdownlint (0.37.0)
74-74: null
Bare URL used(MD034, no-bare-urls)
75-75: null
Bare URL used(MD034, no-bare-urls)
76-76: null
Bare URL used(MD034, no-bare-urls)
docs/en/graphics/2D/spine/runtime.md (3)
13-20: Consider adding version compatibility information.It would be helpful to specify the compatible versions of
@galacean/engine-spinewith different Spine runtimes and the core engine.
94-97: Maintain consistency in example URLs.The example URLs should follow a consistent pattern. Consider using the same domain and path structure across examples:
- 'https://your.spineboy1.png', // Corresponds to a.png - 'https://your.spineboy2.png' // Corresponds to b.png + 'https://assets.example.com/spineboy1.png', // Corresponds to a.png + 'https://assets.example.com/spineboy2.png' // Corresponds to b.png
38-38: Improve documentation accessibility and formatting.
- Add descriptive alt text to images for better accessibility
- Replace bare URLs with properly formatted Markdown links
- Consider using consistent formatting for code blocks (optional triple backticks vs. indentation)
Example fixes:
- <img src="https://mdn.alipayobjects.com/huamei_kz4wfo/afts/img/A*muomS5hICRYAAAAAAAAAAAAADsp6AQ/original" /> + <img src="https://mdn.alipayobjects.com/huamei_kz4wfo/afts/img/A*muomS5hICRYAAAAAAAAAAAAADsp6AQ/original" alt="Copy relative path menu option in the editor" /> - https://your.spineboy.json - https://your.spineboy.atlas - https://your.spineboy.png + [spineboy.json](https://your.spineboy.json) + [spineboy.atlas](https://your.spineboy.atlas) + [spineboy.png](https://your.spineboy.png)Also applies to: 69-71, 87-88
🧰 Tools
🪛 Markdownlint (0.37.0)
38-38: null
Images should have alternate text (alt text)(MD045, no-alt-text)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
docs/en/graphics/2D/spine/runtime.md(3 hunks)docs/zh/graphics/2D/spine/runtime.md(6 hunks)examples/multi-camera.ts(1 hunks)examples/spine-animation.ts(3 hunks)examples/spine-change-attachment.ts(3 hunks)examples/spine-follow-shoot.ts(4 hunks)examples/spine-full-skin-change.ts(3 hunks)examples/spine-mix-and-match.ts(3 hunks)examples/spine-performance.ts(2 hunks)examples/spine-physics.ts(4 hunks)
🧰 Additional context used
🪛 eslint
examples/spine-physics.ts
[error] 30-30: Delete ,
(prettier/prettier)
[error] 37-37: Replace 'wind-idle' with "wind-idle"
(prettier/prettier)
[error] 51-52: Replace ············);⏎······ with ········
(prettier/prettier)
[error] 53-53: Insert ··
(prettier/prettier)
[error] 54-54: Insert ··
(prettier/prettier)
[error] 55-55: Replace ········ with ··········
(prettier/prettier)
[error] 56-56: Replace } with ··}⏎······
(prettier/prettier)
[error] 60-60: Insert ⏎
(prettier/prettier)
examples/spine-animation.ts
[error] 26-26: Delete ,
(prettier/prettier)
[error] 57-57: Insert ⏎
(prettier/prettier)
examples/spine-follow-shoot.ts
[error] 26-26: Delete ,
(prettier/prettier)
[error] 50-51: Replace ·····);⏎············const·targetBone·=·skeleton.findBone('crosshair' with ·······const·targetBone·=·skeleton.findBone("crosshair"
(prettier/prettier)
[error] 52-52: Insert ··
(prettier/prettier)
[error] 53-53: Insert ··
(prettier/prettier)
[error] 54-54: Insert ··
(prettier/prettier)
[error] 55-55: Insert ··
(prettier/prettier)
[error] 56-56: Insert ··
(prettier/prettier)
[error] 57-57: Insert ··
(prettier/prettier)
[error] 69-69: Insert ⏎
(prettier/prettier)
examples/spine-performance.ts
[error] 24-24: Delete ,
(prettier/prettier)
[error] 40-40: Insert ⏎
(prettier/prettier)
examples/spine-change-attachment.ts
[error] 26-26: Delete ,
(prettier/prettier)
[error] 32-32: Replace 'full-skins/girl' with "full-skins/girl"
(prettier/prettier)
[error] 33-33: Replace 'idle' with "idle"
(prettier/prettier)
[error] 47-47: Insert ⏎
(prettier/prettier)
examples/spine-full-skin-change.ts
[error] 29-29: Delete ,
(prettier/prettier)
[error] 35-35: Replace 'full-skins/girl' with "full-skins/girl"
(prettier/prettier)
[error] 36-36: Replace 'idle' with "idle"
(prettier/prettier)
[error] 60-60: Insert ⏎
(prettier/prettier)
examples/spine-mix-and-match.ts
[error] 29-29: Delete ,
(prettier/prettier)
[error] 35-35: Replace 'full-skins/girl' with "full-skins/girl"
(prettier/prettier)
[error] 36-36: Replace 'idle' with "idle"
(prettier/prettier)
[error] 206-206: Insert ⏎
(prettier/prettier)
🪛 LanguageTool
docs/en/graphics/2D/spine/runtime.md
[style] ~86-~86: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...same directory as the atlas file.
- If the custom uploaded asset lacks file ex...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[uncategorized] ~178-~178: Loose punctuation mark.
Context: ... takes three parameters: - TrackIndex: Animation track index - animationName...
(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~213-~213: Loose punctuation mark.
Context: ...fic animations } } ``` - defaultMix: Default duration for transitions betwee...
(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~228-~228: Loose punctuation mark.
Context: ...d takes four parameters: - TrackIndex: Animation track - animationName: Name...
(UNLIKELY_OPENING_PUNCTUATION)
[typographical] ~246-~246: If you want to indicate numerical ranges or time ranges, consider using an en dash.
Context: ...ll transition starting at 0.8 seconds (1 - 0.2). When delay < 0, the next animat...
(DASH_RULE)
[uncategorized] ~266-~266: Loose punctuation mark.
Context: ...ion control. For example: - timeScale: Controls the playback speed of the anim...
(UNLIKELY_OPENING_PUNCTUATION)
[style] ~279-~279: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...arts, the Start event is triggered. - When an animation is removed from the queue ...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~280-~280: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...rupted, the End event is triggered. - When an animation finishes, regardless of wh...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
🪛 Markdownlint (0.37.0)
docs/en/graphics/2D/spine/runtime.md
69-69: null
Bare URL used
(MD034, no-bare-urls)
70-70: null
Bare URL used
(MD034, no-bare-urls)
71-71: null
Bare URL used
(MD034, no-bare-urls)
87-87: null
Bare URL used
(MD034, no-bare-urls)
88-88: null
Bare URL used
(MD034, no-bare-urls)
38-38: null
Images should have alternate text (alt text)
(MD045, no-alt-text)
376-376: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
393-393: null
Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
docs/zh/graphics/2D/spine/runtime.md
74-74: null
Bare URL used
(MD034, no-bare-urls)
75-75: null
Bare URL used
(MD034, no-bare-urls)
76-76: null
Bare URL used
(MD034, no-bare-urls)
39-39: null
Images should have alternate text (alt text)
(MD045, no-alt-text)
95-95: null
Bare URL used
(MD034, no-bare-urls)
96-96: null
Bare URL used
(MD034, no-bare-urls)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: build (22.x, windows-latest)
- GitHub Check: codecov
- GitHub Check: e2e (22.x)
🔇 Additional comments (11)
examples/multi-camera.ts (1)
85-85: LGTM! Resource type standardizationThe update to use
"Spine"as the resource type aligns with the standardization across other example files.examples/spine-performance.ts (2)
18-18: Improved visualization with adjusted positionsThe camera position change from 110 to 50 and the new entity spacing calculation (
-3 + i * 4, -1 + j * 4) provide better visualization of the performance example by:
- Bringing the camera closer for better detail
- Using smaller spacing between entities (4 units vs 8) for a more compact layout
Also applies to: 33-33
27-29: Enhanced entity creation with resource.instantiate()The new pattern of using
resource.instantiate()andgetComponent()is more efficient than manual entity creation and component addition.examples/spine-animation.ts (1)
21-21: Improved scale and positioningThe changes to camera distance (20 units) and entity position (-1.8 vs -18) suggest a 10x scale adjustment, providing better proportions for the scene.
Also applies to: 30-30
examples/spine-change-attachment.ts (1)
32-33: Updated configuration API usageThe change from
defaultStatetodefaultConfigfor settingskinNameandanimationNamereflects an API update. This change provides a more intuitive configuration interface.🧰 Tools
🪛 eslint
[error] 32-32: Replace
'full-skins/girl'with"full-skins/girl"(prettier/prettier)
[error] 33-33: Replace
'idle'with"idle"(prettier/prettier)
examples/spine-full-skin-change.ts (1)
24-24: LGTM!The changes improve the code by:
- Adjusting camera position for better visibility
- Using the new
instantiate()method for spine entity creation- Adjusting entity position to match the new scale
Also applies to: 32-34
examples/spine-physics.ts (1)
21-21: LGTM!The changes improve the code by:
- Adjusting camera position for better visibility
- Using the new
instantiate()method for spine entity creation- Adjusting entity position to match the new scale
- Adding
premultipliedAlphafor better transparency handlingAlso applies to: 33-36
examples/spine-follow-shoot.ts (2)
21-21: LGTM!The changes improve the code by:
- Adjusting camera position for better visibility
- Using the new
instantiate()method for spine entity creation- Adjusting entity position to match the new scale
Also applies to: 29-31
51-51: LGTM!The world position calculation has been correctly updated to match the new camera position.
🧰 Tools
🪛 eslint
[error] 50-51: Replace
·····);⏎············const·targetBone·=·skeleton.findBone('crosshair'with·······const·targetBone·=·skeleton.findBone("crosshair"(prettier/prettier)
examples/spine-mix-and-match.ts (1)
24-24: LGTM!The changes improve the code by:
- Adjusting camera position for better visibility
- Using the new
instantiate()method for spine entity creation- Adjusting entity position to match the new scale
Also applies to: 32-34
docs/zh/graphics/2D/spine/runtime.md (1)
410-455: LGTM! Well-documented new feature.The new section on dynamic atlas loading is well-structured and provides:
- Clear explanation of the problem being solved
- Detailed code example with comments
- Proper error handling and type safety
| class YourAmazingScript { | ||
| async onStart() { | ||
| // Load additional atlas files | ||
| const extraAtlas = await this.engine.resourceManager.load('/extra.atlas') as TextureAtlas; | ||
| const { skeleton } = this.entity.getComponent(SpineAnimationRenderer); | ||
| // The slot containing the attachment to be replaced | ||
| const slot = skeleton.findSlot(slotName); | ||
| // The region in the new atlas used to create a new attachment | ||
| const region = extraAtlas.findRegion(regionName); | ||
| // Clone a new attachment from the original, using the region from the new atlas | ||
| const clone = this.cloneAttachmentWithRegion(slot.attachment, region); | ||
| // Replace the attachment | ||
| slot.attachment = clone; | ||
| } | ||
|
|
||
| // Attachment cloning method | ||
| cloneAttachmentWithRegion( | ||
| attachment: RegionAttachment | MeshAttachment | Attachment, | ||
| atlasRegion: TextureAtlasRegion, | ||
| ): Attachment { | ||
| let newAttachment: RegionAttachment | MeshAttachment; | ||
| switch (attachment.constructor) { | ||
| case RegionAttachment: | ||
| newAttachment = attachment.copy() as RegionAttachment; | ||
| newAttachment.region = atlasRegion; | ||
| newAttachment.updateRegion(); | ||
| break; | ||
| case MeshAttachment: | ||
| const meshAttachment = attachment as MeshAttachment; | ||
| newAttachment = meshAttachment.newLinkedMesh(); | ||
| newAttachment.region = atlasRegion; | ||
| newAttachment.updateRegion(); | ||
| break; | ||
| default: | ||
| return attachment.copy(); | ||
| } | ||
| return newAttachment; | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling examples for dynamic atlas loading.
The dynamic atlas loading example should include error handling for common scenarios:
- Atlas file loading failures
- Missing regions in the atlas
- Invalid attachment types
Here's a suggested enhancement:
async onStart() {
// Load additional atlas files
- const extraAtlas = await this.engine.resourceManager.load('/extra.atlas') as TextureAtlas;
+ try {
+ const extraAtlas = await this.engine.resourceManager.load('/extra.atlas') as TextureAtlas;
+ if (!extraAtlas) {
+ throw new Error('Failed to load atlas');
+ }
+
+ const { skeleton } = this.entity.getComponent(SpineAnimationRenderer);
+ const slot = skeleton.findSlot(slotName);
+ if (!slot) {
+ throw new Error(`Slot "${slotName}" not found`);
+ }
+
+ const region = extraAtlas.findRegion(regionName);
+ if (!region) {
+ throw new Error(`Region "${regionName}" not found in atlas`);
+ }
+
+ const clone = this.cloneAttachmentWithRegion(slot.attachment, region);
+ slot.attachment = clone;
+ } catch (error) {
+ console.error('Failed to load and apply dynamic atlas:', error);
+ // Handle the error appropriately
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| class YourAmazingScript { | |
| async onStart() { | |
| // Load additional atlas files | |
| const extraAtlas = await this.engine.resourceManager.load('/extra.atlas') as TextureAtlas; | |
| const { skeleton } = this.entity.getComponent(SpineAnimationRenderer); | |
| // The slot containing the attachment to be replaced | |
| const slot = skeleton.findSlot(slotName); | |
| // The region in the new atlas used to create a new attachment | |
| const region = extraAtlas.findRegion(regionName); | |
| // Clone a new attachment from the original, using the region from the new atlas | |
| const clone = this.cloneAttachmentWithRegion(slot.attachment, region); | |
| // Replace the attachment | |
| slot.attachment = clone; | |
| } | |
| // Attachment cloning method | |
| cloneAttachmentWithRegion( | |
| attachment: RegionAttachment | MeshAttachment | Attachment, | |
| atlasRegion: TextureAtlasRegion, | |
| ): Attachment { | |
| let newAttachment: RegionAttachment | MeshAttachment; | |
| switch (attachment.constructor) { | |
| case RegionAttachment: | |
| newAttachment = attachment.copy() as RegionAttachment; | |
| newAttachment.region = atlasRegion; | |
| newAttachment.updateRegion(); | |
| break; | |
| case MeshAttachment: | |
| const meshAttachment = attachment as MeshAttachment; | |
| newAttachment = meshAttachment.newLinkedMesh(); | |
| newAttachment.region = atlasRegion; | |
| newAttachment.updateRegion(); | |
| break; | |
| default: | |
| return attachment.copy(); | |
| } | |
| return newAttachment; | |
| } | |
| } | |
| class YourAmazingScript { | |
| async onStart() { | |
| try { | |
| const extraAtlas = await this.engine.resourceManager.load('/extra.atlas') as TextureAtlas; | |
| if (!extraAtlas) { | |
| throw new Error('Failed to load atlas'); | |
| } | |
| const { skeleton } = this.entity.getComponent(SpineAnimationRenderer); | |
| const slot = skeleton.findSlot(slotName); | |
| if (!slot) { | |
| throw new Error(`Slot "${slotName}" not found`); | |
| } | |
| const region = extraAtlas.findRegion(regionName); | |
| if (!region) { | |
| throw new Error(`Region "${regionName}" not found in atlas`); | |
| } | |
| const clone = this.cloneAttachmentWithRegion(slot.attachment, region); | |
| slot.attachment = clone; | |
| } catch (error) { | |
| console.error('Failed to load and apply dynamic atlas:', error); | |
| // Handle the error appropriately | |
| } | |
| } | |
| // Attachment cloning method | |
| cloneAttachmentWithRegion( | |
| attachment: RegionAttachment | MeshAttachment | Attachment, | |
| atlasRegion: TextureAtlasRegion, | |
| ): Attachment { | |
| let newAttachment: RegionAttachment | MeshAttachment; | |
| switch (attachment.constructor) { | |
| case RegionAttachment: | |
| newAttachment = attachment.copy() as RegionAttachment; | |
| newAttachment.region = atlasRegion; | |
| newAttachment.updateRegion(); | |
| break; | |
| case MeshAttachment: | |
| const meshAttachment = attachment as MeshAttachment; | |
| newAttachment = meshAttachment.newLinkedMesh(); | |
| newAttachment.region = atlasRegion; | |
| newAttachment.updateRegion(); | |
| break; | |
| default: | |
| return attachment.copy(); | |
| } | |
| return newAttachment; | |
| } | |
| } |
Please check if the PR fulfills these requirements
What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
What is the current behavior? (You can also link to an open issue here)
What is the new behavior (if this is a feature change)?
Does this PR introduce a breaking change? (What changes might users need to make in their application due to this PR?)
Other information:
Summary by CodeRabbit
Release Notes
Documentation
New Features
premultipliedAlpharendering optioninstantiate()method for creating Spine animation entitiesChanges
defaultState→defaultConfig)Performance