Pixi 렌더링 엔진으로 게임 및 대화 형 미디어를 만드는 방법에 대한 단계별 소개입니다. Pixi v4.5.5 용으로 업데이트 되었습니다.
중국어 버전 : Pixi 官方 教程 中文 版. 이 튜토리얼이 마음에 들면 80 % 더 많은 콘텐츠가 포함 된 책이 마음에 드실 것입니다!.
https://github.com/kittykatattack/learningPixi
소개
Pixi는 매우 빠른 2D 스프라이트 렌더링 엔진입니다. 그게 무슨 뜻입니까?
즉, JavaScript 및 기타 HTML5 기술을 사용하여 게임과 응용 프로그램을 쉽게 만들 수 있도록 대화 형 그래픽을 표시, 애니메이션 및 관리하는 데 도움이 됩니다.
그것은 합리적이고 깔끔한 API를 가지고 있으며 텍스처 아틀라스를 지원하고 스프라이트 (대화 형 이미지) 애니메이션을 위한 간소화 된 시스템을 제공하는 것과 같은 많은 유용한 기능을 포함합니다.
또한 완전한 장면 그래프를 제공하여 중첩 된 스프라이트 (스프라이트 내부의 스프라이트)의 계층을 생성 할 수 있을 뿐만 아니라 마우스 및 터치 이벤트를 스프라이트에 직접 연결할 수 있습니다.
그리고 가장 중요한 것은 Pixi가 원하는 만큼 사용하고, 개인 코딩 스타일에 맞게 조정하고, 다른 유용한 프레임 워크와 원활하게 통합 할 수 있도록 방해가 된다는 것입니다.
Pixi의 API는 실제로 Macromedia / Adobe Flash에서 개척 한 잘 낡고 검증 된 API를 개선 한 것입니다. Old-skool Flash 개발자는 집처럼 느껴질 것입니다.
현재 다른 스프라이트 렌더링 프레임 워크는 비슷한 API를 사용합니다 : CreateJS, Starling, Sparrow 및 Apple의 SpriteKit. Pixi API의 강점은 범용이라는 것입니다. 게임 엔진이 아닙니다.
원하는 것을 만들 수 있는 완전한 표현의 자유를 제공하고 사용자 정의 게임 엔진을 그 주위에 감쌀 수 있기 때문에 좋습니다.
이 튜토리얼에서는 Pixi의 강력한 이미지 렌더링 기능과 장면 그래프를 결합하여 게임 제작을 시작하는 방법을 알아 봅니다.
그러나 Pixi는 게임만을 위한 것이 아닙니다. 이러한 동일한 기술을 사용하여 대화 형 미디어 응용 프로그램을 만들 수 있습니다. 즉, 휴대폰 용 앱을 의미합니다!
이 튜토리얼을 시작하기 전에 무엇을 알아야 합니까?
HTML 및 JavaScript에 대한 합리적인 이해가 있어야 합니다. 전문가 일 필요는 없으며 배우고 자하는 열의가 있는 야심 찬 초보자 일뿐입니다. HTML과 JavaScript를 모른다면 이 책을 배우기 가장 좋은 곳은 다음과 같습니다.
HTML5 및 JavaScript를 사용한 기초 게임 디자인
내가 썼기 때문에 그것이 최고의 책이라는 사실을 알고 있습니다!
시작하는 데 도움이 되는 좋은 인터넷 리소스도 있습니다.
학습 스타일에 가장 적합한 것을 선택하십시오.
알겠어요? JavaScript 변수, 함수, 배열 및 객체가 무엇이며 어떻게 사용하는지 알고 있습니까? JSON 데이터 파일이 무엇인지 알고 있습니까? Canvas Drawing API를 사용해 보셨습니까?
Pixi를 사용하려면 루트 프로젝트 디렉토리에서 웹 서버도 실행해야 합니다. 웹 서버가 무엇이며 프로젝트 폴더에서 웹 서버를 시작하는 방법을 알고 있습니까? 가장 좋은 방법은 node.js를 사용한 다음 사용하기 매우 쉬운 http-server를 설치하는 것입니다. 그러나 그렇게 하려면 Unix 명령 줄로 작업하는 데 익숙해야 합니다.
이 비디오에서 Unix 사용 방법을 배울 수 있으며 작업이 끝나면 이 비디오를 따라 가십시오. 유닉스 사용법을 배워야 합니다. 배우는 데 몇 시간 밖에 걸리지 않으며 컴퓨터와 상호 작용하는 정말 재미 있고 쉬운 방법입니다.
그러나 아직 명령 줄을 엉망으로 만들고 싶지 않다면 Mongoose 웹 서버를 사용해보십시오.
또는 훌륭한 대괄호 텍스트 편집기를 사용하여 모든 코드를 작성하십시오. Brackets는 기본 작업 공간에서 번개 모양 버튼을 클릭하면 웹 서버와 브라우저를 자동으로 시작합니다.
이제 준비가 되었다고 생각되면 계속 읽으십시오!
(독자에게 요청 :이 문서는 살아있는 문서입니다. 특정 세부 사항에 대해 궁금한 점이 있거나 내용을 명확히 해야 하는 경우 이 GitHub 저장소에 문제를 생성 해 주시면 자세한 정보로 텍스트를 업데이트하겠습니다.)
설정
코드 작성을 시작하기 전에 프로젝트의 폴더를 만들고 프로젝트의 루트 디렉토리에서 웹 서버를 시작하십시오. 웹 서버를 실행하지 않으면 Pixi가 작동하지 않습니다.
다음으로 Pixi를 설치해야 합니다.
Pixi 설치
이 소개에 사용 된 버전은 v4.5.5이며 이 저장소의 pixi 폴더 또는 v4.5.5 용 Pixi의 릴리스 페이지에서 pixi.min.js 파일을 찾을 수 있습니다. 또는 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> <script src="pixi/pixi.min.js"></script> <body> <script type="text/javascript"> let type = "WebGL" if(!PIXI.utils.isWebGLSupported()){ type = "canvas" } PIXI.utils.sayHello(type) </script> </body> </html>
Pixi가 올바르게 연결되면 다음과 같은 내용이 기본적으로 웹 브라우저의 JavaScript 콘솔에 표시됩니다.
PixiJS 4.4.5 - * canvas * http://www.pixijs.com/ ♥♥♥ Pixi 애플리케이션 및 스테이지 생성
이제 Pixi를 사용할 수 있습니다!
하지만 어떻게?
첫 번째 단계는 이미지 표시를 시작할 수 있는 직사각형 표시 영역을 만드는 것입니다. Pixi에는 이를 생성하는 Application 개체가 있습니다. HTML <canvas> 요소를 자동으로 생성하고 캔버스에 이미지를 표시하는 방법을 파악합니다. 그런 다음 스테이지라는 특수 Pixi 컨테이너 개체를 만들어야 합니다. 앞서 보시겠지만 이 스테이지 객체는 Pixi가 표시 할 모든 항목을 포함하는 루트 컨테이너로 사용됩니다.
다음은 앱 Pixi 애플리케이션 및 단계를 만들기 위해 작성해야 하는 코드입니다. HTML 문서의 <script> 태그 사이에 다음 코드를 추가합니다.
//Create a Pixi Application let app = new PIXI.Application({width: 256, height: 256}); //Add the canvas that Pixi automatically created for you to the HTML document document.body.appendChild(app.view);
Pixi 사용을 시작하기 위해 작성해야 하는 가장 기본적인 코드입니다. 검은 색 256 픽셀 x 256 픽셀 캔버스 요소를 생성하여 HTML 문서에 추가합니다. 다음은 이 코드를 실행할 때 브라우저에서 나타나는 모습입니다.
예, 검은 사각형!
PIXI.Application은 사용중인 웹 브라우저에서 사용 가능한 그래픽에 따라 Canvas Drawing API 또는 WebGL을 사용하여 그래픽을 렌더링 할지 여부를 결정합니다. 인수는 옵션 개체라고 하는 단일 개체입니다. 이 예제에서 너비 및 높이 속성은 캔버스의 너비와 높이를 픽셀 단위로 결정하도록 설정됩니다. 이 옵션 개체 내에 더 많은 선택적 속성을 설정할 수 있습니다. 앤티 앨리어싱, 투명도 및 해상도를 설정하는 데 사용할 수 있는 방법은 다음과 같습니다.
let app = new PIXI.Application({ width: 256, // default: 800 height: 256, // default: 600 antialias: true, // default: false transparent: false, // default: false resolution: 1 // default: 1 } );
Pixi의 기본 설정에 만족하면 이러한 옵션을 설정할 필요가 없습니다. 그러나 필요한 경우 PIXI.Application에 대한 Pixi의 설명서를 참조하십시오.
이러한 옵션은 무엇을 합니까? 앤티 앨리어스는 글꼴 및 그래픽 기본 요소의 가장자리를 매끄럽게 합니다. (WebGL 앤티 앨리어싱은 일부 플랫폼에서 사용할 수 없으므로 게임의 대상 플랫폼에서 테스트해야 합니다.) transparent는 캔버스 배경을 투명하게 만듭니다. 해상도를 사용하면 다양한 해상도와 픽셀 밀도의 디스플레이로 작업하기가 더 쉽습니다. 해상도 설정은 이 튜토리얼의 범위를 약간 벗어나지 만 모든 세부 사항에 대한 해상도 사용 방법에 대한 Mat Grove의 설명을 확인하십시오. 그러나 일반적으로 대부분의 프로젝트에서 해상도를 1로 유지하면 괜찮습니다.
Pixi의 렌더러 개체는 기본적으로 WebGL로 설정됩니다. 이는 WebGL이 믿을 수 없을 정도로 빠르며 앞으로 배울 멋진 시각 효과를 사용할 수 있기 때문입니다. 그러나 WebGL을 통해 Canvas Drawing API 렌더링을 강제해야 하는 경우 다음과 같이 forceCanvas 옵션을 true로 설정할 수 있습니다.
forceCanvas: true,
캔버스를 만든 후 캔버스의 배경색을 변경해야 하는 경우 app.renderer 객체의 backgroundColor 속성을 16 진수 색상 값으로 설정합니다.
app.renderer.backgroundColor = 0x061639;
렌더러의 너비 또는 높이를 찾으려면 app.renderer.view.width 및 app.renderer.view.height를 사용합니다.
캔버스의 크기를 변경하려면 렌더러의 크기 조정 방법을 사용하고 새 너비 및 높이 값을 제공합니다. 그러나 해상도와 일치하도록 캔버스 크기가 조정되었는지 확인하려면 autoResize를 true로 설정하십시오.
app.renderer.autoResize = true; app.renderer.resize(512, 512);
캔버스를 전체 창에 채우려면 이 CSS 스타일을 적용하고 렌더러의 크기를 브라우저 창의 크기로 조정할 수 있습니다.
app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);그러나 그렇게 할 경우 다음 CSS 코드를 사용하여 모든 HTML 요소에서 기본 패딩 및 여백도 0으로 설정해야 합니다.
<style>* {padding: 0; margin: 0}</style>
(위 코드에서 별표 *는 CSS "유니버설 선택기"로 "HTML 문서의 모든 태그"를 의미합니다.)
캔버스가 브라우저 창 크기에 비례하여 크기가 조정되도록 하려면 이 사용자 지정 scaleToWindow 함수를 사용할 수 있습니다.
Pixi sprites
이제 렌더러가 있으므로 이미지 추가를 시작할 수 있습니다. 렌더러에서 보이게 하고 싶은 것은 스테이지라는 특별한 Pixi 객체에 추가되어야 합니다. 다음과 같이 이 특수 스테이지 객체에 액세스 할 수 있습니다.
app.stage
스테이지는 Pixi 컨테이너 객체입니다. 컨테이너를 그룹화 하여 그 안에 넣은 모든 것을 저장할 수 있는 일종의 빈 상자로 생각할 수 있습니다. 스테이지 오브젝트는 장면에서 보이는 모든 사물에 대한 루트 컨테이너입니다. 무대에 넣은 것은 캔버스에 렌더링 됩니다. 지금은 무대가 비어 있지만 곧 그 안에 물건을 넣을 것입니다. (여기에서 Pixi의 컨테이너 객체에 대해 자세히 읽을 수 있습니다.)
(중요 : 스테이지는 Pixi 컨테이너이기 때문에 다른 컨테이너 객체와 동일한 속성과 메서드를 갖습니다.하지만 스테이지에 너비 및 높이 속성이 있지만 렌더링 창의 크기를 참조하지 않습니다. 스테이지의 너비 높이 속성은 그 안에 넣은 물건이 차지하는 면적을 알려줍니다.
그래서 당신은 무대에 무엇을 두나요? 스프라이트라고 하는 특수 이미지 객체. 스프라이트는 기본적으로 코드로 제어 할 수 있는 이미지 일뿐입니다. 상호 작용 및 애니메이션 그래픽을 만드는 데 유용한 위치, 크기 및 기타 속성을 제어 할 수 있습니다. 스프라이트를 만들고 제어하는 방법을 배우는 것은 Pixi 사용법을 배우는 데있어 가장 중요한 것입니다. 스프라이트를 만들고 스테이지에 추가하는 방법을 알고 있다면 게임을 만들기 시작하는 단계에서 조금만 더 가면 됩니다.
Pixi에는 게임 스프라이트를 만드는 다양한 방법 인 Sprite 클래스가 있습니다. 이를 생성하는 세 가지 주요 방법이 있습니다.
세 가지 방법을 모두 배우게 되겠지만, 시작하기 전에 Pixi로 이미지를 표시하기 전에 이미지에 대해 알아야 할 사항을 알아 보겠습니다.
텍스처 캐시에 이미지로드
Pixi는 WebGL을 사용하여 GPU에서 이미지를 렌더링 하므로 이미지는 GPU가 처리 할 수 있는 형식이어야 합니다.
WebGL 지원 이미지를 텍스처라고 합니다. 스프라이트에 이미지를 표시하기 전에 일반 이미지 파일을 WebGL 텍스처로 변환해야 합니다.
모든 것이 빠르고 효율적으로 작동하도록 하기 위해 Pixi는 텍스처 캐시를 사용하여 스프라이트에 필요한 모든 텍스처를 저장하고 참조합니다.
텍스처의 이름은 참조하는 이미지의 파일 위치와 일치하는 문자열입니다. 즉, "images / cat.png"에서로드 된 텍스처가 있는 경우 다음과 같이 텍스처 캐시에서 찾을 수 있습니다.
PIXI.utils.TextureCache["images/cat.png"];
텍스처는 Pixi의 렌더러에서 작업하기에 효율적인 WebGL 호환 형식으로 저장됩니다. 그런 다음 Pixi의 Sprite 클래스를 사용하여 텍스처를 사용하여 새 스프라이트를 만들 수 있습니다.
let texture = PIXI.utils.TextureCache["images/anySpriteImage.png"]; let sprite = new PIXI.Sprite(texture);
그러나 이미지 파일을 로드하고 텍스처로 변환하는 방법은 무엇입니까? Pixi의 기본 제공 로더 개체를 사용합니다.
Pixi의 강력한 로더 개체는 모든 종류의 이미지를 로드 하는 데 필요한 모든 것입니다. 이를 사용하여 이미지를 로드하고 이미지 로드가 완료되면 setup이라는 함수를 호출하는 방법은 다음과 같습니다.
PIXI.loader .add("images/anyImage.png") .load(setup); function setup() { //This code will run when the loader has finished loading the image }
Pixi의 개발 팀은 로더를 사용하는 경우 다음과 같이 로더의 리소스 개체에서 텍스처를 참조하여 스프라이트를 만들어야 한다고 권장합니다.
let sprite = new PIXI.Sprite( PIXI.loader.resources["images/anyImage.png"].texture );
다음은 이미지를 로드하고, 설정 함수를 호출하고,로드 된 이미지에서 스프라이트를 만들기 위해 작성할 수 있는 몇 가지 완전한 코드의 예입니다.
PIXI.loader .add("images/anyImage.png") .load(setup); function setup() { let sprite = new PIXI.Sprite( PIXI.loader.resources["images/anyImage.png"].texture ); }
이 튜토리얼에서 이미지를 로드하고 스프라이트를 만드는 데 사용할 일반적인 형식입니다.
다음과 같이 체인 가능한 추가 메소드로 여러 이미지를 나열하여 동시에 여러 이미지를 로드 할 수 있습니다.
PIXI.loader .add("images/imageOne.png") .add("images/imageTwo.png") .add("images/imageThree.png") .load(setup);
더 좋은 방법은 다음과 같이 단일 add 메서드 내의 배열에 로드하려는 모든 파일을 나열하는 것입니다.
PIXI.loader .add([ "images/imageOne.png", "images/imageTwo.png", "images/imageThree.png" ]) .load(setup);
로더를 사용하면 JSON 파일을 로드 할 수도 있습니다.
스프라이트 표시
이미지를 로드 하고 이를 사용하여 스프라이트를 만든 후 다음과 같이 stage.addChild 메서드를 사용하여 Pixi의 스테이지에 스프라이트를 추가해야 합니다.
app.stage.addChild(cat);
스테이지는 모든 스프라이트를 담는 메인 컨테이너라는 것을 기억하세요.
중요 : 스프라이트 스프라이트를 스테이지에 추가하지 않으면 볼 수 없습니다!
계속하기 전에 방금 배운 것을 사용하여 단일 이미지를 표시하는 방법에 대한 실용적인 예를 살펴 보겠습니다. examples / images 폴더에는 고양이의 64 x 64 픽셀 PNG 이미지가 있습니다.
다음은 이미지를 로드하고, 스프라이트를 생성하고, Pixi의 스테이지에 표시하는 데 필요한 모든 JavaScript 코드입니다.
//Create a Pixi Application let app = new PIXI.Application({ width: 256, height: 256, antialias: true, transparent: false, resolution: 1 } ); //Add the canvas that Pixi automatically created for you to the HTML document document.body.appendChild(app.view); //load an image and run the `setup` function when it's done PIXI.loader .add("images/cat.png") .load(setup); //This `setup` function will run when the image has loaded function setup() { //Create the cat sprite let cat = new PIXI.Sprite(PIXI.loader.resources["images/cat.png"].texture); //Add the cat to the stage app.stage.addChild(cat); }
이 코드가 실행되면 다음과 같은 내용이 표시됩니다.
이제 우리는 어딘가에 있습니다!
스테이지에서 스프라이트를 제거해야 하는 경우 removeChild 메서드를 사용하십시오.
app.stage.removeChild(anySprite)
하지만 일반적으로 스프라이트의 visible 속성을 false로 설정하면 스프라이트를 사라지게 하는 더 간단하고 효율적인 방법입니다.
anySprite.visible = false;
별칭 사용
자주 사용하는 Pixi 개체 및 메서드에 대한 짧은 형식의 별칭을 만들어 약간의 입력을 줄이고 코드를 더 읽기 쉽게 만들 수 있습니다. 예를 들어, Pixi의 모든 객체에 PIXI를 접두사로 붙이면 실망하기 시작합니까? 그렇게 생각한다면 그것을 가리키는 더 짧은 별칭을 만드십시오. 예를 들어, TextureCache 개체에 대한 별칭을 만드는 방법은 다음과 같습니다.
let TextureCache = PIXI.utils.TextureCache
그런 다음 다음과 같이 원본 대신 해당 별칭을 사용합니다.
let texture = TextureCache["images/cat.png"];
좀 더 간결한 코드를 작성할 수 있을 뿐만 아니라 별칭을 사용하면 추가 이점이 있습니다. Pixi의 자주 변경되는 API에서 버퍼링 하는 데 도움이 됩니다. Pixi의 API가 향후 버전에서 변경되면 변경됩니다! -코드 전체에서 사용되는 모든 인스턴스 대신 프로그램 시작시 한 곳에서 이러한 별칭을 Pixi 개체 및 메서드로 업데이트하기 만하면 됩니다. 따라서 Pixi의 개발 팀이 가구를 약간 재배치 하기로 결정하면 한 발 앞서 나갈 수 있습니다!
이를 수행하는 방법을 알아보기 위해 모든 Pixi 개체 및 메서드에 대한 별칭을 사용하여 이미지를 로드하고 표시하도록 작성한 코드를 다시 작성해 보겠습니다.
//Aliases let Application = PIXI.Application, loader = PIXI.loader, resources = PIXI.loader.resources, Sprite = PIXI.Sprite; //Create a Pixi Application let app = new Application({ width: 256, height: 256, antialias: true, transparent: false, resolution: 1 } ); //Add the canvas that Pixi automatically created for you to the HTML document document.body.appendChild(app.view); //load an image and run the `setup` function when it's done loader .add("images/cat.png") .load(setup); //This `setup` function will run when the image has loaded function setup() { //Create the cat sprite let cat = new Sprite(resources["images/cat.png"].texture); //Add the cat to the stage app.stage.addChild(cat); }
이 자습서의 대부분의 예제는 동일한 모델을 따르는 Pixi 개체에 대한 별칭을 사용합니다. 달리 명시되지 않는 한, 다음의 모든 코드 예제는 이와 같은 별칭을 사용한다고 가정 할 수 있습니다.
이미지를 로드하고 스프라이트를 만들기 위해 알아야 할 모든 것입니다.
로딩에 대해 조금 더
위에서 보여 드린 형식은 이미지를 로드하고 스프라이트를 표시하기 위한 표준 템플릿으로 사용하는 것이 좋습니다. 따라서 다음 몇 개의 단락을 무시하고 다음 섹션 인 "스프라이트 배치"로 바로 이동할 수 있습니다. 그러나 Pixi의 로더 객체는 매우 정교하며 정기적으로 사용하지 않더라도 알아야 할 몇 가지 기능을 포함합니다. 가장 유용한 몇 가지를 살펴 보겠습니다.
일반 JavaScript 이미지 개체 또는 캔버스에서 스프라이트 만들기
최적화와 효율성을 위해 항상 Pixi의 텍스처 캐시에 미리 로드 된 텍스처에서 스프라이트를 만드는 것이 가장 좋습니다. 그러나 어떤 이유로 일반 JavaScript Image 객체에서 텍스처를 만들어야 하는 경우 Pixi의 BaseTexture 및 Texture 클래스를 사용하여 수행 할 수 있습니다.
let base = new PIXI.BaseTexture(anyImageObject), texture = new PIXI.Texture(base), sprite = new PIXI.Sprite(texture);
기존 캔버스 요소에서 텍스처를 만들려면 BaseTexture.fromCanvas를 사용할 수 있습니다.
let base = new PIXI.BaseTexture.fromCanvas(anyCanvasElement),
스프라이트가 표시하는 텍스처를 변경하려면 texture 속성을 사용하십시오. 다음과 같이 Texture 개체로 설정합니다.
anySprite.texture = PIXI.utils.TextureCache["anyTexture.png"];
이 기술을 사용하여 게임에서 중요한 일이 발생하는 경우 스프라이트의 모양을 대화식으로 변경할 수 있습니다.
로딩 파일에 이름 지정
로드하려는 각 리소스에 고유 한 이름을 할당 할 수 있습니다. add 메소드의 첫 번째 인수로 이름 (문자열)을 제공하십시오. 예를 들어, 다음은 고양이 이미지의 이름을 catImage로 지정하는 방법입니다.
PIXI.loader .add("catImage", "images/cat.png") .load(setup);
그러면 loader.resources에 catImage라는 객체가 생성됩니다. 즉, 다음과 같이 catImage 객체를 참조하여 스프라이트를 만들 수 있습니다.
let cat = new PIXI.Sprite(PIXI.loader.resources.catImage.texture);
그러나 이 기능을 사용하지 않는 것이 좋습니다! 로드 된 각 파일에 부여한 모든 이름을 기억하고 실수로 같은 이름을 두 번 이상 사용하지 않도록 해야 하기 때문입니다. 이전 예제에서 했던 것처럼 파일 경로 이름을 사용하는 것이 더 간단하고 오류 발생 가능성이 적습니다.
로드 진행률 모니터링
Pixi의 로더에는 파일이 로드 될 때마다 실행되는 사용자 정의 가능한 함수를 호출하는 특별한 진행 이벤트가 있습니다. progress 이벤트는 다음과 같이 로더의 on 메소드에 의해 호출됩니다.
PIXI.loader.on("progress", loadProgressHandler);
로드 체인에 on 메서드를 포함하고 파일이 로드 될 때마다 loadProgressHandler라는 사용자 정의 함수를 호출하는 방법은 다음과 같습니다.
PIXI.loader .add([ "images/one.png", "images/two.png", "images/three.png" ]) .on("progress", loadProgressHandler) .load(setup); function loadProgressHandler() { console.log("loading"); } function setup() { console.log("setup"); }
파일 중 하나가 로드 될 때마다 progress 이벤트는 loadProgressHandler를 호출하여 콘솔에 "로드 중"을 표시합니다. 세 파일이 모두 로드 되면 설정 기능이 실행됩니다. 콘솔에 있는 위 코드의 출력은 다음과 같습니다.
loading loading loading setup
깔끔하지만 더 좋아집니다. 또한 로드 된 파일과 현재 로드 된 전체 파일의 비율을 정확히 알 수 있습니다. 다음과 같이 선택적 로더 및 리소스 매개 변수를 loadProgressHandler에 추가하여 이를 수행 할 수 있습니다.
function loadProgressHandler(loader, resource) { /*...*/ }
그런 다음 resource.url을 사용하여 현재 로드 된 파일을 찾을 수 있습니다. (파일에 할당했을 수있는 선택적 이름을 add 메서드의 첫 번째 인수로 찾으려면 resource.name을 사용합니다.) 그리고 loader.progress를 사용하여 현재 로드 된 총 리소스의 비율을 찾을 수 있습니다. 다음은 이를 수행하는 코드입니다.
PIXI.loader .add([ "images/one.png", "images/two.png", "images/three.png" ]) .on("progress", loadProgressHandler) .load(setup); function loadProgressHandler(loader, resource) { //Display the file `url` currently being loaded console.log("loading: " + resource.url); //Display the percentage of files currently loaded console.log("progress: " + loader.progress + "%"); //If you gave your files names as the first argument //of the `add` method, you can access them like this //console.log("loading: " + resource.name); } function setup() { console.log("All files loaded"); }
이 코드가 실행될 때 콘솔에 표시되는 내용은 다음과 같습니다.
loading: images/one.png progress: 33.333333333333336% loading: images/two.png progress: 66.66666666666667% loading: images/three.png progress: 100% All files loaded
로딩 진행률 표시 줄을 만들기 위한 기초로 사용할 수 있기 때문에 정말 멋집니다.
(참고 : 리소스 개체에 액세스 할 수 있는 추가 속성이 있습니다. resource.error는 파일을 로드하는 동안 발생한 가능한 오류를 알려줍니다. resource.data를 사용하면 파일의 원시 바이너리 데이터에 액세스 할 수 있습니다.)
Pixi의 로더에 대한 추가 정보
Pixi의 로더는 엄청나게 풍부한 기능과 구성이 가능합니다. 시작하기 위해 사용법에 대한 빠른 조감도를 살펴 보겠습니다.
로더의 체인 가능한 추가 메소드는 4 개의 기본 인수를 사용합니다.
add(name, url, optionObject, callbackFunction)
다음은 로더의 소스 코드 문서에서 이러한 매개 변수에 대해 설명하는 내용입니다.
name (string): 로드 할 리소스의 이름입니다. 통과되지 않으면 urlis가 사용됩니다.
url (string): 로더의 baseUrl에 상대적인이 리소스의 URL입니다.
options (object literal): 로드 옵션.
options.crossOrigin (Boolean): 요청이 출처 간입니까? 기본값은 자동으로 결정하는 것입니다.
options.loadType: 리소스를 어떻게 로드 해야 합니까? 기본값은 Resource.LOAD_TYPE.XHR입니다.
options.xhrType: XHR을 사용할 때 로드 되는 데이터를 어떻게 해석해야 합니까? 기본값은 Resource.XHR_RESPONSE_TYPE.DEFAULT입니다.
callbackFunction: 이 특정 리소스가 로드를 완료 할 때 호출 할 함수입니다.
이러한 인수 중 필요한 것은 url (로드하려는 파일)뿐입니다.
다음은 add 메서드를 사용하여 파일을 로드 할 수 있는 몇 가지 방법의 몇 가지 예입니다. 다음은 문서가 로더의 "일반 구문"이라고 부르는 것입니다.
.add('key', 'http://...', function () {}) .add('http://...', function () {}) .add('http://...')
다음은 로더의 "객체 구문"의 예입니다.
.add({ name: 'key2', url: 'http://...' }, function () {}) .add({ url: 'http://...' }, function () {}) .add({ name: 'key3', url: 'http://...' onComplete: function () {} }) .add({ url: 'https://...', onComplete: function () {}, crossOrigin: true })
add 메소드에 객체 배열, URL 또는 둘 다를 전달할 수도 있습니다.
.add([ {name: 'key4', url: 'http://...', onComplete: function () {} }, {url: 'http://...', onComplete: function () {} }, 'http://...' ]);
(참고 : 새 파일 배치를 로드 하기 위해 로더를 재설정 해야 하는 경우 로더의 재설정 메서드를 호출합니다. PIXI.loader.reset ();)
Pixi의 로더에는 모든 유형의 바이너리 파일을 로드하고 구문 분석 할 수 있는 옵션을 포함하여 더 많은 고급 기능이 있습니다. 이것은 일상적으로 해야 할 일이 아니며 이 튜토리얼의 범위를 벗어나므로 자세한 정보는 로더의 GitHub 저장소를 확인하십시오.
스프라이트 위치 지정
스프라이트를 만들고 표시하는 방법을 알았으니 이제 스프라이트의 위치를 지정하고 크기를 조정하는 방법을 알아 보겠습니다.
앞의 예에서 고양이 스프라이트는 왼쪽 상단의 스테이지에 추가되었습니다. 고양이의 x 위치는 0이고 y 위치는 0입니다. x 및 y 속성의 값을 변경하여 고양이의 위치를 변경할 수 있습니다. x 및 y 속성 값을 96으로 설정하여 고양이를 무대 중앙에 배치하는 방법은 다음과 같습니다.
cat.x = 96; cat.y = 96;
스프라이트를 만든 후 설정 함수 내부에 이 두 줄의 코드를 추가합니다.
function setup() { //Create the `cat` sprite let cat = new Sprite(resources["images/cat.png"].texture); //Change the sprite's position cat.x = 96; cat.y = 96; //Add the cat to the stage so you can see it app.stage.addChild(cat); }
(참고 :이 예에서 Sprite는 PIXI.Sprite의 별칭이고 TextureCache는 PIXI.utils.TextureCache의 별칭이며 resources는 앞에서 설명한 PIXI.loader.resources의 별칭입니다. 다음 별칭을 사용합니다. 지금부터 예제 코드의 모든 Pixi 개체 및 메서드에 대해 동일한 형식입니다.)
이 두 줄의 코드는 고양이를 오른쪽으로 96 픽셀, 아래로 96 픽셀 이동합니다. 결과는 다음과 같습니다.
고양이의 왼쪽 상단 모서리 (왼쪽 귀)는 x 및 y 앵커 포인트를 나타냅니다. 고양이를 오른쪽으로 이동 시키려면 x 속성 값을 늘립니다. 고양이를 아래로 이동 시키려면 y 속성 값을 늘립니다. 고양이의 x 값이 0이면 무대 맨 왼쪽에 있습니다. y 값이 0이면 스테이지 맨 위에 있습니다.
스프라이트의 x 및 y 속성을 독립적으로 설정하는 대신 다음과 같이 한 줄의 코드로 함께 설정할 수 있습니다.
sprite.position.set(x, y)
크기 및 규모
너비 및 높이 속성을 설정하여 스프라이트의 크기를 변경할 수 있습니다. 고양이에게 너비 80 픽셀과 높이 120 픽셀을 지정하는 방법은 다음과 같습니다.
cat.width = 80; cat.height = 120;
다음과 같이 이 두 줄의 코드를 설정 함수에 추가합니다.
function setup() { //Create the `cat` sprite let cat = new Sprite(resources["images/cat.png"].texture); //Change the sprite's position cat.x = 96; cat.y = 96; //Change the sprite's size cat.width = 80; cat.height = 120; //Add the cat to the stage so you can see it app.stage.addChild(cat); }
결과는 다음과 같습니다.
고양이의 위치 (왼쪽 상단 모서리)가 변경되지 않았고 너비와 높이 만 변경되었음을 알 수 있습니다.
스프라이트에는 스프라이트의 너비와 높이를 비례 적으로 변경하는 scale.x 및 scale.y 속성도 있습니다. 고양이의 비늘을 절반 크기로 설정하는 방법은 다음과 같습니다.
cat.scale.x = 0.5; cat.scale.y = 0.5;
스케일 값은 스프라이트 크기의 백분율을 나타내는 0에서 1 사이의 숫자입니다. 1은 100 % (전체 크기)를 의미하고 0.5는 50 % (절반 크기)를 의미합니다. 다음과 같이 배율 값을 2로 설정하여 스프라이트의 크기를 두 배로 늘릴 수 있습니다.
cat.scale.x = 2; cat.scale.y = 2;
Pixi에는 scale.set 메서드를 사용하여 한 줄의 코드로 스프라이트의 크기를 설정할 수 있는 대체적이고 간결한 방법이 있습니다.
cat.scale.set(0.5, 0.5);
그것이 당신에게 호소한다면 그것을 사용하십시오!
회전
회전 속성을 라디안 값으로 설정하여 스프라이트를 회전 시킬 수 있습니다.
cat.rotation = 0.5;
그러나 그 회전은 어느 지점에서 발생합니까?
스프라이트의 왼쪽 상단 모서리가 x 및 y 위치를 나타내는 것을 보았습니다. 그 지점을 앵커 지점이라고 합니다. 스프라이트의 회전 속성을 0.5와 같은 값으로 설정하면 스프라이트의 앵커 포인트 주변에서 회전이 발생합니다. 이 다이어그램은 이것이 고양이 스프라이트에 어떤 영향을 미치는지 보여줍니다.
고양이의 왼쪽 귀인 앵커 포인트가 고양이가 회전하는 가상 원의 중심임을 알 수 있습니다. 스프라이트가 중심을 중심으로 회전하도록 하려면 어떻게 해야 합니까? 다음과 같이 스프라이트의 앵커 포인트를 스프라이트 내부 중앙에 오도록 변경합니다.
cat.anchor.x = 0.5; cat.anchor.y = 0.5;
anchor.x 및 anchor.y 값은 0에서 1 (0 %에서 100 %) 사이의 텍스처 크기 비율을 나타냅니다. 0.5로 설정하면 텍스처가 포인트의 중앙에 위치합니다. 점 자체의 위치는 변경되지 않고 텍스처가 위에 배치되는 방식 만 변경됩니다.
다음 다이어그램은 앵커 포인트를 중앙에 배치하면 회전 된 스프라이트가 어떻게 되는지 보여줍니다.
스프라이트의 텍스처가 위쪽과 왼쪽으로 이동하는 것을 볼 수 있습니다. 이것은 기억해야 할 중요한 부작용입니다!
위치 및 배율과 마찬가지로 다음과 같은 한 줄의 코드로 앵커의 x 및 y 값을 설정할 수 있습니다.
cat.anchor.set(x, y)
스프라이트에는 앵커와 유사한 방식으로 작동하는 피벗 속성도 있습니다. 피벗은 스프라이트의 x / y 원점 위치를 설정합니다. 피벗 포인트를 변경 한 다음 스프라이트를 회전하면 해당 원점을 중심으로 회전합니다. 예를 들어 다음 코드는 스프라이트의 pivot.x 포인트를 32로, pivot.y 포인트를 32로 설정합니다.
cat.pivot.set(32, 32)
스프라이트가 64x64 픽셀이라고 가정하면 스프라이트는 이제 중심점을 중심으로 회전합니다. 하지만 기억하세요 : 스프라이트의 피벗 포인트를 변경하면 x / y 원점도 변경된 것입니다.
그렇다면 앵커와 피벗의 차이점은 무엇입니까? 정말 비슷 해요! anchor는 0에서 1의 정규화 된 값을 사용하여 스프라이트 이미지 텍스처의 원점을 이동합니다. 피벗은 픽셀 값을 사용하여 스프라이트의 x 및 y 지점의 원점을 이동합니다. 어느 것을 사용해야 합니까? 그것은 당신에게 달려 있습니다. 둘 다 가지고 놀면서 선호하는 것을 확인하십시오.
타일셋 하위 이미지에서 스프라이트 만들기
이제 단일 이미지 파일에서 스프라이트를 만드는 방법을 알았습니다. 하지만 게임 디자이너는 일반적으로 타일셋 (스프라이트 시트라고도 함)을 사용하여 스프라이트를 만들 것입니다. Pixi에는이를 수행하는 데 도움이 되는 몇 가지 편리한 내장 방법이 있습니다. 타일셋은 하위 이미지를 포함하는 단일 이미지 파일입니다. 하위 이미지는 게임에서 사용하려는 모든 그래픽을 나타냅니다. 다음은 게임 캐릭터와 게임 개체를 하위 이미지로 포함하는 타일셋 이미지의 예입니다.
전체 타일셋은 192 x 192 픽셀입니다. 각 이미지는 자체 32 x 32 픽셀 격자 셀에 있습니다. 타일셋에 모든 게임 그래픽을 저장하고 액세스하는 것은 그래픽 작업을 위한 매우 프로세서 및 메모리 효율적인 방법이며 Pixi는 이에 최적화되어 있습니다.
추출하려는 하위 이미지와 크기 및 위치가 동일한 직사각형 영역을 정의하여 타일셋에서 하위 이미지를 캡처 할 수 있습니다. 다음은 타일셋에서 추출 된 로켓 하위 이미지의 예입니다.
이 작업을 수행하는 코드를 살펴 보겠습니다. 먼저 이전 예제에서 했던 것처럼 Pixi의 로더를 사용하여 tileset.png 이미지를 로드합니다.
loader .add("images/tileset.png") .load(setup);
다음으로 이미지가 로드 되면 타일셋의 직사각형 하위 섹션을 사용하여 스프라이트의 이미지를 만듭니다. 다음은 하위 이미지를 추출하고 로켓 스프라이트를 생성하고 이를 캔버스에 배치하고 표시하는 코드입니다.
function setup() { //Create the `tileset` sprite from the texture let texture = TextureCache["images/tileset.png"]; //Create a rectangle object that defines the position and //size of the sub-image you want to extract from the texture //(`Rectangle` is an alias for `PIXI.Rectangle`) let rectangle = new Rectangle(192, 128, 64, 64); //Tell the texture to use that rectangular section texture.frame = rectangle; //Create the sprite from the texture let rocket = new Sprite(texture); //Position the rocket sprite on the canvas rocket.x = 32; rocket.y = 32; //Add the rocket to the stage app.stage.addChild(rocket); //Render the stage app.renderer.render(app.stage); }
어떻게 작동합니까?
Pixi에는 직사각형 모양을 정의하기 위한 범용 객체 인 내장 Rectangle 객체 (PIXI.Rectangle)가 있습니다. 네 가지 인수가 필요합니다. 처음 두 개의 인수는 사각형의 x 및 y 위치를 정의합니다. 마지막 두 개는 너비와 높이를 정의합니다. 다음은 새 Rectangle 객체를 정의하는 형식입니다.
let rectangle = new PIXI.Rectangle(x, y, width, height);
사각형 개체는 데이터 개체 일 뿐입니다. 사용 방법을 결정하는 것은 귀하에게 달려 있습니다. 이 예에서는 추출하려는 타일셋에서 하위 이미지의 위치와 영역을 정의하는 데 사용합니다. Pixi 텍스처에는 Rectangle 객체로 설정할 수 있는 frame이라는 유용한 속성이 있습니다. 프레임은 텍스처를 직사각형 크기로 자릅니다. 프레임을 사용하여 로켓의 크기와 위치에 맞게 텍스처를 자르는 방법은 다음과 같습니다.
let rectangle = new Rectangle(192, 128, 64, 64); texture.frame = rectangle;
그런 다음 잘린 텍스처를 사용하여 스프라이트를 만들 수 있습니다.
let rocket = new Sprite(texture);
그리고 그것이 작동하는 방법입니다!
타일셋에서 스프라이트 텍스처를 만드는 것은 매우 빈번하게 할 수 있는 작업이기 때문에 Pixi는 이 작업을 수행하는 데 더 편리한 방법을 제공합니다. 다음 작업이 무엇인지 알아 보겠습니다.
등록된 댓글이 없습니다.
