melonjs 20.10.1 → 20.12.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 +4 -5
- 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 +54 -3
- package/build/application/settings.d.ts.map +1 -1
- package/build/audio/audio.d.ts +14 -4
- package/build/audio/audio.d.ts.map +1 -1
- package/build/audio/backend/sound.d.ts.map +1 -1
- package/build/audio/playback.d.ts.map +1 -1
- package/build/audio/spatial.d.ts +13 -2
- package/build/audio/spatial.d.ts.map +1 -1
- package/build/audio/types.d.ts +44 -4
- package/build/audio/types.d.ts.map +1 -1
- package/build/camera/camera2d.d.ts +48 -4
- package/build/camera/camera2d.d.ts.map +1 -1
- package/build/camera/camera3d.d.ts.map +1 -1
- package/build/camera/effects/pixelate_transition_effect.d.ts +67 -0
- package/build/camera/effects/pixelate_transition_effect.d.ts.map +1 -0
- package/build/camera/effects/shake_effect.d.ts +3 -1
- package/build/camera/effects/shake_effect.d.ts.map +1 -1
- package/build/geometries/ellipse.d.ts +8 -4
- package/build/geometries/ellipse.d.ts.map +1 -1
- package/build/geometries/line.d.ts +2 -2
- package/build/geometries/line.d.ts.map +1 -1
- package/build/geometries/polygon.d.ts +3 -3
- package/build/geometries/polygon.d.ts.map +1 -1
- package/build/geometries/rectangle.d.ts +2 -2
- package/build/geometries/rectangle.d.ts.map +1 -1
- package/build/geometries/roundrect.d.ts +2 -2
- package/build/geometries/roundrect.d.ts.map +1 -1
- package/build/index.d.ts +5 -2
- package/build/index.d.ts.map +1 -1
- package/build/index.js +9944 -6234
- package/build/index.js.map +4 -4
- package/build/input/gamepad.d.ts.map +1 -1
- package/build/input/pointerevent.d.ts.map +1 -1
- package/build/lang/console.d.ts +16 -1
- package/build/lang/console.d.ts.map +1 -1
- package/build/level/tiled/TMXLayer.d.ts +1 -1
- package/build/level/tiled/TMXLayer.d.ts.map +1 -1
- package/build/level/tiled/TMXObject.d.ts +196 -1
- package/build/level/tiled/TMXObject.d.ts.map +1 -1
- package/build/level/tiled/TMXObjectFactory.d.ts +18 -5
- package/build/level/tiled/TMXObjectFactory.d.ts.map +1 -1
- package/build/level/tiled/TMXTile.d.ts.map +1 -1
- package/build/level/tiled/TMXTileMap.d.ts.map +1 -1
- package/build/level/tiled/TMXTileset.d.ts +17 -1
- package/build/level/tiled/TMXTileset.d.ts.map +1 -1
- package/build/level/tiled/TMXUtils.d.ts.map +1 -1
- package/build/level/tiled/factories/shape.d.ts.map +1 -1
- package/build/level/tiled/renderer/TMXIsometricRenderer.d.ts.map +1 -1
- package/build/level/tiled/renderer/TMXObliqueRenderer.d.ts.map +1 -1
- package/build/level/tiled/renderer/TMXOrthogonalRenderer.d.ts.map +1 -1
- package/build/level/tiled/renderer/TMXRenderer.d.ts.map +1 -1
- package/build/lighting/light2d.d.ts +30 -0
- package/build/lighting/light2d.d.ts.map +1 -1
- package/build/loader/loadingscreen.d.ts.map +1 -1
- package/build/math/matrix2d.d.ts +3 -2
- package/build/math/matrix2d.d.ts.map +1 -1
- package/build/math/matrix3d.d.ts +4 -1
- package/build/math/matrix3d.d.ts.map +1 -1
- package/build/particles/emitter.d.ts.map +1 -1
- package/build/particles/particle.d.ts.map +1 -1
- package/build/particles/settings.d.ts +25 -0
- package/build/particles/settings.d.ts.map +1 -1
- package/build/physics/bounds.d.ts +5 -5
- package/build/physics/bounds.d.ts.map +1 -1
- package/build/physics/builtin/body.d.ts +1 -0
- package/build/physics/builtin/body.d.ts.map +1 -1
- package/build/physics/builtin/builtin-adapter.d.ts.map +1 -1
- package/build/physics/builtin/detector.d.ts.map +1 -1
- package/build/physics/builtin/raycast.d.ts.map +1 -1
- package/build/physics/builtin/sat.d.ts +40 -1
- package/build/physics/builtin/sat.d.ts.map +1 -1
- package/build/renderable/animation.d.ts +16 -2
- package/build/renderable/animation.d.ts.map +1 -1
- package/build/renderable/colorlayer.d.ts.map +1 -1
- package/build/renderable/container.d.ts +22 -2
- package/build/renderable/container.d.ts.map +1 -1
- package/build/renderable/entity/entity.d.ts.map +1 -1
- package/build/renderable/frameAnimation.d.ts.map +1 -1
- package/build/renderable/imagelayer.d.ts.map +1 -1
- package/build/renderable/instanced_mesh.d.ts.map +1 -1
- package/build/renderable/mesh.d.ts.map +1 -1
- package/build/renderable/renderable.d.ts +69 -1
- package/build/renderable/renderable.d.ts.map +1 -1
- package/build/renderable/sprite.d.ts +23 -7
- package/build/renderable/sprite.d.ts.map +1 -1
- package/build/renderable/sprite3d.d.ts +5 -3
- package/build/renderable/sprite3d.d.ts.map +1 -1
- package/build/renderable/text/text.d.ts.map +1 -1
- package/build/renderable/trail3d.d.ts.map +1 -1
- package/build/renderable/ui/uipanel.d.ts +3 -3
- package/build/renderable/ui/uipanel.d.ts.map +1 -1
- package/build/state/stage.d.ts +12 -4
- package/build/state/stage.d.ts.map +1 -1
- package/build/state/state.d.ts +31 -6
- package/build/state/state.d.ts.map +1 -1
- package/build/system/legacy_pool.d.ts.map +1 -1
- package/build/system/timer.d.ts +1 -0
- package/build/system/timer.d.ts.map +1 -1
- package/build/utils/fetchdata.d.ts.map +1 -1
- package/build/video/buffer/vertex.d.ts.map +1 -1
- package/build/video/canvas/canvas_renderer.d.ts +8 -7
- package/build/video/canvas/canvas_renderer.d.ts.map +1 -1
- package/build/video/effects/ambientlight.d.ts +2 -0
- package/build/video/effects/ambientlight.d.ts.map +1 -0
- package/build/video/effects/bloom.d.ts +8 -9
- package/build/video/effects/bloom.d.ts.map +1 -1
- package/build/video/effects/blur.d.ts +3 -2
- package/build/video/effects/blur.d.ts.map +1 -1
- package/build/video/effects/chromaticAberration.d.ts +3 -2
- package/build/video/effects/chromaticAberration.d.ts.map +1 -1
- package/build/video/effects/dissolve.d.ts +5 -2
- package/build/video/effects/dissolve.d.ts.map +1 -1
- package/build/video/effects/dropShadow.d.ts +15 -3
- package/build/video/effects/dropShadow.d.ts.map +1 -1
- package/build/video/effects/flash.d.ts +6 -2
- package/build/video/effects/flash.d.ts.map +1 -1
- package/build/video/effects/frame.d.ts +48 -0
- package/build/video/effects/frame.d.ts.map +1 -0
- package/build/video/effects/glow.d.ts +8 -4
- package/build/video/effects/glow.d.ts.map +1 -1
- package/build/video/effects/glsl_realization.d.ts.map +1 -1
- package/build/video/effects/hologram.d.ts +5 -2
- package/build/video/effects/hologram.d.ts.map +1 -1
- package/build/video/effects/local_space.d.ts +19 -0
- package/build/video/effects/local_space.d.ts.map +1 -0
- package/build/video/effects/mesh_splice.d.ts.map +1 -1
- package/build/video/effects/outline.d.ts +8 -4
- package/build/video/effects/outline.d.ts.map +1 -1
- package/build/video/effects/pixelate.d.ts +3 -2
- package/build/video/effects/pixelate.d.ts.map +1 -1
- package/build/video/effects/radialGradient.d.ts +13 -16
- package/build/video/effects/radialGradient.d.ts.map +1 -1
- package/build/video/effects/rgba.d.ts +2 -0
- package/build/video/effects/rgba.d.ts.map +1 -0
- package/build/video/effects/scanline.d.ts.map +1 -1
- package/build/video/effects/shadereffect.d.ts +13 -0
- package/build/video/effects/shadereffect.d.ts.map +1 -1
- package/build/video/effects/shine.d.ts +10 -2
- package/build/video/effects/shine.d.ts.map +1 -1
- package/build/video/effects/squish.d.ts.map +1 -1
- package/build/video/effects/sway.d.ts +69 -0
- package/build/video/effects/sway.d.ts.map +1 -0
- package/build/video/effects/tintPulse.d.ts +5 -2
- package/build/video/effects/tintPulse.d.ts.map +1 -1
- package/build/video/effects/vignette.d.ts.map +1 -1
- package/build/video/effects/wave.d.ts +21 -2
- package/build/video/effects/wave.d.ts.map +1 -1
- package/build/video/effects/wgsl/parse.d.ts.map +1 -1
- package/build/video/effects/wgsl/scaffold.d.ts.map +1 -1
- package/build/video/effects/wgsl_realization.d.ts.map +1 -1
- package/build/video/gpu/frame.d.ts +2 -0
- package/build/video/gpu/frame.d.ts.map +1 -0
- package/build/video/renderer.d.ts +37 -12
- package/build/video/renderer.d.ts.map +1 -1
- package/build/video/rendertarget/canvasrendertarget.d.ts +14 -4
- package/build/video/rendertarget/canvasrendertarget.d.ts.map +1 -1
- package/build/video/rendertarget/rendertarget.d.ts +12 -16
- package/build/video/rendertarget/rendertarget.d.ts.map +1 -1
- package/build/video/rendertarget/webgpurendertarget.d.ts +1 -0
- package/build/video/rendertarget/webgpurendertarget.d.ts.map +1 -1
- package/build/video/texture/atlas.d.ts +47 -28
- package/build/video/texture/atlas.d.ts.map +1 -1
- package/build/video/texture/cache.d.ts.map +1 -1
- package/build/video/utils/pixel_snap.d.ts +44 -0
- package/build/video/utils/pixel_snap.d.ts.map +1 -0
- package/build/video/webgl/batchers/batcher.d.ts.map +1 -1
- package/build/video/webgl/batchers/lit_quad_batcher.d.ts.map +1 -1
- package/build/video/webgl/batchers/material_batcher.d.ts.map +1 -1
- package/build/video/webgl/batchers/mesh_batcher.d.ts.map +1 -1
- package/build/video/webgl/batchers/quad_batcher.d.ts +2 -1
- package/build/video/webgl/batchers/quad_batcher.d.ts.map +1 -1
- package/build/video/webgl/glshader.d.ts.map +1 -1
- package/build/video/webgl/renderers/tmxlayer/orthogonal.d.ts.map +1 -1
- package/build/video/webgl/shaders/frameclamp.d.ts +2 -0
- package/build/video/webgl/shaders/frameclamp.d.ts.map +1 -0
- package/build/video/webgl/shaders/multitexture-lit.d.ts.map +1 -1
- package/build/video/webgl/shaders/multitexture.d.ts.map +1 -1
- package/build/video/webgl/utils/uniforms.d.ts.map +1 -1
- package/build/video/webgl/webgl_renderer.d.ts +0 -21
- package/build/video/webgl/webgl_renderer.d.ts.map +1 -1
- package/build/video/webgpu/batchers/lit_quad_batcher.d.ts +2 -1
- package/build/video/webgpu/batchers/lit_quad_batcher.d.ts.map +1 -1
- package/build/video/webgpu/batchers/mesh_batcher.d.ts +0 -1
- package/build/video/webgpu/batchers/mesh_batcher.d.ts.map +1 -1
- package/build/video/webgpu/batchers/quad_batcher.d.ts +2 -2
- package/build/video/webgpu/batchers/quad_batcher.d.ts.map +1 -1
- package/build/video/webgpu/buffer/uniformring.d.ts.map +1 -1
- package/build/video/webgpu/effect_binding.d.ts.map +1 -1
- package/build/video/webgpu/renderers/tmxlayer/orthogonal.d.ts.map +1 -1
- package/build/video/webgpu/webgpu_renderer.d.ts +3 -4
- package/build/video/webgpu/webgpu_renderer.d.ts.map +1 -1
- package/package.json +21 -19
- package/skills/AGENTS.md +2 -1
- package/skills/melonjs/SKILL.md +1 -0
- package/skills/melonjs-audio/SKILL.md +47 -5
- package/skills/melonjs-camera-and-drawing/SKILL.md +63 -1
- package/skills/melonjs-display-and-scaling/SKILL.md +117 -7
- package/skills/melonjs-effects-and-shaders/SKILL.md +136 -19
- package/skills/melonjs-input/SKILL.md +24 -2
- package/skills/melonjs-lighting/SKILL.md +43 -8
- package/skills/melonjs-loading-assets/SKILL.md +4 -3
- package/skills/melonjs-math/SKILL.md +21 -1
- package/skills/melonjs-particles-and-trails/SKILL.md +36 -2
- package/skills/melonjs-performance/SKILL.md +4 -0
- package/skills/melonjs-plugins/SKILL.md +20 -1
- package/skills/melonjs-renderables/SKILL.md +46 -6
- package/skills/melonjs-renderer-backends/SKILL.md +2 -2
- package/skills/melonjs-scenes-and-state/SKILL.md +17 -2
- package/skills/melonjs-sprites-and-animation/SKILL.md +19 -3
- package/skills/melonjs-tilemaps/SKILL.md +126 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"webgpu_renderer.d.ts","sourceRoot":"","sources":["../../../src/video/webgpu/webgpu_renderer.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"webgpu_renderer.d.ts","sourceRoot":"","sources":["../../../src/video/webgpu/webgpu_renderer.js"],"names":[],"mappings":"AA+EA;;;;;;;;;;;;;;;GAeG;AACH,iDANW,OAAO,qBACP,OAAO,GACL;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAC,CAYvD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH;IACC;;OAEG;IACH,qBAFW,mBAAmB,EA8W7B;IAtWA;;;;OAIG;IACH,kBAHU,UAAU,GAAC,SAAS,CAGN;IAExB;;;;OAIG;IACH,iBAHU,SAAS,GAAC,SAAS,CAGN;IAEvB;;;OAGG;IACH,SAFU,gBAAgB,CAEc;IAExC;;;;;OAKG;IACH,0BAHU,MAAM,GAAC,SAAS,CAGM;IAEhC;;;;;;;;;;;;;OAaG;IACH,cAJU,MAAM,GAAC,SAAS,CAIG;IAyC7B;mBACe;IACf,iEAAsC;IAGtC;;;OAGG;IACH,oBAAmC;IAInC,2BAAyD;IAKzD;mBACe;IACf,qBAA2B;IAG3B;mBACe;IACf;;;QAEE;IACF;mBACe;IACf,iBAAmB;IAEnB;mBACe;IACf,iBAA4B;IAE5B;mBACe;IACf,uBAAuB;IAEvB;;;;;OAKG;IACH,UAJU,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAIJ;IAEzB;;;;OAIG;IACH,oBAA0B;IAG1B;mBACe;IACf,0CAAyB;IACzB;mBACe;IACf,sCAAuB;IAEvB;mBACe;IACf,qCAAsB;IACtB;mBACe;IACf,sCAAuB;IACvB;mBACe;IACf,wCAAwB;IAGxB;mBACe;IACf,yCAA0B;IAC1B;mBACe;IACf,wCAAsB;IAGtB;mBACe;IACf,+CAA+B;IAE/B;;;;;;;;;;;;;;;;;;OAkBG;IACH,8CAAqC;IACrC;;;OAGG;IACH,2BAAsC;IACtC;;;OAGG;IACH,qDAAqC;IACrC;;;OAGG;IACH,4BAA+B;IAC/B;;;OAGG;IACH,2BAA2B;IAC3B;;;OAGG;IACH,gDAAgC;IAGhC;mBACe;IACf,2BAA8B;IAC9B;mBACe;IACf,uBAA6B;IAC7B;mBACe;IACf,6BAAgC;IAKhC;mBACe;IACf,2BAA8B;IAI9B;mBACe;IACf,yBAA4B;IAG5B;mBACe;IACf;;;;;aAAwB;IAGxB;mBACe;IACf,gCAAwB;IAExB;mBACe;IACf,oBAA+B;IAG/B;mBACe;IACf,+BAAuB;IAEvB;mBACe;IACf,6BAA+B;IAE/B;;;;;;;OAOG;IACH,kBAJU,MAAM,EAAE,CAIQ;IAC1B;mBACe;IACf,wBAAwB;IAExB;mBACe;IACf,6CAA8B;IAG9B;mBACe;IACf,gBAAgB;IAIhB;mBACe;IACf,uBAAyB;IAIzB;mBACe;IACf,8BAA8B;IAC9B;mBACe;IACf,wCAA4B;IAC5B;mBACe;IACf,kBAAwB;IAMxB;mBACe;IACf,0BAA0B;IAC1B;mBACe;IACf,oCAA4B;IAC5B;mBACe;IACf,qCAAyB;IACzB;mBACe;IACf,sBAA4B;IAC5B;mBACe;IACf,qBAA2B;IAC3B;mBACe;IACf;;;aAA+B;IAC/B;mBACe;IACf,uBAA0B;IAE1B;mBACe;IACf,4BAA8B;IAE9B;mBACe;IACf,oBAAyB;IAMzB,wBAEC;IAID,2BAUC;IAmFA,8BAAyC;IAqF3C;;;;;;;;;OASG;IACH,2BALW,MAAM,WACN,MAAM,8BA6BhB;IAED;;;;;;;OAOG;IACH,8BALW,MAAM,UACN,MAAM,QAsBhB;IA+DD;;;;;;OAMG;IACH,iBAJW,MAAM,QAsHhB;IAED;;;;;;OAMG;IACH,iBAJa,CAAC,MAAM,EAAE,MAAM,CAAC,CAW5B;IAED;;;;;;;;;;OAUG;IACH,wBANW,OAAO,uCAAuC,EAAE,OAAO,GAAC,IAAI,YAEpE;QAA0B,KAAK;KAC/B,QAsBF;IAED;;;;;;;;OAQG;IACH,uBAJW,UAAU,QAUpB;IAED;;;;;;;;;OASG;IACH,qBAJW,SAAS,QAMnB;IAED;;;;;;OAMG;IACH,sBAJa,cAAc,CAqB1B;IAHC,mDAAoD;IAKtD;;;;;;;;;;;;;OAaG;IACH,wBANW,MAAM,KACN,MAAM,SACN,MAAM,UACN,MAAM,QAehB;IAED;;;;;OAKG;IACH,sBA0BC;IAeD;;;;;;;;;;OAUG;IACH,gBAJa,OAAO,2BAA2B,EAAE,kBAAkB,GAAC,IAAI,CAMvE;IA4CD;;;OAGG;IACH,mCAmHC;IAED;;;;;OAKG;IACH,mBAJa,gBAAgB,CA8B5B;IAED;;;;;;;OAOG;IACH,sBALW,YAAY,GACV,MAAM,CAalB;IAoID;;;;;;;;OAQG;IACH,iBAJa,KAAK,CAAC,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,CAAC,CASvC;IAED;;;;;OAKG;IACH,YAJa,OAAO,CAUnB;IAED;;;;;;OAMG;IACH,sBALW,MAAM,GACJ,MAAM,GAAC,SAAS,CAQ5B;IAED;;;;;;;;OAQG;IACH,wBANW,MAAM,UACN,YAAY,SACZ,KAAK,CAAC,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,CAAC,QA8BrC;IAED;;;;;;;;;;OAUG;IACH,oBANW,MAAM,UACN,MAAM,SACN,KAAK,CAAC,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,CAAC,QAUrC;IAED;;;;;;;;OAQG;IACH,uBAPW,MAAM,UACN,MAAM,SACN,KAAK,CAAC,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,CAAC,OAC3B,OAAO,QAkDjB;IAED;;;;;;;;;;;OAWG;IACH,kBALW,OAAO,SACP,KAAK,CAAC,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,CAAC,QA8BrC;IAoDD;;;;;;;;;;;;;;;OAeG;IACH,yBALW,MAAM,SACN,KAAK,CAAC,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,CAAC,QAgDrC;IAkRD;;;;;;;;;;;;;;;OAeG;IACH,4BAVW,OAAO,uCAAuC,EAAE,OAAO,KACvD,MAAM,KACN,MAAM,SACN,MAAM,UACN,MAAM,UACN,YAAY,cACZ,OAAO,UACP,MAAM,QA6BhB;IAED;;;;;;;;OAQG;IACH,iCAJW,MAAM,QAQhB;IAED;;;;;OAKG;IACH,4BAIC;IAED;;;;;;;OAOG;IACH,sBALa,OAAO,CAyDnB;IAED;;;;;OAKG;IACH,4BAgCC;IAED;;;;;;;OAOG;IACH,0CAUC;IAmHD;;;;;OAKG;IACH,qBAuCC;IAED;;;;;OAKG;IACH,+BAOC;IAED;;;;OAIG;IACH,qBAiBC;IAED;;;;;;;;;;;;OAYG;IACH,mBAHW,KAAK,GAAC,MAAM,WACZ,OAAO,QA0CjB;IAED;;;;;;;OAOG;IACH,aALW,MAAM,KACN,MAAM,SACN,MAAM,UACN,MAAM,QAShB;IAED;;;;;;;;OAQG;IACH,8BAJW,MAAM,QACN,MAAM,QAiBhB;IAqBD;;;;;;;OAOG;IACH,oBAJW,OAAO,QAajB;IAED;;;;;OAKG;IACH,oBAJW,aAAa,SACb,MAAM,aACN,OAAO,QAkBjB;IAED;;;;;;;OAOG;IACH,kBAHW,MAAM,GACJ,aAAa,CAsCzB;IAED;;;;;;;;;;;;;;OAcG;IACH;;;;;;;;OAQG;IACH,0BANW,aAAa,gBACb,QAAQ,QACR,MAAM,QAchB;IAED,4CAuLC;IAED;;;;OAIG;IACH,yBAFW,MAAM,QAUhB;IAqCD;;;;;;;;;OASG;IACH,aAPW,QAAQ,GAAC,QAAQ,GAAC,MAAM,MACxB,MAAM,MACN,MAAM,MACN,MAAM,MACN,MAAM,MACN,MAAM,QAYhB;IAED;;;;;;;;OAQG;IACH,gBAPW,QAAQ,GAAC,QAAQ,GAAC,MAAM,MACxB,MAAM,MACN,MAAM,MACN,MAAM,MACN,MAAM,MACN,MAAM,QAKhB;IAqDD;;;OAGG;IACH,kBAFa,MAAM,CAIlB;IAmBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAwCG;IACH,oBAJW,MAAM,uBACN,OAAO,GACL,MAAM,CAkClB;IAmBD;;;;;OAKG;IACH,yBAOC;IAED;;;;;;;;;;;OAWG;IACH,iBAVW,gBAAgB,GAAC,iBAAiB,GAAC,gBAAgB,GAAC,WAAW,GAAC,eAAe,GAAC,UAAU,MAC1F,MAAM,MACN,MAAM,OACN,MAAM,OACN,MAAM,OACN,MAAM,OACN,MAAM,OACN,MAAM,OACN,MAAM,QA0EhB;IAED;;;;;;;;;OASG;IACH,iDAHa,MAAM,CA0ElB;IAHC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAuC;IAKzC;;;;;;;;;OASG;IACH,kCANW,GAAG,CAAC,OAAO,CAAC,GAAC,KAAK,CAAC,OAAO,CAAC,WAC3B,KAAK,eACL,MAAM,eACN,MAAM,QAmBhB;IAdC,0FAAuD;IAgBzD;;;;;;OAMG;IACH,0BAHW,OAAO,QAyBjB;IApBC,8CAAiD;IAsBnD;;;;;OAKG;IACH,yFA4BC;IA1BC,+CAAkD;IA4BpD;;;;;;;;;;;;OAYG;IACH,sBAJa,YAAY,CAqBxB;IAPC,0CAIC;IAKH;;;;;;OAMG;IACH,iBAJa,YAAY,CAwBxB;IAPC,qCAIC;IAKH;;;;;;;OAOG;IACH,qBANW,YAAY,KACZ,MAAM,KACN,MAAM,SACN,MAAM,UACN,MAAM,QAqBhB;IAED;;;;;OAKG;IACH,qBAJW,gBAAgB,GAAC,eAAe,GAAC,gBAAgB,GAAC,iBAAiB,GAAC,WAAW,GAAC,eAAe,GAAC,UAAU,WAC1G,MAAM,GACJ,YAAY,CAUxB;IA4DD;;;;;;;;OAQG;IACH,yBAKC;IAED;;;;;;;;;;OAUG;IACH,mBAPW,MAAM,MACN,MAAM,MACN,MAAM,MACN,MAAM,QAsChB;IAsCE,mCAA2C;IA2F9C;;;;;;;;;;;;;;;OAeG;IACH,mEAgEC;IAED;;;;;;;;;OASG;IACH,aARW,MAAM,KACN,MAAM,UACN,MAAM,SACN,MAAM,OACN,MAAM,kBACN,OAAO,SACP,OAAO,QAoBjB;IAED;;;;;;;;OAQG;IACH,WAPW,MAAM,KACN,MAAM,UACN,MAAM,SACN,MAAM,OACN,MAAM,kBACN,OAAO,QA6CjB;IAgGD;;;;;;OAMG;IACH,iBALW,MAAM,UACN,MAAM,QACN,MAAM,QACN,MAAM,QAIhB;IAED;;;;OAIG;IACH,oBAHW,OAAO,SACP,OAAO,QA6DjB;IAED;;;OAGG;IACH,kBAFW,OAAO,QAiEjB;IAgGD;;;;;;;;OAQG;IACH,mBAPW,MAAM,KACN,MAAM,SACN,MAAM,UACN,MAAM,UACN,MAAM,SACN,OAAO,QAoBjB;IAED;;;;;;;OAOG;IACH,iBANW,MAAM,KACN,MAAM,SACN,MAAM,UACN,MAAM,UACN,MAAM,QA4FhB;IAED;;;;OAIG;IACH,eAHW,MAAM,KACN,MAAM,QAIhB;IAED;;;;OAIG;IACH,aAHW,MAAM,KACN,MAAM,QAIhB;IAED;;OAEG;IACH,kBAEC;IAED;;;;OAIG;IACH,UAHW,MAAM,KACN,MAAM,QAIhB;IAED;;;;OAIG;IACH,UAHW,MAAM,KACN,MAAM,QAIhB;IAED;;;;;;OAMG;IACH,sBALW,MAAM,OACN,MAAM,KACN,MAAM,KACN,MAAM,QAIhB;IAED;;;;;;;;OAQG;IACH,oBAPW,MAAM,QACN,MAAM,QACN,MAAM,QACN,MAAM,KACN,MAAM,KACN,MAAM,QAIhB;IAED;;;;;;;OAOG;IACH,UANW,MAAM,MACN,MAAM,MACN,MAAM,MACN,MAAM,UACN,MAAM,QAIhB;IAED;;;;;;OAMG;IACH,QALW,MAAM,KACN,MAAM,SACN,MAAM,UACN,MAAM,QAIhB;IAED;;;;;;;OAOG;IACH,aANW,MAAM,KACN,MAAM,SACN,MAAM,UACN,MAAM,SACN,MAAM,QAIhB;IAED;;OAEG;IACH,kBAEC;IA6FD;;;;;;;;;;;;;;;;OAgBG;IACH,yBA8BC;IAED;;;;;;;;;;OAUG;IACH,4BAuCC;IApBA;;;;;OAKG;IACH,iCAAkE;IA4CnE;;;;;OAKG;IACH,+BA6CC;IAED;;;OAGG;IACH,cAFa,gBAAgB,CAI5B;CAoGD;qBArtJoB,gBAAgB;0CA2BK,oCAAoC;yBAvBrD,qBAAqB;yBA5BrB,wBAAwB;uBAC1B,yBAAyB;gCAiDU,qBAAqB;8BAHjD,mBAAmB;8BACnB,yBAAyB;+BAMxB,oBAAoB;+BA5BpB,uCAAuC;wBAP9C,2BAA2B;6BAMtB,uCAAuC;8BAwCvC,4BAA4B;oBApErC,2BAA2B;sBAEd,qBAAqB;0BA+C5B,8BAA8B;8BAe7B,wBAAwB;iCAxClB,8BAA8B;+BAHhC,4BAA4B;6BASjB,qBAAqB;6BAmCrC,6BAA6B;yCAJjB,+BAA+B"}
|
package/package.json
CHANGED
|
@@ -1,31 +1,33 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "melonjs",
|
|
3
|
-
"version": "20.
|
|
4
|
-
"description": "
|
|
5
|
-
"homepage": "
|
|
3
|
+
"version": "20.12.0",
|
|
4
|
+
"description": "A modern & fully featured HTML5 game engine (2D & 3D) for JavaScript/TypeScript, with WebGL/WebGPU rendering, built-in physics, Tiled map & glTF support and WebAudio.",
|
|
5
|
+
"homepage": "https://www.melonjs.org/",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"sideEffects": [
|
|
8
8
|
"./src/polyfill/**"
|
|
9
9
|
],
|
|
10
10
|
"keywords": [
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"javascript",
|
|
14
|
-
"
|
|
15
|
-
"es6",
|
|
16
|
-
"Canvas",
|
|
17
|
-
"WebGL",
|
|
18
|
-
"WebGL2",
|
|
19
|
-
"WebAudio",
|
|
11
|
+
"game-engine",
|
|
12
|
+
"html5-game-engine",
|
|
13
|
+
"javascript-game-engine",
|
|
14
|
+
"gamedev",
|
|
20
15
|
"game",
|
|
21
|
-
"
|
|
16
|
+
"2d",
|
|
17
|
+
"3d",
|
|
18
|
+
"html5",
|
|
19
|
+
"javascript",
|
|
20
|
+
"typescript",
|
|
21
|
+
"webgpu",
|
|
22
|
+
"webgl",
|
|
23
|
+
"webgl2",
|
|
24
|
+
"canvas",
|
|
25
|
+
"webaudio",
|
|
26
|
+
"physics",
|
|
22
27
|
"tiled",
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"electron",
|
|
27
|
-
"mobile",
|
|
28
|
-
"cordova"
|
|
28
|
+
"tilemap",
|
|
29
|
+
"gltf",
|
|
30
|
+
"glb"
|
|
29
31
|
],
|
|
30
32
|
"repository": {
|
|
31
33
|
"type": "git",
|
package/skills/AGENTS.md
CHANGED
|
@@ -64,4 +64,5 @@ Before hand-rolling: `ParticleEmitter`, `Trail`, `Tween`, the built-in
|
|
|
64
64
|
Companion packages cover the rest: `@melonjs/planck-adapter` and
|
|
65
65
|
`@melonjs/matter-adapter` (physics), `@melonjs/spine-plugin` (skeletal
|
|
66
66
|
animation), `@melonjs/tiled-inflate-plugin` (**required** for compressed Tiled
|
|
67
|
-
maps), `@melonjs/debug-plugin`, `@melonjs/
|
|
67
|
+
maps), `@melonjs/debug-plugin`, `@melonjs/gamepad-plugin` (touch controls
|
|
68
|
+
reported as a gamepad), `@melonjs/capacitor-plugin`.
|
package/skills/melonjs/SKILL.md
CHANGED
|
@@ -112,6 +112,7 @@ Tiled inflate plugin are *required* for their use cases, not merely convenient.
|
|
|
112
112
|
| [`@melonjs/tiled-inflate-plugin`](https://www.npmjs.com/package/@melonjs/tiled-inflate-plugin) | **Required** to load gzip-, zlib- or zstd-compressed Tiled maps. Without it, parsing such a map throws `No inflate function set`. |
|
|
113
113
|
| [`@melonjs/spine-plugin`](https://www.npmjs.com/package/@melonjs/spine-plugin) | Skeletal animation authored in Spine, as a melonJS renderable. |
|
|
114
114
|
| [`@melonjs/debug-plugin`](https://www.npmjs.com/package/@melonjs/debug-plugin) | An in-game debug panel — FPS, draw counts, collision-shape and bounds overlays. Register it after `app.init()`. |
|
|
115
|
+
| [`@melonjs/gamepad-plugin`](https://www.npmjs.com/package/@melonjs/gamepad-plugin) | On-screen touch controls for phones and tablets: sticks and buttons reported as a gamepad, so the game's `bindGamepad` bindings drive it. Use it rather than writing virtual controls. |
|
|
115
116
|
| [`@melonjs/capacitor-plugin`](https://www.npmjs.com/package/@melonjs/capacitor-plugin) | Wrapping a game as a native iOS/Android app: it bridges Capacitor's lifecycle — pause/resume, the hardware back button, orientation lock, splash screen. |
|
|
116
117
|
| [`create-melonjs`](https://www.npmjs.com/package/create-melonjs) | Scaffolding a new project — start here rather than assembling a build by hand. |
|
|
117
118
|
|
|
@@ -100,7 +100,27 @@ await loader.preload([{
|
|
|
100
100
|
audio.play("sfx", { sprite: "jump" });
|
|
101
101
|
```
|
|
102
102
|
|
|
103
|
-
|
|
103
|
+
### A loop with no gap
|
|
104
|
+
|
|
105
|
+
An MP3 encoder pads the end of its file. Chrome and Firefox trim the padding when
|
|
106
|
+
they decode it, Safari keeps it, so a looping MP3 has a short silence at every
|
|
107
|
+
loop there (27 ms on a 12 s clip at 22 kHz, measured). Declare a region of the
|
|
108
|
+
loop's exact length and loop on that: the voice never reaches the padding.
|
|
109
|
+
|
|
110
|
+
```js
|
|
111
|
+
await loader.preload([{
|
|
112
|
+
name: "ambience", type: "audio", src: "data/sfx/",
|
|
113
|
+
sprite: { loop: [0, 12000] },
|
|
114
|
+
}]);
|
|
115
|
+
audio.playTrack("ambience", { sprite: "loop", volume: 0.6 });
|
|
116
|
+
// or, as a plain clip: audio.play("ambience", { sprite: "loop", loop: true })
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
Ogg Vorbis carries no such padding.
|
|
120
|
+
|
|
121
|
+
The optional third element marks a region as looping: it loops unless `play()` is
|
|
122
|
+
told `loop: false` (before 20.11 it only looped when `loop: true` was passed as
|
|
123
|
+
well). `play()`'s second argument
|
|
104
124
|
takes either the original `loop` boolean or a `PlayOptions` object
|
|
105
125
|
(`sprite`, `loop`, `onend`, `volume`, plus the spatial `follow`, `at` and
|
|
106
126
|
`stopWithTarget`) — both forms work. Object fields win over the positional
|
|
@@ -265,7 +285,7 @@ alone; reach for `position()` (or `follow` / `at`) when distance falloff
|
|
|
265
285
|
matters.
|
|
266
286
|
|
|
267
287
|
**Spatial audio is WebAudio-only.** On a clip loaded with `stream: true` (or
|
|
268
|
-
`html5: true`) `stereo` / `position` / `orientation` return early and do
|
|
288
|
+
`html5: true`, or `preload: false`) `stereo` / `position` / `orientation` return early and do
|
|
269
289
|
nothing — which is exactly the case for the long music tracks people reach for
|
|
270
290
|
first. `follow` and `at` are equally inert on a streamed clip.
|
|
271
291
|
|
|
@@ -399,7 +419,7 @@ very next line.
|
|
|
399
419
|
mute: false,
|
|
400
420
|
loop: false,
|
|
401
421
|
autoplay: false,
|
|
402
|
-
preload: true, // or "metadata"
|
|
422
|
+
preload: true, // false: fetched on first play, then streamed; or "metadata"
|
|
403
423
|
format: "mp3", // explicit hint when the URL has no usable extension
|
|
404
424
|
stream: true, // long music: stream rather than decode into memory
|
|
405
425
|
on: { play() {}, end() {}, stop() {}, unlock() {} },
|
|
@@ -417,6 +437,25 @@ same switch under its backend name.) `on` accepts the full lifecycle set:
|
|
|
417
437
|
`play`, `pause`, `stop`, `end`, `fade`, `seek`, `rate`, `volume`, `mute`,
|
|
418
438
|
`unlock`.
|
|
419
439
|
|
|
440
|
+
**`preload: false` keeps a clip out of the preload.** Nothing is downloaded for
|
|
441
|
+
it until it is first played (`audio.play`, `audio.playTrack`, or `autoplay`).
|
|
442
|
+
That play fetches it and streams it, as `stream: true` does, so the sound starts
|
|
443
|
+
as soon as enough of the file has arrived, not once all of it has; a clip never
|
|
444
|
+
played is never downloaded. Use it for music a player may never reach (a boss
|
|
445
|
+
theme, the ending) to shorten the wait before the game starts.
|
|
446
|
+
|
|
447
|
+
- The loader reports such a clip done at once: `audio.state(name)` is
|
|
448
|
+
`"unloaded"` until its first play, then `"loading"`, then `"loaded"`.
|
|
449
|
+
- It starts with the short delay of a stream on its first play. Keep a sound
|
|
450
|
+
effect that must sound the instant it is triggered preloaded.
|
|
451
|
+
- Being streamed, it has the limits of `stream: true`: positional sound does
|
|
452
|
+
not apply to it, and it ignores `withCredentials` (see below).
|
|
453
|
+
- Before 20.12.0 such a clip was never fetched at all, and stayed silent.
|
|
454
|
+
|
|
455
|
+
`stream: true` alone still fetches the clip during the preload; combine it with
|
|
456
|
+
`preload: false` to defer that too. `preload: "metadata"` only matters for a
|
|
457
|
+
streamed clip: the preload fetches just enough to know its duration.
|
|
458
|
+
|
|
420
459
|
Outside a preload, `audio.load(asset, onload?, onerror?)` takes the same
|
|
421
460
|
descriptor and loads one clip at runtime — for a level's sounds fetched when
|
|
422
461
|
the level starts. The loader calls the same function, so the same rules apply.
|
|
@@ -427,7 +466,8 @@ Re-preloading a manifest that already contains a loaded clip is a no-op —
|
|
|
427
466
|
**Credentials use the same global switch as every other asset type** —
|
|
428
467
|
`loader.setOptions({ withCredentials: true })`, not an audio-specific option.
|
|
429
468
|
Buffered audio fetches through the shared loader path, so it honours it exactly
|
|
430
|
-
as an image or a JSON file does. A `stream: true
|
|
469
|
+
as an image or a JSON file does. A streamed clip (`stream: true`, or
|
|
470
|
+
`preload: false`) does not: it plays
|
|
431
471
|
through an `<audio>` element, which needs a `crossorigin` attribute rather than
|
|
432
472
|
fetch credentials. Preload a clip buffered if it sits behind a login.
|
|
433
473
|
|
|
@@ -455,7 +495,8 @@ either way — blank screen, empty console.
|
|
|
455
495
|
| music keeps playing after leaving a scene | used `play` instead of `playTrack`, or no `stopTrack` in teardown |
|
|
456
496
|
| two music tracks playing at once, and `stopTrack()` only silences one | melonJS before 20.9.0: `playTrack` did not stop the previous track, so the scene that started it had to `stopTrack()` on the way out |
|
|
457
497
|
| the music restarts when returning to a screen | `playTrack` with the track already playing restarts it; don't call it again if the bed should carry on |
|
|
458
|
-
| `stereo` / `position` do nothing | the clip was loaded with `stream: true` — spatial is WebAudio-only |
|
|
498
|
+
| `stereo` / `position` do nothing | the clip was loaded with `stream: true` or `preload: false` — spatial is WebAudio-only |
|
|
499
|
+
| a `preload: false` clip never plays, and `audio.state()` stays `"unloaded"` | melonJS before 20.12.0 never fetched such a clip; preload it, or update |
|
|
459
500
|
| one format works, another does not | that codec is not in the `audio.init()` list |
|
|
460
501
|
| audio behind a login fails, or the preload hangs | `loader.setOptions({ withCredentials: true })` — the same switch every asset type uses |
|
|
461
502
|
| a streamed clip ignores `withCredentials` | `stream: true` plays through an `<audio>` element; preload it buffered instead |
|
|
@@ -467,6 +508,7 @@ either way — blank screen, empty console.
|
|
|
467
508
|
| a looping sound outlives the entity that owns it | `follow` without `stopWithTarget: true` |
|
|
468
509
|
| a voice panned with `stereo()` loses its 3D placement, or the reverse | one panner node per voice and last writer wins — pick one per voice and stay with it |
|
|
469
510
|
| a reverb / compressor on the master gain does not affect the music | the music is `stream: true`, which bypasses the master gain — preload it buffered |
|
|
511
|
+
| a looping MP3 drops out for a moment at every loop, in Safari only | Safari keeps the encoder's padding at the end of the file: loop a sprite region of the clip's exact length (see "A loop with no gap") |
|
|
470
512
|
| sound effects keep playing after the window loses focus | `pauseOnBlur` and `stopOnBlur` are both off, so the engine is deliberately leaving the game running in the background |
|
|
471
513
|
|
|
472
514
|
## Related skills
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: melonjs-camera-and-drawing
|
|
3
|
-
description: "Use this skill for camera control and immediate-mode drawing in melonJS — following a target, viewport bounds, shake and fade, secondary cameras, and drawing shapes, lines and gradients inside a custom draw(). Covers world versus screen coordinate conversion, clipping and masking, baking with CanvasRenderTarget, and reading pixels back. Triggers on: Camera2d, viewport, follow, setBounds, shake, fadeIn, fadeOut, worldToLocal, localToWorld, colorMatrix, renderer.fill, renderer.stroke, Rect, Ellipse, Polygon, Line, Gradient, clipRect, mask, CanvasRenderTarget, NoiseTexture2d, lookAt, setBasis, toImageData, getImageData, toBlob, toDataURL, screenshot, read pixels."
|
|
3
|
+
description: "Use this skill for camera control and immediate-mode drawing in melonJS — following a target, viewport bounds, shake and fade, secondary cameras and what each one draws, and drawing shapes, lines and gradients inside a custom draw(). Covers world versus screen coordinate conversion, clipping and masking, baking with CanvasRenderTarget, and reading pixels back. Triggers on: Camera2d, viewport, follow, offset, look ahead, setBounds, minimap, second camera, split screen, cullMask, visibilityLayer, hide from a camera, shake, fadeIn, fadeOut, worldToLocal, localToWorld, colorMatrix, renderer.fill, renderer.stroke, Rect, Ellipse, Polygon, Line, Gradient, clipRect, mask, CanvasRenderTarget, NoiseTexture2d, lookAt, setBasis, toImageData, getImageData, toBlob, toDataURL, screenshot, read pixels."
|
|
4
4
|
license: MIT
|
|
5
5
|
---
|
|
6
6
|
|
|
@@ -24,6 +24,24 @@ frame-rate independent since 19.7. `AXIS.HORIZONTAL` / `AXIS.VERTICAL` /
|
|
|
24
24
|
|
|
25
25
|
Call it from the followed entity's `onActivateEvent`, using `this.parentApp`.
|
|
26
26
|
|
|
27
|
+
**To frame the target off centre, set `offset`; do not follow a helper
|
|
28
|
+
object.** It shifts the view without moving the camera, in world units, and is
|
|
29
|
+
applied after following and the bounds, so the view can show past them:
|
|
30
|
+
|
|
31
|
+
```js
|
|
32
|
+
app.viewport.follow(player, app.viewport.AXIS.BOTH, 0.1);
|
|
33
|
+
app.viewport.offset.set(0, -70); // look a little above the feet
|
|
34
|
+
|
|
35
|
+
// or ahead of where the player faces, eased (see math.damp below)
|
|
36
|
+
const ahead = facingLeft ? -80 : 80;
|
|
37
|
+
app.viewport.offset.x = math.damp(app.viewport.offset.x, ahead, 4, dt / 1000);
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Culling, tile layers, parallax `ImageLayer`s, lights and the pointer
|
|
41
|
+
(`localToWorld`, `worldToLocal`) all count it. `shake()` adds its jitter on top
|
|
42
|
+
and gives the value back when it ends, so setting it before or during a shake
|
|
43
|
+
is fine. `reset()` clears it.
|
|
44
|
+
|
|
27
45
|
**For anything that is NOT the camera, the same smoothing is `math.damp`.**
|
|
28
46
|
`follow()` is frame-rate independent for you; a value you smooth yourself is
|
|
29
47
|
not, and `lerp(current, target, alpha)` once per frame moves further on a slow
|
|
@@ -191,6 +209,37 @@ View state is per camera, not per scene: a `Camera3d` carries its own distance
|
|
|
191
209
|
fog (`setFog`), so a minimap or split-screen view fogs independently of the main
|
|
192
210
|
one — and a `Camera2d` never fogs. See `melonjs-3d`.
|
|
193
211
|
|
|
212
|
+
### What each camera draws: `visibilityLayer` and `cullMask`
|
|
213
|
+
|
|
214
|
+
Every camera draws the whole world. To keep something off one camera only, put
|
|
215
|
+
it on a layer that camera leaves out. A renderable's `visibilityLayer` is the
|
|
216
|
+
layers it is on, as bits (1, 2, 4...); a camera's `cullMask` is the layers it
|
|
217
|
+
draws. A camera draws a renderable only if the two share a bit:
|
|
218
|
+
|
|
219
|
+
```js
|
|
220
|
+
const PARTICLES = 2;
|
|
221
|
+
emitter.visibilityLayer = PARTICLES; // the particles go on layer 2
|
|
222
|
+
minimap.cullMask = ~PARTICLES; // the minimap draws every layer but 2
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
- By default every renderable is on layer 1 and every camera draws every layer
|
|
226
|
+
(`cullMask` is `-1`), so nothing changes until a game sets one.
|
|
227
|
+
- A container left out is left out with everything inside it, however deep:
|
|
228
|
+
set it on an emitter and none of its particles are drawn. The world itself
|
|
229
|
+
obeys it too, and so does what it contains: a child is drawn only if it and
|
|
230
|
+
every container above it share a bit with the camera.
|
|
231
|
+
- A renderable on layer `0` is drawn by no camera; a `cullMask` of `0` draws
|
|
232
|
+
nothing.
|
|
233
|
+
- It decides drawing only: what a camera leaves out still updates, collides and
|
|
234
|
+
receives pointer events.
|
|
235
|
+
- A `Light2d` a camera leaves out, itself or a container it is in, neither
|
|
236
|
+
glows, nor cuts its hole in the darkness, nor lights normal-mapped sprites in
|
|
237
|
+
that camera. A `Light3d` lights the meshes of every camera.
|
|
238
|
+
- It adds to the floating rule: a floating renderable is drawn by a secondary
|
|
239
|
+
camera only with `visibleInAllCameras`, and only if the layers match as well.
|
|
240
|
+
- On a Tiled object, set it as an `int` custom property named
|
|
241
|
+
`visibilityLayer`.
|
|
242
|
+
|
|
194
243
|
## Immediate-mode drawing
|
|
195
244
|
|
|
196
245
|
Inside a custom `draw(renderer)` you can draw shapes directly. Remember the two
|
|
@@ -269,6 +318,14 @@ Pass `rt.canvas`, never `rt` — a `CanvasRenderTarget` is a wrapper, not a
|
|
|
269
318
|
drawable, and the engine's own bakes (the particle emitter's default texture)
|
|
270
319
|
hand `.canvas` on for exactly that reason.
|
|
271
320
|
|
|
321
|
+
**Create it once and keep it.** On a GPU backend, once drawn, its texture stays
|
|
322
|
+
on the GPU for as long as the renderer lives: a stage change does not release
|
|
323
|
+
it, and no public call does. A target made for every level, every restart or
|
|
324
|
+
every spawned object leaks one texture each time, so make it once (at module
|
|
325
|
+
level, say) and clear it for reuse. If you paint into it again after it has
|
|
326
|
+
been drawn, call `rt.invalidate(renderer)` before the next draw so the GPU copy
|
|
327
|
+
is refreshed.
|
|
328
|
+
|
|
272
329
|
This is the sanctioned performance idiom before reaching for a custom shader.
|
|
273
330
|
|
|
274
331
|
**For a solid fill you do not need a canvas at all.** `Renderer.getWhitePixel()`
|
|
@@ -338,7 +395,12 @@ const data = await rt.toImageData(0, 0, w, h);
|
|
|
338
395
|
| baked target draws nothing / throws | passed the `CanvasRenderTarget`, not its `.canvas` |
|
|
339
396
|
| `getImageData()` throws on one machine but not another | that one is on the WebGPU renderer, which cannot read back synchronously — `await toImageData()` instead |
|
|
340
397
|
| frame rate drops with many static draws | bake into a `CanvasRenderTarget` instead |
|
|
398
|
+
| GPU memory grows with every level or restart | a `CanvasRenderTarget` created each time: make one and reuse it |
|
|
399
|
+
| a repainted `CanvasRenderTarget` still shows the old pixels | call `rt.invalidate(renderer)` after painting |
|
|
341
400
|
| a 3D camera cannot be given an arbitrary up | `Camera3d#lookAt(target, up)` or `setBasis(right, up, forward)`; see `melonjs-3d` |
|
|
401
|
+
| particles or effects clutter a minimap | every camera draws everything: put them on their own `visibilityLayer` and leave it out of the minimap's `cullMask` |
|
|
402
|
+
| something is missing from one camera only | its `visibilityLayer`, or a container's above it, shares no bit with that camera's `cullMask` |
|
|
403
|
+
| a renderable shows in no camera at all | its `visibilityLayer` is `0`, or the world's own layer is left out |
|
|
342
404
|
|
|
343
405
|
## Related skills
|
|
344
406
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: melonjs-display-and-scaling
|
|
3
|
-
description: "Use this skill when a melonJS game looks blurry, soft, shimmering or cropped, or when choosing how the canvas fills its page. Covers the design resolution, scale and scaleMethod, scaleTarget, scaleRounding for pixel-perfect integer scaling, antiAlias, textureFilter, subPixel, devicePixelRatio, and which setting does which job. Triggers on: blurry, soft, fuzzy, shimmering, pixel art, pixel perfect, crisp, nearest, linear, scale, scaleMethod, scaleTarget, scaleRounding, integer scaling, antiAlias, textureFilter, subPixel, devicePixelRatio, retina, hidpi, design resolution, canvas size, canvas cropped, letterbox, image-rendering, upscale, resolution."
|
|
3
|
+
description: "Use this skill when a melonJS game looks blurry, soft, shimmering or cropped, or when choosing how the canvas fills its page. Covers the design resolution, scale and scaleMethod, scaleTarget, scaleRounding for pixel-perfect integer scaling, antiAlias, textureFilter and linear-mipmap for what is drawn small, subPixel, syncToDisplay for steady motion, devicePixelRatio, and which setting does which job. Triggers on: blurry, soft, fuzzy, shimmering, pixel art, pixel perfect, crisp, nearest, linear, scale, scaleMethod, scaleTarget, scaleRounding, integer scaling, antiAlias, textureFilter, linear-mipmap, mipmaps, minimap shimmer, zoomed out, subPixel, syncToDisplay, stutter, judder, uneven scrolling, devicePixelRatio, retina, hidpi, design resolution, canvas size, canvas cropped, letterbox, image-rendering, upscale, resolution."
|
|
4
4
|
license: MIT
|
|
5
5
|
---
|
|
6
6
|
|
|
@@ -23,7 +23,9 @@ separate decisions. Knowing which setting owns which is most of the work.
|
|
|
23
23
|
| how a texture is sampled | `antiAlias`, `textureFilter` | nearest or linear, and the CSS upscale filter |
|
|
24
24
|
|
|
25
25
|
`subPixel` is a fifth, orthogonal to all of them: it decides whether a
|
|
26
|
-
renderable may sit on a fractional position WITHIN the frame.
|
|
26
|
+
renderable may sit on a fractional position WITHIN the frame. `syncToDisplay`
|
|
27
|
+
is about the frames in a row rather than one frame: whether motion advances
|
|
28
|
+
by the same amount on each.
|
|
27
29
|
|
|
28
30
|
## Design resolution
|
|
29
31
|
|
|
@@ -155,19 +157,121 @@ can have smooth model edges and nearest-sampled sprites. The presentation half
|
|
|
155
157
|
is not separable: there is no way to get MSAA silhouettes and a hard-edged
|
|
156
158
|
upscale at the same time.
|
|
157
159
|
|
|
160
|
+
## Drawn small: `textureFilter: "linear-mipmap"`
|
|
161
|
+
|
|
162
|
+
A sprite drawn much smaller than its texture (a zoomed-out camera, a minimap,
|
|
163
|
+
a scaled-down sprite) shimmers as it moves, even with linear sampling: each
|
|
164
|
+
screen pixel covers many texels and linear sampling blends only four of them.
|
|
165
|
+
`"linear-mipmap"` samples the texture's mipmaps, smaller copies averaged in
|
|
166
|
+
advance, wherever something is drawn below its size:
|
|
167
|
+
|
|
168
|
+
```js
|
|
169
|
+
const app = new Application(1280, 720, { textureFilter: "linear-mipmap" });
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
At its size or larger a texture draws as it does under `"linear"`, so a game
|
|
173
|
+
whose main view is at its size and whose minimap is zoomed out gets a smooth
|
|
174
|
+
minimap and an unchanged view. It covers sprites, text and tile layers, not a
|
|
175
|
+
video nor a texture the engine renders into, and a `nearest` texture keeps to
|
|
176
|
+
its full size. GPU backends only; on WebGPU each texture it applies to takes
|
|
177
|
+
about a third more memory.
|
|
178
|
+
|
|
179
|
+
A small mipmap level's texels span many of the art's pixels, so a sample near
|
|
180
|
+
the edge of a frame would reach into the next frame of the atlas. Under
|
|
181
|
+
`"linear-mipmap"` every sprite and tile keeps its samples half a texel of the
|
|
182
|
+
level it reads inside its own frame, so the next frame no longer streaks along
|
|
183
|
+
its edges. Two limits:
|
|
184
|
+
|
|
185
|
+
- a level's texel is an average of a square of the art, 2, 4, 8 pixels a side
|
|
186
|
+
and so on. Where a frame's edge falls inside such a square, its outermost
|
|
187
|
+
texel already holds some of the neighbour: drawn very small, a frame of an
|
|
188
|
+
atlas packed edge to edge can show a faint line of it. Frames on a grid of
|
|
189
|
+
a power of two (a 32 or 64 px sheet) are free of it, and a padding of a few
|
|
190
|
+
pixels between frames removes it elsewhere;
|
|
191
|
+
- a sprite drawn through a `ShaderEffect` samples the texture in the effect's
|
|
192
|
+
own program, which is not kept to the frame.
|
|
193
|
+
|
|
194
|
+
A repeating pattern is left to wrap.
|
|
195
|
+
|
|
158
196
|
## `subPixel` is about position, not scale
|
|
159
197
|
|
|
160
|
-
`subPixel: false` (the default)
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
198
|
+
`subPixel: false` (the default) draws everything on whole pixels. The snap
|
|
199
|
+
happens **once, where a draw lands**, the same on every renderer: each edge of
|
|
200
|
+
a sprite, a shape or a clip is rounded to the nearest pixel after every
|
|
201
|
+
translation and scale it is drawn under. So:
|
|
202
|
+
|
|
203
|
+
- nested containers add their positions up exactly first (10.6 then -6.5
|
|
204
|
+
lands on 4, the pixel 4.1 is in);
|
|
205
|
+
- a flipped sprite covers the pixels it covers unflipped;
|
|
206
|
+
- a sprite and a `fillRect` at the same position cover the same pixels, and a
|
|
207
|
+
shape has no half-grey edge on the Canvas renderer;
|
|
208
|
+
- a position floating point error leaves a hair short of a pixel, such as a
|
|
209
|
+
body resting on the floor at `223.99999999999997` after a collision
|
|
210
|
+
push-out, draws on that pixel (224), so it does not shake every other frame.
|
|
211
|
+
|
|
212
|
+
The camera's view starts on a whole pixel too, in world units (zoomed 2x, it
|
|
213
|
+
moves in 2 px steps), and culling and the pointer use that same position:
|
|
214
|
+
things standing still stay still against each other while the view scrolls,
|
|
215
|
+
and a click lands on what is drawn under it. A rotated draw, and anything a
|
|
216
|
+
`Camera3d` draws, is left where it is.
|
|
165
217
|
|
|
166
218
|
It does nothing about how the frame reaches the screen. A game that carefully
|
|
167
219
|
snaps positions and is then scaled by 2.667 has thrown that work away at the
|
|
168
220
|
last step, which is the contradiction `scaleRounding: "integer"` exists to
|
|
169
221
|
resolve.
|
|
170
222
|
|
|
223
|
+
`subPixel: true` alone does not make motion smooth: with nearest sampling a
|
|
224
|
+
sprite between two pixels is still drawn on one of them, so a scene moving
|
|
225
|
+
4.5 pixels a frame jumps by 4 and 5 in turn. Rendered art (not pixel art)
|
|
226
|
+
moves smoothly with `textureFilter: "linear"` as well, which blends it across
|
|
227
|
+
the two, while the upscale stays crisp (`antiAlias: true` would also smooth the
|
|
228
|
+
whole canvas as it is scaled up, which is what makes it look blurry). A still
|
|
229
|
+
scene is only sharp when the camera rests on a whole pixel, so give it a
|
|
230
|
+
target on whole pixels:
|
|
231
|
+
|
|
232
|
+
```js
|
|
233
|
+
const app = new Application(1280, 720, {
|
|
234
|
+
scale: "auto",
|
|
235
|
+
subPixel: true,
|
|
236
|
+
textureFilter: "linear",
|
|
237
|
+
syncToDisplay: true,
|
|
238
|
+
});
|
|
239
|
+
// the camera follows a point on whole pixels, kept on the hero: it glides
|
|
240
|
+
// between pixels while following, and comes to rest on one
|
|
241
|
+
const focus = new Vector2d();
|
|
242
|
+
app.viewport.follow(focus, app.viewport.AXIS.BOTH, 0.12);
|
|
243
|
+
|
|
244
|
+
// in the hero's update(dt)
|
|
245
|
+
focus.set(Math.round(this.pos.x), Math.round(this.pos.y));
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
## `syncToDisplay` is about steady motion
|
|
249
|
+
|
|
250
|
+
The game updates in fixed steps, 60 a second by default, as many as the time
|
|
251
|
+
since the last frame holds. Browsers report that time with up to a millisecond
|
|
252
|
+
of jitter, so on a 60 Hz display a frame now and then gets no update and the
|
|
253
|
+
next one gets two: the world holds still for a frame, then moves twice as far.
|
|
254
|
+
Scrolling, and anything else moving steadily, stutters while the frame rate
|
|
255
|
+
reads a solid 60.
|
|
256
|
+
|
|
257
|
+
```js
|
|
258
|
+
const app = new Application(1280, 720, { scale: "auto", syncToDisplay: true });
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
With it on, frame times are counted in whole display frames and what is
|
|
262
|
+
rounded off is carried to the next frame: one update every frame at 60 Hz, one
|
|
263
|
+
every other frame at 120 Hz, and the game keeps its speed. A display within 2%
|
|
264
|
+
of `timer.maxfps` (60 by default), or of 2, 3 or 4 times it, or a half, a third
|
|
265
|
+
or a quarter of it, is counted at exactly that rate, so a 59.94 Hz screen runs
|
|
266
|
+
the game 0.1% slower than the wall clock; leave it off when the updates must
|
|
267
|
+
keep to the wall clock exactly. The display's rate is learned as the game runs,
|
|
268
|
+
and again when it changes (the window moved to another screen). At a refresh
|
|
269
|
+
that is no multiple of the update rate (144 Hz, 165 Hz) the steps cannot fall
|
|
270
|
+
evenly however the time is counted.
|
|
271
|
+
|
|
272
|
+
It is off by default. It sets `timer.syncToDisplay` when the application is
|
|
273
|
+
initialized, which a game can also switch at any time.
|
|
274
|
+
|
|
171
275
|
## Soft text next to crisp sprites
|
|
172
276
|
|
|
173
277
|
If everything is crisp EXCEPT the text, the scale factor is not the cause: a
|
|
@@ -266,6 +370,12 @@ const app = new Application(1024, 576, {
|
|
|
266
370
|
| the canvas is cropped or overflows its box | automatic scaling measured the wrong element; name it with `scaleTarget` |
|
|
267
371
|
| the canvas grows on every resize | the measured ancestor is auto-sized around the canvas itself |
|
|
268
372
|
| things shimmer as they move | fractional positions; check `subPixel`, and that the scale factor is whole |
|
|
373
|
+
| scrolling stutters while the frame rate reads 60 | a frame now and then runs no update and the next two; set `syncToDisplay: true` |
|
|
374
|
+
| moving rendered art jumps by whole pixels with `subPixel: true` | nearest sampling still draws it on one pixel; add `textureFilter: "linear"` |
|
|
375
|
+
| the whole game looks blurry with `antiAlias: true` | it also smooths the canvas as it is scaled up; use `textureFilter: "linear"` instead |
|
|
376
|
+
| a minimap or a zoomed-out view shimmers as it moves | linear sampling blends 4 texels where a pixel covers many; use `textureFilter: "linear-mipmap"` |
|
|
377
|
+
| faint lines along sprites drawn small, from the next frame of the atlas | under `"linear-mipmap"` the built-in sprite shaders keep to the frame, but not a `ShaderEffect`'s own sample, and the smallest levels still mix a frame not on a power-of-two grid with its neighbour: pad the atlas |
|
|
378
|
+
| a still scene looks a little soft with linear sampling | the camera rests between two pixels; follow a target rounded to whole pixels |
|
|
269
379
|
| 3D model edges are jagged | `antiAlias: false` also disables MSAA; turn it on and use `textureFilter` for textures |
|
|
270
380
|
| textures are smoothed when they should be blocky | `antiAlias: true` makes the default texture filter linear; set `textureFilter: "nearest"` |
|
|
271
381
|
| `scaleRounding: "integer"` changes nothing | it applies to `scaleMethod: "fit"` only; the others resize the renderer |
|