brettstack

  • 19 juin 2022
  • Inscrit 24 avr. 2020
  • 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...

  • 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!

  • 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)

  • "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)

  • Okay so with some console.log I was able to find console.log('slot.data.blendMode', slot.data.blendMode) yields 0. By doing slot.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.

  • 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!

  • 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

  • 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!

  • 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:

    1. Dust cloud during movement/dash
    2. 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!