Specific Area
Is there a way with oneJS to target a specific area (in my case, a 2d plane on top of a 3d phone that the character would be physically holding) and not the whole screen? Sorry if this is highlighted somewhere, I skimmed the documentation but couldnt find this use case. Thank you in advance
8 Replies
Unfortunately that's not possible. OneJS is using Unity's UI Toolkit which doesn't support world space rendering by default. There are workarounds like this https://www.youtube.com/watch?v=gXx_j-6z8jY but I would recommend using OG Canvas instead.
MadCat Tutorials
YouTube
Unity UI Toolkit in World Space
In this video, we show how to use Unity's new UI Framework UI Toolkit in World Space.
This video assumes some knowledge of UI Toolkit. If this is your first encounter with UI Toolkit, check out what it is here:
https://youtu.be/yUXFHAOXhcA
If you want a deep dive check out our 20+ hours course on UI Toolkit:
https://youtu.be/JjIznsCcHMo
or dir...
If your worldspace UI doesn't need to handle events (for displaying purposes only) then you can use a RenderTexture on the PannelSettings, and use the RT in worldspace however you want
er, sorry im relatively an amateur at gamedev, my question was less about worldspace and just targetting one, small, specific canvas to use as the DOM for oneJS, the worldspace thing doesnt really happen its like the gta phone, sorry for my poor phrasing
but that canvas would move around in 2d space, its like a targetted HUD basically so absolutely positioning elements wouldnt work
Oh yes okay. If it's just 2D like this:
Then it should be pretty straight-forward. Though I'm not 100% sure what you meant by absolutely positioning not working. Do you mean the containing root element (the canvas you were referring to) also moves around?
yes the canvas moves around in 2d like sliding up/down animations and such or going “horizontal” potentially
rather than using onejs for the whole screen (like if we were making that ui from gta it’s both the minimal and the phone) I solely wanted to use it for the phone UI and contain onejs to that specific area, if that makes sense
I think you use OneJS for "the whole screen" like normal and just set
picking-mode={PickingMode.Ignore} for the root div so that it won't block input events. Your phone rectangle can be absolutely positioned or use flexbox.that helps, thanks