Skip to main content
ExoGuid
ExoGuid
Honored Contributor
April 3, 2025
Solved

Custom UI - Layers and Ignore Raycast

Hello!

I continue my CUI journey and am attempting to overlay icons on my typescript buttons by using absolute position and zIndex.  I've run into an issue where the icon blocks the button functionality and would like to know if it's possible to set an image to ignore raycast.

 

gausroth
gausrothAnswer
Honored Contributor
April 4, 2025
ui.Pressable({
     children: [
          ui.Image({
               source: ui.ImageSource.fromTextureAsset(this.props.buttonTexture!),
               style: { height: '100%', width: '100%', resizeMode: 'cover' },
          }),
     ],
     onPress: (player: hz.Player) => { this.BottonClick() },
     style: { position: 'absolute', height: 150, width: 150, bottom: 50, left: 50 },
}),
GitHub: https://github.com/Gausroth/HorizonWorldsTutorials.git Discord: https://discord.gg/hNyDQwdw4N YouTube: https://www.youtube.com/@GausRothTutorials
View in thread

8 replies

gausroth
gausroth
Honored Contributor
April 4, 2025

You could try changing the order they are in the code. instead of button, image, you could try image, button. But I think you can make images a child of the button and that should fix it. Another thing you could try is changing the z-order of the image and button. I believe a higher z-order will be on top of a lower z-order.

GitHub: https://github.com/Gausroth/HorizonWorldsTutorials.git Discord: https://discord.gg/hNyDQwdw4N YouTube: https://www.youtube.com/@GausRothTutorials
ExoGuid
ExoGuidAuthor
Honored Contributor
April 4, 2025

Thanks for the reply.

I've attempted to change the stack order in the script so that the buttons came before the icons but the image/icon still blocks the button.  The zIndex controls the sorting/layer order but the icons are still on top of the TS buttons.

Are there any snippets of code that show an image as a child of a button? 

ExoGuid
ExoGuidAuthor
Honored Contributor
April 4, 2025

Just my two cents here but were Meta to add a font that was comprised of shapes like arrows and other useful UI elements that would be pretty handy.

gausroth
gausroth
Honored Contributor
April 4, 2025

Some ascii characters work. Hold down alt and type in numbers to get them to print.

 

GitHub: https://github.com/Gausroth/HorizonWorldsTutorials.git Discord: https://discord.gg/hNyDQwdw4N YouTube: https://www.youtube.com/@GausRothTutorials
    ExoGuid
    ExoGuidAuthor
    Honored Contributor
    April 4, 2025

    Thanks.  I tried a bunch from the character maps of the TS fonts.  The VR editor had that sprite list.  Maybe I’ll give some of them a go.

    Terms & ConditionsAccessibility statement