Step 13 - Pipe Graphics

We also created a pipe especially for this sample, feel free to use and remix.

We can take advantage of ex.ImageWrapping.Clamp to stretch the bottom pixel of the pipe so it can be as long as we want.

typescript
// resources.ts
export const Resources = {
    // Relative to /public in vite
    ...
    PipeImage: new ex.ImageSource('./images/pipe.png', {
        wrapping: ex.ImageWrapping.Clamp
    }),
    ...
} as const;

typescript
// resources.ts
export const Resources = {
    // Relative to /public in vite
    ...
    PipeImage: new ex.ImageSource('./images/pipe.png', {
        wrapping: ex.ImageWrapping.Clamp
    }),
    ...
} as const;

In our pipe.ts we can add our pipe graphic and stretch it by changing the sourceView and destSize.

The sourceView is the "window" into the original image, and since we are specifying a view larger than the original image, that ex.ImageWrap.Clamp will stretch the board pixel to accommodate.

Changing the destSize changes the size of the final rendered sprite, in this case we want the same height.

typescript
// pipe.ts
export class Pipe extends ex.Actor {
    ...
    override onInitialize(): void {
        const pipeEnd = Resources.PipeImage.toSprite();
        // Stretch the pipe sprite
        // by default ImageSource use clamp which re-uses the border pixels 
        // when sourceView is larger than the original image
        pipeEnd.sourceView.height = 1000;
        // 
        pipeEnd.destSize.height = 1000;
        // Flip the pipe sprite
        if (this.type === 'top') {
            pipeEnd.flipVertical = true;
        }
        this.graphics.use(pipeEnd);
    }
}

typescript
// pipe.ts
export class Pipe extends ex.Actor {
    ...
    override onInitialize(): void {
        const pipeEnd = Resources.PipeImage.toSprite();
        // Stretch the pipe sprite
        // by default ImageSource use clamp which re-uses the border pixels 
        // when sourceView is larger than the original image
        pipeEnd.sourceView.height = 1000;
        // 
        pipeEnd.destSize.height = 1000;
        // Flip the pipe sprite
        if (this.type === 'top') {
            pipeEnd.flipVertical = true;
        }
        this.graphics.use(pipeEnd);
    }
}