[SOLVED] Changing Button Sprites

I’m having a weird issue when it comes to changing the sprites of my buttons. I have created a repro here:

https://playcanvas.com/editor/scene/1166394

Steps to recreate:

  1. Launch Scene
  2. Hover over highlighted countries to verify sprite changes
  3. Click ‘Show Global Coverage’
  4. Hover over highlighted countries to see sprite assets not being loaded on or after hover
  5. Click ‘Hide Global Coverage’
  6. Hover over highlighted countries to see previous sprite assets not being loaded on or after hover
  7. Click ‘Show Global Coverage’
  8. Hover over highlighted countries to see sprite assets are now being loaded and working as expected
  9. Click ‘Hide Global Coverage’
  10. Hover over highlighted countries to see sprite assets are now being loaded and working as expected

It certainly seems like it’s related to the button component, but I’m not sue how to address this.

Quick note:

You will notice that I only change the button status sprites on one of the click events. For some bizarre reason, if I add the same code to both directions I get white squares in all cases regardless of how many times I switch sprites.

hello what are u doing

Hi @tyler1,

Thank you for taking an interest in the community. It’s always appreciated to see new faces. This thread is for troubleshooting an issue I’m having with a project. If you are looking to connect with others, you might want to try the Random Chat section of the forum:

4 Likes

I’m not sure what the end result that you wanted, this is what I got after a quick look:
https://playcanvas.com/project/799908/overview/button-sprite-repo-from-forums

1 Like

Hi @yaustar!

Sorry for intruding on your vacation! Thank you so much for looking into this. It works now!

The end goal is to switch between the red and gray versions of the sprite. Taking a second look at your code, I see that for the updates to the button component only go to this.countrySprites.dSprite instead of this.countrySprites.dSprite.resource

Is there a reason I need to go to the resource for the elementComponent, but not for the buttonComponent?

I need to double check the API for element, but the button component is asking for the asset (the property is hoverSpriteAsset)

The element component has both a sprite property and spriteAsset. One would be the resource (sprite) and the other is an sprite asset.

1 Like

Thank you for the explanation! Using spriteAsset instead of sprite also cleared up a bit of lingering weird behavior.