phina.js로 쉽게 배경 스크롤을 할 수있는 TiledSprite 클래스 만들기

액션 게임·STG 제작시 등 배경을 스크롤하고 싶은 것이 남아 있습니다.

배경 스크롤을 표현하는 방법으로서, 예를 들면 횡방향으로 스크롤하고 싶을 때는 2장의 스프라이트를 이음새 없이 나란히 스크롤 방향으로 이동시켜, 적당한 타이밍(화면 밖에 나온 등)에서 위치를 리셋하는 방법이 일반적 입니다.

phina.js로 배경을 세로 스크롤!

단지 코드를 단순화하기가 어렵고 스크롤 방향이 한 방향으로만 제한된다는 단점이 있습니다.

그래서 좀 더 간단하고 어떤 스크롤 방향에도 대응한 방법을 생각한 결과 TiledSprite 클래스가 태어났습니다.

코드는 상당히 길어졌으므로 여기를 확인하십시오.

사용법

자신의 마 개조 phina.js를 읽으면 바로 사용할 수 있습니다. (기분이 들리면 본가에 받아들일 수 있도록 PR한다…지도…)
(위의 코드를 복사하여 적당히 선언해도 OK)

<script src="https://cdn.jsdelivr.net/gh/pentamania/phina.js@chimera/build/phina.min.js" type="text/javascript" charset="utf-8"></script>

TiledSprite의 인스턴스 생성 방법은 일반 Sprite 클래스와 거의 같다.
아무것도 괴롭히지 않을 때는 외형도 변하지 않습니다.

TiledSprite("background") // globalizeしてない場合は phina.display.TiledSprite("background")
  .setPosition(gx.center(), gy.center())
  .addChildTo(this);

그러나 내부적으로는 CanvasPattern 을 사용하여 그리기를 수행합니다.
게다가 offsetX(Y)라는 프로퍼티(엄밀히 말하면 액세서)가 있어, 이 값을 바꾸어 그리기 범위를 어긋나면, 어긋난 분이 반복하고 있는 것을 알 수 있습니다.

반복하는 것을 이용해, offset치에 매 프레임 가산을 실시하면 스크롤하고 있는 것처럼 보일 수가 있습니다.

TiledSprite("background")
  .setPosition(gx.center(), gy.center())
  .addChildTo(this)
  .on('enterframe', function() {
    // 毎フレーム行う処理
    this.offsetX += 10;
    this.offsetY += 2;
  });

실제로 움직이는 샘플

가산이 아니라 감산하면 스크롤 방향을 반대로 할 수도 있습니다.

참고

아이디어 자체는 Pixi.js의 TilingSprite에서 얻었습니다. 코드 내용도 꽤 참고하고 있습니다. (WebGL 모드만의 기능인가라고 생각했는데, Canvas2D 모드에서도 할 수 있었으므로 놀랐다)