diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz index 7f2b9ec..ff0d08f 100644 Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ diff --git a/package.json b/package.json index e47bbcc..610e158 100644 --- a/package.json +++ b/package.json @@ -19,5 +19,8 @@ "lefthook": "^2.1.10", "vite": "^8.1.1", "vitest": "^4.1.10" + }, + "dependencies": { + "pixi.js": "^8.19.0" } } diff --git a/src/main.js b/src/main.js index aa3357b..20b064f 100644 --- a/src/main.js +++ b/src/main.js @@ -1 +1,45 @@ import './style.css'; +import { Application, Assets, Container, Sprite } from 'pixi.js'; + +(async () => { + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + // Create and add a container to the stage + const container = new Container(); + + app.stage.addChild(container); + + // Load the bunny texture + const texture = await Assets.load('https://pixijs.com/assets/bunny.png'); + + // Create a 5x5 grid of bunnies in the container + for (let i = 0; i < 25; i++) { + const bunny = new Sprite(texture); + + bunny.x = (i % 5) * 40; + bunny.y = Math.floor(i / 5) * 40; + container.addChild(bunny); + } + + // Move the container to the center + container.x = app.screen.width / 2; + container.y = app.screen.height / 2; + + // Center the bunny sprites in local container coordinates + container.pivot.x = container.width / 2; + container.pivot.y = container.height / 2; + + // Listen for animate update + app.ticker.add((time) => { + // Continuously rotate the container! + // * use delta to create frame-independent transform * + container.rotation -= 0.01 * time.deltaTime; + }); +})(); diff --git a/yarn.lock b/yarn.lock index 7766968..0a6edc5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -280,6 +280,13 @@ __metadata: languageName: node linkType: hard +"@pixi/colord@npm:^2.9.6": + version: 2.9.6 + resolution: "@pixi/colord@npm:2.9.6" + checksum: 10c0/513636a67140b8bb3292eb4a7a3a5303a394525410fe972ebfe1e5db3749f27f7c0f176e4c84fcb9ab0fa22ee1d8ce2a15b3e32db7021e65ac0561941d2933a3 + languageName: node + linkType: hard + "@rolldown/binding-android-arm64@npm:1.1.5": version: 1.1.5 resolution: "@rolldown/binding-android-arm64@npm:1.1.5" @@ -429,6 +436,13 @@ __metadata: languageName: node linkType: hard +"@types/earcut@npm:^3.0.0": + version: 3.0.0 + resolution: "@types/earcut@npm:3.0.0" + checksum: 10c0/3c03e66bebb9b2408934f3ba4c3e9de37847166047fd64c23efd1bb9e127ed9330a9c61b03f3dc6cee060cb3b7e0a19689ee983d08defc93ca387a17b96e9499 + languageName: node + linkType: hard + "@types/estree@npm:^1.0.0": version: 1.0.9 resolution: "@types/estree@npm:1.0.9" @@ -518,6 +532,20 @@ __metadata: languageName: node linkType: hard +"@webgpu/types@npm:^0.1.69": + version: 0.1.71 + resolution: "@webgpu/types@npm:0.1.71" + checksum: 10c0/79e83a6e3afc71e6034f85e4af848d6083c41d3275d192aadeea019b3555eb1b8757d99aaf6b4ec705a5392f3c82d1b117a7a6296bbae2c1d9b977f6861762cb + languageName: node + linkType: hard + +"@xmldom/xmldom@npm:^0.8.13": + version: 0.8.13 + resolution: "@xmldom/xmldom@npm:0.8.13" + checksum: 10c0/06405ee6fffba631abf715a305ace338420ebcea8baf1317f19f2752f5c505952b7df45159908e7be8451a42faa54326b780616ab4d08242b20477b2973da24b + languageName: node + linkType: hard + "abbrev@npm:^5.0.0": version: 5.0.0 resolution: "abbrev@npm:5.0.0" @@ -532,6 +560,7 @@ __metadata: "@biomejs/biome": "npm:^2.5.3" jsdom: "npm:^29.1.1" lefthook: "npm:^2.1.10" + pixi.js: "npm:^8.19.0" vite: "npm:^8.1.1" vitest: "npm:^4.1.10" languageName: unknown @@ -608,6 +637,13 @@ __metadata: languageName: node linkType: hard +"earcut@npm:^3.0.2": + version: 3.2.3 + resolution: "earcut@npm:3.2.3" + checksum: 10c0/38660ec1ce55eecbbbf11d5a0072934c9f33851527bf5e40923c6656c3a0c6b00bb449ae8f4b28f89a0b249fe18568e630a8ea9ee39ce2707a50a89531a2f995 + languageName: node + linkType: hard + "entities@npm:^8.0.0": version: 8.0.0 resolution: "entities@npm:8.0.0" @@ -638,6 +674,13 @@ __metadata: languageName: node linkType: hard +"eventemitter3@npm:^5.0.1": + version: 5.0.4 + resolution: "eventemitter3@npm:5.0.4" + checksum: 10c0/575b8cac8d709e1473da46f8f15ef311b57ff7609445a7c71af5cd42598583eee6f098fa7a593e30f27e94b8865642baa0689e8fa97c016f742abdb3b1bf6d9a + languageName: node + linkType: hard + "expect-type@npm:^1.3.0": version: 1.4.0 resolution: "expect-type@npm:1.4.0" @@ -683,6 +726,15 @@ __metadata: languageName: node linkType: hard +"gifuct-js@npm:^2.1.2": + version: 2.1.2 + resolution: "gifuct-js@npm:2.1.2" + dependencies: + js-binary-schema-parser: "npm:^2.0.3" + checksum: 10c0/39521aabcb87b50c3e44b98c564bf229f33f9667809b643c719674a7bcc6b42eb9faa521be6575707ea5964ecf1613991b09295a7a389aa502b109d1ca303fcf + languageName: node + linkType: hard + "graceful-fs@npm:^4.2.6": version: 4.2.11 resolution: "graceful-fs@npm:4.2.11" @@ -713,6 +765,20 @@ __metadata: languageName: node linkType: hard +"ismobilejs@npm:^1.1.1": + version: 1.1.1 + resolution: "ismobilejs@npm:1.1.1" + checksum: 10c0/3f15f3bd8fe2290bc2f7398c95ceee7525db7d8cf76b8def201c19c49b3a37be33d9ecedc4e316aadcc67a70859ae491981e07cf998db1ec3e5ad0df905bc16a + languageName: node + linkType: hard + +"js-binary-schema-parser@npm:^2.0.3": + version: 2.0.3 + resolution: "js-binary-schema-parser@npm:2.0.3" + checksum: 10c0/0acf895918974d95f5c8c432486d23b6257c555c8a3efff1e4f6a72818877b40c2467bcb2fbd79e519b9c34612526b3595f805eb294e19f48f68f6aa9ee8469e + languageName: node + linkType: hard + "jsdom@npm:^29.1.1": version: 29.1.1 resolution: "jsdom@npm:29.1.1" @@ -1064,6 +1130,13 @@ __metadata: languageName: node linkType: hard +"parse-svg-path@npm:^0.2.0": + version: 0.2.0 + resolution: "parse-svg-path@npm:0.2.0" + checksum: 10c0/a6089505fd63ce43c873c616e6eb7fa85f88644bb38fadd5c2b66a1e30c77275d391049e5c6cd4be09520f191e1e2d37d173b6470f9aa6f548a2fff6f649894a + languageName: node + linkType: hard + "parse5@npm:^8.0.1": version: 8.0.1 resolution: "parse5@npm:8.0.1" @@ -1094,6 +1167,24 @@ __metadata: languageName: node linkType: hard +"pixi.js@npm:^8.19.0": + version: 8.19.0 + resolution: "pixi.js@npm:8.19.0" + dependencies: + "@pixi/colord": "npm:^2.9.6" + "@types/earcut": "npm:^3.0.0" + "@webgpu/types": "npm:^0.1.69" + "@xmldom/xmldom": "npm:^0.8.13" + earcut: "npm:^3.0.2" + eventemitter3: "npm:^5.0.1" + gifuct-js: "npm:^2.1.2" + ismobilejs: "npm:^1.1.1" + parse-svg-path: "npm:^0.2.0" + tiny-lru: "npm:^11.4.7" + checksum: 10c0/ba0e688bc7bef70ffd205e67ccdcc915fbb96aba6a41eb14d10e03e6ac1dd9055135e34d09256750d88702bb034b968f17a77d5ac68848518b8b6db0012f1f1c + languageName: node + linkType: hard + "postcss@npm:^8.5.16": version: 8.5.19 resolution: "postcss@npm:8.5.19" @@ -1250,6 +1341,13 @@ __metadata: languageName: node linkType: hard +"tiny-lru@npm:^11.4.7": + version: 11.4.7 + resolution: "tiny-lru@npm:11.4.7" + checksum: 10c0/2cd65b987396e331ddcef57133b3f0cb30c832641a215a2e627af04941c839ca6772f216b238e96500b4747f39b434d129cec4c0a25db3beb08c8f3d448a2705 + languageName: node + linkType: hard + "tinybench@npm:^2.9.0": version: 2.9.0 resolution: "tinybench@npm:2.9.0"