[Learning Pixi] 1. Introduction

이 글은 다음 페이지를 번역한 글입니다.

https://github.com/kittykatattack/learningPixi#introduction

GitHub - kittykatattack/learningPixi: A step-by-step introduction to making games and interactive media with the Pixi.js renderi

Pixi는 매우 빠른 2D 스프라이트 렌더링 엔진입니다. 이게 뭘 의미하냐면, 당신이 대화형 그래픽(interactive graphic)을 관리하는 것을 도와, 자바스크립트나 다른 HTML5 기술을 이용한 게임이나 어플리케이션을 만들기 쉽게 해준다는 것입니다. Pixi는 합리적이고 깔끔한 API를 가지고 있고, 텍스쳐 아틀라스를 지원하고 스프라이트 애니메이션을 위한 능률화된 시스템을 제공하는 등 많은 유용한 기능을 포함하고 있습니다. 또한 전체 장면 그래프를 제공하여 중첩된 스프라이트(스프라이트 내부의 스프라이트)의 계층을 만들 수 있을 뿐만 아니라, 마우스 및 터치 이벤트를 스프라이트에 직접 연결할 수 있습니다. 그리고 가장 중요한 것은 Pixi가 방해가 되지 않아 원하는 만큼 사용하고, 개인 코딩 스타일에 맞게 조정하고, 다른 유용한 프레임워크와 원활하게 통합할 수 있다는 것입니다.

 

Pixi의 API는 실제로 Macromedia/Adobe Flash에서 개척한, 오래 되고 수많은 테스트를 거친 API를 개선한 것입니다. 구식 Flash 개발자는 집과 같은 편안함을 느낄 것입니다. 다른 현재 스프라이트 렌더링 프레임워크(CreateJS, Starling, Sparrow 및 Apple의 SpriteKit)와 유사한 API를 사용합니다. Pixi API의 강점은 범용이라는 점입니다. Pixi는 게임 엔진이 아닙니다. 당신이 좋아하는 무엇이든 만들 수 있는 완전한 표현의 자유를 제공하고 당신만의 커스텀 게임 엔진을 둘러쌀 수 있기 때문에 좋습니다.

 

이 튜토리얼에서는 Pixi의 강력한 이미지 렌더링 기능과 장면 그래프를 결합하여 게임을 만드는 방법을 알아봅니다. 그러나 Pixi는 게임만을 위한 것이 아닙니다. 동일한 기술을 사용하여 모든 대화형 미디어 응용 프로그램을 만들 수 있습니다. 휴대전화용 앱도 만들 수 있는 것이죠!

 

이 튜토리얼을 시작하기 전에 알아야 할 사항은 무엇일까요?

 

HTML과 JavaScript에 대한 합리적인 이해가 있어야 합니다. 전문가가 될 필요는 없고, 배우고자 하는 열의가 있는 야심찬 초보자면 됩니다. HTML과 JavaScript를 모른다면 이 책이 잘 알려줄 것입니다.

 

https://www.apress.com/kr/book/9781430247166

 

내가 썼기 때문에 그것이 최고의 책이라는 사실을 알고 있습니다!

 

시작하는 데 도움이 되는 몇 가지 좋은 인터넷 리소스도 있습니다.

 

Khan Academy: Computer Programming

Code Academy: JavaScript 

 

학습 스타일에 가장 적합한 것을 선택하시면 됩니다.

 

자 그럼, 자바스크립트 변수, 함수, 배열, 객체가 무엇이고 어떻게 사용하는지 알고 계십니까? JSON 데이터 파일이 무엇인지 아십니까? Canvas Drawing API를 사용해 보셨습니까?

 

Pixi를 사용하려면 루트 프로젝트 디렉토리에서 웹 서버도 실행해야 합니다. 웹 서버가 무엇이며 프로젝트 폴더에서 웹 서버를 실행하는 방법을 알고 있습니까? 가장 좋은 방법은 node.js를 사용한 다음 매우 사용하기 쉬운 http-server를 설치하는 것입니다. 그러나 그렇게 하려면 Unix 명령줄로 작업하는 것이 편안해야 합니다. 이 비디오에서 Unix 사용 방법을 배울 수 있으며 완료되면 다음 비디오를 따라하십시오. Unix 사용법을 배워야 합니다. 배우는 데 몇 시간 밖에 걸리지 않으며 컴퓨터와 상호 작용하는 정말 재미있고 쉬운 방법입니다.

 

그러나 아직 명령줄을 엉망으로 만들고 싶지 않다면 Mongoose 웹 서버를 사용해 보십시오.

 

또는 뛰어난 Brackets 텍스트 편집기를 사용하여 모든 코드를 작성하십시오. Brackets는 기본 작업 공간에서 번개 버튼을 클릭하면 자동으로 웹 서버와 브라우저를 시작합니다.

 

이제 준비가 되었다고 생각되면 읽으십시오!

 

(독자에 대한 요청: 이것은 살아있는 문서입니다. 특정 세부 사항에 대해 질문이 있거나 내용을 명확히 해야 하는 경우 이 GitHub 리포지토리에서 이슈를 생성하십시오. 그러면 텍스트를 추가 정보로 업데이트하겠습니다.)