MCPInstall

pixijs-assets

by pixijsMedia & Creative

Use this skill when loading and managing resources in PixiJS v8. Covers Assets.init, Assets.load/add/unload, bundles, manifests, background loading, onProgress, caching, spritesheets, video textures, web fonts, bitmap fonts, animated GIFs, compressed textures, SVG as texture or Graphics, resolution detection, per-asset data options, and forcing a specific loader with the parser field (for extension-less URLs). Triggers on: Assets, Assets.load, Assets.init, loadBundle, manifest, backgroundLoad, Spritesheet, Cache, LoadOptions, unload, parser, loadParser, loadWebFont, loadBitmapFont, loadVideoTextures, GifSource, VideoSourceOptions.

Installs
6K
Last 24h
+33
Trending rank
#4210
Security
Pass

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-assets
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads pixijs-assets automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·The skill provides comprehensive documentation and code examples for the PixiJS v8 Assets API, covering resource loading, caching, and management. No security vulnerabilities or malicious patterns were identified.
Socket PassNo alerts
Snyk PassLOW ·Risk: LOW · No issues
ZeroLeaks PassNONE ·Score: 93/100 · 2 sections analyzed

SKILL.md

The instructions your agent reads when the skill is triggered.

The Assets API is PixiJS's asset loader, resolver, and cache in one singleton. Use it to load textures, video, spritesheets, fonts, JSON, and other resources with format detection, resolution switching, bundle grouping, progress tracking, and GPU cleanup.

Quick Start

await Assets.init({ basePath: "/static/" });

const texture = await Assets.load("bunny.png");
const sprite = new Sprite(texture);
app.stage.addChild(sprite);

const [hero, enemy] = await Assets.load(["hero.png", "enemy.png"]);

await Assets.load({
  alias: "logo",
  src: "logo.webp",
});

const logo = new Sprite(Assets.get("logo"));

Assets.init() is optional but recommended for setting basePath, texturePreference, or a manifest. After init, call Assets.load() with a URL, alias, array, or UnresolvedAsset; resolved assets are cached and re-resolved by Assets.get().

Supported file types

TypeExtensionsParser IDLoader
Textures.png, .jpg, .jpeg, .webp, .aviftextureloadTextures
SVG.svgsvgloadSvg (see references/svg.md)
Video textures.mp4, .m4v, .webm, .ogg, .ogv, .h264, .avi, .movvideoloadVideoTextures (see references/video.md)
Sprite sheets.json (Spritesheet format)spritesheetspritesheetAsset (see references/spritesheet.md)
Bitmap fonts.fnt, .xmlbitmap-fontloadBitmapFont (loading works by default; rendering BitmapText requires 'pixi.js/text-bitmap'; see references/fonts.md)
Web fonts.ttf, .otf, .woff, .woff2web-fontloadWebFont (see references/fonts.md)
JSON.jsonjsonloadJson
Text.txttextloadTxt
Compressed textures.basis, .dds, .ktx, .ktx2basis, dds, ktx, ktx2See references/compressed-textures.md
Animated GIFs.gifgifRequires 'pixi.js/gif'; returns GifSource (see references/gif.md)

The Parser ID column is the value you pass to the top-level parser field on an asset descriptor to force a specific loader. See "Forcing a parser" below.

Forcing a parser with parser

By default, PixiJS picks a loader by matching the file extension or MIME type. When your URL lacks an extension (CDN signed URLs, blob URLs, API endpoints, content-hashed paths), the resolver can't tell the loader what to do. Set the top-level parser field on the asset descriptor to force a specific loader:

// Signed CDN URL with no extension
const texture = await Assets.load({
  src: "https://cdn.example.com/signed/abc123?token=xyz",
  parser: "texture",
});

// API endpoint that returns JSON
const data = await Assets.load({
  alias: "config",
  src: "https://api.example.com/v1/config",
  parser: "json",
});

// Extension-less font URL with explicit family
await Assets.load({
  src: "https://cdn.example.com/fonts/hero-v2",
  parser: "web-font",
  data: { family: "Hero", weights: ["400", "700"] },
});

