https://github.com/lorenzocorbella74/my-engine-2d
My own 2D game engine
https://github.com/lorenzocorbella74/my-engine-2d
game-engine game-engine-2d game-framework gsap3 matter-js pixi pixijs typescript vitejs
Last synced: 6 months ago
JSON representation
My own 2D game engine
- Host: GitHub
- URL: https://github.com/lorenzocorbella74/my-engine-2d
- Owner: LorenzoCorbella74
- Created: 2023-01-22T14:47:01.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-26T14:12:43.000Z (about 1 year ago)
- Last Synced: 2024-07-26T15:53:16.293Z (about 1 year ago)
- Topics: game-engine, game-engine-2d, game-framework, gsap3, matter-js, pixi, pixijs, typescript, vitejs
- Language: TypeScript
- Homepage:
- Size: 3.1 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.8.2.5](https://pixijs.com/) for rendering 2D assets,
- [Pixi Sounds v.6](https://pixijs.io/sound/examples/index.html) for sounds,
- [Pixi Particle Emitter v.5.0.8](https://github.com/pixijs/particle-emitter) for particles (as of 07/2024 the package is not updated for PixiJs V8 and this [fork](@barvynkoa/particle-emitter) was used ([official thread](https://github.com/pixijs/particle-emitter/issues/211)),
- [GSAP V3 + pixiPlugin](https://greensock.com/docs/v3/Plugins/PixiPlugin) for animations,
- [Matter-js](https://github.com/liabru/matter-js/tree/master) for physics,
- [Vite](https://vitejs.dev/) for fast builds and HMR,
- [Typescript](https://www.typescriptlang.org/)
## 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](./Docs.md#asset-manager)
- [ScreenManager](./Docs.md#screenmanager)
- [GameObject Architecture and ECS](./Docs.md#gameobject-architecture-and-ecs)
- [Sound Manager](./Docs.md#sound-manager)
- [Scene Manager](./Docs.md#scene-manager)
- [Keyboard Input Manager](./Docs.md#keyboard-input-manager)
- [Mouse Input Manager](./Docs.md#mouse-input-manager)
- [Camera Manager](./Docs.md#camera-manager)
- [Time Manager and Timers](./Docs.md#time-manager-and-timers)
- [Event Manager](./Docs.md#event-manager)
- [Localization](./Docs.md#localization)
- [GameStats ](./Docs.md#gamestats-class)
- [Storage Manager](./Docs.md#storage-manager)
- [Utils](./Docs.md#utils)
- [Debug](./Docs.md#debug)
- [Game Logic](./Docs.md#game-logic)
- [UIManager](./Docs.md#uimanager-class)
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](https://chromewebstore.google.com/detail/pixijs-devtools/aamddddknhcagpehecnhphigffljadon?pli=1) 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](https://github.com/LorenzoCorbella74/mye2d-cli) to create a game project, and start adding scenes and gameobject!
```bash
# download the my-engine-2d CLI
> npm install -g mye2d@0.0.6
# create a game project in a folder
> mye2D --new
# start dev
> npm run dev
# Build for production
> npm run build
# add game scenes and gameobject
> mye2D --scene
> mye2D --gameobject
```
Game scenes are placed in the `src/Game/Scenes` folder, while the basic configuration of the game is in `src/Game/Config.ts`.
```typescript
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:
- [Migration to V8](https://pixijs.com/8.x/guides/migrations/v8#3-deprecated-features)
- [optimisation](https://cprimozic.net/notes/posts/pixi-js-optimizations/)
## [VSC Snippets](./VSC_snippets.md)