PixiJS & Type Script로 2D 게임 만들기 ① vite로 폭발 환경 구축 편

이 글의 내용

PixiJS는 JavaScript(Type Script)를 사용하여 2D 그래픽을 그리는 프로그램 라이브러리입니다.
브라우저에서 2D 게임과 애니메이션 최성기 페이지를 만들려면 상당한 비율로 배려해야 하지만 능숙하게 사용해 게임을 만드는 것은 매우 어렵다.
그럼에도 불구하고 가장 장애가 되는 것은 최초의 환경을 구축하고 화면을 자유롭게 보여주며 이동하는 부분이다.그래서 몇 번으로 나뉘어 최초의 장애물을 뛰어넘어 좋아하는 게임 제작의 입구 앞에 서서 해설을 하고 싶다.
그나저나 정말 기술을 배우고 싶거나 한쪽에 놓고 게임을 하고 싶다면 phina.js처럼 픽시JS를 게임용 랩의 프레임으로 사용할 수도 있다.여기서는 더욱 통용되고 자유로운 개발을 위해 이런 틀을 사용하지 않는다.
▶ PixiJS로도 이런 느낌의 게임

https://nekomzs21.web.app/

이번 내용

PixiJS를 사용할 멋쟁이 개발 환경 준비

PixiJS로 이미지 읽기 및 표시

소스 코드: https://github.com/yuneco/zenn-samples/tree/master/pixi-vite-setup

전제 조건

다음 환경 도구를 전제로 설명합니다.헬프데스크 시스템을 개발한 사람이라면 아마 이미 가져왔을 거예요.

node.js (최근 버전)

yarn(기본값npm도ok)

VS 코드(기타 편집도 ok)

vite 설정 및 시작

픽시JS 자체는 CDN에서도 제공되기 때문에 CDN에서 라벨을 적절히 만들어 읽기<script>하면 사용할 수 있다.실제로 이에 대해 해설하는 사이트도 많은데 솔직히 학습·개발 환경으로 너무 힘들었다.편집이 끝난 후에도 작동하지 않으며 타입 스크립트와 SCSS 등 편리한 도구도 사용할 수 없다.그래서 우선 인기 있는 환경을 만들어야 한다.이번vite에 가요.
vite 들어보신 분이 "vite는 Vue 환경을 만드는 거 아닌가요?"이런 생각이 들 수 있지만 vite 자체와 Vue는 다르다(작가는 같다).Vue와 React 등 프레임워크와 상관없이 일반적인 웹 개발 환경을 제공하는 도구입니다.

vite 프로젝트 만들기

우선 vite로 새로운 프로젝트를 만듭니다.npm 또는 yarn 원하는 대로 다음 중 하나를 수행합니다.vanilla는 가장 간단한 바닐라 JS의 템플릿이다.없어도 되지만 조금이라도 가볍게 지목하기 위해서다.

# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-pixi-app -- --template vanilla

# yarn
yarn create @vitejs/app my-pixi-app --template vanilla

기본적으로 이 정도예요.자세한 확인을 원하시는 분들은 공식적인 Getting Started 참조해주세요.
그리고 ↓ 이렇게 ok

Done. Now run:
  cd my-pixi-app
  npm install
  npm run dev

상기 3개 명령을 집행한다.↓ 메시지가 오고 브라우저에서 열면 ok.

  vite v2.2.1 dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://192.168.0.177:3000/

  ready in 226ms.

이후 이 항목의 편집기만 편집하면 됩니다.

JS → Type Script로 변경

vanilla 템플릿 파일은 JS이며 Type Script로 변경됩니다.

프로젝트 폴더의 main.js 이름을 main.ts로 변경합니다.

index.html내src="/main.js"를 src="/main.ts"

로 변경
그게 다야.이렇게 하면 Type Script를 제대로 사용할 수 있습니다.
여러 가지 일에 얽매이고 싶은 사람은 일반적으로 추가 설정tsconfig.json을 하세요.

PixiJS 설치

PixiJS 설치 계속

npm install pixi.js

부터 읽기 시작합니다.
먼저 제거main.ts, 복제↓.
main.ts

// PixiJSを読み込み
import * as PIXI from 'pixi.js'

// ステージを作る
const createApp = () => {
  // キャンバスサイズと背景色を指定してステージを作成
  const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0xcccccc // 背景色(= #cccccc)
  })
  document.body.appendChild(app.view)
  return app
}

const app = createApp()

변경 내용을 저장하면 브라우저에 회색(#cccc)의 사각형(Canvas)이 표시됩니다.
또한 콘솔에서 PixiJS가 읽은 정보를 볼 수 있습니다.
main.ts는 PixiJS를 사용할 때의 시작 학급이다.
이번에는 사이즈와 배경색만 지정했는데 여러 가지 설정이 있어서 대충 보는 게 좋을 것 같아요.
공식 문서: PIXI.Application

PixiJS로 이미지 표시

회색 배경만 있어도 기분이 좋아지지 않으니 좋아하는 그림을 보여주세요.
프로젝트 폴더에 폴더PIXI.Application를 추가하고 원하는 이미지를 넣습니다.
이번엔 ↓assets를 사용합니다.한 마디로 하면 jpeg이든 pg든 상관없지만 이 보도 시리즈에서 저는 SVG를 이미지의 형식으로 강력히 추천합니다. 자신의 이미지를 사용할 수 있다면 SVG로 준비하세요.물론 이 샘플을 직접 사용한 SVG 파일도 ok입니다.
▼ tama.svg (소옥)

그림이 준비된 후tama.svg 다시 쓰고 회색 무대에서 그림을 읽습니다.
↓ 이미지를 읽은 후 표시되는 최소 코드입니다.
main.ts

import * as PIXI from 'pixi.js'

const createApp = () => {
  const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0xcccccc // 背景色(= #cccccc)
  })
  document.body.appendChild(app.view)
  return app
}

// const app = createApp() ...削除
// 🌟 ここから下を追加 🌟 //

// 初期化処理
const main = async () => {
  const app = createApp()
  const tamaTexture = await PIXI.Texture.fromURL('assets/tama.svg')
  const tamaSprite = new PIXI.Sprite(tamaTexture)
  app.stage.addChild(tamaSprite)
}

// 起動
main()

↓ 이렇게 이미지가 나오면 완벽해🎉

이렇게 하면 좋아하는 그림을 최대한 읽어서 표시할 수 있다.
이후 이 이미지를 원하는 위치와 사이즈로 조합해 보여주면 자유롭게 화면을 만들 수 있을 것 같다.
실제 현재 SVG 이미지의 읽기에 문제가 있지만 다음 코드는 마음에 드는 위치와 사이즈로 그림을 표시하는 방법을 설명해 드리겠습니다.