조합 조작의 간단한 효과

Akashic Advent Calendar 2019 15일째 보도입니다.
게임 제목처럼 화려하게 보여주고 싶고, 게임 시작 버튼 같은 사용자의 흥미를 불러일으키고 싶은 것들에 공연을 조금 더 하고 싶어요.이 글에서 우리는 이러한 공연에 사용할 수 있는 이미지를 빛나게 하는 방법을 소개할 것이다.

목표 확인

일단 완성형부터 확인해보자.게임의 제목은 흰색이다.

이미지는 모두 Akashic Engine공식 사이트을 사용합니다.
솔직히 생각해보면 하얗게 칠하고 싶은 이미지를 흰색으로 칠하고 겹치는 이미지를 준비할 필요가 있지만 복합조작을 사용하면 프로그램만으로 가능하다.

복합 작업

복합 조작은 Akashic Engine 공식 사이트아래와 같다에 있습니다.
작성 작업은 솔리드를 그릴 때 작성 방법을 지정하는 속성입니다.
여러 가지 합성 방법 중 SourceAtop 을 사용합니다.
SourceAtop
이전에 그린 영역과 겹치는 부분만 그립니다.
다음 예는 빨간색과 파란색의 FilledRect에서 SourceAtop을 지정하고 녹색의 FiledRect와 겹치는 부분만 그리는 예입니다.

이 옵션을 사용하면 원본 이미지에 흰색 사각형을 그려서 빛을 낼 수 있습니다.

sourceAtop 공식

macOS 등에 사용되는 코어 그래픽스 프레임워크도 sourceAtop의 합성 방법으로 유명한데계산 공식는 다음과 같다.

R = S*Da + D*(1 - Sa)

말로만 설명하는 것보다 이해하기 쉽다.나는 Akashic Engine이 이것과 같은지 모른다.

실시

이제 복합 조작으로 하얀 빛을 내는 사용자 정의 EShinyEffect 코드를 살펴보자.

/**
 * キラキラエフェクトパラメタオブジェクト。
 */
interface ShinyEffectParameterObject extends g.CacheableEParameterObject {
    /** キラキラさせたい画像 */
    src: g.ImageAsset;

    /** キラキラの色 */
    effectColor?: string;
}

/**
 * キラキラエフェクト。
 */
class ShinyEffect extends g.CacheableE {
    /** 光沢の強さ(0~1)。 */
    shininess: number;

    /** キラキラの色 */
    effectColor: string;

    private surface: g.Surface;

    constructor(param: ShinyEffectParameterObject) {
        param.width = param.src.width;
        param.height = param.src.height;

        super(param);

        this.shininess = 0;
        this.effectColor = param.effectColor || "white";
        this.surface = param.src.asSurface();
    }

    renderCache(renderer: g.Renderer, camera?: g.Camera): void {
        // 光らせたい画像を最初に描画する。
        renderer.drawImage(this.surface, 0, 0, this.surface.width, this.surface.height, 0, 0);

        renderer.save();

        // SourceAtop に設定。
        renderer.setCompositeOperation(g.CompositeOperation.SourceAtop);

        // 次に描画する矩形の透明度で光沢の強さを表現する。
        renderer.setOpacity(this.shininess);

        // 光らせるため、描画する画像と同じ大きさの白い矩形を描画する。
        renderer.fillRect(0, 0, this.surface.width, this.surface.height, this.effectColor);

        renderer.restore();
    }
}

화면에서 직접 복합 작업을 하면 다른 요소는 흰색 빛을 발합니다.g.CacheableE의 파생 클래스는 조합 작업에 사용할 전용 구역을 제공합니다.ShinyEffect 자체는 발광 방식을 제어하는 논리가 없기 때문에 적당한 설치가 필요하다.예:

// １秒に一度キラッと輝く。
let cntr = 0;
shinyEffect.update.add(() => {
    cntr++;
    shinyEffect.shininess = 1 - ((cntr % g.game.fps) / g.game.fps);
    shinyEffect.invalidate();
});

이상은 그룹 조작에 대한 공연 설명입니다.프레젠테이션 가능GitHub에서 가져오기.

마지막

복합 조작은 이미지를 빛나게 한다.백광의 공연은 사격 게임과 격투 게임의 피해 표현에서도 자주 볼 수 있다.흰색 이외의 색깔도 사용할 수 있기 때문에 간단하고 사용하기 편리한 기술이라고 생각합니다.
이 글은 단순히 광택의 강약을 바꾸는 것g.CacheableE#renderCache()을 만들어 설치했는데 공을 들이면 다른 것도 다양하게 표현할 수 있다.