이 글은 다음 페이지를 번역한 글입니다.
https://github.com/kittykatattack/learningPixi#settingup
GitHub - kittykatattack/learningPixi: A step-by-step introduction to making games and interactive media with the Pixi.js renderi
A step-by-step introduction to making games and interactive media with the Pixi.js rendering engine. - GitHub - kittykatattack/learningPixi: A step-by-step introduction to making games and interact...
github.com
코드 작성을 시작하기 전에 프로젝트에 대한 폴더를 만들고 프로젝트의 루트 디렉토리에서 웹 서버를 시작하십시오. 웹 서버를 실행하지 않으면 Pixi가 작동하지 않습니다.
다음으로, 픽시를 설치해야 합니다.
Installing Pixi
이 소개에 사용된 버전은 v5.3.10이며 pixi.min.js 파일은 이 저장소의 pixi 폴더나 v5.3.10용 Pixi 릴리스 페이지에서 찾을 수 있습니다. 또는 Pixi의 기본 릴리스 페이지에서 최신 버전을 다운로드할 수 있습니다.
이 파일 하나면 Pixi를 사용하는 데 필요한 모든 것입니다. 저장소의 다른 모든 파일은 무시해도 됩니다. 필요하지 않습니다.
다음으로 기본 HTML 페이지를 만들고 <script> 태그를 사용하여 방금 다운로드한 pixi.min.js 파일을 연결합니다. <script> 태그의 src는 웹서버가 실행되는 루트 디렉토리에 상대적이어야 합니다. <script> 태그는 다음과 같을 수 있습니다.
<script src="pixi.min.js"></script>다음은 Pixi를 연결하고 작동하는지 테스트하는 데 사용할 수 있는 기본 HTML 페이지입니다. (여기서는 pixi.min.js가 pixi라는 하위 폴더에 있다고 가정합니다):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<script src="pixi/pixi.min.js"></script>
<script type="text/javascript">
let type = "WebGL";
if (!PIXI.utils.isWebGLSupported()) {
type = "canvas";
}
PIXI.utils.sayHello(type);
</script>
</body>
</html>Pixi가 올바르게 연결되면 기본적으로 웹 브라우저의 JavaScript 콘솔에 다음과 같은 내용이 표시됩니다.
PixiJS 5.3.10 - * WebGL * http://www.pixijs.com/ ♥♥♥
'그래픽 > PixiJS' 카테고리의 다른 글
| [Learning Pixi] 6. Displaying sprites(1) (0) | 2021.10.17 |
|---|---|
| [Learning Pixi] 5. Loading images into the texture cache (0) | 2021.10.17 |
| [Learning Pixi] 4. Pixi sprites (0) | 2021.10.17 |
| [Learning Pixi] 3. Creating the Pixi Application and stage (0) | 2021.10.16 |
| [Learning Pixi] 1. Introduction (0) | 2021.10.16 |