How does this skill help with performance?

It provides implementation patterns for using render flags and efficient batch updates, preventing unnecessary full-canvas redraws which can cause lag.

When should I wait for canvasReady?

You should always wait for the canvasReady hook before attempting to access canvas layers or placeable objects to ensure the scene and assets are fully initialized.

Can I use this for standard DOM manipulation?

No, this skill emphasizes using PIXI.js properties and containers, as direct DOM manipulation does not work within the WebGL-rendered canvas environment.

Does it support coordinate conversion?

Yes, it includes patterns for converting between client-side screen coordinates (viewport) and the internal Foundry VTT canvas coordinate system.

What is the primary focus of the fvtt-canvas skill?

It focuses on the visual rendering layer of Foundry VTT, specifically using PIXI.js and the WebGL canvas architecture to manage layers and placeable objects.

Foundry VTT Canvas Development

Name: Foundry VTT Canvas Development
Author: ImproperSubset

byImproperSubset

0•

ゲーム開発

Optimizes and extends the Foundry VTT WebGL canvas using PIXI.js and specialized rendering patterns.

This skill provides specialized knowledge for developing within the Foundry VTT canvas environment, leveraging PIXI.js for high-performance WebGL rendering. It guides developers through complex tasks like managing layer hierarchies, implementing custom placeable objects (tokens, tiles, drawings), and utilizing render flags to maintain high frame rates. Whether you're adding custom visual effects, building interactive map tools, or handling canvas lifecycle events, this skill ensures best practices for performance and compatibility within the Foundry VTT architecture.

主な機能

01Placeable object extension and custom rendering

02Coordinate conversion and camera manipulation

03PIXI.js rendering and container management

040 GitHub stars

05Performance optimization via render flags

06Canvas layer hierarchy and access patterns

ユースケース

01Building interactive drawing or mapping tools for game masters

02Creating custom visual auras or status effects for tokens

03Optimizing module performance by implementing efficient render cycles

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add impropersubset/hh-agentics fvtt-canvas

For use in Claude.ai and ChatGPT

Download Skill