melonjs 14.0.2 → 14.1.1

package/dist/melonjs.mjs/renderable/ui/uitextbutton.js

@@ -0,0 +1,127 @@
+/*!
+ * melonJS Game Engine - v14.1.1
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ */
+import Vector2d from '../../math/vector2.js';
+import BitmapText from '../../text/bitmaptext.js';
+import RoundRect from '../../geometries/roundrect.js';
+import UIBaseElement from './uibaseelement.js';
+
+/**
+ * @classdesc
+ * This is a basic base text button which you can use in your Game UI.
+ * @augments UIBaseElement
+ */
+ class UITextButton extends UIBaseElement {
+    /**
+     * A Text Button with an outlined background border, filled with background color.
+     * It uses a RoundRect as background and changes the background color on hovering over.
+     * The background will be drawn with 0.5 opacity, so that the background of the button is
+     * slightly shining through.
+     * @param {number} x - x pos of the button
+     * @param {number} y - y pos of the button
+     * @param {string} [settings.font] - The name of the BitmapText font to use
+     * @param {number} [settings.size] - The scale factor of the font (default: 1)
+     * @param {string} [settings.text] - The text to display (default: 'click me')
+     * @param {string} [settings.bindKey] - The key to bind the action to (default: none)
+     * @param {string} [settings.backgroundColor] - The css value of a background color
+     * @param {string} [settings.hoverColor] - The css value of a color to be used if the pointer hovers over the button
+     * @param {string} [settings.borderStrokeColor] - The css value of a color to be used to draw the border
+     * @param {boolean} [settings.offScreenCanvas] - Weather to use an offScreen canvas or not
+     * @param {string} [settings.fillStyle] - The css value of a tint color to be used to tint the text
+     * @param {number} [settings.borderWidth] - Width of the button
+     * @param {number} [settings.borderHeight] - Height of the button
+     * @example
+     * // Create a new Button
+     * class PlayButton extends BaseTextButton {
+     *      constructor(x,y) {
+     *          super(x,y, {
+     *              font: 'my-font',
+     *              text: 'Play',
+     *              // if you omit the next two, size is calculated by the size of the text
+     *              borderWidth: 200,
+     *              borderHeight: 20,
+     *          });
+     *      }
+     *
+     *      onClick(){
+     *          state.change(state.PLAY);
+     *      }
+     * }
+     *
+     * game.world.addChild(new PlayButton(15,200));
+     */
+    constructor(x, y, settings) {
+        super(x, y);
+        settings.font = settings.font || "24Outline";
+        settings.size = settings.size || 1;
+        settings.text = settings.text || "<Click Me>";
+        settings.bindKey = settings.bindKey || -1;
+        settings.backgroundColor = settings.backgroundColor || "#00aa00";
+        settings.hoverColor = settings.hoverColor || "#00ff00";
+        settings.borderStrokeColor = settings.borderStrokeColor || "#000000";
+        settings.offScreenCanvas = settings.offScreenCanvas || false;
+        settings.fillStyle = settings.fillStyle || "#ffffff";
+        settings.lineWidth = settings.lineWidth || 1;
+        settings.anchorPoint = settings.anchorPoint || new Vector2d(0, 0);
+
+        let font = new BitmapText(x, y, settings);
+        let dimensions = font.measureText();
+        settings.borderWidth = settings.borderWidth || dimensions.width + 16;
+        settings.borderHeight = settings.borderHeight || dimensions.height + 16;
+
+        let border = new RoundRect(
+            x,
+            y,
+            settings.borderWidth,
+            settings.borderHeight
+        );
+        super.setShape(
+            x,
+            y,
+            border.getBounds().width,
+            border.getBounds().height
+        );
+
+        // build up
+        this.font = font;
+        this.dimensions = dimensions;
+        this.border = border;
+        this.settings = settings;
+
+        // adjust text position
+        this.font.pos.set(
+            Math.round((border.width - dimensions.width) / 2) + this.font.pos.x,
+            Math.round((border.height - dimensions.height) / 2) +
+                this.font.pos.y
+        );
+    }
+
+    draw(renderer) {
+        renderer.setGlobalAlpha(0.5);
+        if (!this.hover) {
+            renderer.setColor(this.settings.backgroundColor);
+        } else {
+            renderer.setColor(this.settings.hoverColor);
+        }
+
+        renderer.fill(this.border);
+        renderer.setGlobalAlpha(1);
+        renderer.setColor(this.settings.borderStrokeColor);
+        renderer.stroke(this.border);
+
+        // fix: supporting tint
+        renderer.setTint(this.font.tint, this.font.getOpacity());
+        this.font.draw(
+            renderer,
+            this.settings.text,
+            this.font.pos.x,
+            this.font.pos.y
+        );
+    }
+}
+
+export { UITextButton as default };

package/dist/melonjs.mjs/state/stage.js

