pixijs-scene-graphics

Name: pixijs-scene-graphics
Author: pixijs

3.0kinstalls15forks

How to install pixijs-scene-graphics?

pixijs/pixijs-skills/pixijs-scene-graphics

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-graphics

Installs into the current project.

Summary

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/arc

Files · 1

View on GitHub

SKILL.md

1	`Graphics` is the vector-drawing leaf of the PixiJS v8 scene graph. The v8 API follows a shape-then-style pattern: draw a shape or path with `rect`, `circle`, `moveTo`, etc., then apply `fill` and/or `stroke`. Every method returns `this` for chaining, and the drawing instructions live on a `GraphicsContext` that can be shared between instances.
2
3	Assumes familiarity with `pixijs-scene-core-concepts`. `Graphics` is a leaf: do not nest children inside it. Wrap multiple `Graphics` objects in a `Container` to group them.
4
5	## Quick Start
6
7	```ts
8	const g = new Graphics();
9
10	g.rect(10, 10, 200, 100)
11	.fill({ color: 0x3498db, alpha: 0.8 })
12	.stroke({ width: 3, color: 0x2c3e50 });
13
14	g.circle(300, 60, 40).fill(0xe74c3c);
15
16	g.moveTo(50, 200)
17	.lineTo(200, 200)
18	.bezierCurveTo(250, 250, 100, 300, 50, 250)
19	.closePath()
20	.fill(0x6c5ce7);
21
22	app.stage.addChild(g);
23	```
24
25	Related skills: `pixijs-scene-core-concepts` (scene graph basics), `pixijs-scene-container` (group graphics with other objects), `pixijs-scene-core-concepts/references/masking.md` (Graphics as a stencil mask), `pixijs-filters` (effects), `pixijs-performance` (batching, `cacheAsTexture`).
26
27	## Constructor options
28
29	All `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`.
30
31	Leaf-specific options added by `GraphicsOptions`:
32
33	\| Option \| Type \| Default \| Description \|
34	\| ------------- \| ----------------- \| ----------------------- \| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- \|
35	\| `context` \| `GraphicsContext` \| new `GraphicsContext()` \| Shared drawing context. Passing a context reuses its tessellated geometry across multiple `Graphics` nodes, avoiding duplicate GPU work. If omitted, each `Graphics` creates and owns a new context. \|
36	\| `roundPixels` \| `boolean` \| `false` \| Rounds the final on-screen `x`/`y` to the nearest pixel. Produces crisper lines for pixel-art styles at the cost of smooth sub-pixel movement. \|
37
38	The constructor also accepts a `GraphicsContext` instance as its sole argument (`new Graphics(ctx)`), which is shorthand for `new Graphics({ context: ctx })`.
39
40	## Core Patterns
41
42	### Shape-then-fill workflow
43
44	```ts
45	const g = new Graphics();
46
47	g.rect(10, 10, 200, 100)
48	.fill({ color: 0x3498db, alpha: 0.8 })
49	.stroke({ width: 3, color: 0x2c3e50 });
50
51	g.circle(150, 200, 40).fill(0xe74c3c);
52	g.roundRect(300, 10, 150, 80, 12).fill(0x2ecc71);
53	g.poly([0, 0, 60, 0, 30, 50], true).fill(0x9b59b6);
54	g.star(400, 200, 5, 40, 20, 0).fill(0xf39c12);
55	g.ellipse(100, 350, 60, 30).fill(0x1abc9c);
56	```
57
58	`fill()` accepts a `FillInput`: a color number/string, `{ color, alpha, texture, matrix, textureSpace }`, a `FillGradient`, a `FillPattern`, or a `Texture`. When filling with a texture, `textureSpace` controls coordinate mapping:
59
60	- `'local'` (default): texture is scaled to fit each shape's bounding box (normalized 0-1 coordinates).
61	- `'global'`: texture position/scale are relative to the Graphics object's coordinate system, shared across all shapes.
62
63	`FillInput` also supports a nested `fill` subfield: a `FillStyle` options object can embed a `FillGradient` or `FillPattern` under its `fill` key, which applies the gradient or pattern alongside the `color`, `alpha`, `texture`, and `matrix` modifiers on the outer object.
64
65	`stroke()` accepts a color, a `FillGradient`, a `FillPattern`, or a `StrokeStyle` object that combines all `FillStyle` keys (`color`, `alpha`, `texture`, `matrix`, `fill`, `textureSpa

People who liked this also viewed

6 picks

Type

pixijs-scene-graphics

3.0kinstalls15forks

View on GitHub

How to install pixijs-scene-graphics?

pixijs/pixijs-skills/pixijs-scene-graphics

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-graphics

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	`Graphics` is the vector-drawing leaf of the PixiJS v8 scene graph. The v8 API follows a shape-then-style pattern: draw a shape or path with `rect`, `circle`, `moveTo`, etc., then apply `fill` and/or `stroke`. Every method returns `this` for chaining, and the drawing instructions live on a `GraphicsContext` that can be shared between instances.
2
3	Assumes familiarity with `pixijs-scene-core-concepts`. `Graphics` is a leaf: do not nest children inside it. Wrap multiple `Graphics` objects in a `Container` to group them.
4
5	## Quick Start
6
7	```ts
8	const g = new Graphics();
9
10	g.rect(10, 10, 200, 100)
11	.fill({ color: 0x3498db, alpha: 0.8 })
12	.stroke({ width: 3, color: 0x2c3e50 });
13
14	g.circle(300, 60, 40).fill(0xe74c3c);
15
16	g.moveTo(50, 200)
17	.lineTo(200, 200)
18	.bezierCurveTo(250, 250, 100, 300, 50, 250)
19	.closePath()
20	.fill(0x6c5ce7);
21
22	app.stage.addChild(g);
23	```
24
25	Related skills: `pixijs-scene-core-concepts` (scene graph basics), `pixijs-scene-container` (group graphics with other objects), `pixijs-scene-core-concepts/references/masking.md` (Graphics as a stencil mask), `pixijs-filters` (effects), `pixijs-performance` (batching, `cacheAsTexture`).
26
27	## Constructor options
28
29	All `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`.
30
31	Leaf-specific options added by `GraphicsOptions`:
32
33	\| Option \| Type \| Default \| Description \|
34	\| ------------- \| ----------------- \| ----------------------- \| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- \|
35	\| `context` \| `GraphicsContext` \| new `GraphicsContext()` \| Shared drawing context. Passing a context reuses its tessellated geometry across multiple `Graphics` nodes, avoiding duplicate GPU work. If omitted, each `Graphics` creates and owns a new context. \|
36	\| `roundPixels` \| `boolean` \| `false` \| Rounds the final on-screen `x`/`y` to the nearest pixel. Produces crisper lines for pixel-art styles at the cost of smooth sub-pixel movement. \|
37
38	The constructor also accepts a `GraphicsContext` instance as its sole argument (`new Graphics(ctx)`), which is shorthand for `new Graphics({ context: ctx })`.
39
40	## Core Patterns
41
42	### Shape-then-fill workflow
43
44	```ts
45	const g = new Graphics();
46
47	g.rect(10, 10, 200, 100)
48	.fill({ color: 0x3498db, alpha: 0.8 })
49	.stroke({ width: 3, color: 0x2c3e50 });
50
51	g.circle(150, 200, 40).fill(0xe74c3c);
52	g.roundRect(300, 10, 150, 80, 12).fill(0x2ecc71);
53	g.poly([0, 0, 60, 0, 30, 50], true).fill(0x9b59b6);
54	g.star(400, 200, 5, 40, 20, 0).fill(0xf39c12);
55	g.ellipse(100, 350, 60, 30).fill(0x1abc9c);
56	```
57
58	`fill()` accepts a `FillInput`: a color number/string, `{ color, alpha, texture, matrix, textureSpace }`, a `FillGradient`, a `FillPattern`, or a `Texture`. When filling with a texture, `textureSpace` controls coordinate mapping:
59
60	- `'local'` (default): texture is scaled to fit each shape's bounding box (normalized 0-1 coordinates).
61	- `'global'`: texture position/scale are relative to the Graphics object's coordinate system, shared across all shapes.
62
63	`FillInput` also supports a nested `fill` subfield: a `FillStyle` options object can embed a `FillGradient` or `FillPattern` under its `fill` key, which applies the gradient or pattern alongside the `color`, `alpha`, `texture`, and `matrix` modifiers on the outer object.
64
65	`stroke()` accepts a color, a `FillGradient`, a `FillPattern`, or a `StrokeStyle` object that combines all `FillStyle` keys (`color`, `alpha`, `texture`, `matrix`, `fill`, `textureSpa

People who liked this also viewed

6 picks

Type