pixijs_canvas_2d_renderer_rotating_sprite_quickstart.ts

1import { Application, Assets, Sprite } from 'pixi.js-canvas';
2
3// Create a new application
4const app = new Application();
5
6async function init() {
7    // Initialize the application with the Canvas renderer
8    await app.init({ 
9        background: '#1099bb', 
10        resizeTo: window 
11    });
12
13    // Append the application canvas to the document body
14    document.body.appendChild(app.canvas);
15
16    // Load the rabbit texture
17    const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
18
19    // Create a bunny Sprite
20    const bunny = new Sprite(texture);
21
22    // Center the sprite's anchor point
23    bunny.anchor.set(0.5);
24
25    // Move the sprite to the center of the screen
26    bunny.x = app.screen.width / 2;
27    bunny.y = app.screen.height / 2;
28
29    app.stage.addChild(bunny);
30
31    // Listen for frame updates
32    app.ticker.add((time) => {
33        // Rotate the bunny!
34        // time.deltaTime is a multiplier for the frame rate
35        bunny.rotation += 0.1 * time.deltaTime;
36    });
37}
38
39init();