[Pixi.js] 환경설정과 PIXI 객체 살펴보기

Javascript/pixi.js

[Pixi.js] 환경설정과 PIXI 객체 살펴보기

Rainbow🌈Coder 2022. 12. 21. 16:08

728x90

git init

npm install pixi.js

index.html에서 아래 추가

<script src="./node_modules/pixi.js/dist/pixi.min.js"></script>

해주거나 npm으로 다운받지 않더라도 아래 라인을 추가해주면 된다.

<script src="https://pixijs.download/release/pixi.js"></script>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>PIXI TUTORIAL</title>
</head>
<body>
	<script src="./node_modules/pixi.js/dist/pixi.min.js"></script>
	<!--npm install pixi.js 대체용 <script src="https://pixijs.download/release/pixi.js"></script>-->
	<script src="./app.js" defer></script>
	<header>
	<img src="https://pixijs.download/pixijs-banner-no-version.png"/>
	<h1>PIXI STUDY</h1>
</header>

<form>
	<select>
		<option value="PIXI1">1</option>
		<option value="PIXI2">2</option>
		<option value="PIXI3">3</option>
		<br>
	</select>
</form>
<main>
<section>
<ul>
	<li>
		<p>
			<span>
				2022년 12월 21일
			<span>
			PIXI 환경설정과 기본 속성 학습
			<a href = "https://www.youtube.com/watch?v=ajaduDDePIY" target="_blank">(Source1)</a>
			<a href = "https://www.youtube.com/watch?v=_HjQTzpbRK4&list=PLGsA9l-S7trVmUJ7HJsNSKIj0qoAO_qO8&index=1" target="_blank">(Source2)</a>
		</p>
	</li>
</ul>
</section>
</main>
</body>
</html>

위와 같이 예시 코드 작성

app.js

const Application = PIXI.Application;
const app = new Application();

여기까지 해준 뒤,

콘솔에 PIXI를 작성하면,

펼쳐보도록 한다.

엄청나게 많이 나온다...👍

이제 실무에서 픽시는

export default class 고양이팝업 extends 기본팝업 {
	app: PIXI.Application | null;
    clickEventHandler!: (e: any) => void;
    
    constructor(parent?: any, options?: any) {
		super(parent, options);
		this.app = null;
	}

	destroy() {
		this.app!.view.parentElement!.removeEventListener("mousemove", this.clickEventHandler);
		super.destroy();
	}
}

위와 같이 쓰여질 수 있을 것이다.

PIXI.Application은 클래스이다.

class {

constructor(i){

this.stage = new ....

}

renderer... 등등이 담겨져 있는 것이 보인다.

콘솔에서 조금 더 뚜드려본다.

stage, renderer, ticker

즉 Application은은 PixiJS 작업을 단순화하는 도우미 클래스로,

렌더러를 만들고, 스테이지를 만들고, 업데이트를 위한 티커를 시작할 수 있음을 알 수 있다.

이 tempApp.view 를 뛰어보면 canvas 태그가 찍힌다.

tempApp의 renderer -> plugins -> interaction 까지 파고들어가보자

포인터다운, 포인터무스 등의 이벤트 핸들러가 보인다!

https://pixijs.download/dev/docs/PIXI.AnimatedSprite.html#onpointerdown

https://pixijs.download/dev/docs/PIXI.BitmapText.html#onpointermove

https://pixijs.download/dev/docs/PIXI.BitmapText.html#onpointerup

코드 활용예제

이 pixi app을 dom에 추가해본다.

DOM에 뷰 추가

때 PIXI. 응용 프로그램 클래스는 렌더러를 만들고 렌더링할 Canvas 요소를 빌드. PixiJS로 그리는 것을 보려면 이 Canvas 요소를 웹 페이지의 DOM에 추가. 페이지의 스크립트 블록에 다음 줄을 추가

  document.body.appendChild(app.view);

const Application = PIXI.Application;
const app = new Application();
document.body.appendChild(app.view);

위와 같이 해도 되고,

아래와 같이 해도 된다.

	let app = new PIXI.Application({width: 640, height: 360 });
	document.body.appendChild(app.view);

실무에서도 픽시를 따라 웬만해서는 app이라는 변수에 담는 것을 권장한다.

728x90