MY-ENGINE-2D 💥

I have always been fascinated by video game engines and my-engine-2d is my effort in typescript and WebGL to learn how to build one. To not reinvent the wheel the engine is based on the following technologies:

• Pixijs v.7.2 for rendering 2D assets,
• Pixi Sounds v.5 for sounds,
• Pixi Particle Emitter v.5.0.8 for particles,
• GSAP V3 + pixiPlugin for animations,
• Matter-js for physics,
• Vite for fast builds and HMR,
• Typescript

Features 💣

The engine provides a series of abstractions, contained in the engine folder, that allow to speed up the creation of a 2D game in WebGL.

• Asset Manager
• ScreenManager
• GameObject Architecture and ECS
• Sound Manager
• Scene Manager
• Keyboard Input Manager
• Mouse Input Manager
• Camera Manager
• Time Manager and Timers
• Event Manager
• Localization
• GameStats
• Storage Manager
• Utils
• Debug
• Game Logic
• UIManager

Due to the fact that the engine is in continuous development, the documentation is not exhaustive and the features are not yet complete. Please be patient and feel free to contribute 😉.

Debug 🔭

It is possible to use the Chrome Extension Pixijs Devtools and check the engine object as window.$PE.

To test physics use the 2d visualisation of the matter-js world by running in the browser devtools the function $PE.physics.showPhisicsCanvas() to show and $PE.physics.hidePhisicsCanvas() to hide.

Usage 🔨

# clone engine with
> npx degit https://github.com/LorenzoCorbella74/my-engine-2d.git <game-folder>

# install dependancied
> npm install

# start dev
> npm run dev

# Build for production
> npm run build

Before starting the app place your scenes in the src/Game/Scenes folder, the basic configuration of the game in src/Game/Config.ts and you are good to go!.

export const Config: GameConfig<{ score: number }> = {
  name: "My Game",
  scenes: [FirstScene, SecondScene, MatterScene, GraphicScene], // the first is the startScene
  storagePrefix: "MyGame_", // to store in localstorage
  engineLogPrefix: "[MY-ENGINE-2D]: ", // to log in console
  // defaultLocale: 'en',
  // localeFolder: 'i18n',
  // set your input here...
  input: {
    UP: "w",
    DOWN: "s",
    RIGHT: "d",
    LEFT: "a",
    DEBUG: "i",
    ACTION: "e",
  },
  // place your events here...
  events: {
    Collision: "Collision",
    Pickup: "Pickup",
    CustomEvent: "CustomEvent",
    UpdateForUI: "UpdateForUI",
  },
  // to manage game state as global object
  state: {
    score: 0,
    lives: 3,
  },
  // run gameLogic each n frame
  framesToCheckLogic: [1, 30],
  // aspectRatio: '16:9' as default. Can be, 16:10, 4:3, 3:2 , 1:1
  // fullscreen: true (default false)
};

VSC Snippets