filters-and-postfx

Apply GPU-based post-processing filters to Phaser 4 game objects and cameras.

Updated Jun 21, 2021
One-click install
npx skills add https://github.com/mahirocoko/mahirocoko --skill filters-and-postfx-mahirocoko
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: filters-and-postfx
Source: https://github.com/mahirocoko/mahirocoko/tree/main/plugins/phaser/skills/filters-and-postfx
Command: npx skills add https://github.com/mahirocoko/mahirocoko --skill filters-and-postfx-mahirocoko

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Phaser 4 typically requires manual setup for post-processing effects, making it difficult to build consistent, reusable visuals across objects and scenes. This skill provides a structured approach to apply GPU-based filters (glow, blur, color matrices, masks, and more) with a unified API.

Core Features & Use Cases

  • Internal vs External filters: apply effects in object-local space or screen space for performance and alignment control.
  • Built-in controllers: create and manage glow, blur, color matrices, mask, panorama, and more via the FilterList and a suite of Phaser.Filters.Controller subclasses.
  • Common use cases: enhance hero sprites, create scene lighting and bloom-like effects, apply masks and wipe transitions, and compose multi-pass effects using ParallelFilters.

Quick Start

Enable filters on a sprite or camera using enableFilters(), then attach a Glow or Blur via the internal/external filter lists to see an immediate visual effect.

Frequently Asked Questions about filters-and-postfx

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply post-processing filters to game objects in Phaser 4?

To apply post-processing filters in Phaser 4, call enableFilters() on a sprite or camera, then attach effects like Glow or Blur using the FilterList API to render GPU-based visuals immediately.

What is the difference between internal and external filters in Phaser 4?

Internal filters apply effects in object-local space, whereas external filters apply them in screen space. This distinction allows precise control over performance and visual alignment for game objects.

Can I compose multi-pass visual effects using the Phaser 4 FilterList API?

Yes, you can compose multi-pass visual effects in Phaser 4 by utilizing the FilterList API with ParallelFilters, allowing you to stack built-in controllers like ColorMatrix and Wipe.

Does Phaser 4 support built-in controllers for glow and blur effects?

Phaser 4 supports built-in controllers for glow and blur effects through its Phaser.Filters.Controller subclasses, enabling you to easily enhance hero sprites and create scene lighting.

What's the best way to create scene-wide lighting and bloom effects in Phaser 4?

The best way to create scene-wide lighting and bloom effects in Phaser 4 is by attaching built-in filter controllers like Glow to camera external filter lists, ensuring consistent GPU-based rendering.

When should I use object-local space versus screen space for Phaser 4 filters?

Use object-local space for internal filters when alignment with the sprite is critical, and use screen space for external filters to optimize performance during scene-wide post-processing.