Forum Discussion

Exo_Guid's avatar
Exo_Guid
Partner
9 months ago
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.

 

CustomUI
TypeScript
  • gausroth's avatar
    gausroth
    9 months ago
    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 },
}),

8 Replies

  • gausroth's avatar
    gausroth
    Mentor
    9 months ago

    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.

    • Exo_Guid's avatar
      Exo_Guid
      Partner
      9 months ago

      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? 

    • Exo_Guid's avatar
      Exo_Guid
      Partner
      9 months ago

      Or alternatively a snippet that shows an image used as a pressable.  The I could just design my own buttons from scratch.

      • gausroth's avatar
        gausroth
        Mentor
        9 months ago
        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 },
}),
  • Exo_Guid's avatar
    Exo_Guid
    Partner
    9 months ago

    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's avatar
      gausroth
      Mentor
      9 months ago

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

       

      • Exo_Guid's avatar
        Exo_Guid
        Partner
        9 months ago

        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.

Recent Discussions