10-10-2020, 02:19 PM
PCUI — UI Framework Powering PlayCanvas Engine Open Sourced
<div><div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/10/pcui-ui-framework-powering-playcanvas-engine-open-sourced.png" class="ff-og-image-inserted"></div>
<p>Yesterday PCUI, an open source UI framework for creating game tools and other web applications, was open sourced. PCUI is named as such because it is the UI layer powering the battle tested PlayCanvas game engine. It provides over a dozen controls, as well as implementing logic such as the Observer pattern for making binding your UI to your data. PCUI is open source under the liberal MIT license with the source code <a href="https://github.com/playcanvas/pcui">available on GitHub</a>. </p>
<p>Details from the PlayCanvas blog:</p>
<blockquote class="wp-block-quote">
<p>Today, PlayCanvas is launching <a rel="noreferrer noopener" href="https://github.com/playcanvas/pcui" target="_blank">PCUI</a>: a new, open source front-end framework for the web.</p>
<p>PCUI is designed with tools developers in mind. It is particularly well suited to building viewer and editor applications, providing a rich set of beautiful and consistent controls. It already powers the <a rel="noreferrer noopener" href="https://playcanvas.com/" target="_blank">PlayCanvas Editor</a> – the world’s most powerful WebGL production tool.</p>
<p>Here you can see tree controls, panels, buttons, checkboxes, toolbars, menus and more. The Editor also relies on PCUI’s observer system, that makes it easy to synchronize the state of your application’s UI with that of the underlying data. Plus, it has a built-in support for history to make implementing redo/undo a breeze.</p>
</blockquote>
<p>In addition to the PlayCanvas game engine, PCUI is used to power the <a href="https://playcanvas.com/viewer">PlayCanvas GLTF viewer project</a> as well, a project which is <a href="https://github.com/playcanvas/playcanvas-viewer">open source</a> and shows you a real-world example of using PCUI in a TypeScript application. PCUI is also extremely <a href="https://playcanvas.github.io/pcui/">well documented</a> with several <a href="https://playcanvas.github.io/pcui/storybook/?path=/story/input-booleaninput--main">examples available</a>. If you are interested in learning more about PlayCanvas be sure to check out <a href="https://gamefromscratch.com/playcanvas-engine-revisited-bowling-with-playcanvas/">two part tutorial</a>. You can learn more about the PCUI release in the <a href="https://youtu.be/Hlmg5f40lbE">video </a>below.</p>
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
<div class="wp-block-embed__wrapper">
<div class="ast-oembed-container"><iframe class='youtube-player' width='1500' height='844' src='https://www.youtube.com/embed/Hlmg5f40lbE?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent' allowfullscreen='true' style='border:0;'></iframe></div>
</div>
</figure>
<div class="code-block code-block-1"> <ins class="adsbygoogle" data-ad-format="autorelaxed" data-ad-client="ca-pub-5156240514307514" data-ad-slot="1997524572"></ins>
</div>
</div>
https://www.sickgaming.net/blog/2020/10/...n-sourced/
<div><div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/10/pcui-ui-framework-powering-playcanvas-engine-open-sourced.png" class="ff-og-image-inserted"></div>
<p>Yesterday PCUI, an open source UI framework for creating game tools and other web applications, was open sourced. PCUI is named as such because it is the UI layer powering the battle tested PlayCanvas game engine. It provides over a dozen controls, as well as implementing logic such as the Observer pattern for making binding your UI to your data. PCUI is open source under the liberal MIT license with the source code <a href="https://github.com/playcanvas/pcui">available on GitHub</a>. </p>
<p>Details from the PlayCanvas blog:</p>
<blockquote class="wp-block-quote">
<p>Today, PlayCanvas is launching <a rel="noreferrer noopener" href="https://github.com/playcanvas/pcui" target="_blank">PCUI</a>: a new, open source front-end framework for the web.</p>
<p>PCUI is designed with tools developers in mind. It is particularly well suited to building viewer and editor applications, providing a rich set of beautiful and consistent controls. It already powers the <a rel="noreferrer noopener" href="https://playcanvas.com/" target="_blank">PlayCanvas Editor</a> – the world’s most powerful WebGL production tool.</p>
<p>Here you can see tree controls, panels, buttons, checkboxes, toolbars, menus and more. The Editor also relies on PCUI’s observer system, that makes it easy to synchronize the state of your application’s UI with that of the underlying data. Plus, it has a built-in support for history to make implementing redo/undo a breeze.</p>
</blockquote>
<p>In addition to the PlayCanvas game engine, PCUI is used to power the <a href="https://playcanvas.com/viewer">PlayCanvas GLTF viewer project</a> as well, a project which is <a href="https://github.com/playcanvas/playcanvas-viewer">open source</a> and shows you a real-world example of using PCUI in a TypeScript application. PCUI is also extremely <a href="https://playcanvas.github.io/pcui/">well documented</a> with several <a href="https://playcanvas.github.io/pcui/storybook/?path=/story/input-booleaninput--main">examples available</a>. If you are interested in learning more about PlayCanvas be sure to check out <a href="https://gamefromscratch.com/playcanvas-engine-revisited-bowling-with-playcanvas/">two part tutorial</a>. You can learn more about the PCUI release in the <a href="https://youtu.be/Hlmg5f40lbE">video </a>below.</p>
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
<div class="wp-block-embed__wrapper">
<div class="ast-oembed-container"><iframe class='youtube-player' width='1500' height='844' src='https://www.youtube.com/embed/Hlmg5f40lbE?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent' allowfullscreen='true' style='border:0;'></iframe></div>
</div>
</figure>
<div class="code-block code-block-1"> <ins class="adsbygoogle" data-ad-format="autorelaxed" data-ad-client="ca-pub-5156240514307514" data-ad-slot="1997524572"></ins>
</div>
</div>
https://www.sickgaming.net/blog/2020/10/...n-sourced/