@@ -0,0 +1,236 @@
+/*!
+ * melonJS Game Engine - v14.1.1
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ */
+import { renderer } from '../video/video.js';
+import game from '../game.js';
+import Camera2d from '../camera/camera2d.js';
+import Color from '../math/color.js';
+
+// a default camera instance to use across all stages
+var default_camera;
+
+// default stage settings
+var default_settings = {
+    cameras : []
+};
+
+/**
+ * @classdesc
+ * a default "Stage" object.
+ * every "stage" object (title screen, credits, ingame, etc...) to be managed
+ * through the state manager must inherit from this base class.
+ * @see state
+ */
+ class Stage {
+
+    /**
+     * @param {object} [settings] - The stage` parameters
+     * @param {Camera2d[]} [settings.cameras=[new me.Camera2d()]] - a list of cameras (experimental)
+     * @param {Function} [settings.onResetEvent] - called by the state manager when reseting the object
+     * @param {Function} [settings.onDestroyEvent] - called by the state manager before switching to another state
+     */
+    constructor(settings) {
+        /**
+         * The list of active cameras in this stage.
+         * Cameras will be renderered based on this order defined in this list.
+         * Only the "default" camera will be resized when the window or canvas is resized.
+         * @public
+         * @type {Map<Camera2d>}
+         * @name cameras
+         * @memberof Stage
+         */
+        this.cameras = new Map();
+
+        /**
+         * The list of active lights in this stage.
+         * (Note: Canvas Renderering mode will only properly support one light per stage)
+         * @public
+         * @type {Map<Light2d>}
+         * @name lights
+         * @memberof Stage
+         * @see Light2d
+         * @see Stage.ambientLight
+         * @example
+         * // create a white spot light
+         * var whiteLight = new me.Light2d(0, 0, 140, "#fff", 0.7);
+         * // and add the light to this current stage
+         * this.lights.set("whiteLight", whiteLight);
+         * // set a dark ambient light
+         * this.ambientLight.parseCSS("#1117");
+         * // make the light follow the mouse
+         * me.input.registerPointerEvent("pointermove", me.game.viewport, (event) => {
+         *    whiteLight.centerOn(event.gameX, event.gameY);
+         * });
+         */
+        this.lights = new Map();
+
+        /**
+         * an ambient light that will be added to the stage rendering
+         * @public
+         * @type {Color}
+         * @name ambientLight
+         * @memberof Stage
+         * @default "#000000"
+         * @see Light2d
+         */
+        this.ambientLight = new Color(0, 0, 0, 0);
+
+        /**
+         * The given constructor options
+         * @public
+         * @name settings
+         * @memberof Stage
+         * @type {object}
+         */
+        this.settings = Object.assign(default_settings, settings || {});
+    }
+
+    /**
+     * Object reset function
+     * @ignore
+     */
+    reset() {
+
+        // add all defined cameras
+        this.settings.cameras.forEach((camera) => {
+            this.cameras.set(camera.name, camera);
+        });
+
+        // empty or no default camera
+        if (this.cameras.has("default") === false) {
+            if (typeof default_camera === "undefined") {
+                var width = renderer.getWidth();
+                var height = renderer.getHeight();
+                // new default camera instance
+                default_camera = new Camera2d(0, 0, width, height);
+            }
+            this.cameras.set("default", default_camera);
+        }
+
+        // reset the game
+        game.reset();
+
+        // call the onReset Function
+        this.onResetEvent.apply(this, arguments);
+    }
+
+    /**
+     * update function
+     * @name update
+     * @memberof Stage
+     * @ignore
+     * @param {number} dt - time since the last update in milliseconds.
+     * @returns {boolean}
+     */
+    update(dt) {
+        // update all objects (and pass the elapsed time since last frame)
+        var isDirty = game.world.update(dt);
+
+        // update the camera/viewport
+        // iterate through all cameras
+        this.cameras.forEach((camera) => {
+            if (camera.update(dt) === true) {
+                isDirty = true;
+            }
+        });
+
+        // update all lights
+        this.lights.forEach((light) => {
+            if (light.update(dt) === true) {
+                isDirty = true;
+            }
+        });
+
+        return isDirty;
+    }
+
+    /**
+     * draw the current stage
+     * @name draw
+     * @memberof Stage
+     * @ignore
+     * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer object
+     */
+    draw(renderer) {
+        // iterate through all cameras
+        this.cameras.forEach((camera) => {
+            // render the root container
+            camera.draw(renderer, game.world);
+
+            // render the ambient light
+            if (this.ambientLight.alpha !== 0) {
+                renderer.save();
+                // iterate through all lights
+                this.lights.forEach((light) => {
+                    // cut out all lights visible areas
+                    renderer.setMask(light.getVisibleArea(), true);
+                });
+                // fill the screen with the ambient color
+                renderer.setColor(this.ambientLight);
+                renderer.fillRect(0, 0, camera.width, camera.height);
+                // clear all masks
+                renderer.clearMask();
+                renderer.restore();
+            }
+
+            // render all lights
+            this.lights.forEach((light) => {
+                light.preDraw(renderer, game.world);
+                light.draw(renderer, game.world);
+                light.postDraw(renderer, game.world);
+            });
+        });
+    }
+
+    /**
+     * destroy function
+     * @ignore
+     */
+    destroy() {
+        // clear all cameras
+        this.cameras.clear();
+        // clear all lights
+        this.lights.forEach((light) => {
+            light.destroy();
+        });
+        this.lights.clear();
+        // notify the object
+        this.onDestroyEvent.apply(this, arguments);
+    }
+
+    /**
+     * onResetEvent function<br>
+     * called by the state manager when reseting the object
+     * this is typically where you will load a level, add renderables, etc...
+     * @name onResetEvent
+     * @memberof Stage
+     * @param {object} [...arguments] - optional arguments passed when switching state
+     * @see state#change
+     */
+    onResetEvent() {
+        // execute onResetEvent function if given through the constructor
+        if (typeof this.settings.onResetEvent === "function") {
+            this.settings.onResetEvent.apply(this, arguments);
+        }
+
+    }
+
+    /**
+     * onDestroyEvent function<br>
+     * called by the state manager before switching to another state
+     * @name onDestroyEvent
+     * @memberof Stage
+     */
+    onDestroyEvent() {
+        // execute onDestroyEvent function if given through the constructor
+        if (typeof this.settings.onDestroyEvent === "function") {
+            this.settings.onDestroyEvent.apply(this, arguments);
+        }
+    }
+}
+
+export { Stage as default };