melonjs 18.2.1 → 18.3.0
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 +254 -0
- package/build/application/application.d.ts +85 -13
- package/build/application/application.d.ts.map +1 -1
- package/build/application/defaultApplicationSettings.d.ts +1 -0
- package/build/application/defaultApplicationSettings.d.ts.map +1 -1
- package/build/application/settings.d.ts +20 -1
- package/build/application/settings.d.ts.map +1 -1
- package/build/camera/camera2d.d.ts +9 -9
- package/build/camera/camera2d.d.ts.map +1 -1
- package/build/geometries/path2d.d.ts.map +1 -1
- package/build/index.d.ts +82 -92
- package/build/index.d.ts.map +1 -1
- package/build/index.js +12447 -11605
- package/build/index.js.map +4 -4
- package/build/input/gamepad.d.ts.map +1 -1
- package/build/input/keyboard.d.ts.map +1 -1
- package/build/input/pointer.d.ts.map +1 -1
- package/build/input/pointerevent.d.ts +6 -0
- package/build/input/pointerevent.d.ts.map +1 -1
- package/build/level/level.d.ts +2 -2
- package/build/level/level.d.ts.map +1 -1
- package/build/level/tiled/TMXGroup.d.ts +1 -1
- package/build/level/tiled/TMXLayer.d.ts +4 -4
- package/build/level/tiled/TMXLayer.d.ts.map +1 -1
- package/build/level/tiled/TMXObject.d.ts +1 -1
- package/build/level/tiled/TMXObjectFactory.d.ts +98 -0
- package/build/level/tiled/TMXObjectFactory.d.ts.map +1 -0
- package/build/level/tiled/TMXTileMap.d.ts +7 -3
- package/build/level/tiled/TMXTileMap.d.ts.map +1 -1
- package/build/level/tiled/TMXTileset.d.ts.map +1 -1
- package/build/level/tiled/TMXUtils.d.ts +22 -0
- package/build/level/tiled/TMXUtils.d.ts.map +1 -1
- package/build/level/tiled/factories/shape.d.ts +9 -0
- package/build/level/tiled/factories/shape.d.ts.map +1 -0
- package/build/level/tiled/factories/text.d.ts +8 -0
- package/build/level/tiled/factories/text.d.ts.map +1 -0
- package/build/level/tiled/factories/tile.d.ts +8 -0
- package/build/level/tiled/factories/tile.d.ts.map +1 -0
- package/build/level/tiled/renderer/TMXHexagonalRenderer.d.ts +1 -1
- package/build/level/tiled/renderer/TMXIsometricRenderer.d.ts +1 -1
- package/build/loader/loadingscreen.d.ts +1 -1
- package/build/loader/loadingscreen.d.ts.map +1 -1
- package/build/loader/parsers/fetchdata.d.ts.map +1 -1
- package/build/loader/parsers/fontface.d.ts +2 -2
- package/build/loader/parsers/tmx.d.ts +0 -1
- package/build/loader/parsers/tmx.d.ts.map +1 -1
- package/build/loader/parsers/video.d.ts.map +1 -1
- package/build/particles/emitter.d.ts +2 -2
- package/build/physics/bounds.d.ts +1 -1
- package/build/physics/collision.d.ts +1 -1
- package/build/physics/detector.d.ts +1 -1
- package/build/physics/quadtree.d.ts.map +1 -1
- package/build/physics/world.d.ts +3 -3
- package/build/physics/world.d.ts.map +1 -1
- package/build/plugin/plugin.d.ts +3 -3
- package/build/renderable/container.d.ts +11 -3
- package/build/renderable/container.d.ts.map +1 -1
- package/build/renderable/draggable.d.ts.map +1 -1
- package/build/renderable/dragndrop.d.ts.map +1 -1
- package/build/renderable/imagelayer.d.ts +1 -4
- package/build/renderable/imagelayer.d.ts.map +1 -1
- package/build/renderable/renderable.d.ts +3 -3
- package/build/renderable/sprite.d.ts +1 -1
- package/build/renderable/sprite.d.ts.map +1 -1
- package/build/renderable/text/bitmaptext.d.ts +1 -1
- package/build/renderable/text/bitmaptext.d.ts.map +1 -1
- package/build/renderable/text/bitmaptextdata.d.ts +2 -0
- package/build/renderable/text/bitmaptextdata.d.ts.map +1 -1
- package/build/renderable/text/text.d.ts +6 -1
- package/build/renderable/text/text.d.ts.map +1 -1
- package/build/renderable/text/textmetrics.d.ts +2 -0
- package/build/renderable/text/textmetrics.d.ts.map +1 -1
- package/build/renderable/ui/uibaseelement.d.ts +0 -1
- package/build/renderable/ui/uibaseelement.d.ts.map +1 -1
- package/build/state/stage.d.ts +6 -4
- package/build/state/stage.d.ts.map +1 -1
- package/build/state/state.d.ts +2 -2
- package/build/state/state.d.ts.map +1 -1
- package/build/system/bootstrap.d.ts +13 -0
- package/build/system/bootstrap.d.ts.map +1 -0
- package/build/system/device.d.ts +5 -4
- package/build/system/device.d.ts.map +1 -1
- package/build/system/event.d.ts +25 -5
- package/build/system/event.d.ts.map +1 -1
- package/build/system/eventEmitter.d.ts +4 -4
- package/build/system/eventEmitter.d.ts.map +1 -1
- package/build/system/legacy_pool.d.ts +32 -4
- package/build/system/legacy_pool.d.ts.map +1 -1
- package/build/system/platform.d.ts.map +1 -1
- package/build/system/timer.d.ts.map +1 -1
- package/build/tweens/tween.d.ts +4 -2
- package/build/tweens/tween.d.ts.map +1 -1
- package/build/utils/function.d.ts +1 -1
- package/build/utils/function.d.ts.map +1 -1
- package/build/video/canvas/canvas_renderer.d.ts +27 -6
- package/build/video/canvas/canvas_renderer.d.ts.map +1 -1
- package/build/video/gradient.d.ts +85 -0
- package/build/video/gradient.d.ts.map +1 -0
- package/build/video/renderer.d.ts +43 -0
- package/build/video/renderer.d.ts.map +1 -1
- package/build/video/renderstate.d.ts +18 -0
- package/build/video/renderstate.d.ts.map +1 -1
- package/build/video/rendertarget/canvasrendertarget.d.ts +3 -1
- package/build/video/rendertarget/canvasrendertarget.d.ts.map +1 -1
- package/build/video/texture/atlas.d.ts.map +1 -1
- package/build/video/texture/cache.d.ts +2 -1
- package/build/video/texture/cache.d.ts.map +1 -1
- package/build/video/utils/dash.d.ts +15 -0
- package/build/video/utils/dash.d.ts.map +1 -0
- package/build/video/utils/tessellation.d.ts +29 -0
- package/build/video/utils/tessellation.d.ts.map +1 -0
- package/build/video/video.d.ts +16 -2
- package/build/video/video.d.ts.map +1 -1
- package/build/video/webgl/utils/program.d.ts.map +1 -1
- package/build/video/webgl/webgl_renderer.d.ts +32 -6
- package/build/video/webgl/webgl_renderer.d.ts.map +1 -1
- package/package.json +11 -11
- package/build/system/eventEmitter.spec.d.ts +0 -2
- package/build/system/eventEmitter.spec.d.ts.map +0 -1
package/README.md
ADDED
|
@@ -0,0 +1,254 @@
|
|
|
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](https://github.com/melonjs/melonJS/wiki/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 { Application, Text } from "https://cdn.jsdelivr.net/npm/melonjs/+esm";
|
|
167
|
+
|
|
168
|
+
// create a new melonJS application
|
|
169
|
+
const app = new Application(1218, 562, {
|
|
170
|
+
parent: "screen",
|
|
171
|
+
scale: "auto",
|
|
172
|
+
backgroundColor: "#202020",
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
// set a gray background color
|
|
176
|
+
app.world.backgroundColor.parseCSS("#202020");
|
|
177
|
+
|
|
178
|
+
// add a font text display object
|
|
179
|
+
app.world.addChild(new 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
|
+
> Simple hello world using melonJS
|
|
189
|
+
|
|
190
|
+
Documentation
|
|
191
|
+
-------------------------------------------------------------------------------
|
|
192
|
+
|
|
193
|
+
* [Online API](https://melonjs.github.io/melonJS/)
|
|
194
|
+
|
|
195
|
+
Plugins
|
|
196
|
+
-------------------------------------------------------------------------------
|
|
197
|
+
melonJS provides a plugin system allowing to extend the engine capabilities.
|
|
198
|
+
|
|
199
|
+
Here is the list of official plugins maintained by the melonJS team:
|
|
200
|
+
- [debug-plugin](https://github.com/melonjs/melonJS/tree/master/packages/debug-plugin) - a debug panel for inspecting game objects
|
|
201
|
+
- [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
|
|
202
|
+
- [spine-plugin](https://github.com/melonjs/melonJS/tree/master/packages/spine-plugin) - [Spine](http://esotericsoftware.com) runtime integration to render Spine skeletal animations
|
|
203
|
+
|
|
204
|
+
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.
|
|
205
|
+
|
|
206
|
+
Installation
|
|
207
|
+
-------------------------------------------------------------------------------
|
|
208
|
+
|
|
209
|
+
melonJS is distributed as a tree-shakeable ES6 module with TypeScript declarations included.
|
|
210
|
+
|
|
211
|
+
Install via [npm](https://www.npmjs.com/package/melonjs) :
|
|
212
|
+
|
|
213
|
+
npm install melonjs
|
|
214
|
+
|
|
215
|
+
Then import it in your project :
|
|
216
|
+
|
|
217
|
+
```JavaScript
|
|
218
|
+
import * as me from 'melonjs';
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
Or use it directly via [jsDelivr](https://www.jsdelivr.com/package/npm/melonjs) CDN :
|
|
222
|
+
|
|
223
|
+
```html
|
|
224
|
+
<!-- load the ES6 module bundle of melonJS v18.x -->
|
|
225
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/melonjs@18/+esm"></script>
|
|
226
|
+
<!-- omit the version completely to get the latest one -->
|
|
227
|
+
<!-- you should NOT use this in production -->
|
|
228
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/melonjs/+esm"></script>
|
|
229
|
+
```
|
|
230
|
+
> Note: the debug plugin is available separately as [`@melonjs/debug-plugin`](https://www.npmjs.com/package/@melonjs/debug-plugin)
|
|
231
|
+
|
|
232
|
+
Community
|
|
233
|
+
-------------------------------------------------------------------------------
|
|
234
|
+
Join us and get help or share your projects :
|
|
235
|
+
|
|
236
|
+
- [Discord](https://discord.gg/aur7JMk)
|
|
237
|
+
- [Wiki](https://github.com/melonjs/melonJS/wiki)
|
|
238
|
+
- [FAQ](https://github.com/melonjs/melonJS/wiki/FAQ)
|
|
239
|
+
|
|
240
|
+
Contributing
|
|
241
|
+
-------------------------------------------------------------------------------
|
|
242
|
+
We welcome contributions! Please read our [Contributing Guide](CONTRIBUTING.md) before submitting changes or new features.
|
|
243
|
+
|
|
244
|
+
<a href = "https://github.com/melonjs/melonJS/graphs/contributors">
|
|
245
|
+
<img src = "https://contrib.rocks/image?repo=melonJS/melonjs"/>
|
|
246
|
+
</a>
|
|
247
|
+
|
|
248
|
+
Sponsors
|
|
249
|
+
-------------------------------------------------------------------------------
|
|
250
|
+
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 !
|
|
251
|
+
|
|
252
|
+
[](https://www.melongaming.com)
|
|
253
|
+
|
|
254
|
+
[](https://www.altbyte.com)
|
|
@@ -1,11 +1,34 @@
|
|
|
1
1
|
import type Camera2d from "./../camera/camera2d.ts";
|
|
2
2
|
import World from "../physics/world.js";
|
|
3
3
|
import type Renderer from "./../video/renderer.js";
|
|
4
|
-
import type { ApplicationSettings } from "./settings.ts";
|
|
4
|
+
import type { ApplicationSettings, ResolvedApplicationSettings } from "./settings.ts";
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* The Application class is the main entry point for creating a melonJS game.
|
|
7
|
+
* It initializes the renderer, creates the game world and viewport, registers DOM event
|
|
8
|
+
* listeners (resize, orientation, scroll), and starts the game loop.
|
|
9
|
+
*
|
|
10
|
+
* The Application instance provides access to the core game systems:
|
|
11
|
+
* - {@link Application#renderer renderer} — the active Canvas or WebGL renderer
|
|
12
|
+
* - {@link Application#world world} — the root container for all game objects
|
|
13
|
+
* - {@link Application#viewport viewport} — the default camera / viewport
|
|
14
|
+
*
|
|
15
|
+
* The app instance is automatically passed to {@link Stage#onResetEvent} and
|
|
16
|
+
* {@link Stage#onDestroyEvent}, and is accessible from any renderable via
|
|
17
|
+
* {@link Renderable#parentApp parentApp}.
|
|
7
18
|
* @category Application
|
|
8
|
-
* @
|
|
19
|
+
* @example
|
|
20
|
+
* // create a new melonJS Application
|
|
21
|
+
* const app = new Application(800, 600, {
|
|
22
|
+
* parent: "screen",
|
|
23
|
+
* scaleMethod: "flex-width",
|
|
24
|
+
* renderer: 2, // AUTO
|
|
25
|
+
* });
|
|
26
|
+
*
|
|
27
|
+
* // add objects to the world
|
|
28
|
+
* app.world.addChild(new Sprite(0, 0, { image: "player" }));
|
|
29
|
+
*
|
|
30
|
+
* // access the viewport
|
|
31
|
+
* app.viewport.follow(player, app.viewport.AXIS.BOTH);
|
|
9
32
|
*/
|
|
10
33
|
export default class Application {
|
|
11
34
|
/**
|
|
@@ -46,20 +69,13 @@ export default class Application {
|
|
|
46
69
|
/**
|
|
47
70
|
* the given settings used when creating this application
|
|
48
71
|
*/
|
|
49
|
-
settings:
|
|
50
|
-
width: number;
|
|
51
|
-
height: number;
|
|
52
|
-
autoScale: boolean;
|
|
53
|
-
zoomX: number;
|
|
54
|
-
zoomY: number;
|
|
55
|
-
scale: number | "auto";
|
|
56
|
-
};
|
|
72
|
+
settings: ResolvedApplicationSettings;
|
|
57
73
|
/**
|
|
58
74
|
* Specify whether to pause this app when losing focus
|
|
59
75
|
* @default true
|
|
60
76
|
* @example
|
|
61
77
|
* // keep the default game instance running even when losing focus
|
|
62
|
-
*
|
|
78
|
+
* app.pauseOnBlur = false;
|
|
63
79
|
*/
|
|
64
80
|
pauseOnBlur: boolean;
|
|
65
81
|
/**
|
|
@@ -80,14 +96,26 @@ export default class Application {
|
|
|
80
96
|
accumulatorMax: number;
|
|
81
97
|
accumulatorUpdateDelta: number;
|
|
82
98
|
stepSize: number;
|
|
99
|
+
private _onResize?;
|
|
100
|
+
private _onOrientationChange?;
|
|
101
|
+
private _onScroll?;
|
|
83
102
|
updateDelta: number;
|
|
84
103
|
lastUpdateStart: number | null;
|
|
85
104
|
updateAverageDelta: number;
|
|
86
105
|
/**
|
|
106
|
+
* Create and initialize a new melonJS Application.
|
|
107
|
+
* This is the recommended way to start a melonJS game.
|
|
87
108
|
* @param width - The width of the canvas viewport
|
|
88
109
|
* @param height - The height of the canvas viewport
|
|
89
110
|
* @param options - The optional parameters for the application and default renderer
|
|
90
111
|
* @throws {Error} Will throw an exception if it fails to instantiate a renderer
|
|
112
|
+
* @example
|
|
113
|
+
* const app = new Application(1024, 768, {
|
|
114
|
+
* parent: "game-container",
|
|
115
|
+
* scale: "auto",
|
|
116
|
+
* scaleMethod: "fit",
|
|
117
|
+
* renderer: 2, // AUTO
|
|
118
|
+
* });
|
|
91
119
|
*/
|
|
92
120
|
constructor(width: number, height: number, options?: Partial<ApplicationSettings> & {
|
|
93
121
|
legacy?: boolean;
|
|
@@ -116,7 +144,7 @@ export default class Application {
|
|
|
116
144
|
* Additionally the level id will also be passed to the called function.
|
|
117
145
|
* @example
|
|
118
146
|
* // call myFunction () everytime a level is loaded
|
|
119
|
-
*
|
|
147
|
+
* app.onLevelLoaded = this.myFunction.bind(this);
|
|
120
148
|
*/
|
|
121
149
|
onLevelLoaded(): void;
|
|
122
150
|
/**
|
|
@@ -130,10 +158,42 @@ export default class Application {
|
|
|
130
158
|
* @returns the parent HTML element
|
|
131
159
|
*/
|
|
132
160
|
getParentElement(): HTMLElement;
|
|
161
|
+
/**
|
|
162
|
+
* The HTML canvas element associated with this application's renderer.
|
|
163
|
+
* @example
|
|
164
|
+
* // access the canvas DOM element
|
|
165
|
+
* const canvas = app.canvas;
|
|
166
|
+
*/
|
|
167
|
+
get canvas(): HTMLCanvasElement;
|
|
168
|
+
/**
|
|
169
|
+
* Trigger a manual resize of the application canvas to fit the parent element.
|
|
170
|
+
* This is automatically called on window resize/orientation change, but can
|
|
171
|
+
* be called manually if the parent element size changes programmatically.
|
|
172
|
+
* @example
|
|
173
|
+
* // force a resize after changing the parent element dimensions
|
|
174
|
+
* app.resize();
|
|
175
|
+
*/
|
|
176
|
+
resize(): void;
|
|
177
|
+
/**
|
|
178
|
+
* Destroy this application instance and release all associated resources.
|
|
179
|
+
* Removes the canvas from the DOM, destroys the world, and unregisters
|
|
180
|
+
* all event listeners.
|
|
181
|
+
* @param removeCanvas - if true, the canvas element is removed from the DOM (default: true)
|
|
182
|
+
* @example
|
|
183
|
+
* // clean up when done
|
|
184
|
+
* app.destroy();
|
|
185
|
+
*/
|
|
186
|
+
destroy(removeCanvas?: boolean): void;
|
|
133
187
|
/**
|
|
134
188
|
* force the redraw (not update) of all objects
|
|
135
189
|
*/
|
|
136
190
|
repaint(): void;
|
|
191
|
+
/** @ignore */
|
|
192
|
+
_tick(time: number): void;
|
|
193
|
+
/** @ignore */
|
|
194
|
+
_onBlur(): void;
|
|
195
|
+
/** @ignore */
|
|
196
|
+
_onFocus(): void;
|
|
137
197
|
/**
|
|
138
198
|
* update all objects related to this game active scene/stage
|
|
139
199
|
* @param time - current timestamp as provided by the RAF callback
|
|
@@ -144,4 +204,16 @@ export default class Application {
|
|
|
144
204
|
*/
|
|
145
205
|
draw(): void;
|
|
146
206
|
}
|
|
207
|
+
/**
|
|
208
|
+
* The default game application instance.
|
|
209
|
+
* Set via {@link setDefaultGame} during engine initialization.
|
|
210
|
+
* When using {@link Application} directly, prefer using the app instance
|
|
211
|
+
* (e.g. from {@link Stage#onResetEvent} or {@link Renderable#parentApp}).
|
|
212
|
+
*/
|
|
213
|
+
export declare let game: Application;
|
|
214
|
+
/**
|
|
215
|
+
* Set the default game application instance.
|
|
216
|
+
* @ignore
|
|
217
|
+
*/
|
|
218
|
+
export declare function setDefaultGame(app: Application): void;
|
|
147
219
|
//# sourceMappingURL=application.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"application.d.ts","sourceRoot":"","sources":["../../src/application/application.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AAEpD,OAAO,KAAK,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"application.d.ts","sourceRoot":"","sources":["../../src/application/application.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defaultApplicationSettings.d.ts","sourceRoot":"","sources":["../../src/application/defaultApplicationSettings.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,0BAA0B
|
|
1
|
+
{"version":3,"file":"defaultApplicationSettings.d.ts","sourceRoot":"","sources":["../../src/application/defaultApplicationSettings.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;CAiBC,CAAC"}
|
|
@@ -70,6 +70,13 @@ export type ApplicationSettings = {
|
|
|
70
70
|
subPixel: boolean;
|
|
71
71
|
verbose: boolean;
|
|
72
72
|
legacy: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* the CSS background color of the parent element that holds the canvas.
|
|
75
|
+
* Applied during initialization to prevent a white flash before the first render.
|
|
76
|
+
* Set to `"transparent"` to disable, or any valid CSS color value.
|
|
77
|
+
* @default "#000000"
|
|
78
|
+
*/
|
|
79
|
+
backgroundColor: string;
|
|
73
80
|
/**
|
|
74
81
|
* a custom batcher class (WebGL only)
|
|
75
82
|
* @deprecated since 18.1.0 — use `batcher` instead
|
|
@@ -80,11 +87,23 @@ export type ApplicationSettings = {
|
|
|
80
87
|
*/
|
|
81
88
|
batcher?: (new (renderer: any) => Batcher) | undefined;
|
|
82
89
|
} & ({
|
|
83
|
-
parent: HTMLElement;
|
|
90
|
+
parent: string | HTMLElement;
|
|
84
91
|
canvas?: never;
|
|
85
92
|
} | {
|
|
86
93
|
parent?: never;
|
|
87
94
|
canvas: HTMLCanvasElement;
|
|
88
95
|
});
|
|
96
|
+
/**
|
|
97
|
+
* Resolved application settings after init() has processed the input.
|
|
98
|
+
* Includes computed properties not present in the user-facing settings.
|
|
99
|
+
*/
|
|
100
|
+
export type ResolvedApplicationSettings = ApplicationSettings & {
|
|
101
|
+
width: number;
|
|
102
|
+
height: number;
|
|
103
|
+
autoScale: boolean;
|
|
104
|
+
zoomX: number;
|
|
105
|
+
zoomY: number;
|
|
106
|
+
scale: number;
|
|
107
|
+
};
|
|
89
108
|
export {};
|
|
90
109
|
//# sourceMappingURL=settings.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/application/settings.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,KAAK,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE3E,KAAK,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;AAEtC,KAAK,eAAe,GAAG,SAAS,GAAG,WAAW,CAAC;AAE/C,KAAK,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAExC,MAAM,MAAM,mBAAmB,GAAG;IACjC;;;OAGG;IACH,QAAQ,EAAE,YAAY,GAAG,QAAQ,CAAC;IAElC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC;IAEzB;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IAEzB;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,SAAS,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,eAAe,EAAE,eAAe,CAAC;IAEjC;;;OAGG;IACH,WAAW,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,MAAM,EAAE,WAAW,CAAC;IACpB,4BAA4B,EAAE,OAAO,CAAC;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,QAAQ,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,QAAQ,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;CACvD,GAAG,CACD;IAEA,MAAM,EAAE,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/application/settings.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,KAAK,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE3E,KAAK,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;AAEtC,KAAK,eAAe,GAAG,SAAS,GAAG,WAAW,CAAC;AAE/C,KAAK,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAExC,MAAM,MAAM,mBAAmB,GAAG;IACjC;;;OAGG;IACH,QAAQ,EAAE,YAAY,GAAG,QAAQ,CAAC;IAElC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC;IAEzB;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IAEzB;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,SAAS,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,eAAe,EAAE,eAAe,CAAC;IAEjC;;;OAGG;IACH,WAAW,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,MAAM,EAAE,WAAW,CAAC;IACpB,4BAA4B,EAAE,OAAO,CAAC;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,QAAQ,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,QAAQ,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;CACvD,GAAG,CACD;IAEA,MAAM,EAAE,MAAM,GAAG,WAAW,CAAC;IAC7B,MAAM,CAAC,EAAE,KAAK,CAAC;CACd,GACD;IACA,MAAM,CAAC,EAAE,KAAK,CAAC;IAEf,MAAM,EAAE,iBAAiB,CAAC;CACzB,CACH,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,2BAA2B,GAAG,mBAAmB,GAAG;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACd,CAAC"}
|
|
@@ -37,7 +37,7 @@ interface FadeState {
|
|
|
37
37
|
* // create a minimap camera in the top-right corner showing the full level
|
|
38
38
|
* const minimap = new Camera2d(0, 0, 180, 100);
|
|
39
39
|
* minimap.name = "minimap";
|
|
40
|
-
* minimap.screenX =
|
|
40
|
+
* minimap.screenX = app.viewport.width - 190;
|
|
41
41
|
* minimap.screenY = 10;
|
|
42
42
|
* minimap.autoResize = false;
|
|
43
43
|
* minimap.setBounds(0, 0, levelWidth, levelHeight);
|
|
@@ -230,11 +230,11 @@ export default class Camera2d extends Renderable {
|
|
|
230
230
|
* set the camera to follow the specified renderable. <br>
|
|
231
231
|
* (this will put the camera center around the given target)
|
|
232
232
|
* @param target - renderable or position vector to follow
|
|
233
|
-
* @param [axis=
|
|
233
|
+
* @param [axis=app.viewport.AXIS.BOTH] - Which axis to follow (see {@link Camera2d.AXIS})
|
|
234
234
|
* @param [damping=1] - default damping value
|
|
235
235
|
* @example
|
|
236
236
|
* // set the camera to follow this renderable on both axis, and enable damping
|
|
237
|
-
*
|
|
237
|
+
* app.viewport.follow(this, app.viewport.AXIS.BOTH, 0.1);
|
|
238
238
|
*/
|
|
239
239
|
follow(target: Renderable | Vector2d | Vector3d, axis?: number, damping?: number): void;
|
|
240
240
|
/**
|
|
@@ -248,7 +248,7 @@ export default class Camera2d extends Renderable {
|
|
|
248
248
|
* @param y - vertical offset
|
|
249
249
|
* @example
|
|
250
250
|
* // Move the camera up by four pixels
|
|
251
|
-
*
|
|
251
|
+
* app.viewport.move(0, -4);
|
|
252
252
|
*/
|
|
253
253
|
move(x: number, y: number): void;
|
|
254
254
|
/**
|
|
@@ -267,12 +267,12 @@ export default class Camera2d extends Renderable {
|
|
|
267
267
|
* @param intensity - maximum offset that the screen can be moved
|
|
268
268
|
* while shaking
|
|
269
269
|
* @param duration - expressed in milliseconds
|
|
270
|
-
* @param [axis=
|
|
270
|
+
* @param [axis=app.viewport.AXIS.BOTH] - specify on which axis to apply the shake effect (see {@link Camera2d.AXIS})
|
|
271
271
|
* @param [onComplete] - callback once shaking effect is over
|
|
272
272
|
* @param [force] - if true this will override the current effect
|
|
273
273
|
* @example
|
|
274
274
|
* // shake it baby !
|
|
275
|
-
*
|
|
275
|
+
* app.viewport.shake(10, 500, app.viewport.AXIS.BOTH);
|
|
276
276
|
*/
|
|
277
277
|
shake(intensity: number, duration: number, axis?: number, onComplete?: () => void, force?: boolean): void;
|
|
278
278
|
/**
|
|
@@ -283,10 +283,10 @@ export default class Camera2d extends Renderable {
|
|
|
283
283
|
* @param [onComplete] - callback once effect is over
|
|
284
284
|
* @example
|
|
285
285
|
* // fade the camera to white upon dying, reload the level, and then fade out back
|
|
286
|
-
*
|
|
286
|
+
* app.viewport.fadeIn("#fff", 150, function() {
|
|
287
287
|
* me.audio.play("die", false);
|
|
288
288
|
* me.level.reload();
|
|
289
|
-
*
|
|
289
|
+
* app.viewport.fadeOut("#fff", 150);
|
|
290
290
|
* });
|
|
291
291
|
*/
|
|
292
292
|
fadeOut(color: Color | string, duration?: number, onComplete?: () => void): void;
|
|
@@ -298,7 +298,7 @@ export default class Camera2d extends Renderable {
|
|
|
298
298
|
* @param [onComplete] - callback once effect is over
|
|
299
299
|
* @example
|
|
300
300
|
* // flash the camera to white for 75ms
|
|
301
|
-
*
|
|
301
|
+
* app.viewport.fadeIn("#FFFFFF", 75);
|
|
302
302
|
*/
|
|
303
303
|
fadeIn(color: Color | string, duration?: number, onComplete?: () => void): void;
|
|
304
304
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"camera2d.d.ts","sourceRoot":"","sources":["../../src/camera/camera2d.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"camera2d.d.ts","sourceRoot":"","sources":["../../src/camera/camera2d.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"path2d.d.ts","sourceRoot":"","sources":["../../src/geometries/path2d.js"],"names":[],"mappings":";AAKA;;;GAGG;AAEH;;;;;;;;;;;GAWG;AACH;IACC,0BA0BC;IAzBA;;;OAGG;IACH,QAFU,KAAK,EAAE,CAED;IAEhB;;;;OAIG;IACH,eAHU,MAAM,CAGM;IAGtB,gBAAkB;IAGlB,kBAAiC;IAGjC,iBAAoB;IAOrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,sBALW,MAAM,QA+IhB;IAED;;OAEG;IACH,kBAQC;IAED;;;;OAIG;IACH,kBASC;IAED;;;OAGG;IACH,mBAFa,KAAK,EAAE,CAkCnB;IAED;;;;OAIG;IACH,UAHW,MAAM,KACN,MAAM,QAKhB;IAED;;;;OAIG;IACH,UAHW,MAAM,KACN,MAAM,QAmBhB;IAED;;;;;;;;;OASG;IACH,OAPW,MAAM,KACN,MAAM,UACN,MAAM,cACN,MAAM,YACN,MAAM,kBACN,OAAO,QA2DjB;IAED;;;;;;;OAOG;IACH,UANW,MAAM,MACN,MAAM,MACN,MAAM,MACN,MAAM,UACN,MAAM,QAyDhB;IAED;;;;;;;;;;;OAWG;IACH,WATW,MAAM,KACN,MAAM,WACN,MAAM,WACN,MAAM,YACN,MAAM,cACN,MAAM,YACN,MAAM,kBACN,OAAO,QA4EjB;IAED;;;;;;OAMG;IACH,sBALW,MAAM,OACN,MAAM,KACN,MAAM,KACN,MAAM,
|
|
1
|
+
{"version":3,"file":"path2d.d.ts","sourceRoot":"","sources":["../../src/geometries/path2d.js"],"names":[],"mappings":";AAKA;;;GAGG;AAEH;;;;;;;;;;;GAWG;AACH;IACC,0BA0BC;IAzBA;;;OAGG;IACH,QAFU,KAAK,EAAE,CAED;IAEhB;;;;OAIG;IACH,eAHU,MAAM,CAGM;IAGtB,gBAAkB;IAGlB,kBAAiC;IAGjC,iBAAoB;IAOrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,sBALW,MAAM,QA+IhB;IAED;;OAEG;IACH,kBAQC;IAED;;;;OAIG;IACH,kBASC;IAED;;;OAGG;IACH,mBAFa,KAAK,EAAE,CAkCnB;IAED;;;;OAIG;IACH,UAHW,MAAM,KACN,MAAM,QAKhB;IAED;;;;OAIG;IACH,UAHW,MAAM,KACN,MAAM,QAmBhB;IAED;;;;;;;;;OASG;IACH,OAPW,MAAM,KACN,MAAM,UACN,MAAM,cACN,MAAM,YACN,MAAM,kBACN,OAAO,QA2DjB;IAED;;;;;;;OAOG;IACH,UANW,MAAM,MACN,MAAM,MACN,MAAM,MACN,MAAM,UACN,MAAM,QAyDhB;IAED;;;;;;;;;;;OAWG;IACH,WATW,MAAM,KACN,MAAM,WACN,MAAM,WACN,MAAM,YACN,MAAM,cACN,MAAM,YACN,MAAM,kBACN,OAAO,QA4EjB;IAED;;;;;;OAMG;IACH,sBALW,MAAM,OACN,MAAM,KACN,MAAM,KACN,MAAM,QA8BhB;IAED;;;;;;;;OAQG;IACH,oBAPW,MAAM,QACN,MAAM,QACN,MAAM,QACN,MAAM,KACN,MAAM,KACN,MAAM,QA0ChB;IAED;;;;;;OAMG;IACH,QALW,MAAM,KACN,MAAM,SACN,MAAM,UACN,MAAM,QAgBhB;IAED;;;;;;;OAOG;IACH,aANW,MAAM,KACN,MAAM,SACN,MAAM,UACN,MAAM,UACN,MAAM,QAoBhB;CACD;2BAnqBuB,YAAY"}
|