我在web页面展示spine动画会出现奇怪的黑块这是本来没有的东西，如图
orangestar Which runtime are you using? For example, if you use the spine-pahser runtime, it supports all Spine features when using the Phaser WebGL renderer, but when using the Phaser Canvas renderer, the spine-phaser runtime does not support meshes, tint black, or blend modes.
Misaki
我使用的是spine-player。
What blending mode do those slots use? Did you export with pre-multiplied alpha but have not enabled pre-multiplied alpha in the spine-player configuration?
- 수정됨
Mario
很高兴你能回复我，谢谢你，但是我不明白你的问题，也不知道如何回答你。。
你可以看看我的代码吗？
<!-- 引入必要的 JS 和 CSS -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AoandonGleamingFire/wiki-data/spine-player.css">
<script src="https://cdn.jsdelivr.net/gh/AoandonGleamingFire/wiki-data/spine-player.js"></script>
<!-- 创建一个相对定位的父容器 -->
<div style="position: relative; width: 100%; height: 100vh;">
<!-- 第一个动画的容器（上层） -->
<div id="player-container1" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
</div>
<script>
// 初始化第一个动画（上层）
new spine.SpinePlayer("player-container1", {
atlasUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/spine-wiki/main/spine%20wiki/Kusanagi_character/Kusanagi_character.atlas",
jsonUrl: "https://raw.githubusercontent.com/AoandonGleamingFire/spine-wiki/main/spine%20wiki/Kusanagi_character/Kusanagi_character.skel",
showControls: false, // 隐藏播放器控件
animation: "idle",
alpha: true, // Enable player translucency
backgroundColor: "#00000000" // Background is fully transparent
});
</script>你也可以直接通过链接来访问我的git仓库，查看里面的spine文件。请告诉我是哪里有错误。
orangestar Mario's question is about how your skeleton is set up in the Spine Editor, so we can't tell from the code. If you are not the person who created the skeleton data, could you forward Mario's question to the person who created the skeleton data? Or, if you do not mind providing us with the skeleton data, please send it to us via email and we will check it: contact@esotericsoftware.com
orangestar Oh, I noticed that your skeleton data has a .skel extension even though it is a JSON format file. I'm not sure if this can cause errors, but I think it would be better to change the extension to .json because the current one is confusing.
Misaki
谢谢你的回复，我把后缀改为了json依然没有效果，这是我的spine文件。再次谢谢你的帮助，同时我也已经通过邮件发生给你一份了、
orangestar Thank you for sending your skeleton data files! I have confirmed that the blend mode of the slot (tx_light2) where the problem occurs is is set to Additive instead of Normal.
When a slot uses additive blending, its attachment is rendered additively if the image has a background color. If the background is transparent, the attachment is rendered additively if it is on top of other images, but it is not rendered additively if it is on top of the transparent background. If the attachment image uses opaque black, you will see the black where it is on top of the transparent background.
Looking at your code, you've made the background of the player transparent, which is why the black background of the vfx image is showing up.
I think the solution to this problem should be to make the background of the original texture used transparent instead of black, or to make the background non-transparent.
Misaki
再次感谢你的回复，我在官方教程里面并没有查看到如何让原来的纹理的背景使用透明色。
请你教教如何修改原来的纹理的背景。
再次感谢你的回复。
orangestar This is no longer an issue related to Spine so I think you should look into it yourself to find a comfortable way for you. However, I was not sure how cleanly it could be done, so I did a quick test.
If you prepare layers filled with each RGB color in Photoshop and apply a mask extracted from the RGB channel to each layer, you should be able to achieve transparency as shown below.
Since it is a common case to do this kind of editting, I found a video on YouTube that might be helpful:
Misaki 非常感谢你的帮助，我已经解决了问题。真的非常感谢。谢谢