이 기사는 🍑파고 🍑‏ @kkkkkk 2018의 6 일째 기사입니다.

어이! React에서 pixi.js 움직이자!

React는 주로 DOM을 렌더링하는 데 사용되는 JavaScript View 라이브러리입니다. 하지만 안에서 하는 것은 업데이트를 감지하고 차이만 변경한다는 것뿐입니다. 라는 것은 DOM 하지만 네이티브 하지만 Canvas 하지만 , 렌더링처를 바꾸고 있는 것만으로 같은 구조로 할 수 있을 것입니다.

그렇다면 React 로 게임 엔진 pixi.js 의 컴퍼넌트를 조작한다고는 할 수 없을 것입니다. 더욱 편리하게 pixi.js의 구성 요소는 트리 구조입니다. 이미 React와의 궁합은 뛰어난 것입니다.

React에서 pixi.js를 움직이려는 선인 있습니다. 하지만 React v16의 Fiber화에 의한 내부 사양 변경에는 대응하지 않았기 때문에, v16 이후로 움직이는 react-pixi-fiber 를 사용합니다.

덧붙여서 3월에 태어난 지 얼마 안되어 급성장 중인 @inlet/react-pixi도 있습니다. 나중에 사용해 보자.

만든 것

모 스마트폰 게임의 파크리를 만들었습니다. 내 그림 그리기로 사용하고있는 대리 캐릭터를 날리는 "리코 팍"입니다.

그중 PWA로 합니다. 12월의 소중한 시간을 헛되게 녹여주세요.

소스 코드는 이쪽.

잡감

만들었을 때 느낀 것을 힘들게.

장점 👍

컴포넌트 디버깅이 쉽습니다

state가 이상하게 분산되어 있지 않기 때문에 다음의 상태를 쓰는 것이 편하다

어쨌든 각 구성 요소의 디버깅이 쉽습니다.

단점 👎

상당한 성능에 영향을 미칩니다

unmount 잊어 버리면 건간 메모리 누수

루트에 상태가 집중된다

애니메이션 어려움

애니메이션을 만들려고 할 때마다 새롭게 상태 변수를 추가해야 하는 조금 귀찮아…
클래스 베이스라면 해당하는 클래스에 위양하는 것만으로 좋지만, React에서는 루트에 두지 않으면 다른 사람으로부터 참조할 수 없게 되므로, 어디에 상태를 두어야 할지 괴롭습니다.

요약

React로 게임을 만드는 것은 재미 있습니다

단방향 바인딩 최고

상태 관리가 증가하면 귀찮음

조금 큰 게임은 만드는 힘들 것 같지만, 중·소규모 게임이라면 개미라고 생각했습니다.

끝까지 봐 주셔서 감사합니다.