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.8.2.5 for rendering 2D assets,
- Pixi Sounds v.6 for sounds,
- Pixi Particle Emitter v.5.0.8 for particles (as of 07/2024 the package is not updated for PixiJs V8 and this fork was used (official thread),
- GSAP V3 + pixiPlugin for animations,
- Matter-js for physics,
- Vite for fast builds and HMR,
- Typescript
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 😉.
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.
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)
};