Method draw

packages/melonjs/src/renderable/imagelayer.js:268–339

* draw this ImageLayer (automatically called by melonJS) * @protected * @param {CanvasRenderer|WebGLRenderer} renderer - a renderer instance * @param {Camera2d} [viewport] - the viewport to (re)draw

(renderer, viewport)

	 * @param {Camera2d} [viewport] - the viewport to (re)draw
	 */
	draw(renderer, viewport) {
		const width = this.width;
		const height = this.height;
		const bw = viewport.bounds.width;
		const bh = viewport.bounds.height;
		const ax = this.anchorPoint.x;
		const ay = this.anchorPoint.y;
		const rx = this.ratio.x;
		const ry = this.ratio.y;
		const vZoom = viewport.zoom;

		let x, y;

		if (rx === 0 && ry === 0) {
			// static image
			x = this.pos.x + ax * (bw - width);
			y = this.pos.y + ay * (bh - height);
		} else {
			// parallax — compute position from the current viewport passed to draw()
			x =
				ax * (rx - 1) * (bw - viewport.width) +
				this.offset.x -
				rx * viewport.pos.x;
			y =
				ay * (ry - 1) * (bh - viewport.height) +
				this.offset.y -
				ry * viewport.pos.y;

			if (this.repeatX) {
				x = x % width;
			}
			if (this.repeatY) {
				y = y % height;
			}
		}

		// for zoomed cameras, scale positions and pattern to match the world view
		renderer.translate(x * vZoom, y * vZoom);
		renderer.scale(vZoom, vZoom);

		// apply flip — pivot at the centre of the drawn pattern in the
		// post-zoom local frame, so the mirror lands in the visible viewport
		// regardless of `viewport.zoom`. Done here (not in preDraw) because
		// preDraw runs before this translate/scale and would misalign.
		if (this._flip.x || this._flip.y) {
			const px = viewport.width;
			const py = viewport.height;
			renderer.translate(px, py);
			renderer.scale(this._flip.x ? -1 : 1, this._flip.y ? -1 : 1);
			renderer.translate(-px, -py);
		}

		// stencil mask — also applied in the post-zoom local frame so the
		// mask shape's coordinates are interpreted relative to the layer's
		// drawn area, matching `drawPattern` below.
		if (this.mask) {
			renderer.setMask(this.mask);
		}