[SOLVED] PCUI in PlayCanvas editor runtime

Help & Support
,
1

Hi guys!!

It’s possible using PCUI library to create a control panel like the playcanvas engine examples from editor version?

For example… including the js library and create the control panel from script or something like this sample PlayCanvas 3D HTML5 Game Engine but using the pcui style, sliders and select controls…

Thanks!!!

2

Yes it is possible. LeXXik has done something like that here: https://playcanvas.com/project/744419/overview/ammo-debug-draw

1 Like
3

Awesme!!! Thanks!!!

4

Is there any way to add the components so they become drag and drop items inside of the PlayCanvas editor? It seems unusual that the editor doesn’t have basic UI components like checkboxes, etc…

5

Not for the PCUI, no. PCUI is the UI framework that the Editor itself uses whereas the engine uses the PlayCanvas UI elements (eg User Interface - Buttons | Learn PlayCanvas)

Text input is a feature request on the engine and checkboxes I don’t think has a request ticket yet. My guess is that developers have made their own with the button element and some custom logic and created their own template asset.

You may be interested in Cem’s UI extensions that use HTML element overlays to do some of the things that you may be thinking of: PlayCanvas UI Components

6

Thanks for the quick response. Just my two cents, but it’s unusual that the useful UI elements are being open-sourced but not included properly in the product.

7

It’s because PCUI is a HTML framework and whereas the engine is using a UI system that is rendered in the WebGL context rather than extra elements on top of the WebGL canvas. This means that it is integrated as part of the WebGL render pipeline of the engine and can do things such as render UIs on different render layers, have 3D objects rendered on top etc.

Open sourcing PCUI is part of a longer term plan to (hopefully) fully open source the editor frontend/client as the editor is built with PCUI.

We are doing it piece meal with the first major milestone being able have Editor Extensions as part of the Editor project instead of needing to use browser extensions (eg: Editor API | Learn PlayCanvas).

Having PCUI open sourced allows us and other contributors to further extend the Editor itself and be used to better understand how to extend the editor via extensions.