TypeScript 및 CreateJS 게임

이 글은 TypeScript Advent Calendar의 다음날 글이다.
처음 뵙겠습니다.gyoh_k.
이 글에는 TypeScript로 CreateJS를 쓸 때 임무 주자 Grunt를 사용할 수 있다는 말이 적혀 있다.
혹시 타입 스크립트뿐만 아니라 altJS를 쓸 때 그런트, 글롭 등 미션 주자를 쓰는 건 당연한 일일 수도 있겠지만, 개인적으로는 "아니, IDE를 부탁하면 되지 않나..."이런 느낌은 쑥스럽지만 최근에야 조합해서 사용하기 시작했다.

Grunt를 사용하는 이유

평소에 저는 Type Script로CreateJS를 쓰는 것이 가장 좋은 점이 다음과 같습니다.

편집기를 편집할 때 코드 보완과 문법 검사가 매우 유효하다

Action Script3의 문법에 가깝기 때문에 Action Script의 기술 노하우를 활용하기 쉽다

코드량이 증가할 때 원시 JS에 비해 전망이 좋다

한편, 좋은 일뿐만 아니라 사생하는 JS에 비해 초기의 정신적 부담이 현저히 커져 준비는 까다롭다.
특히CreateJS, 라이브러리와 유형 정의 파일도 여러 가지 복잡한 상황으로 나뉘어 정의 파일을 다운로드하고ts 파일에 링크하여 동작을 확인하는 경우도 있다.이렇게 하면 실제로 간단한 코드가 작동하기 전에 1시간 정도 걸린다.
취미로 코드를 쉽게 쓰고 싶은 상황에서 좋은 문제지만, 그랜트를 사용해 보면 이런 번거로움이 상당히 사라진다.

데모

그럼 실제 샘플을 가동해 봅시다.
만약 동작이 순조롭다면 실행 결과로 다음과 같은 상호작용을 할 수 있다.
(이번 퍼레이드는 크레이트 JS 제작진sebastianderossi의git창고Mona Lisa Distance를 사용했다.)
특별한 문제가 없다면 창고 복제 후 10분 정도 샘플의 움직임을 확인한 후 코드를 쓰기 시작할 수 있다. 필요한 도구 사용 중인 PC에 다음 도구를 설치하십시오. * Git
* Node.js
* Google Chrome
* Grunt
Giit 설치 방법은 여기 기사. 등을 참조하십시오.
또한 Windows는 git 바디(mysigit)와 Giit 운영용 클라이언트 도구(TortoiseGiit, SourceTree 등)를 별도로 설치해야 한다.
mysisigit 설치 프로그램에서 명령 알림에서 사용할 수 있는지 묻습니다. "사용"을 선택하십시오.
자세한 내용은 여기 기사.의 환경 변수 PATH 설정 섹션을 참조하십시오.
Node.js가 공식 사이트에서 설치 프로그램을 다운로드하고 실행하면 됩니다.설치가 완료되면 터미널 (Windows 시 알림 명령) 에서 npm 명령을 사용할 수 있습니다.
http://nodejs.org/
다음 웹 사이트에서 Google Chrome을 다운로드하여 설치하십시오.
https://www.google.co.jp/chrome/
Grunt는 Node입니다.js를 설치한 후 터미널에서 다음 명령을 실행하십시오.설치가 완료되면 grunt 명령을 사용할 수 있습니다.

npm install -g grunt-cli

여기까지, 사전 준비 완료.

프로젝트 설정

Giit에서 clone 이하의 창고를 이용하세요.
https://github.com/gyohk/createjs-typescript-template.git
완료되면 터미널에서 다음 명령을 실행하고 창고 디렉터리로 이동합니다.

cd createjs-typescript-template

그리고 다음 두 가지 명령을 실행한다.

npm install
grunt setup

1~2분 정도 소요될 수 있으며 필요한 npm 모듈과CreateJS의 라이브러리 주체, TypeScript의 유형 정의 파일 등이 자동으로 준비됩니다.
Windows의 경우 컴파일해야 하는 모듈을 설치할 때 npm install에 실패하는 경우가 많지만 C++용 Visual Studio 2012 이상의 구성 요소를 설치한 후 --msvs_version=2012 옵션을 추가하면 대부분 순조롭게 진행됩니다.

npm install --msvs_version=2012

프레젠테이션 컴파일 및 실행

그러면 Type Script의 소스 코드를 컴파일합니다.
터미널에서 다음 명령을 실행합니다.

grunt

src 디렉터리에 있는 Main.ts 파일이 컴파일되어 TSSLint를 실행합니다.실행이 완료되면 dest 디렉터리에 컴파일된 데이터를 생성합니다.
브라우저에서 직접 열 수 있습니다 dest/index.html. 그러나 외부 데이터 읽기 등이 정상적으로 실행되지 않기 때문에 node를 주의하십시오.js 내장된 웹 서버를 사용하여 확인합니다.
브라우저를 확인하기 위해 다음 명령을 실행합니다.

grunt connect

나는 크롬이 시작되었다고 생각했다. 모나리자의 시위가 표명되었다.

소스 코드 수정

실제로 Type Script의 코드를 직접 작성할 때 src 디렉토리에 있는 *.ts 파일을 수정한 후 위 grunt, grunt connect 명령을 다시 실행합니다.
TSSLint의 검사가 시끄럽다고 생각되면 이 페이지 수정conf/tslint.json의 내용을 참고하십시오.
TypeScript의 소스 코드가 아닌 HTML과 CSS의 내용을 수정하려면skeleton 디렉토리의 파일을 수정한 후 다음 명령을 실행하면dest 디렉토리에 수정 내용이 반영됩니다.

grunt copy

터미널부터 조작하기 귀찮은 상황

IntelliJ IDEA 시스템의 IDE를 사용할 때 Grunt 콘솔이 함께 제공되므로 IDE에 표시된 Grunt 작업 목록에서 선택하면 됩니다.
Visual Studio, Eclipse, SublimeText, Brackets 등에도 각각 그런트를 처리하는 플러그인이 있으며 외부 도구로 등록할 수 있습니다.
나는 대충 어떤 편집기를 사용해도 문제가 없을 것 같아서 검은 화면을 만져도 사용할 수 없을 것 같다.

총결산

이번에는 별다른 설명이 없지만, 실제로 크레이트JS를 사용하면 일반적으로 고주파가 필요하다고 판단되는 경우createjs-def도 임무 등을 준비했다.자세한 내용은 프로젝트 내의 Gruntfile을 참조하십시오.js를 참조하세요.
실제로 TypeScript로CreateJS를 쓴 사용자 수가 얼마인지는 잘 모르겠지만 예를 들어 코드를 즐겁게 쓰는 참고가 된다면 좋겠다.