// Video stream without a file extension
const clipTexture = await Assets.load({
  src: "https://cdn.example.com/stream/xyz",
  parser: "video",
  data: { mime: "video/mp4", muted: true, playsinline: true },
});

The parser field goes at the top level of the asset descriptor (alongside src and data), not inside data. It takes any parser ID from the "Supported file types" table above:

  • 'texture', 'svg', 'video': image, SVG, and video textures
  • 'json', 'text': JSON and plain text
  • 'web-font', 'bitmap-font': web and bitmap fonts
  • 'spritesheet': texture atlas JSON
  • 'gif': animated GIFs (requires 'pixi.js/gif')
  • 'basis', 'dds', 'ktx', 'ktx2': compressed textures (each requires its side-effect import)

When you need it

  • Signed CDN URLs: https://cdn.example.com/get?id=abc123 has no extension the loader can test against.
  • Blob or ObjectURL: URL.createObjectURL(blob) produces blob:... URLs with no extension.
  • Custom routing: /api/assets/hero-v2 where the server decides the content type.
  • Content-hashed paths without suffix: some build pipelines produce names like /static/abc123def instead of /static/abc123def.png.

If the URL does have an extension, you don't need parser; let auto-detection do its job. Only set parser when detection can't work.

loadParser is deprecated

The v7 loadParser field still works but emits a deprecation warning. Use parser for new code.

// Old (deprecated)
await Assets.load({ src: "...", loadParser: "loadTextures" });

// New
await Assets.load({ src: "...", parser: "texture" });

Topics

Every asset workflow is covered in a reference file. Pick the one that matches the question:

TopicReferenceWhen
Texture atlases and animationsreferences/spritesheet.mdLoading sprite sheets with AnimatedSprite
Video texturesreferences/video.md.mp4, .webm, autoplay, looping, mobile
Web and bitmap fontsreferences/fonts.md.woff2, .fnt, font families, SDF fonts
Animated GIFsreferences/gif.md.gif, GifSprite, playback control
Grouping assets by featurereferences/bundles.mdaddBundle, loadBundle, unloadBundle
Declaring everything upfrontreferences/manifests.mdAssets.init({ manifest }) workflows
Cache lookups and cleanupreferences/caching.mdAssets.get, Assets.unload, Cache
Priming future assetsreferences/background.mdbackgroundLoad, backgroundLoadBundle
Loading screensreferences/progress.mdonProgress, LoadOptions progress
GPU-compressed formatsreferences/compressed-textures.md.ktx2, .basis, .dds, .ktx
Vector vs raster SVGreferences/svg.mdparseAsGraphicsContext, texture mode
Retina + format detectionreferences/resolution.md@{1,2}x, format preferences

Decision guide

  • Need to load a single image? Use Assets.load(url). No setup required.
  • Loading many assets grouped by level/scene? Use a bundle. See references/bundles.md.
  • Know all assets at build time? Use a manifest in Assets.init. See references/manifests.md.
  • Need a loading bar? Pass a progress callback to Assets.load. See references/progress.md.
  • Smooth transitions between levels? Background-load the next level. See references/background.md.
  • Memory budget matters? Use compressed textures and Assets.unload between screens. See references/compressed-textures.md and references/caching.md.
  • Need crisp SVG icons at any size? Load as Graphics, not texture. See references/svg.md.
  • Retina + WebP/AVIF? Configure texturePreference and use format patterns. See references/resolution.md.

Load options and error handling

There are two separate "options" concepts when loading assets:

  1. LoadOptions: the second argument to Assets.load/loadBundle. Controls error recovery, retries, progress, and completion callbacks across a whole load.
  2. data: a field on each asset descriptor. Forwards parser-specific options (scale mode, resolution, font family, autoplay flags, etc.) to the specific loader for that asset.

LoadOptions (per call)

