Thank you so much! Going to try this out today. I'm glad I asked here before going down the route of writing custom WebGL Shader logic...
brettstack

- 19 juin 2022
- Inscrit 24 avr. 2020
- Modifié
Hey team,
How do I add a static background image to my renderer WebGL Canvas? Currently, I just have a transparent background rendering over a <div> with a background. This works, but I'd like to be able to save the canvas Data URI, right-click save image, etc. and have it include the background.
Thanks!
- Dans Weird alpha issue
Thanks! Haha I thought there was a bit of miscommunication. I'll send it through. Using spine-ts (v3.x) with webgl.
Sent!
Fixed with
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true)
- Dans Weird alpha issue
"On a black background you'll get the color of the attachment image, because black is zero, so black + any color = the same color" - the issue is that those big blue circles shouldn't exist at all. I've attached a zoomed in image of the staff tip as well as how it renders with a game background (same issue)
- Dans Weird alpha issue
Okay so with some
console.log
I was able to findconsole.log('slot.data.blendMode', slot.data.blendMode)
yields0
. By doingslot.data.blendMode = 2
it fixes the staff but breaks everything else. Does this give you any hints on how to solve?
image
And here it is on black background which has the same issue
The expected output is the black background image, but with the staffs emitting a very subtle glow like you can (barely) see in the image above it.
- Dans Weird alpha issue
I'm rendering by dynamically loading assets and attaching them to skeleton:
const atlas = new spine.TextureAtlas(atlasText, textureLoader) const atlasLoader = new spine.AtlasAttachmentLoader(atlas) const placeholderAttachmentName = PLACEHOLDER_ATTACHMENTS_MAP[slotName].attachmentName const attachmentSkinEntry = skeleton.data.defaultSkin.getAttachments().find((skinEntry) => skinEntry.name === placeholderAttachmentName) const placeholderAttachment = attachmentSkinEntry.attachment const attachment = atlasLoader.newRegionAttachment(skeleton.data.defaultSkin, attachmentName, attachmentName) const textureRegion = atlas.findRegion(attachmentName) attachment.setRegion(textureRegion) attachment.width = textureRegion.width attachment.height = textureRegion.height attachment.rotation = placeholderAttachment.rotation attachment.x = placeholderAttachment.x attachment.y = placeholderAttachment.y attachment.updateOffset()
In this image when I use
gl.clearColor(1, 1, 1, 1)
you can see that the staff in the left hand is correct and there's a faint blue glow (though it's hard to see). However, when it's rendered over other areas in the right hand you can see it still has this issue.
It sounds like it might be the additive blending you mentioned
"When a slot uses additive blending, its attachment is rendered additively when the image or video has a background color. If the background is transparent, the attachment is rendered additively when over other images, but it is not rendered additively where it is over the transparent background. If the attachment image uses opaque black, the black will be seen where it is over the transparent background. To avoid this, use transparent instead of opaque black."
What's the solution here? Thank you so much!
- Dans Weird alpha issue
Hi team,
I have some assets that should show with a light glow around them, but when I render them they don't have enough opacity. Any idea what setting I need to do (either in export or runtime) to fix this?
Thanks!
Brett.
Here's another example to show that there is some alpha going on here, but it's way more intense than when viewing this image normally
And here's the asset by itself and the atlas text
Equipment/MeleeWeapon1H/Basic/Wand/WaterAdeptWand2.png
size: 512,512
format: RGBA8888
filter: Linear,Linear
repeat: none
Equipment/MeleeWeapon1H/Basic/Wand/WaterAdeptWand2
rotate: false
xy: 0, 0
size: 512, 512
orig: 512, 512
offset: 0, 0
index: -1
Correct image
- Dans Weird alpha issue
- Modifié
- Modifié
Hey team,
I'm working on a game and want to render some text. For example, I want to show "3", "2", "1", "BEGIN". Each one of these will fade and shrink over a 1s period.
Does Spine have a way to render text? Or would I just do that natively in WebGL?
How about if I wanted the "text" to actually be images (e.g. 3D text that I have designed)? Is there a Spine way to render individual static images (and scale/fade them) or is that again something I would just do natively in WebGL?
Thanks in advance!
- Modifié
Hey team,
I'm working on a game and want to add some visual effects. Should I render these separately at runtime based on the skeleton's position? Or is it best practice to just bake it into the animation itself?
Some examples of what I want to do include:
- Dust cloud during movement/dash
- Lightning/spark effects during sword clash
If I want to render these at runtime, what's the best way to do this? Do I export the VFX by itself from Spine and attach it as a Skeleton? Or is there a better way to render something like this?
Thanks in advance!
- Modifié
Hello,
I purchased https://assetstore.unity.com/packages/2d/characters/fantasy-heroes-character-editor-pro-90592 and want to use it in a web app with Spine. Is there a way to convert these files to Spine?
Thanks.