melonjs 18.2.1 → 18.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +255 -0
- package/build/index.js +2 -2
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
melonJS 2
|
|
2
|
+
=========
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
[](https://github.com/melonjs/melonJS/actions/workflows/main.yml)
|
|
6
|
+
[](https://www.npmjs.com/package/melonjs)
|
|
7
|
+
[](https://www.npmjs.com/package/melonjs)
|
|
8
|
+
[](https://bundlephobia.com/result?p=melonjs)
|
|
9
|
+
[](https://bundlephobia.com/result?p=melonjs)
|
|
10
|
+
[](https://www.jsdelivr.com/package/npm/melonjs)
|
|
11
|
+
[](LICENSE.md)
|
|
12
|
+
[](https://discord.gg/aur7JMk)
|
|
13
|
+
[](CODE_OF_CONDUCT.md)
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
A modern & lightweight HTML5 game engine
|
|
17
|
+
-------------------------------------------------------------------------------
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
[melonJS](https://melonjs.org/) is an open-source HTML5 game engine that empowers developers to create 2D games using modern JavaScript and TypeScript. Built with ES6 classes and bundled using [esbuild](https://esbuild.github.io), it provides tree-shaking support for optimal bundle sizes.
|
|
21
|
+
|
|
22
|
+
[melonJS](https://melonjs.org/) is licensed under the [MIT License](LICENSE.md) and actively maintained with the help of a small team of enthusiasts at AltByte in Singapore.
|
|
23
|
+
|
|
24
|
+
Why melonJS
|
|
25
|
+
-------------------------------------------------------------------------------
|
|
26
|
+
|
|
27
|
+
melonJS is designed so you can **focus on making games, not on graphics plumbing**.
|
|
28
|
+
|
|
29
|
+
- **Canvas2D-inspired rendering API** — If you've used the HTML5 Canvas, you already know melonJS. The rendering API (`save`, `restore`, `translate`, `rotate`, `setColor`, `fillRect`, ...) follows the same familiar patterns — no render graphs, no shader pipelines, no instruction sets to learn.
|
|
30
|
+
|
|
31
|
+
- **True renderer abstraction** — Write your game once, run it on WebGL or Canvas2D with zero code changes. The engine handles all GPU complexity behind a unified API, with automatic fallback when WebGL is not available. Designed to support future backends (WebGPU) without touching game code.
|
|
32
|
+
|
|
33
|
+
- **Complete engine, minimal footprint** — Physics, tilemaps, audio, input, cameras, tweens, particles, UI — a full 2D game stack in a single tree-shakeable ES module. No dependency sprawl, no library stitching.
|
|
34
|
+
|
|
35
|
+
- **Tiled as a first-class citizen** — Deep [Tiled](https://www.mapeditor.org) integration built into the core: orthogonal, isometric, hexagonal and staggered maps, animated tilesets, collision shapes, object properties, compressed formats — all parsed and rendered natively.
|
|
36
|
+
|
|
37
|
+
- **Batteries included, hackable by design** — Get started in minutes with minimal setup. When you need to go deeper: ES6 classes throughout, a plugin system for engine extensions, and a clean architecture that's easy to extend without fighting the framework.
|
|
38
|
+
|
|
39
|
+
About melonJS
|
|
40
|
+
-------------------------------------------------------------------------------
|
|
41
|
+
|
|
42
|
+
[melonJS](https://melonjs.org/) is a fully featured game engine :
|
|
43
|
+
|
|
44
|
+
Compatibility
|
|
45
|
+
- Standalone library (does not rely on anything else, except a HTML5 capable browser)
|
|
46
|
+
- Compatible with all major browsers (Chrome, Safari, Firefox, Opera, Edge) and mobile devices
|
|
47
|
+
|
|
48
|
+
Graphics
|
|
49
|
+
- 2D sprite-based graphic engine
|
|
50
|
+
- Fast WebGL renderer for desktop and mobile devices with fallback to Canvas rendering
|
|
51
|
+
- Extensible batcher system for custom rendering pipelines
|
|
52
|
+
- High DPI resolution & Canvas advanced auto scaling
|
|
53
|
+
- Sprite with 9-slice scaling option, and animation management
|
|
54
|
+
- Built-in effects such as tinting, masking and 2D lighting
|
|
55
|
+
- Standard spritesheet, single and multiple Packed Textures support
|
|
56
|
+
- Compressed texture support (DDS, KTX, KTX2, PVR, PKM) with automatic format detection and fallback
|
|
57
|
+
- System & Bitmap Text
|
|
58
|
+
- Video sprite playback
|
|
59
|
+
|
|
60
|
+
Sound
|
|
61
|
+
- Web Audio support with 3D spatial audio and stereo panning based on [Howler](https://howlerjs.com)
|
|
62
|
+
|
|
63
|
+
Physics
|
|
64
|
+
- Polygon (SAT) based collision algorithm for accurate detection and response
|
|
65
|
+
- Fast Broad-phase collision detection using spatial partitioning (QuadTree)
|
|
66
|
+
- Collision filtering for optimized automatic collision detection
|
|
67
|
+
- Multiple shapes per body for complex hitboxes
|
|
68
|
+
|
|
69
|
+
Input
|
|
70
|
+
- Mouse and Touch device support (with mouse emulation)
|
|
71
|
+
- Gamepad support with button and axes binding
|
|
72
|
+
- Keyboard event handling with key binding system
|
|
73
|
+
- Device motion & accelerometer support
|
|
74
|
+
|
|
75
|
+
Camera
|
|
76
|
+
- Multi-camera support (split-screen, minimaps, multiple viewports)
|
|
77
|
+
- Camera follow with configurable deadzone and damping
|
|
78
|
+
- Built-in shake, fade and flash effects
|
|
79
|
+
|
|
80
|
+
UI
|
|
81
|
+
- Clickable, hoverable and draggable UI elements
|
|
82
|
+
- Drag-and-drop support
|
|
83
|
+
- Text buttons with built-in styling
|
|
84
|
+
|
|
85
|
+
Level Editor
|
|
86
|
+
- [Tiled](https://www.mapeditor.org) map format [up to 1.12](https://doc.mapeditor.org/en/stable/reference/tmx-changelog/) built-in support for easy level design
|
|
87
|
+
- Uncompressed and [compressed](https://github.com/melonjs/melonJS/tree/master/packages/tiled-inflate-plugin) Plain, Base64, CSV and JSON encoded XML tilemap loading
|
|
88
|
+
- Orthogonal, Isometric, Hexagonal (both normal and staggered) and Oblique maps
|
|
89
|
+
- Multiple layers (multiple background/foreground, collision and Image layers)
|
|
90
|
+
- Parallax scrolling via Image layers
|
|
91
|
+
- Animated and multiple Tileset support
|
|
92
|
+
- Tileset transparency settings
|
|
93
|
+
- Layers alpha and tinting settings
|
|
94
|
+
- Rectangle, Ellipse, Polygon and Polyline objects support
|
|
95
|
+
- Tiled Objects with custom properties
|
|
96
|
+
- Flipped & rotated Tiles
|
|
97
|
+
- Dynamic Layer and Object/Group ordering
|
|
98
|
+
- Dynamic Entity loading
|
|
99
|
+
- Shape based Tile collision support
|
|
100
|
+
|
|
101
|
+
Assets
|
|
102
|
+
- Asynchronous asset loading with progress tracking
|
|
103
|
+
- A fully customizable preloader
|
|
104
|
+
- Support for images, JSON, TMX/TSX, audio, video, binary and fonts
|
|
105
|
+
|
|
106
|
+
Core
|
|
107
|
+
- A state manager (to easily manage loading, menu, options, in-game state)
|
|
108
|
+
- Tween effects with multiple easing functions (Quadratic, Cubic, Elastic, Bounce, etc.) and Bezier/Catmull-Rom interpolation
|
|
109
|
+
- Transition effects
|
|
110
|
+
- Pooling support for object recycling
|
|
111
|
+
- Basic Particle System
|
|
112
|
+
- EventEmitter based event system
|
|
113
|
+
- Persistent data storage (save/load via localStorage)
|
|
114
|
+
- Plugin system for extending engine capabilities
|
|
115
|
+
|
|
116
|
+
Tools integration
|
|
117
|
+
-------------------------------------------------------------------------------
|
|
118
|
+
melonJS is supporting the below tools and frameworks natively or through our official plugin(s) :
|
|
119
|
+
|
|
120
|
+
[](http://free-tex-packer.com)
|
|
121
|
+
[](https://www.codeandweb.com/texturepacker)
|
|
122
|
+
[](https://www.codeandweb.com/physicseditor)
|
|
123
|
+
[](https://renderhjs.net/shoebox/)
|
|
124
|
+
[](https://www.mapeditor.org)
|
|
125
|
+
[](https://cordova.apache.org)
|
|
126
|
+
[](http://esotericsoftware.com)
|
|
127
|
+
[](https://www.aseprite.org)
|
|
128
|
+
|
|
129
|
+
Tools integration and usage with melonJS is documented in our [Wiki](https://github.com/melonjs/melonJS/wiki#third-party-tools-usage).
|
|
130
|
+
|
|
131
|
+
Getting Started
|
|
132
|
+
-------------------------------------------------------------------------------
|
|
133
|
+
|
|
134
|
+
The fastest way to create a new game:
|
|
135
|
+
|
|
136
|
+
npm create melonjs my-game
|
|
137
|
+
cd my-game
|
|
138
|
+
npm install
|
|
139
|
+
npm run dev
|
|
140
|
+
|
|
141
|
+
This scaffolds a ready-to-run project with TypeScript, Vite, and the debug plugin. It also works with plain JavaScript — just rename `.ts` files to `.js`.
|
|
142
|
+
|
|
143
|
+
You can also start from the [boilerplate](https://github.com/melonjs/typescript-boilerplate) directly, or follow the step-by-step [Platformer Tutorial](https://melonjs.org/tutorial/).
|
|
144
|
+
|
|
145
|
+
For more details, check the wiki [Details & Usage](https://github.com/melonjs/melonJS/wiki#details--usage) guide.
|
|
146
|
+
|
|
147
|
+
Examples
|
|
148
|
+
-------------------------------------------------------------------------------
|
|
149
|
+
|
|
150
|
+
* [Platformer](https://melonjs.github.io/melonJS/examples/#/platformer) ([source](https://github.com/melonjs/melonJS/tree/master/packages/examples/src/examples/platformer))
|
|
151
|
+
* [Isometric RPG](https://melonjs.github.io/melonJS/examples/#/isometric-rpg) ([source](https://github.com/melonjs/melonJS/tree/master/packages/examples/src/examples/isometricRpg))
|
|
152
|
+
* [SVG Shapes](https://melonjs.github.io/melonJS/examples/#/svg-shapes) ([source](https://github.com/melonjs/melonJS/tree/master/packages/examples/src/examples/svgShapes))
|
|
153
|
+
* [Graphics](https://melonjs.github.io/melonJS/examples/#/graphics) ([source](https://github.com/melonjs/melonJS/tree/master/packages/examples/src/examples/graphics))
|
|
154
|
+
* [Hello World](https://melonjs.github.io/melonJS/examples/#/hello-world) ([source](https://github.com/melonjs/melonJS/tree/master/packages/examples/src/examples/helloWorld))
|
|
155
|
+
* [Whac-A-Mole](https://melonjs.github.io/melonJS/examples/#/whac-a-mole) ([source](https://github.com/melonjs/melonJS/tree/master/packages/examples/src/examples/whac-a-mole))
|
|
156
|
+
* [Compressed Textures](https://melonjs.github.io/melonJS/examples/#/compressed-textures) ([source](https://github.com/melonjs/melonJS/tree/master/packages/examples/src/examples/compressedTextures))
|
|
157
|
+
* [Spine](https://melonjs.github.io/melonJS/examples/#/spine) ([source](https://github.com/melonjs/melonJS/tree/master/packages/examples/src/examples/spine))
|
|
158
|
+
|
|
159
|
+
Browse all examples [here](https://melonjs.github.io/melonJS/examples/)
|
|
160
|
+
|
|
161
|
+
-------------------------------------------------------------------------------
|
|
162
|
+
|
|
163
|
+
### Basic Hello World Example
|
|
164
|
+
|
|
165
|
+
```JavaScript
|
|
166
|
+
import * as me from "https://cdn.jsdelivr.net/npm/melonjs/+esm";
|
|
167
|
+
|
|
168
|
+
me.device.onReady(function () {
|
|
169
|
+
// initialize the display canvas once the device/browser is ready
|
|
170
|
+
if (!me.video.init(1218, 562, {parent : "screen", scale : "auto"})) {
|
|
171
|
+
alert("Your browser does not support HTML5 canvas.");
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
// set a gray background color
|
|
176
|
+
me.game.world.backgroundColor.parseCSS("#202020");
|
|
177
|
+
|
|
178
|
+
// add a font text display object
|
|
179
|
+
me.game.world.addChild(new me.Text(609, 281, {
|
|
180
|
+
font: "Arial",
|
|
181
|
+
size: 160,
|
|
182
|
+
fillStyle: "#FFFFFF",
|
|
183
|
+
textBaseline : "middle",
|
|
184
|
+
textAlign : "center",
|
|
185
|
+
text : "Hello World !"
|
|
186
|
+
}));
|
|
187
|
+
});
|
|
188
|
+
```
|
|
189
|
+
> Simple hello world using melonJS 2
|
|
190
|
+
|
|
191
|
+
Documentation
|
|
192
|
+
-------------------------------------------------------------------------------
|
|
193
|
+
|
|
194
|
+
* [Online API](https://melonjs.github.io/melonJS/)
|
|
195
|
+
|
|
196
|
+
Plugins
|
|
197
|
+
-------------------------------------------------------------------------------
|
|
198
|
+
melonJS provides a plugin system allowing to extend the engine capabilities.
|
|
199
|
+
|
|
200
|
+
Here is the list of official plugins maintained by the melonJS team:
|
|
201
|
+
- [debug-plugin](https://github.com/melonjs/melonJS/tree/master/packages/debug-plugin) - a debug panel for inspecting game objects
|
|
202
|
+
- [tiled-inflate-plugin](https://github.com/melonjs/melonJS/tree/master/packages/tiled-inflate-plugin) - enable loading and parsing of zlib, gzip and zstd compressed [Tiled](https://www.mapeditor.org/) maps
|
|
203
|
+
- [spine-plugin](https://github.com/melonjs/melonJS/tree/master/packages/spine-plugin) - [Spine](http://esotericsoftware.com) runtime integration to render Spine skeletal animations
|
|
204
|
+
|
|
205
|
+
If you wish to develop your own plugin, we also provide a [plugin template](https://github.com/melonjs/plugin-template) to help you get started.
|
|
206
|
+
|
|
207
|
+
Installation
|
|
208
|
+
-------------------------------------------------------------------------------
|
|
209
|
+
|
|
210
|
+
melonJS is distributed as a tree-shakeable ES6 module with TypeScript declarations included.
|
|
211
|
+
|
|
212
|
+
Install via [npm](https://www.npmjs.com/package/melonjs) :
|
|
213
|
+
|
|
214
|
+
npm install melonjs
|
|
215
|
+
|
|
216
|
+
Then import it in your project :
|
|
217
|
+
|
|
218
|
+
```JavaScript
|
|
219
|
+
import * as me from 'melonjs';
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
Or use it directly via [jsDelivr](https://www.jsdelivr.com/package/npm/melonjs) CDN :
|
|
223
|
+
|
|
224
|
+
```html
|
|
225
|
+
<!-- load the ES6 module bundle of melonJS v18.x -->
|
|
226
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/melonjs@18/+esm"></script>
|
|
227
|
+
<!-- omit the version completely to get the latest one -->
|
|
228
|
+
<!-- you should NOT use this in production -->
|
|
229
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/melonjs/+esm"></script>
|
|
230
|
+
```
|
|
231
|
+
> Note: the debug plugin is available separately as [`@melonjs/debug-plugin`](https://www.npmjs.com/package/@melonjs/debug-plugin)
|
|
232
|
+
|
|
233
|
+
Community
|
|
234
|
+
-------------------------------------------------------------------------------
|
|
235
|
+
Join us and get help or share your projects :
|
|
236
|
+
|
|
237
|
+
- [Discord](https://discord.gg/aur7JMk)
|
|
238
|
+
- [Wiki](https://github.com/melonjs/melonJS/wiki)
|
|
239
|
+
- [FAQ](https://github.com/melonjs/melonJS/wiki/FAQ)
|
|
240
|
+
|
|
241
|
+
Contributing
|
|
242
|
+
-------------------------------------------------------------------------------
|
|
243
|
+
We welcome contributions! Please read our [Contributing Guide](CONTRIBUTING.md) before submitting changes or new features.
|
|
244
|
+
|
|
245
|
+
<a href = "https://github.com/melonjs/melonJS/graphs/contributors">
|
|
246
|
+
<img src = "https://contrib.rocks/image?repo=melonJS/melonjs"/>
|
|
247
|
+
</a>
|
|
248
|
+
|
|
249
|
+
Sponsors
|
|
250
|
+
-------------------------------------------------------------------------------
|
|
251
|
+
Support the development of melonJS by [becoming a sponsor](https://github.com/sponsors/melonjs). Get your logo in our README with a link to your site or become a backer and get your name in the [BACKERS](BACKERS.md) list. Any level of support is really appreciated and goes a long way !
|
|
252
|
+
|
|
253
|
+
[](https://www.melongaming.com)
|
|
254
|
+
|
|
255
|
+
[](https://www.altbyte.com)
|
package/build/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* melonJS Game Engine - 18.2.
|
|
2
|
+
* melonJS Game Engine - 18.2.2
|
|
3
3
|
* http://www.melonjs.org
|
|
4
4
|
* melonjs is licensed under the MIT License.
|
|
5
5
|
* http://www.opensource.org/licenses/mit-license
|
|
@@ -28200,7 +28200,7 @@ __export(plugin_exports, {
|
|
|
28200
28200
|
});
|
|
28201
28201
|
|
|
28202
28202
|
// src/version.ts
|
|
28203
|
-
var version = "18.2.
|
|
28203
|
+
var version = "18.2.2";
|
|
28204
28204
|
|
|
28205
28205
|
// src/plugin/plugin.ts
|
|
28206
28206
|
var cache = {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "melonjs",
|
|
3
|
-
"version": "18.2.
|
|
3
|
+
"version": "18.2.2",
|
|
4
4
|
"description": "melonJS Game Engine",
|
|
5
5
|
"homepage": "http://www.melonjs.org/",
|
|
6
6
|
"type": "module",
|
|
@@ -79,12 +79,12 @@
|
|
|
79
79
|
"build:watch": "tsx scripts/build.js watch",
|
|
80
80
|
"lint": "eslint src tests",
|
|
81
81
|
"build": "pnpm lint && tsx scripts/build.js && pnpm types",
|
|
82
|
-
"dist": "pnpm clean && pnpm lint && pnpm vitest run && pnpm build && pnpm doc",
|
|
82
|
+
"dist": "pnpm clean && pnpm lint && pnpm vitest run && pnpm build && pnpm doc && cp ../../README.md .",
|
|
83
83
|
"doc": "typedoc src/index.js --tsconfig tsconfig.build.json --readme DOC_README.md --hideGenerator --name 'melonJS' --navigation.includeCategories true --categorizeByGroup false",
|
|
84
84
|
"doc:watch": "typedoc src/index.js --tsconfig tsconfig.build.json --readme DOC_README.md --hideGenerator --name 'melonJS' --navigation.includeCategories true --categorizeByGroup false --watch --skipErrorChecking --preserveWatchOutput --logLevel Error",
|
|
85
85
|
"serve": "serve docs",
|
|
86
86
|
"prepublishOnly": "pnpm dist",
|
|
87
|
-
"clean": "tsx scripts/clean.
|
|
87
|
+
"clean": "tsx scripts/clean.ts",
|
|
88
88
|
"types": "tsc --project tsconfig.build.json",
|
|
89
89
|
"test:types": "tsc"
|
|
90
90
|
}
|