How to use Editor?

[gonnavis]

Hello, how to use editor?
I run npm run "start:dev" and just see a terrain demo, no any UI.

[Usnul]

hey Vis,

the editor can be toggled via Num Lock key, however, the CSS isn't complete there, so it will look weird.

In general, that editor is not that great too, it's more of a crutch that I wrote for myself when working on Might is Right, to make populating the world a bit easier.

[gonnavis]

Thanks! I see the UI.
But after a while of research, I still can't add anything.
Could you please help me how to add something?

And one more question, is this example runnable?

[Usnul]

hey Vis,

the gif is from the game built on the engine, I wrote quite a bit about it on three.js forum:
https://discourse.threejs.org/t/might-is-right-the-game/6523

For various reasons, I'm not open-sourcing the game itself. But demo is available, which might be insightful.

For the UI specifically in this GIF, we see following things:

• Floating planes projected from 3d coordinates (health bars, damage numbers)
• Radial menu
• notification ("Round 2 Ended/ A new round begins")
• Window popup

All of these are HTML elements, the radial menu uses a fair bit of SVG as well. That itself is not really part of the engine, that.. well, HTML and SVG. The engine gives a thin abstraction layer for an arbitrary DOM Element, called View, a view has children, position, scale, visibility flag and mound/unmount signals (called link/unlink in meep).

When I worked on Might is Right, I chose to not use react or any other UI framework, because in my experience (I tried backbone(i feel old), react and vue) they produced unexpected CG pressure and were too slow in some cases, that on top of UI just being heavier. However, all that being said - this system makes minimal assumptions about what it wraps, it doesn't even create the DOM elements for you, so it's possible to attach react or vue or whatever else here.

Now it probably seems like I'm cheating, saying there's a "UI system" when all I said up until this point is - "bruh, it's pure html". Here are the "UI" features of meep:

• meep has a "GUI engine" component, that manages notifications, windows, popups and localization as well as a few other bits and pieces. This means that provided you can figure out how your window/notification should be "made" - the engine will help you create those, manage their lifecycle and attach various hooks to it.
• meep has a notification system in place, where you create a Notification object, and then send it to one(or more) of the notification streams, where it's picked up by the GUI engine, and visualized in the way you want. Might is Right has 3 notification streams for example, toasts in the bottom right and 2 areas in the central region.
• meep has a generic animation system that you can use to animate whatever, including the GUI, here it's used for notifications, floating combat text as well as the menu.
• the radial menu as well as windows/popups are included in the basic meep distribution, so those can be used out of the box.

Hope this explains a bit, meanwhile - i'll see if I can put together an example with a UI

[Usnul]

here's a notification example:
https://codesandbox.io/s/meep-notification-example-6sxoe

here's one with a simple text element:
https://codesandbox.io/s/meep-example-ui-text-label-nd1fi

Hope that helps. There's a whole bunch of useful UI elements in the /view folder that might come in handy

[gonnavis]

Many thanks! I'll try to learn more.

[luozhonghai]

the editor mode miss some pngs, can not work properly. can you fix it?