await Assets.load(["hero.png", "enemy.png"], {
  onProgress: (p) => updateBar(p),
  onError: (err, url) => {
    const src = typeof url === "string" ? url : url.src;
    console.warn("failed:", src, err);
  },
  strategy: "retry",
  retryCount: 3,
  retryDelay: 250,
});
  • onProgress(progress): [0, 1] as assets in the call complete.
  • onError(error, url): url is string | ResolvedAsset. Guard before reading .src; when url is a string, .src is undefined.
  • strategy: 'throw' | 'skip' | 'retry' — default 'throw'. 'skip' resolves with any successful assets; 'retry' reattempts the failed ones.
  • retryCount — default 3, retries per asset when strategy is 'retry'.
  • retryDelay — default 250 ms between retries.

Global defaults live on Loader.defaultOptions, or pass loadOptions to Assets.init().

data options (per asset)

Each loader parser reads its own options from the data field on the asset descriptor. Use the table below to pick the right options for each asset type:

Asset typedata shapeKey optionsReference
Texture (image)TextureSourceOptionsresolution, scaleMode, alphaMode, autoGenerateMipmaps, antialias, addressModereferences/resolution.md
SVG{ parseAsGraphicsContext?, resolution? }parseAsGraphicsContext for Graphics mode; resolution for sharper rasterreferences/svg.md
VideoVideoSourceOptionsautoPlay, loop, muted, playsinline, preload, updateFPS, crossorigin, mimereferences/video.md
Web fontLoadFontDatafamily, weights, style, display, unicodeRange, featureSettingsreferences/fonts.md
Bitmap font(none; auto-configured)Distance-field detection sets scale mode and mipmapsreferences/fonts.md
Spritesheet{ texture?, imageFilename?, ignoreMultiPack?, textureOptions?, cachePrefix? }textureOptions forwards TextureSourceOptions (e.g. scaleMode) to the atlas image; texture to skip image load; imageFilename to override the referenced image; ignoreMultiPack to skip multi-pack follow-ups; cachePrefix to namespace framesreferences/spritesheet.md
GIFGifBufferOptionsfps, scaleMode, resolution, autoGenerateMipmapsreferences/gif.md
Compressed textureTextureSourceOptionsscaleMode, addressMode, autoGenerateMipmapsreferences/compressed-textures.md
JSON / Text(none)Returned as-is—

Example combining LoadOptions and data:

await Assets.load(
  {
    alias: "hero",
    src: "hero.png",
    data: { scaleMode: "nearest", resolution: 2 },
  },
  { strategy: "retry", retryCount: 3 },
);

Inside a manifest or bundle, every entry can carry its own data:

await Assets.init({
  manifest: {
    bundles: [
      {
        name: "level1",
        assets: [
          { alias: "tiles", src: "tiles.png", data: { scaleMode: "nearest" } },
          { alias: "font", src: "hero.woff2", data: { family: "Hero" } },
          {
            alias: "clip",
            src: "intro.mp4",
            data: { autoPlay: false, muted: true },
          },
        ],
      },
    ],
  },
});

Runtime configuration

Assets.init(options) accepts, alongside basePath and manifest:

  • defaultSearchParams — string or Record<string, any> appended to every resolved URL. Useful for cache busting.
  • skipDetections: boolean — bypass browser format detection for faster init. Requires explicit texturePreference.format.
  • bundleIdentifier: BundleIdentifierOptions — customize how bundle keys resolve so the same alias can live in multiple bundles.
  • loadOptions: Partial<LoadOptions> — set the default strategy, retryCount, retryDelay, and callbacks for every subsequent Assets.load call.
  • preferences: Partial<AssetsPreferences> — crossOrigin, preferWorkers, preferCreateImageBitmap, parseAsGraphicsContext.

After init, preferences can still be tuned:

Assets.setPreferences({
  crossOrigin: "anonymous",
  preferCreateImageBitmap: false,
});

for (const detection of Assets.detections) {
  console.log(detection.extension);
}

Assets.reset();
  • Assets.setPreferences(preferences) — push new preferences to every parser that supports them.
  • Assets.detections — getter exposing the registered FormatDetectionParser list; use when inspecting what formats the current environment advertises.
  • Assets.reset() — internal full reset (resolver + loader + cache). Intended for tests so a fresh Assets.init can run.

