PlayCanvas EditorのUIを構築しているフレームワークがオープンソースになりました。
コンポーネントの確認〜Reactで使用するところまでを紹介します。
オープンソースとなったプロジェクトはGitHub上に公開されています。
https://github.com/playcanvas/pcui
使用方法
1. リポジトリをclone
git clone git@github.com:playcanvas/pcui.git
cd pcui
2. 依存するパッケージのインストール
npm install
3. storybookでコンポーネントの中身を確認
storybookで整理されているコンポーネントを確認します。
npm run storybook
storybookのページへアクセス
storybookを実行すると、コンポーネントの一覧をウェブページで見ることができるようになります。
下記のページにアクセスして使えるコンポーネントが確認できます。
Local: http://localhost:9009/
On your network: http://192.168.11.10:9009/
このような形でコンポーネントの一覧が確認できます。
コンポーネントをReactで使用する
コンポーネントをReactで使用するには、ビルドをすることで使えるようになります。
NPMのパッケージも公開されているようなのでパッケージを利用します。
npmパッケージのリポジトリはこちら
https://www.npmjs.com/package/@playcanvas/pcui
PCUIのドキュメントはこちらにあります。
https://playcanvas.github.io/pcui/react/
React.jsのプロジェクトを作成
Reactの公式サイトを参考に新規プロジェクトを作成します。
https://ja.reactjs.org/docs/create-a-new-react-app.html
npx create-react-app my-app
cd my-app
PCUIをインストール
npm install @playcanvas/pcui
App.jsを書き換える
ドキュメントやStorybookを参考に/src/App.jsを書き換えます。
https://playcanvas.github.io/pcui/react/
今回はシンプルにラベルとテキストインプットを表示しています。
import React from 'react';
import { Label, TextInput } from '@playcanvas/pcui/pcui-react.js';
function App() {
return (
<div className="App">
<Label text="Hello World" />
<TextInput placeholder="Hello" />
</div>
);
}
export default App;
Reactのプロジェクトを起動します。
npm start
起動画面
起動するとPlayCanvasでお馴染みのUIの画面を作成することができます。
今回の記事で、意見、質問などが有りましたら @mxcn3までお願いします。
PlayCanvasのユーザー会のSlackを作りました！
少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！