Phaser를 사용하여 2D에서 HTML5 3D 뒤집기 카드 애니메이션을 만드는 방법

카드 게임을 만들 계획이라면 카드를 보여주고 등을 보여야 할 때가 왔습니다. 그런 다음 카드를 뒤집어서 가치를 보여줄 필요가 있습니다.

일반적으로 3D 엔진을 사용하면 축 중 하나를 따라 플립하는 기본 요소 일뿐 아니라 정말 쉬운 작업이됩니다.

우리가 3D 엔진을 사용하지 않을 때해야 할 일은 무엇입니까? Phaser 트윈을 사용하여 플립 운동을 가짜로 만들 수 있습니다.

수직축을 따라 카드를 확대하여 카드가 올라가는 느낌을주고, 카드가 수평선에 가까워 질 때까지 수평축을 따라 축소합니다. 카드가 테이블에 수직 인 순간입니다.

그런 다음 카드 프레임을 변경하고 수평축을 따라 확대하면서 새로운 프레임을 천천히 보여주기 위해 y 축척에 따라 카드를 내립니다.



카드를 클릭하거나 가볍게 두 드립니 다.

다음은 완전히 주석 처리 된 소스 코드입니다.

// 게임 그 자체

var game;

// 게임 옵션이있는 전역 개체

var gameOptions = {

    // 밀리 초 단위로 플 리핑 속도

    flipSpeed: 200, 

    // 줌 비율을 뒤집기. 뒤집을 때 올릴 카드를 시뮬레이트합니다.

    flipZoom: 1.2

}

window.onload = function() { 

    // 500x500 픽셀 게임 제작

    game = new Phaser.Game(500, 500); 

    // 게임 상태

    game.state.add("PlayGame", playGame);

    game.state.start("PlayGame");

}

var playGame = function(game){}

playGame.prototype = {

    preload: function(){

        // 모든 콘텐츠를 표시하면서 가능한 한 가장 큰 창 영역을 게임 커버 만들기

        game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

        game.scale.pageAlignHorizontally = true;

        game.scale.pageAlignVertically = true; 

        // 배경색 변경

        game.stage.backgroundColor = 0x448844;

        // 카드 스프라이트 시트

        game.load.spritesheet("cards", "cards.png", 167, 243);

    },

    create: function(){

        // 카드 추가

        this.card =  game.add.sprite(game.width / 2, game.height / 2, "cards", 0); 

        // 카드 앵커 포인트를 중앙에 설정

        this.card.anchor.set(0.5); 

        // 카드가 넘겨 지는지 알려주는 맞춤 속성, 지금은 아닙니다.

        this.card.isFlipping = false; 

        // 플레이어 입력 대기 중

        game.input.onDown.add(function(){

            // 카드가 뒤집히지 않으면 ...

            if(!this.card.isFlipping){ 

                // 이제 뒤집기.

                this.card.isFlipping = true; 

                // 두 개의 뒤집기 애니메이션 중 첫 번째 애니메이션 시작

                this.flipTween.start();

            }

        }, this); 

        // 첫 번째 트윈 : 카드를 올리고 뒤집습니다.

        this.flipTween = game.add.tween(this.card.scale).to({

            x: 0,

            y: gameOptions.flipZoom

        }, gameOptions.flipSpeed / 2, Phaser.Easing.Linear.None); 

        // 카드가 뒤집 히면 프레임을 변경하고 두 번째 트윈을 호출합니다.

        this.flipTween.onComplete.add(function(){

            this.card.frame = 1 - this.card.frame;

            this.backFlipTween.start();

        }, this); 

        // 두 번째 트윈 : 뒤집기를 완료하고 카드를 내립니다.

        this.backFlipTween = game.add.tween(this.card.scale).to({

            x: 1,

            y: 1

        }, gameOptions.flipSpeed / 2, Phaser.Easing.Linear.None);

 

        // 일단 카드를 테이블 위에 놓으면 다시 뒤집을 수 있습니다.

        this.backFlipTween.onComplete.add(function(){

            this.card.isFlipping = false;

        }, this);

    }

}

이제 2D 카드 게임에 사실감을 더할 수 있습니다. 다음에는 그림자와 다른 흥미로운 효과를 추가하는 방법을 보여줄 것이며 소스 코드를 다운로드 할 것입니다.