PlayCanvas Editor에서 사용하는 UI 프레임워크는 오픈 소스가 됩니다.

PlayCanvas Editor UI를 구성하는 프레임워크는 오픈 소스가 됩니다.
구성 요소 확인 - React에서 사용되는 섹션에 대해 설명합니다.
오픈 소스 프로젝트가 GiitHub에 공개되었습니다.
https://github.com/playcanvas/pcui

사용법

1. 창고.

git clone [email protected]:playcanvas/pcui.git
cd pcui

2. 종속 패키지 설치

npm install

3. clone 구문을 사용합니다.
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.업데이트
https://playcanvas.github.io/pcui/react/
이번에는 탭과 텍스트 입력을 간단하게 보여 줍니다.
App.js

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 화면을 만들 수 있습니다.
이번 기사에서 의견과 문제가 있다면역까지 마중 나와 주세요.
PlayCanvas 개발에서 참고할 만한 기사 일람표입니다.

@mxcn3

플레이캔버스 입문. - 모델 제작~ 게임 시작 전.

JavaScript를 사용하여 슬롯을 설치합니다.【PlayCanvas】

3분 동안 3D 모형을 만드는 뷰어[첫 번째 PlayCanvas]

PlayCanvas 코드 편집에서 es6

Gulp의 플러그인을 쓰면 PlayCanvas의 개발이 매우 편리해집니다

PlayCanvas Editor에 외부 스크립트를 읽는 새로운 기능이 추가됨에 따라 개발 방법을 고려했습니다Redux 포함

React Native+Play Canvas로 스마트폰 게임 폭발 속도 만들기

PlayCanvas 편집에 HTML, CSS를 컴파일하는 방법

기타 관련

일본 플레이캔버스 이용자회. - 슬랙.

플레이캔버스를 만든 유저회의 슬랙!

만약 약간의 흥미가 있다면, 우리는 사용자 간의 해결 방안인 플레이 캔버스를 추진하기 위해 슬랙을 만들었습니다. 가능하면 참가해 주십시오.

PlayCanvas 태그가 있는 기사 일람