Skip to content

LorenzoCorbella74/my-engine-2d

Repository files navigation

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:

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.

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 🔨

Download the companion cli to create a game project, and start adding scenes and gameobject!

# download the my-engine-2d CLI
> npm install -g [email protected]
# create a game project in a folder <project_name>
> mye2D --new <project_name>

# start dev
> npm run dev

# Build for production
> npm run build

# add game scenes and gameobject
> mye2D --scene <scene_name>
> mye2D  --gameobject <name> <scene_name>

Game scenes are placed in the src/Game/Scenes folder, while the basic configuration of the game is in src/Game/Config.ts.

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)
};

References: