z0mb1 / melonjs-vue-typescript-boilerplate

A simple Vue x TypeScript x Vite based boilerplate to create games with melonJS

melonJS Vue TypeScript Vite Boilerplate

A simple Vue TypeScript Vite based boilerplate to create games with melonJS, built with :

• melonJS 2
• Vue 3
• TypeScript structure and semantic
• Vite ultra fast bundler
• melonJS debug plugin to display stats on number of objects, memory usage, draw time, frame rate, etc...

Use the power of Vue 3 to create user interface (HUD panel, modals, dialogs ets.) with awesome game engine melonJS 2. Boilerplate includes CustomLoader.vue component to replace native engine loader.

Prerequisites

Ensure you have Node.js installed, then install all the build dependencies in the folder where you cloned the repository :

$ [sudo] npm install

Usage

• npm run dev to start the dev server on watch mode at localhost:5173.
• npm run build to generate a minified, production-ready build, in the dist folder

if everything goes well, on running the dev server for the first time you should see this :

Folder structure

public
 ├── bgm
 ├── fnt
 ├── img
 ├── map
 └── sfx
src
 ├── components
 ├── widgets
 |    └── melonjs-example
 |         ├── components
 |         |    └── CustomLoader
 |         |         ├── CustomLoader.composable.ts
 |         |         ├── CustomLoader.vue
 |         |         └── index.ts
 |         ├── scripts
 |         |    ├── renderables
 |         |    └── stage
 |         ├── HelloWorld
 |         ├── index.ts
 |         └── manifest.ts
 ├── App.vue
 ├── main.ts
 └── style.css
index.html
tsconfig.json
vite.config.ts

• src
  • the root folder for your game source code
  • The entry file is main.ts.
  • style.css and index.html are default templates that can be customized
  • manifest.ts is a list of asset to be preloaded by melonJS
• src/widgets/melonjs-example/scripts
  • add your source classes here
• public
  • where to add your game assets

Debug plugin

The boilerplate include the melonJS plugin, and will automatically import and instantiate it when running under a development environement.

the Debug Panel is hidden by default and can be displayed using the "S" key, see here for more details about the plugin.

Questions, need help ?

If you need technical support, you can contact us through the following channels :

• Forums: with melonJS 2 we moved to a new discourse forum, but we can still also find the previous one here
• Chat: come and chat with us on discord
• we tried to keep our wikipage up-to-date with useful links, tutorials, and anything related melonJS.

Thank you and Final Note

• Thank you @edmundg for providing a first version of this TypeScript x Vite boilerplate
• TypeScript support in melonJS is still a work in progress, if you notice any TS definition missing you can use @ts-ignore to ignore the error message for a specific line, please then please report it here
• if you wish to request for a missing feature in the boileplate, open a ticket here or submit a pull request