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

6599 단어 JavaScriptPlayCanvas
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 태그가 있는 기사 일람
  • 좋은 웹페이지 즐겨찾기