GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - melonjs/plugin-template: a project template to create your own plugin

BranchesTags
Open more actions menu

Latest commit

 

History

11 Commits
11 Commits

Folders and files

NameName
Last commit message
Last commit date
.github/workflows
.github/workflows
 
 
scripts
scripts
 
 
src
src
 
 
tests
tests
 
 
.editorconfig
.editorconfig
 
 
.gitignore
.gitignore
 
 
CHANGELOG.md
CHANGELOG.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
package.json
package.json
 
 
tsconfig.build.json
tsconfig.build.json
 
 
tsconfig.json
tsconfig.json
 
 
vitest.config.ts
vitest.config.ts
 
 

Repository files navigation

melonJS Plugin Template

melonJS Logo

License: MIT

A starter template for melonJS plugins, in TypeScript, built with esbuild and tested in a headless browser with Vitest.

Getting Started

  1. Use this template (or clone it)

  2. Install the dependencies, and the browser the tests run in:

    npm install
    npx playwright install chromium
    
  3. In package.json, set your plugin's name, description, homepage and repository, and the lowest melonJS version it needs in peerDependencies

  4. Rename MyPlugin and write your plugin in src/index.ts

Using the plugin in a game

import { plugin } from "melonjs";
import { MyPlugin } from "my-plugin";

// once the application is created
plugin.register(MyPlugin, "myPlugin");

// then, anywhere
plugin.cache.myPlugin.hello();

plugin.register passes any extra arguments to the plugin's constructor. The template takes the application it belongs to, so on a page with several applications:

plugin.register(MyPlugin, "myPlugin", app);

Scripts

Script What it does
npm run build bundles src/ into dist/index.js and writes the type declarations
npm run dev the same, rebuilt on every change
npm test runs the tests in tests/ in headless Chromium
npm run test:types type-checks the sources, tests and scripts
npm run clean removes dist/

npm publish cleans, builds and tests first.

Plugin Structure

src/
└── index.ts        # the plugin
tests/
└── plugin.spec.ts  # its tests, run in a real browser
scripts/
├── build.ts        # esbuild configuration
└── clean.ts
dist/               # generated output (gitignored)

Conventions

These are the ones the official plugins follow:

  • One version to maintain. The lowest melonJS version the plugin runs on is read from peerDependencies.melonjs, and plugin.register refuses to run it on an older engine. The peer range alone only warns at install time, and never when melonJS comes from a CDN.
  • Use this.app, not the global game: it is the application the plugin was registered for.
  • melonJS stays external. The build leaves melonjs out of the bundle, so the game and the plugin share one engine.
  • Real browser tests. melonJS needs a canvas and a DOM, so the tests create a real Application (await app.init()) in headless Chromium.

The official plugins in the melonJS repository (debug-plugin, spine-plugin, capacitor-plugin, tiled-inflate-plugin) are good examples to read.

Need Help?

  • Discord: chat with the community
  • Forum: ask questions
  • API Docs: full API reference
  • Wiki: tutorials and guides

About

a project template to create your own plugin

Topics

canvasgame-developmenthtml5melonjspluginrolluptemplatewebgl

Resources

Readme
MIT license
Activity
Custom properties

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Used by

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.