Introducing PCUI - An Open Source UI Framework for the Web 🚀

Announcements
1

The PlayCanvas team is incredibly excited to announce the open sourcing of a brand new product called PCUI: the PlayCanvas User Interface framework.

PCUI-Github-Header-Fixed
PCUI-Github-Header-Fixed2560×1280 292 KB

Read all about it here:

This is super cool for tools developers in general. But for PlayCanvas developers, it’s even more exciting because this is the first step in formalizing an interface to interact with the Editor. In future, this is the API you will use to build your own plugins and extensions to the Editor.

We’re keen to spread the word. Can you help us out with a retweet + like for our announcement Twitter post?

Let us know what you think!

21 Likes
2

Dumb Question But Is This Available Now and also is there a demo for this

3

Yes. It is available now.

3 Likes
5

Amazing! Thank you very much for making this available!

1 Like
6

Check out this cool Youtube video from Mike at Gamefromscratch:

He does an awesome job of introducing PCUI to the global game dev community.

7 Likes
7

In the picture you’re showing a color picker, is this one actually integrated, or is that a thing to create myself?
I do not see it in the src folder on github :slight_smile:

9

I’m trying to setup PCUI with this HTML file:

<!doctype html>
<html>
<head><meta charset="utf-8"></head>

<script type="text/javascript">

import { Button } from '@playcanvas/pcui/pcui.js'
const helloWorldButton = new Button({
    text: 'Click Me'
});
document.body.appendChild(helloWorldButton.dom);

</script>

<body>
</body>
</html>

And getting the error:
Uncaught SyntaxError: Cannot use import statement outside a module

What am I doing wrong?

10

Hi @AlexandreRangel,

Import can be used only on a script module, replace your initial script element with the following, and add your JS code to a separate file:

<script type="module" src="myFile.js"></script>
1 Like
11

Awesome! That could be great intermediary step towards custom Editor plugins I suppose :+1:

1 Like
12

Thank you @Leonidas, but I still don’t fully grasp how should I organize and import the files.

I’m getting the error:
Uncaught SyntaxError: The requested module '../dist/pcui.js' does not provide an export named 'Button'

And my files are like that:

index.html :

<!doctype html>
<html><head><meta charset="utf-8">
  <script type="module" src="./dist/pcui.js"></script>
  <script type="module" src="./js/app.js"></script>
</head><body></body>
</html>

app.js :

import {Button} from '../dist/pcui.js'
const helloWorldButton = new Button({
    text: 'Click Me'
});
document.body.appendChild(helloWorldButton.dom);

Here’s the project: https://www.alexandrerangel.art.br/playcanvas/pcui-01/

13

Hi AlexandreRangel,

Currently the PCUI build output doesn’t have perfect support for es modules in html. It works fully if you use a module bundler like webpack / rollup to import PCUI but if importing via a html module script it’s only going to offer the global PCUI namespace.

To get it up and running in your example, you could rewrite your app.js file to import PCUI to the global namespace as follows:

import '../dist/pcui.js';
const helloWorldButton = new pcui.Button({
    text: 'Click Me'
});
document.body.appendChild(helloWorldButton.dom);
3 Likes
14

Thanks a lot @Elliott and @Leonidas !
Worked like a charm!

1 Like
16

Is this be used for the user interface?

17

Hi @fftidus,

Yes, these modules can be used for a user interface, they are more work focused but you can even use them in a game if you find them fit.

2 Likes
18

3 posts were split to a new topic: Can I add other primitives to PlayCanvas