TypeScript utils.ease函數代碼示例

    /**
     * Called approx 60 times a second to update and render Checker instances.
     * Leave empty if it is not being rendered.
     *
     * @param dt - A floating point number [0, 1) which represents how far into
     * the next turn that current turn we are rendering is at
     * @param current - The current (most) game state, will be this.next if this.current is undefined.
     * @param next - The next (most) game state, will be this.current if this.next is undefined.
     * @param delta - The current (most) delta, which explains what happened.
     * @param nextDelta  - The the next (most) delta, which explains what happend.
     */
    public render(
        dt: number,
        current: Immutable<ICheckerState>,
        next: Immutable<ICheckerState>,
        delta: Immutable<Delta>,
        nextDelta: Immutable<Delta>,
    ): void {
        super.render(dt, current, next, delta, nextDelta);

        // <<-- Creer-Merge: render -->>
        this.container.position.x = ease(current.x, next.x, dt);
        this.container.position.y = ease(current.y, next.y, dt);

        // figure out how to render our kinged sprite
        let kingedAlpha = 0;
        if (current.kinged && next.kinged) {
            kingedAlpha = 1;
        }
        else if (!current.kinged && next.kinged) {
            // we are getting kinged next delta, so fade in the sprite
            kingedAlpha = ease(dt);
        }
        // else 0 is fine
        this.kingedSprite.alpha = kingedAlpha * this.game.settings.kingedAlpha.get();

        // <<-- /Creer-Merge: render -->>
    }

    /**
     * Called approx 60 times a second to update and render WeatherStation instances.
     * Leave empty if it is not being rendered.
     *
     * @param dt - A floating point number [0, 1) which represents how far into
     * the next turn that current turn we are rendering is at
     * @param current - The current (most) game state, will be this.next if this.current is undefined.
     * @param next - The next (most) game state, will be this.current if this.next is undefined.
     * @param delta - The current (most) delta, which explains what happened.
     * @param nextDelta  - The the next (most) delta, which explains what happend.
     */
    public render(
        dt: number,
        current: Immutable<IWeatherStationState>,
        next: Immutable<IWeatherStationState>,
        delta: Immutable<Delta>,
        nextDelta: Immutable<Delta>,
    ): void {
        super.render(dt, current, next, delta, nextDelta);

        // <<-- Creer-Merge: render -->>
        if (this.rotationSprite.visible) {
            const direction = this.rotationSprite.scale.x > 0 ? 1 : -1;
            this.rotationSprite.rotation = direction * Math.PI * ease(dt, "cubicIn");
        }

        if (this.intensitySprite.visible) {
            const direction = this.intensitySprite.rotation === 0 ? 1 : -1;
            this.intensitySprite.y = current.y - direction * ease(dt, "cubicIn");
        }
        // <<-- /Creer-Merge: render -->>
    }

    /**
     * Called approx 60 times a second to update and render Machine instances.
     * Leave empty if it is not being rendered.
     *
     * @param dt - A floating point number [0, 1) which represents how far into
     * the next turn that current turn we are rendering is at
     * @param current - The current (most) game state, will be this.next if this.current is undefined.
     * @param next - The next (most) game state, will be this.current if this.next is undefined.
     * @param delta - The current (most) delta, which explains what happened.
     * @param nextDelta  - The the next (most) delta, which explains what happend.
     */
    public render(
        dt: number,
        current: Immutable<IMachineState>,
        next: Immutable<IMachineState>,
        delta: Immutable<Delta>,
        nextDelta: Immutable<Delta>,
    ): void {
        super.render(dt, current, next, delta, nextDelta);

        // <<-- Creer-Merge: render -->>
        this.workBar.update(ease(current.worked, next.worked, dt));
        // <<-- /Creer-Merge: render -->>
    }

    /**
     * Called approx 60 times a second to update and render Projectile instances.
     * Leave empty if it is not being rendered.
     *
     * @param dt - A floating point number [0, 1) which represents how far into
     * the next turn that current turn we are rendering is at
     * @param current - The current (most) game state, will be this.next if this.current is undefined.
     * @param next - The next (most) game state, will be this.current if this.next is undefined.
     * @param delta - The current (most) delta, which explains what happened.
     * @param nextDelta  - The the next (most) delta, which explains what happend.
     */
    public render(
        dt: number,
        current: Immutable<IProjectileState>,
        next: Immutable<IProjectileState>,
        delta: Immutable<Delta>,
        nextDelta: Immutable<Delta>,
    ): void {
        super.render(dt, current, next, delta, nextDelta);
        // <<-- Creer-Merge: render -->>
        // render where the Projectile is
        if (next.energy <= 0) {
            this.container.visible = false;

            return;
        }
        this.container.visible = true;
        this.container.position.set(
            ease(current.x, next.x, dt),
            ease(current.y, next.y, dt),
        );
        // <<-- /Creer-Merge: render -->>
    }

    /**
     * Called approx 60 times a second to update and render Unit instances.
     * Leave empty if it is not being rendered.
     *
     * @param dt - A floating point number [0, 1) which represents how far into
     * the next turn that current turn we are rendering is at
     * @param current - The current (most) game state, will be this.next if this.current is undefined.
     * @param next - The next (most) game state, will be this.current if this.next is undefined.
     * @param delta - The current (most) delta, which explains what happened.
     * @param nextDelta  - The the next (most) delta, which explains what happend.
     */
    public render(
        dt: number,
        current: Immutable<IUnitState>,
        next: Immutable<IUnitState>,
        delta: Immutable<Delta>,
        nextDelta: Immutable<Delta>,
    ): void {
        super.render(dt, current, next, delta, nextDelta);

        // <<-- Creer-Merge: render -->>
        // render where the Unit is

        // No longer on the map.
        if (!next.tile) {
            this.container.visible = false;

            return;
        }
        this.container.visible = true;
        this.container.position.set(
            ease(current.tile.x, next.tile.x, dt),
            ease(current.tile.y, next.tile.y, dt),
        );

        this.healthBar.update(ease(current.health, next.health, dt));
        pixiFade(this.container, dt, current.health, next.health);

        if (this.attackingTile) {
            const d = updown(dt);
            const dx = (this.attackingTile.x - current.tile.x) / 2;
            const dy = (this.attackingTile.y - current.tile.y) / 2;

            this.container.x += dx * d;
            this.container.y += dy * d;
        }
        // <<-- /Creer-Merge: render -->>
    }

    /**
     * Called approx 60 times a second to update and render Body instances.
     * Leave empty if it is not being rendered.
     *
     * @param dt - A floating point number [0, 1) which represents how far into
     * the next turn that current turn we are rendering is at
     * @param current - The current (most) game state, will be this.next if this.current is undefined.
     * @param next - The next (most) game state, will be this.current if this.next is undefined.
     * @param delta - The current (most) delta, which explains what happened.
     * @param nextDelta  - The the next (most) delta, which explains what happend.
     */
    public render(
        dt: number,
        current: Immutable<IBodyState>,
        next: Immutable<IBodyState>,
        delta: Immutable<Delta>,
        nextDelta: Immutable<Delta>,
    ): void {
        super.render(dt, current, next, delta, nextDelta);

        // <<-- Creer-Merge: render -->>
        if (current.x !== next.x) {
            this.hasMoved = true;
        }
        if (next.amount === 0 || this.hasMoved === false) {
            this.container.visible = false;

            return;
        }
        this.bodiesSprite.position.set(
           ease(current.x, next.x, dt),
           ease(current.y, next.y, dt),
        );
        // <<-- /Creer-Merge: render -->>
    }

    /**
     * Called approx 60 times a second to update and render Web instances.
     * Leave empty if it is not being rendered.
     *
     * @param dt - A floating point number [0, 1) which represents how far into
     * the next turn that current turn we are rendering is at
     * @param current - The current (most) game state, will be this.next if this.current is undefined.
     * @param next - The next (most) game state, will be this.current if this.next is undefined.
     * @param delta - The current (most) delta, which explains what happened.
     * @param nextDelta  - The the next (most) delta, which explains what happend.
     */
    public render(
        dt: number,
        current: Immutable<IWebState>,
        next: Immutable<IWebState>,
        delta: Immutable<Delta>,
        nextDelta: Immutable<Delta>,
    ): void {
        super.render(dt, current, next, delta, nextDelta);

        // <<-- Creer-Merge: render -->>

        this.container.visible = Boolean(current.nestA || next.nestA); // do not render if snapped
        this.container.alpha = !next.nestA // then it is in the process of snapping, so fade it out
            ? ease(1 - dt)
            : 1;

        // <<-- /Creer-Merge: render -->>
    }

    /**
     * Called approx 60 times a second to update and render Tile instances.
     * Leave empty if it is not being rendered.
     *
     * @param dt - A floating point number [0, 1) which represents how far into
     * the next turn that current turn we are rendering is at
     * @param current - The current (most) game state, will be this.next if this.current is undefined.
     * @param next - The next (most) game state, will be this.current if this.next is undefined.
     * @param delta - The current (most) delta, which explains what happened.
     * @param nextDelta  - The the next (most) delta, which explains what happend.
     */
    public render(
        dt: number,
        current: Immutable<ITileState>,
        next: Immutable<ITileState>,
        delta: Immutable<Delta>,
        nextDelta: Immutable<Delta>,
    ): void {
        super.render(dt, current, next, delta, nextDelta);

        // <<-- Creer-Merge: render -->>

        // render resources
        for (const resource of RESOURCES) {
            const sprite = resource === "branches"
                ? this.branchesSprite
                : this.foodSprite;

            const currentAmount = current[resource];
            const nextAmount = next[resource];

            if (currentAmount === 0 && nextAmount === 0) {
                sprite.visible = false;
            }
            else {
                sprite.visible = true;

                let opacity = 1;
                if (currentAmount === 0) {
                    // fade in as it's going from 0 to N
                    opacity = dt;
                }
                else if (nextAmount === 0) {
                    // fade out as it's going from N to 0
                    opacity = 1 - dt;
                }

                sprite.alpha = ease(opacity, "cubicInOut");
            }
        }

        // render the lodge
        if (!current.lodgeOwner && !next.lodgeOwner) {
            // don't render the lodge, it's never used
            this.lodgeBottomSprite.visible = false;
            this.lodgeTopSprite.visible = false;
        }
        else {
            // the tile has a lodge on it at some point

            this.lodgeBottomSprite.visible = true;
            this.lodgeTopSprite.visible = true;

            // and color the top (flag part) of the lodge sprite based on the player's color
            const color = this.game.getPlayersColor(current.lodgeOwner || next.lodgeOwner);
            this.lodgeTopSprite.tint = color.rgbNumber();

            let alpha = 1;
            if (!current.lodgeOwner) {
                // then they are creating the lodge on the `next` state
                // so fade in the lodge (fade from 0 to 1)
                alpha = ease(dt, "cubicInOut");
            }
            else if (!next.lodgeOwner) {
                // then they lost the lodge on the `next` state
                // so fade it out (1 to 0)
                alpha = ease(1 - dt, "cubicInOut");
            }

            this.lodgeBottomSprite.alpha = alpha;
            this.lodgeTopSprite.alpha = alpha;
        }

        // <<-- /Creer-Merge: render -->>
    }

    /**
     * Called approx 60 times a second to update and render Furnishing instances.
     * Leave empty if it is not being rendered.
     *
     * @param dt - A floating point number [0, 1) which represents how far into
     * the next turn that current turn we are rendering is at
     * @param current - The current (most) game state, will be this.next if this.current is undefined.
     * @param next - The next (most) game state, will be this.current if this.next is undefined.
     * @param delta - The current (most) delta, which explains what happened.
     * @param nextDelta  - The the next (most) delta, which explains what happend.
     */
    public render(
        dt: number,
        current: Immutable<IFurnishingState>,
        next: Immutable<IFurnishingState>,
        delta: Immutable<Delta>,
        nextDelta: Immutable<Delta>,
    ): void {
        super.render(dt, current, next, delta, nextDelta);

        // <<-- Creer-Merge: render -->>

        if (current.isDestroyed) {
            this.container.visible = false;

            if (this.musicSprite) {
                this.musicSprite.visible = false;
            }

            // we are destroyed an invisible, so let's get out of here
            return;
        }

        // else we are visible!
        this.container.visible = true;

        this.healthBar.update(ease(current.health, next.health, dt, "cubicInOut"));

        // display the hit if took damage
        const randomRotation = (current.tile.x + current.tile.y); // random-ish
        if (current.health === next.health) {
            this.hitSprite.visible = false;
        }
        else { // we got hit!
            this.hitSprite.visible = true;
            this.hitSprite.alpha = ease(1 - dt, "cubicInOut"); // fade it out
            this.hitSprite.rotation = randomRotation;
        }

        // fade out if destroyed next turn
        this.container.alpha = next.isDestroyed
            ? ease(1 - dt, "cubicInOut")
            : 1;

        if (this.musicSprite) {
            if (current.isPlaying || next.isPlaying) {
                this.musicSprite.visible = true;

                let alpha = 1;
                let y = this.y;
                if (!current.isPlaying && next.isPlaying) { // music notes need to move up
                    alpha = ease(dt, "cubicInOut");
                    y -= alpha / 2;
                }
                else if (current.isPlaying && !next.isPlaying) { // music notes need to move down
                    alpha = ease(1 - dt, "cubicInOut");
                    y -= alpha / 2;
                }
                else { // current and next isPlaying
                    y -= 0.5;
                }

                this.musicSprite.alpha = alpha;
                this.musicSprite.y = y;
            }
            else {
                this.musicSprite.visible = false;
            }
        }

        // <<-- /Creer-Merge: render -->>
    }