Pixi.js는 브라우저에서 실행되는 WebGL을 사용하는 2차원 그래픽 라이브러리입니다.
Pixi.js는 자바스크립트에서 사용하는 라이브러리로 다음 프로그램을 작성해서 사용할 수 있습니다.

const app = new PIXI.Application()

document.body.appendChild(app.view)

// スプライトを追加
const sprite = PIXI.Sprite.from("hoge.png")
app.stage.addChild(sprite)

위의 예에서는 Pixi입니다.js를 초기화하고 정령(이미지)을 표시합니다.PIXI.Sprite.from 에서 새 엘프 객체를 생성하고 app.stage 에 addChild 객체를 추가하여 이미지를 표시합니다.
Pixi.js는 층구조에 표시물의 정보를 저장하고 이 정보에 따라 화면을 표시합니다.이것은 HTML의 구조와 매우 비슷하다.
따라서 사용자 정의 Element 기능을 사용하면 HTML에서 Pixi.선언적으로 js의 표현물인 Pixi를 정의합니다.나는 js로 화면을 표시할 수 있지 않을까 싶어서 한번 해 보았다.

사용자 정의 요소를 사용하여 요소 정의

우선 PIXI.Application의 원소<pixi-app>를 정의해 보자.어쨌든 동작만 확인하고 싶어서 내부 설치가 거칠다.

customElements.define("pixi-app", class PixiApplication extends HTMLElement {
 constructor() {
   super()
   this.pixiObj = new PIXI.Application()
   const shadow = this.attachShadow({mode: "open"})

   shadow.appendChild(this.pixiObj.view)

   const style = document.createElement("style")
   style.textContent = `
     :host {
       display: inline-block;
     }
   `
   shadow.appendChild(style)
 }
})

Shadow DOM에서 내부 Pixi.js의 <canvas> 요소를 추가하고 있습니다.
그런 다음 PIXI.Texture 을 이미지 리소스를 나타내는 요소<pixi-texture>로 정의합니다.

customElements.define("pixi-texture", class PixiTexture extends HTMLElement {
 constructor() {
   super()
   const pixiApp = getPixiApp(this)
   if (pixiApp === null) {
     return
   }
   const src = this.getAttribute("src")
   this.pixiObj = new PIXI.Texture.from(src)
 }
})

그런 다음 PIXI.Sprite 이미지를 표시하는 요소<pixi-sprite>로 정의합니다.또한 <pixi-app> 함수를 부모 원소에서 getPixiApp() 원소를 찾는 함수로 정의하고 사용합니다.

const getPixiApp = (elem) => {
 let node = elem.parentElement
 while (node !== null) {
   if (node.tagName === "PIXI-APP") {
     return node
   }
   node = node.parentElement
 }
 return null
}

customElements.define("pixi-sprite", class PixiSprite extends HTMLElement {
 constructor() {
   super()
   const pixiApp = getPixiApp(this)
   const pixiTexture = pixiApp.querySelector(`#${this.getAttribute("texture")}`)
   this.pixiObj = new PIXI.Sprite(pixiTexture.pixiObj)

   const parentPixiObj = this.parentElement.pixiObj
   if (parentPixiObj instanceof PIXI.Application) {
     parentPixiObj.stage.addChild(this.pixiObj)
   } else if (parentPixiObj instanceof PIXI.Container) {
     parentPixiObj.addChild(this.pixiObj)
   }
 }
})

<pixi-sprite>의 texture 속성의 값은 표시하고자 하는 <pixi-texture> 요소의 id 속성의 값을 설정하는 가설이다.
현재 일부 내용을 표시하는 데 사용할 최소 요소를 정의했습니다.
실제 사용의 예는 다음과 같다.

<pixi-app>
 <pixi-texture id="bunny" src="bunny.png"></pixi-texture>
 <pixi-sprite texture="bunny"></pixi-sprite>
</pixi-app>

<pixi-app> 및 <pixi-texture> 를 <pixi-sprite> 의 하위 요소로 추가한다고 가정합니다.
표시만 하는 실험을 하기 위해 조작PIXI.Sprite의 각 속성의 구조 설치를 생략했다.

정의된 요소 사용

동작을 시도하면 검은색<canvas>의 왼쪽 상단에 작은 그림이 표시됩니다.

잘했어.
이거 Pixi.만약 js의 요소를 HTML의 요소로 기술할 수 있는 구조가 진정으로 설치될 수 있다면(만약), React, Preact, Superfine 등 가상 DOM을 가진 구조의 구조를 사용한다면, Pixi.나는 js프로그래밍을 할 줄 아는 것 같다.
React의 구성 요소인 Pixi가 이미 사용되었습니다.js 요소를 처리할 수 있는 라이브러리는 React PIXI 있지만 React에만 한정됩니다.