마지막 스프라이트를 표시하는 계속입니다.

Pixi.js를 사용하여 WebGL로 그릴 수 있었지만, 무엇이 굉장한지 잘 모르는 사람도 많다고 생각합니다.
WebGL의 장점은 그 성능입니다. 일반 웹에서는 좀처럼 실현할 수 없는 그리기 속도를 얻을 수 있습니다.

속도를 실감하려면 애니메이션 샘플을 만들어 보겠습니다.
이번은 퍼포먼스를 알기 위한 샘플이므로 실제로 스프라이트를 움직여 그 프레임 레이트를 표시하고 싶습니다.

프레임 처리

먼저 드로잉 업데이트를 위한 프레임 루프를 만듭니다. 이 중에서 각 프레임의 처리를 실시하게 됩니다.
JavaScript로 시간 단위의 루프라고 하면 setTimeout, setInterval등이 떠오릅니다만, 이것들은 정밀도가 나오지 않고 고속 루프에는 전혀 향하지 않습니다.
이번에는 「requestAnimationFrame」을 이용합니다. 이것은 브라우저측이 제공해 주는 묘화 갱신용의 구조로, 처리하고 싶은 함수를 건네주는 것으로 1/60 간격의 타이밍으로 그것을 실행해 준다고 하는 것입니다. (엄밀하게는 조금 다릅니다)
실행은 한 번만이므로 setInterval적인 움직임이 아니라 setTimeout과 같은 움직임입니다.
연속적으로 실행하고 싶은 경우는 그 함수중에서 자신을 다시 킥하는 처리를 기술할 필요가 있습니다.

// 1/60間隔で処理を実行
var animationLoop = function () {

    // ※ここに実際のフレーム処理を記述

    window.requestAnimationFrame(function () {
        animationLoop();　// 1/60のタイミングで自分自身を実行
    });
};

이 예제를 사용하면 먼저 animationLoop 함수를 한 번 호출하면 1/60 간격으로 처리 (프레임 처리)가 계속 실행됩니다.
이 과정에서 스프라이트를 움직입니다.
스프라이트를 이동하는 방법은 x, y 좌표 (속성)를 업데이트하는 것입니다.
예를 들어, 1/60 간격으로 1px씩 오른쪽으로 이동시키고 싶다면, sprite.x += 1; 라는 처리를 이 루프로 실행하면 OK입니다.
그리고 잊지 말아야 할 것은 Pixi.js의 드로잉 업데이트는 기본적으로 수동이라는 것입니다.
그래서 renderer.render(stage);에서 스테이지를 업데이트해야합니다.
이것도 프레임 처리내에서 실행되도록(듯이) 합니다.

FPS 표시

stats.js라는 편리한 라이브러리가 있으므로 그 쪽을 사용합니다.
htps : // 기주 b. 이 m / mr도 b / s ts. js/

var stats = new Stats();
stats.setMode(0);

// 表示用エレメントのスタイル指定
$(stats.domElement)
    .css("position", "absolute")
    .css("z-index", 9999)
    .css("top", 0)
    .css("right", 0)
    ;

// DOMへ追加　※$parentは追加したい親
$parent.append(stats.domElement);

이제 화면 오른쪽 상단에 FPS 표시용 프레임이 표시됩니다.
그리고 실제로 FPS를 업데이트하는 방법을 앞의 프레임 처리에 설명합니다.

stats.update();

이것뿐입니다.

여기까지 준비할 수 있으면 후에는, 실제로 프레임마다의 애니메이션 처리를 쓸 뿐입니다.
샘플로서 트럼프 카드 54장 정도 스프라이트화해 스테이지에 추가해 랜덤 방향으로 이동시켰다.

실제 움직이는 샘플은 여기에서 볼 수 있습니다.
ht tp // // 하세몬몬. 네 t/bぉg/01/
※10초 후에 애니메이션이 멈추도록 하고 있습니다. 화면 클릭으로 시간을 늘립니다.



최근의 스마트 폰이면 문제없이 60fps 나온다고 생각합니다.

PIXI.js를 사용하여 만든 브라우저 게임 (하이브리드 앱)

리버시
Mine Reversi

실제로 설치하고 플레이 후 스토어에서 리뷰 해 주시면 기쁩니다.