Pixi Pack

What is this?

This is just a template project to get you quickly started with PIXI.js

Check it out live! 🔥🔥🔥

Out of the box, you get:

• A (very bad) Pong game that somehow implements a physics engine
• An OOP(-ish?) style of writing game objects
• Typescript
• Code-splitting, dynamic imports and live reloading, powered by Rollup
• Server-side rendering (SSR) with client-side hydration, Service worker for offline support using Sapper
• No support for IE

Basic Structure

Two main parts:

• The game part (PIXI & Matter)

  The game includes: game.ts,game_config.ts & the bunch of game objects inside /src/game folder

  • game.ts specifies the basic layout: a canvas container & the game objects

    
    new Container({
      view: canvas, // the canvas element to draw the game on
      builder: (app, { topId, bottomId }) => [
        new Background(app),
        new Ball({ app: app, name: 'ball', onCollisionCallback: (otherBody) => ... }),
        new Paddle({ app: app, name: 'paddle-top' }),
        new Paddle({ app: app, name: 'paddle-bottom' })
      ]
    })
          

  • game_config.ts contains defaults for canvas width, height & physics stuff such as friction, inertia...
  • Game objects should extends src/game/app/GameObject.ts parent class & be included in game.ts

    
    class Ball extends GameObject // basic
    class Ball extends Materialized(GameObject) // "materialize" it and include in physics world, trigger onCollisionCallback
    class Ball extends Interactive(Materialized(GameObject)) // subscribe to key press events
          

  • There are two game loops (exposed as update(_delta: time) & fixedUpdate(_delta: time))
    • update() does not have FPS cap, there more refresh rate your monitor have, the lower _delta goes
    • fixedUpdate() have FPS cap of 60FPS, _delta will stay closely to 1.0 as it can; you should put logics & physics-related codes inside this loop (this is to prevents having objects on 144Hz monitor move more quickly than a 60Hz one)
  • Some already-made interfaces that a Game object can implements to simplify codes

    
    // A game object can implement "Shapeable" interface & "requiredGraphics" method,
    // it requires a PIXI Graphics instance to draw onto the canvas stage
    class Ball extends GameObject implements Shapeable {
      requireGraphics(): Graphics {
        const [x, y, radius] = [100, 100, 6]
        //draw a circle
        return new Graphics().beginFill(0xFFFFFF).drawCircle(x, y, radius).endFill()
      }
    }
          

• The other stuff part, handled by Sapper & Svelte, checkout their awesome tutorial for know-how