phina.js의 clip과 blendMode에서 놀았습니다.

소개

우선은 이하의 게임을 해보고 싶습니다. (소리가 나옵니다)

htps : // 펜타마에아. 기주 b. 이오 / 후 드 시마 우마 짱

주목해 주었으면 하는 것은 화면 천이할 때등의 원형의 이펙트와, 게임중에 스포트라이트가 맞았듯이 주위가 어두워지는 연출의 부분입니다.





이들은 각각 clip과 blendMode라는 기능을 사용하여 실현됩니다.

환경

phina.js v0.2.2

클립

clip()은 canvasAPI의 clip과 같고, 지정한 패스의 범위내만을 렌더링 하는 메소드입니다.

phina.js에서 clip을 사용하려면 다음과 같이 DisplayElement 파생 클래스(예: Sprite 클래스)에 clip이라는 메서드를 정의하고 인수로 전달되는 Canvas(phina.graphics.Canvas)를 사용하여 경로를 설정합니다.

phina.define('ClippedImage', {
  superClass: 'phina.display.Sprite',

  init: function(src) {
    this.superInit(src);
    this.clipCenter = phina.geom.Vector2(0, 0);
    this.clipRadius = 160;
  },

  clip: function(c) {
    var cc = this.clipCenter;
    c.beginPath();
    c.arc(cc.x, cc.y, this.clipRadius, 0, Math.PI*2, false);
  }
});

그러면 스프라이트는 지정된 경로 범위 내에서만 그려집니다.



실행 예

한층 더 클립 범위를 동적으로 바꾸는 것으로 (예를 들어 원의 반경 등), 전출과 같은 이펙트를 실현할 수 있습니다.

단지 기본적으로 매 프레임 실행되기 때문에 복잡한 처리를 시키거나 beginPath에서의 패스 리셋 등을 잊으면 격중해질 수 있으므로 주의가 필요합니다.

blendMode

blendMode는 DisplayElement 파생 클래스의 프로퍼티의 일종으로, 지정한 값에 따라서 「자신」과 「자신보다 전에 draw 된 오브젝트군」을 상호 영향 시킬 수가 있습니다. (설명이 어렵다…)
사용법은 DisplayElement 계열 클래스의 blendmode 속성에 값을 지정하기만 하면 됩니다.

/* blendModeを指定したオブジェクト */
phina.define('SpotLight', {
  superClass: 'phina.display.CircleShape',

  init: function() {
    this.superInit({
      radius: 180,
    });
    this.blendMode = 'destination-in';
  },
});

phina.define('MainScene', {
  superClass: 'DisplayScene',

  init: function(options) {
    this.superInit(options);

    // サンプル用ロゴ
    var logo = Sprite("logo")
    .setPosition(this.width/2, this.height/2)
    .addChildTo(this);

    // blendModeを変えた描画オブジェクト
    this.spotLight = SpotLight()
    .setPosition(this.width/2, this.height/2)
    .addChildTo(this);

    // ※以下LabelクラスはspotLightより後にaddChildされるので影響を受けない
    Label("phina.js blendMode sample")
    .setPosition(this.width/2, this.height/2)
    .addChildTo(this);
  },

  /* 省略 */

});

위의 예에서는 "destination-in"을 지정하면 SpotLight 자신보다 앞에 그려진 객체(logo)의 자신(원)의 범위와 겹치는 부분만이 표시되게 됩니다. (phina.js에서는 addChild 순서로 그려집니다)

실행 예

blendMode로 지정할 수 있는 값은 canvasAPI의 globalCompositeOperation 속성 과 함께입니다.

canvas 전체에 영향을 미치는 것에 주의가 필요합니다만, photoshop등 말하는 「승산」이나 「구워」효과등을 사용할 수 있어, clip과 비교해 응용할 수 있는 범위가 넓다고 합니다.

clip과 blendMode는 잘 사용하면 좋은 느낌의 효과와 특수 효과를 만들 수 있기 때문에 노력합니다.

덤

게임 리포지토리

모몽의 국풍 전환 효과

  clip: function(c) {
    var cc = this.clipCenter;
    var edgeLength = 40;
    var sr = this.spotRadius;

    c.beginPath();
    c.arc(cc.x, cc.y+edgeLength, sr, 0, Math.PI*2, false); // 中心
    c.closePath();
    c.arc(cc.x+edgeLength+sr, cc.y-edgeLength-sr, sr, 0, Math.PI*2, false); // 右耳
    c.closePath();
    c.arc(cc.x-edgeLength-sr, cc.y-edgeLength-sr, sr, 0, Math.PI*2, false); // 左耳
  },