https://github.com/tcd93/pixi-pack

A 6-packed PIXI.js boilerplate (ts/svelte/ssr/rollup)
https://github.com/tcd93/pixi-pack

boilerplate pixi pixijs rollup sapper ssr svelte template typescript

Last synced: 6 months ago
JSON representation

A 6-packed PIXI.js boilerplate (ts/svelte/ssr/rollup)

• Host: GitHub
• URL: https://github.com/tcd93/pixi-pack
• Owner: tcd93
• Created: 2020-04-22T08:54:25.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T05:21:26.000Z (almost 3 years ago)
• Last Synced: 2025-02-14T22:38:50.448Z (8 months ago)
• Topics: boilerplate, pixi, pixijs, rollup, sapper, ssr, svelte, template, typescript
• Language: TypeScript
• Homepage: https://tcd93.github.io/pixi-pack/blog/what-is-this
• Size: 2.19 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## 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