Controlling opacity and visibility in Niantic studio (visual editor)

🧑‍💻 Technical Support
1

Hi, I’m quite new to development with very basic knowledge.
I’m currently using the Niantic studio visual editor and can’t find two features or sample codes from the doc: https://docs.8thwall.com/studio

  1. controlling opacity
    Is there a way to animate opacity on planes that use images (images input to the ‘color’ of Material)? I want the opacity animation to happen (like 0->1 and appear) when triggered, but couldn’t find anything related in the doc or tutorials.

2 . visibility control
I see that we can check the checkbox or the eye icon in the editor, but can we control this when an event is triggered? I was able to make hidden objects appear with ‘remove hidden’ script from the image tracker tutorial, but couldn’t make it work the other way around(like, make it disappear). Can anyone help by guiding me to a tutorial that covers it or with any sample scripts that might work?

Thank you!

2

Hi, welcome to the forums!

Yes you can control the opacity, however there isn’t a built in component to do it. To animate the opacity of a Material you could use a custom component like the following:

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'Fade Out',
  stateMachine: ({world, eid, schemaAttribute, dataAttribute}) => {
    ecs.defineState('default')
      .initial()
      .onTick(() => {
        ecs.Material.mutate(world, eid, (cursor) => {
          cursor.opacity -= 0.01
        })
      })
  },
})

To Hide objects you simply apply the Hidden component to them to hide them, and remove the component to show them.