Common Mistakes

[CRITICAL] Using Texture.from(url) to load

Wrong:

const texture = Texture.from("https://example.com/image.png");

Correct:

const texture = await Assets.load("https://example.com/image.png");

In v8, Texture.from() only reads the cache. It does not fetch from a URL. Use Assets.load() first; the return value is the texture itself.

[HIGH] Using positional Assets.add signature

Wrong:

Assets.add("bunny", "bunny.png");

Correct:

Assets.add({ alias: "bunny", src: "bunny.png" });

The positional Assets.add(key, url) form was removed in v8. Use the options object with alias and src properties.

[HIGH] Not unloading textures between levels

Assets.load() caches textures indefinitely. For level-based games or screens with distinct asset sets, call Assets.unloadBundle() when transitioning to release GPU memory.

API Reference

FAQ

What does the pixijs-assets skill do?

Use this skill when loading and managing resources in PixiJS v8. Covers Assets.init, Assets.load/add/unload, bundles, manifests, background loading, onProgress, caching, spritesheets, video textures, web fonts, bitmap fonts, animated GIFs, compressed textures, SVG as texture or Graphics, resolution detection, per-asset data options, and forcing a specific loader with the parser field (for extension-less URLs). Triggers on: Assets, Assets.load, Assets.init, loadBundle, manifest, backgroundLoad, Spritesheet, Cache, LoadOptions, unload, parser, loadParser, loadWebFont, loadBitmapFont, loadVideoTextures, GifSource, VideoSourceOptions.

How do I install pixijs-assets?

Run npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-assets in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/pixijs-assets/ (personal) or .claude/skills/pixijs-assets/ (project).

Which AI agents can use pixijs-assets?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is pixijs-assets safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains pixijs-assets?

It is published by pixijs in pixijs/pixijs-skills. It has 5,979 recorded installs.

More from pixijs/pixijs-skills

View all →

pixijs

pixijs/pixijs-skills

Use this skill first for ANY PixiJS v8 task; it routes to the right specialized skill for the job. Covers the full PixiJS surface: Application setup, the scene graph (Container, Sprite, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite), rendering (WebGL/WebGPU/Canvas, render loop, custom shaders, filters, blend modes), assets, events, color, math, ticker, accessibility, performance, environments, migration from v7, and project scaffolding. Triggers on: pixi, pixi.js, pixijs, PixiJS, v8, Application, app.init, Sprite, Container, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite, Assets, Ticker, renderer, WebGL, WebGPU, scene graph, filter, shader, blend mode, texture, 3D texture, depth slice, layer, storage texture, BitmapText, create-pixi, how do I draw, how do I render, how do I animate in pixi.

Code Quality & Workflow6.9K installs

pixijs-application

pixijs/pixijs-skills

Use this skill when creating and configuring a PixiJS v8 Application. Covers new Application() + async app.init() options (width, height, background, antialias, resolution, autoDensity, preference, resizeTo, autoStart, sharedTicker, canvas, useBackBuffer, powerPreference, eventFeatures, accessibilityOptions, gcActive, bezierSmoothness, webgl/webgpu/canvasOptions per-renderer overrides), app.stage/renderer/canvas/screen/domContainerRoot access, ResizePlugin, TickerPlugin, CullerPlugin (cullable, cullArea), custom ApplicationPlugin via ExtensionType.Application, start/stop lifecycle, and app.destroy() with releaseGlobalResources. Triggers on: Application, app.init, app.stage, app.renderer, app.canvas, app.screen, app.domContainerRoot, ApplicationOptions, ApplicationPlugin, ExtensionType.Application, resizeTo, sharedTicker, skipExtensionImports, preferWebGLVersion, preserveDrawingBuffer, cullable, CullerPlugin, app.start, app.stop, app.destroy, releaseGlobalResources.

6.1K installs

pixijs-performance

pixijs/pixijs-skills

