pixi.js 자습서 장면 전환

pixi.js 장면 전환 제어

pixi 공부중입니다.
콘텐츠에서 사용되는 장면 전환 및 크기 조정에 대한 다음 사이트 ㅡㅡㅜㅜㅜㅜ 코 m / 2013 / 피페 트토리아 l
가 참고가 되었으므로, 자신용의 망비록과 최신의 버젼으로의 재기록용도 겸해 가필 더해 전재해 가고 싶습니다. 3회 정도로 분할 예정입니다. 현재 쓰고 있는 스와이프 퀴즈의 참고로 합니다^^;
전재 허가는 받고 있습니다.
최종 완제품은 아래에서 다운로드할 수 있습니다.
ㅡㅡㅜㅜㅜㅜ 이 m/wp-콘텐 t/우 p아아 ds/ぁbs/피트 트리어 l1/피트와. 지 p

주의:
ScenesManager.class.js(ts)
pixi4에서는 이하의 메소드명이 변경이 되고 있으므로,
requestAnimFrame
을
requestAnimationFrame
로 다시 작성하십시오.

서장

게임 튜토리얼에서는 객체를 쓰는 방법과 게임 로직을 만드는 법을 배우는 것이 일반적이지만,
이 기사에서는 UI와 장면 전환에 대해 써 갑니다.
기사를 통해 장면 처리, 게임 일시 정지, 재개 및 디스플레이를 스마트 폰이나 태블릿에 맞추는 방법을 쓰고 배울 수 있습니다.
완제품
ㅡㅡㅡㅡㅡ 이 m / wp - 콘텐트 t / u p ぉ ds / ぁ bs / 핏 토리 l1 / 어서 x4. HTML
tips
pixiはWebGLとCanvas2Dの両方を使うことができる。基本は、WebGLの方を使っています
필자는 언어로서 TypeScript 또 IDE로서 Visual Studeio 2012 for Web※를 사용하고 있습니다.
※집필시 2013년 7월 현재 Visual Studio Code로 대용 가능할까 생각됩니다.

또한이 기사에서는 pixi.d.ts ( htps : // 기주 b. 코 m / 피 js / 피 티 ぺ sc 리 pt)를 사용하는 것이 좋습니다.
아래는 pixi 라이브러리와 타사를 포함한 프로젝트의 구조 트리입니다.

GameScene

우선은 게임 씬을 만드는 곳부터 시작해 갑니다.
장면은 일반적인 업데이트, 정지 및 재개 처리가 가능한 Pixi Stage Object로 만들어 갑니다. .

주의
pixi.js v1, v2는 TypeScript로 작성되지 않았습니다. TypeScript extends를 사용하고 있습니다.
새로운 버전의 v4와 v5는 TS를 사용합니다.

onUpdate() 함수 메서드는 게임의 객체를 업데이트하는 데 사용됩니다.
gameStage는 기본, onUpdate의 계속 갱신 처리 외에 일시정지 및 재개가 가능합니다.

///<reference path="../lib/pixi.d.ts" />
// Module
module tuto.Ezelia {

    export class Scene extends PIXI.Stage {
        private paused: bool = false;
        private updateCB = function () { };

        constructor(background:number) {
            super(background);
        }
        public onUpdate(updateCB: () => void ) {
            this.updateCB = updateCB;
        }

        public update() {
            this.updateCB();
        }
        public pause() {
            this.paused = true;
        }
        public resume() {
            this.paused = false;
        }
        public isPaused() {
            return this.paused;
        }

    }

}

주의 이번 PIXI.Stage object 는 TypeScript로 쓰여지지 않았지만, PIXI.Stage를 상속하고 있습니다.

ScenesManager 클래스

장면을 관리하는 ScenesManager를 만듭니다. 여러 장면 전환을 제어하는 ​​소스입니다.

///<reference path="../lib/pixi.d.ts" />
///<reference path="Scene.class.ts" />

// Module
module tuto.Ezelia {
    export class ScenesManager {
        private static scenes: any = {}; // should be hashmap but a JS object is fine too :)
        public static currentScene: Scene;
        public static renderer: PIXI.IRenderer;

        public static create(width: number, height: number) {
            if (ScenesManager.renderer) return this;

            ScenesManager.renderer = PIXI.autoDetectRenderer(width, height);
            document.body.appendChild(ScenesManager.renderer.view);
            requestAnimFrame(ScenesManager.loop);
            return this;
        }
        private static loop() {
            requestAnimFrame(function () { ScenesManager.loop() });

            if (!currentScene || currentScene.isPaused()) return;
            currentScene.update();
            ScenesManager.renderer.render(currentScene);
        }
     }
     //# next code block
}

하나의 게임에서 ScenesManager는 하나라고 가정합니다. 그래서 static으로 모든 함수를 선언하고 있습니다. create() 메소드는 pixi 렌더러의 초기화와 게임 루프의 개시를 실시하는 역할을 담당하고 있습니다. Loop 메서드는 현재 장면이 존재하고 중지되지 않았는지 확인합니다. 씬의 생성과 전환을 하기 위한 2개의 메소드를 "/## next code block"위에 구현해 갑니다.

        public static createScene(id: string): Scene {
            if (ScenesManager.scenes[id]) return undefined;

            var scene = new Scene();
            ScenesManager.scenes[id] = scene;

            return scene;
        }

        public static goToScene(id: string): bool {

            if (ScenesManager.scenes[id]) {
                if (ScenesManager.currentScene) ScenesManager.currentScene.pause();
                ScenesManager.currentScene = ScenesManager.scenes[id];
                ScenesManager.currentScene.resume();
                return true;
            }
            return false;
        }

이 코드의 메소드 이름은 매우 명확하기 때문에 설명이 필요하지 않은 것 같습니다 ^^.
GotoScene() 메서드는 다른 장면에 오동나무 이동하기 전에 현재 장면을 한 번 중지합니다. 일단 pixiJS를 읽은 HTML 파일을 만들어 SceneManager와 Scene 클래스를 테스트해 봅시다.

    <script src="lib/pixi.dev.js"></script>
    <script src="engine/ScenesManager.class.js"></script>
    <script src="engine/Scene.class.js"></script>

HTML 파일에는 다음 태그를 포함합니다.

<script>        
        //get reference of ScenesManager;
        var scenesManager = tuto.Ezelia.ScenesManager;

        //create 
        scenesManager.create(300, 400);

        //create a the game scene
        var game = scenesManager.createScene('game');

        //add a bunny :) 
        var bunny = PIXI.Sprite.fromImage("img/bunny.png");
        // center the sprites anchor point
        bunny.anchor.x = 0.5;
        bunny.anchor.y = 0.5;
        // move the sprite t the center of the screen
        bunny.position.x = 50;
        bunny.position.y = 50;        
        game.addChild(bunny);

        //switch to 'game' Scene 
        scenesManager.goToScene('game');

        //register update event         
        game.onUpdate(function () {
            bunny.rotation += 0.1;
        });
    </script>

덤

Version 차이 함수에 대한 메모
v3은 알 수 없습니다.

.on('touchstart', onDragStart);

2.x에서는 사용할 수 없었습니다.
4.8 사용 가능했습니다.

setBackgroundColor (color code);

4.8에서는 사용 불가. 이전 버전 v2 등에서는 가능했습니다.

PIXI.Sprite에 제공하는 속성

2.x계
.setInteractive(true);
4.x계
.interactive = true;