Open code, practice, and notes →
Download source with English comments · for reading
PixiJS · 02 Sprites and Anchors
Series contents · Technology map
Stage: Application, Coordinates, and Display Objects · Editable example · Storage ID: pixijs-step-02
Goals and learning outcomes
- Distinguish anchors from positions.
- Move Sprites sharing a texture independently.
Prerequisites
Prerequisite concepts: Asynchronous Initialization, Parent Containers. Prepare the output files and observation records from Unit 1.
Key concepts and explanations
Texture Representation
A Sprite is a display object combining a Texture and a transform. Multiple Sprites can use the same Texture.
Anchors
anchor is a normalized reference point relative to the texture size. Do not confuse it with pivot, which uses local pixels.
Practice setup
First check the execution scope guidance on the example screen. The following describes preparation for extending the assignment in a separate project. Implement the work yourself in an HTML and ES module project served by a separate local HTTP development server. Pin and record the installed pixi.js 8.x version.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- Prepare day-02.js and index.html in the external practice project. Load a local image with Assets.load and create three Sprites.
- Set anchor to 0,0.5,1, rotate at the same position, and mark the reference point.
- Save the output with the input condition 0,0, then run again with 0.5,0.5. Expected: position points to the center of the image instead of its upper-left corner. Compare this with the actual screen and logs, and record the actual result and causes of any differences in day-02-notes.md.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| anchor | 0,0 | 0.5,0.5 | position points to the center of the image instead of its upper-left corner |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Distinguish anchors from positions.
- Move Sprites sharing a texture independently.
Self-check
- Does changing anchor also change the position value?
- How do pivot and anchor differ when the size changes?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
This is an editable browser experiment. Measurements vary with the current device and browser.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: Application and Scene Graph · Next: Containers and Local Coordinates