Use this skill when profiling or optimizing a PixiJS v8 app for FPS, draw calls, or GPU memory. Covers destroy patterns (cacheAsTexture(false), releaseGlobalResources), GCSystem and TextureGCSystem, PrepareSystem, object pooling, batching rules, BitmapText for dynamic text, culling (Culler, CullerPlugin, cullable, cullArea), resolution/antialias tradeoffs, low-level wins (transient MSAA render textures, render bundles, partial buffer updates). Triggers on: FPS, jank, draw calls, batching, object pool, GCSystem, PrepareSystem, Culler, cacheAsTexture, memory leak, destroy patterns, render bundle, transient, MSAA, Buffer.update, WebGPU performance, TexturePool, repeatEdgePixels, bind group.

Code Quality & Workflow6K installs

pixijs-scene-graphics

pixijs/pixijs-skills

Use this skill when drawing vector shapes and paths in PixiJS v8. Covers the Graphics API: shape-then-fill methods (rect/circle/ellipse/poly/roundRect/star/regularPoly/roundPoly/roundShape/filletRect/chamferRect), path methods (moveTo/lineTo/bezierCurveTo/quadraticCurveTo/arc/arcTo/arcToSvg/closePath), fill/stroke/cut, holes, FillGradient (linear/radial), FillPattern, GraphicsContext sharing, svg import/export, containsPoint hit testing, cloning, clearing, bounds, fillStyle/strokeStyle, draw-time transforms (rotateTransform/scaleTransform/translateTransform/setTransform/save/restore), default styles, GraphicsPath reuse. Triggers on: Graphics, GraphicsContext, rect, circle, poly, roundRect, fill, stroke, cut, hole, beginHole, FillGradient, FillPattern, moveTo, bezierCurveTo, svg, graphicsContextToSvg, svg export, GraphicsOptions, containsPoint, clone, clear, bounds, rotateTransform, translateTransform, setFillStyle, setStrokeStyle, GraphicsPath.

Backend & APIs6K installs

pixijs-core-concepts

pixijs/pixijs-skills

Use this skill when understanding how PixiJS v8 renders frames: the systems-and-pipes renderer, the render loop, and how the library adapts to different environments. Covers WebGLRenderer/WebGPURenderer/CanvasRenderer selection, renderer.render() pipeline, environment detection, rendering into RenderTextures and RenderTargets (flipY, mipLevel, layer, bind/push/pop, copyDepthTexture), WebGL context loss and WebGPU device loss recovery, and pointers to per-topic deep dives. Triggers on: renderer, WebGL, WebGPU, Canvas, render loop, render pipeline, systems, environments, autoDetectRenderer, RenderTexture, RenderTarget, render to texture, flipY, mipLevel, layer, 3D texture, depth slice, renderTarget.bind, copyToTexture, copyDepthTexture, depth-only, WebGLLoader, WebGPULoader, CanvasLoader, RendererLoader, lazy-load renderer systems, code splitting, context lost, webglcontextlost, device lost, GPUDevice.lost.

Media & Creative6K installs

pixijs-events

pixijs/pixijs-skills

Use this skill when handling pointer, mouse, touch, or wheel input in PixiJS v8. Covers eventMode (none, passive, auto, static, dynamic), FederatedEvent types, propagation and capture phase, hitArea, interactiveChildren, cursor and cursorStyles, global move events for drag, eventFeatures config. Triggers on: eventMode, FederatedPointerEvent, pointerdown, click, tap, globalpointermove, drag, hitArea, cursor, stopPropagation, persistentDeviceId, contextmenu, rightclick.

5.9K installs

Popular media & creative skills

View category →

hyperframes

heygen-com/hyperframes

Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.

Media & Creative1.2M installs

media-use

heygen-com/hyperframes

Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.

Media & Creative1.1M installs

hyperframes-registry

heygen-com/hyperframes

About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.

Media & Creative1M installs

hyperframes-creative

heygen-com/hyperframes

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.

Media & Creative916.5K installs

ai-video-generation

101-skills/superpowers

Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse

Media & Creative881.5K installs

ai-image-generation

101-skills/superpowers

Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image

Media & Creative880.3K installs