@flare-engine/render 0.3.0 → 0.4.0

package/dist/index.js

@@ -789,6 +789,8 @@ function flashIntensity(effect) {
 const G = globalThis;
 const BLEND_SRC_OVER = 3;
 const BLEND_SRC_IN = 5;
+/** Skia BlendMode.Plus — additive: dst = clamp(src + dst). */
+const BLEND_PLUS = 12;
 const OUTLINE_OFFSETS = [
 	[1, 0],
 	[-1, 0],
@@ -1254,12 +1256,17 @@ function createFrameRenderer(Skia) {
 			if (current === null) return;
 			const n = commands.length;
 			if (n === 0) return;
-			const effect = commands[0]?.effect;
-			const alpha = commands[0]?.alpha ?? 1;
-			currentSpriteW = commands[0]?.dstW ?? 0;
-			currentSpriteH = commands[0]?.dstH ?? 0;
+			const cmd0 = commands[0];
+			const effect = cmd0.effect;
+			const alpha = cmd0.alpha;
+			const blendAdditive = cmd0.blend === "additive";
+			const flipX = cmd0.flipX;
+			const flipY = cmd0.flipY;
+			currentSpriteW = cmd0.dstW;
+			currentSpriteH = cmd0.dstH;
 			if (effect?.type === "roofs-city" || effect?.type === "forest-canopy" || effect?.type === "river-wave" || effect?.type === "moon-crater" || effect?.type === "cave-interior" || effect?.type === "mountain-hills") {
 				const paint = resolveEffectPaint(effect);
+				if (blendAdditive) paint.setBlendMode?.(BLEND_PLUS);
 				paint.setAlphaf(alpha);
 				ensureZoneBgPoolCapacity(n);
 				for (let i = 0; i < n; i++) {
@@ -1268,13 +1275,15 @@ function createFrameRenderer(Skia) {
 					current.drawRect(zoneBgRects[i], paint);
 				}
 				paint.setAlphaf(1);
+				if (blendAdditive) paint.setBlendMode?.(BLEND_SRC_OVER);
 				return;
 			}
-			if (commands[0]?.stretch) {
+			if (cmd0.stretch || flipX || flipY) {
 				ensureStretchPoolCapacity(n);
 				if (stretchPaint === null) stretchPaint = Skia.Paint();
 				const sp = stretchPaint;
 				const sPaint = effect === void 0 || effect.type === "outline" ? sp : resolveEffectPaint(effect);
+				if (blendAdditive) sPaint.setBlendMode?.(BLEND_PLUS);
 				sPaint.setAlphaf(alpha);
 				for (let i = 0; i < n; i++) {
 					const cmd = commands[i];
@@ -1282,24 +1291,44 @@ function createFrameRenderer(Skia) {
 					const dstR = stretchDstRects[i];
 					srcR.setXYWH(cmd.srcX, cmd.srcY, cmd.srcW, cmd.srcH);
 					dstR.setXYWH(cmd.dstX, cmd.dstY, cmd.dstW, cmd.dstH);
-					current.drawImageRect(image, srcR, dstR, sPaint);
+					if (cmd.flipX || cmd.flipY) {
+						const cx = cmd.dstX + cmd.dstW * .5;
+						const cy = cmd.dstY + cmd.dstH * .5;
+						current.save();
+						current.translate(cx, cy);
+						current.scale(cmd.flipX ? -1 : 1, cmd.flipY ? -1 : 1);
+						current.translate(-cx, -cy);
+						current.drawImageRect(image, srcR, dstR, sPaint);
+						current.restore();
+					} else current.drawImageRect(image, srcR, dstR, sPaint);
 				}
 				sPaint.setAlphaf(1);
+				if (blendAdditive) sPaint.setBlendMode?.(BLEND_SRC_OVER);
 				return;
 			}
 			ensurePoolCapacity(n);
 			fillSrcRects(commands, n);
 			if (effect?.type === "outline") {
+				if (blendAdditive) {
+					outlinePaint?.setBlendMode?.(BLEND_PLUS);
+					defaultPaint.setBlendMode?.(BLEND_PLUS);
+				}
 				drawOutlined(current, image, commands, n, effect, alpha);
+				if (blendAdditive) {
+					outlinePaint?.setBlendMode?.(BLEND_SRC_OVER);
+					defaultPaint.setBlendMode?.(BLEND_SRC_OVER);
+				}
 				return;
 			}
 			fillXforms(commands, n, 0, 0);
 			const srcs = getCachedSrcSlice(n);
 			const dsts = getCachedXformSlice(n);
 			const paint = effect === void 0 ? defaultPaint : resolveEffectPaint(effect);
+			if (blendAdditive) paint.setBlendMode?.(BLEND_PLUS);
 			paint.setAlphaf(alpha);
 			current.drawAtlas(image, srcs, dsts, paint);
 			paint.setAlphaf(1);
+			if (blendAdditive) paint.setBlendMode?.(BLEND_SRC_OVER);
 		},
 		setPostFxBinding(runtime, chain) {
 			_boundRuntime = runtime;
@@ -1427,6 +1456,70 @@ function fillCustomUniforms(effect, shader, out) {
 	}
 }
 //#endregion
+//#region src/nine-slice.ts
+/**
+* Draw a sprite using a 9-slice (scale-9) layout.
+*
+* The source frame is divided into a 3×3 grid by `inset` pixels from each
+* edge. Corners draw at natural size; edges stretch along one axis; the
+* centre stretches in both axes. This preserves crisp borders at any
+* destination size — the canonical use case is UI panels and buttons.
+*
+* All 9 slices use the `drawImageRect` (`stretch=true`) path, so they are
+* NOT batched with regular Atlas sprites; they form their own consecutive run
+* in the batch. The function calls `batch.drawRaw()` for each non-degenerate
+* slice (a slice with zero source or destination area is skipped silently).
+*
+* **Coarse culling:** if `batch.cullBounds` is set, the entire nine-slice is
+* skipped when the destination rectangle `[x, y, x+w, y+h]` does not
+* intersect the bounds. Individual slice culling is not performed — the
+* caller should set tight bounds if per-slice savings matter.
+*
+* @param batch  Target SpriteBatch — must outlive this call.
+* @param image  Source texture.
+* @param frame  Sub-region of the texture to use as the nine-slice source.
+* @param x      Destination left edge (screen / world coords).
+* @param y      Destination top edge.
+* @param w      Destination width.
+* @param h      Destination height.
+* @param inset  Border size in source-texture pixels, applied uniformly to
+*               all four edges. Must be ≥ 0; clamped to half the frame
+*               dimension so corners never overlap.
+* @param effect Optional sprite effect applied to every slice identically.
+* @param alpha  Per-instance opacity multiplier in [0, 1]. Default 1.
+*/
+function drawNineSlice(batch, image, frame, x, y, w, h, inset, effect, alpha = 1) {
+	const cb = batch.cullBounds;
+	if (cb !== null) {
+		if (x + w <= cb.minX || x >= cb.maxX || y + h <= cb.minY || y >= cb.maxY) return;
+	}
+	const si = Math.min(inset, frame.w * .5, frame.h * .5);
+	const di = Math.min(si, w * .5, h * .5);
+	const fx = frame.x;
+	const fy = frame.y;
+	const fw = frame.w;
+	const fh = frame.h;
+	const srcMidW = fw - 2 * si;
+	const srcMidH = fh - 2 * si;
+	const dstMidW = w - 2 * di;
+	const dstMidH = h - 2 * di;
+	const a = alpha;
+	const e = effect;
+	_slice(batch, image, fx, fy, si, si, x, y, di, di, e, a);
+	_slice(batch, image, fx + si, fy, srcMidW, si, x + di, y, dstMidW, di, e, a);
+	_slice(batch, image, fx + fw - si, fy, si, si, x + w - di, y, di, di, e, a);
+	_slice(batch, image, fx, fy + si, si, srcMidH, x, y + di, di, dstMidH, e, a);
+	_slice(batch, image, fx + si, fy + si, srcMidW, srcMidH, x + di, y + di, dstMidW, dstMidH, e, a);
+	_slice(batch, image, fx + fw - si, fy + si, si, srcMidH, x + w - di, y + di, di, dstMidH, e, a);
+	_slice(batch, image, fx, fy + fh - si, si, si, x, y + h - di, di, di, e, a);
+	_slice(batch, image, fx + si, fy + fh - si, srcMidW, si, x + di, y + h - di, dstMidW, di, e, a);
+	_slice(batch, image, fx + fw - si, fy + fh - si, si, si, x + w - di, y + h - di, di, di, e, a);
+}
+function _slice(batch, image, sx, sy, sw, sh, dx, dy, dw, dh, effect, alpha) {
+	if (sw <= 0 || sh <= 0 || dw <= 0 || dh <= 0) return;
+	batch.drawRaw(image, sx, sy, sw, sh, dx, dy, dw, dh, effect, 0, 0, alpha, 0, true);
+}
+//#endregion
 //#region src/render-system.ts
 /**
 * Create a render system function.
@@ -1450,7 +1543,9 @@ function createRenderSystem(world, query, positionDef, spriteDef, batch) {
 	const entries = [];
 	return () => {
 		let i = 0;
-		for (const entityId of query) {
+		const ids = query.entities;
+		for (let n = 0; n < ids.length; n++) {
+			const entityId = ids[n];
 			const sprite = world.get(entityId, spriteDef);
 			if (!sprite) continue;
 			if (i >= entries.length) entries.push({
@@ -1471,7 +1566,7 @@ function createRenderSystem(world, query, positionDef, spriteDef, batch) {
 			const sprite = world.get(entry.entityId, spriteDef);
 			if (!pos || !sprite) continue;
 			const anchor = sprite.anchor;
-			batch.draw(sprite.image, sprite.frame, pos.x, pos.y, sprite.width, sprite.height, sprite.effect, anchor ? anchor.x : 0, anchor ? anchor.y : 0, sprite.alpha ?? 1, sprite.rotation ?? 0, sprite.stretch ?? false);
+			batch.draw(sprite.image, sprite.frame, pos.x, pos.y, sprite.width, sprite.height, sprite.effect, anchor ? anchor.x : 0, anchor ? anchor.y : 0, sprite.alpha ?? 1, sprite.rotation ?? 0, sprite.stretch ?? false, sprite.blend ?? "normal", sprite.flipX ?? false, sprite.flipY ?? false);
 		}
 	};
 }
@@ -1578,6 +1673,7 @@ var SpriteBatch = class {
 	_pool = [];
 	_batches = [];
 	_allocCount = 0;
+	_cull = null;
 	/** Number of queued draw commands. */
 	get count() {
 		return this._commands.length;
@@ -1587,6 +1683,34 @@ var SpriteBatch = class {
 	get allocCount() {
 		return this._allocCount;
 	}
+	/**
+	* Current cull bounds, or `null` when culling is disabled.
+	* Read by `drawNineSlice` for coarse AABB precheck.
+	* Set via `setCullBounds()` / `clearCullBounds()`.
+	*/
+	get cullBounds() {
+		return this._cull;
+	}
+	/** Set the viewport cull bounds for this batch.
+	*  Zero-alloc in steady state — the internal object is allocated once and then mutated. */
+	setCullBounds(minX, minY, maxX, maxY) {
+		if (this._cull === null) this._cull = {
+			minX,
+			minY,
+			maxX,
+			maxY
+		};
+		else {
+			this._cull.minX = minX;
+			this._cull.minY = minY;
+			this._cull.maxX = maxX;
+			this._cull.maxY = maxY;
+		}
+	}
+	/** Disable viewport culling (e.g. during UI rendering). */
+	clearCullBounds() {
+		this._cull = null;
+	}
 	/** Queue a sprite draw from a frame.
 	*
 	*  `anchorX` / `anchorY` define the pivot point of the sprite as a
@@ -1595,7 +1719,7 @@ var SpriteBatch = class {
 	*  then refer to the anchor point instead of the top-left corner.
 	*
 	*  `alpha` is a per-instance opacity multiplier in [0, 1]. Default 1. */
-	draw(image, frame, dstX, dstY, dstW, dstH, effect, anchorX = 0, anchorY = 0, alpha = 1, rotation = 0, stretch = false) {
+	draw(image, frame, dstX, dstY, dstW, dstH, effect, anchorX = 0, anchorY = 0, alpha = 1, rotation = 0, stretch = false, blend = "normal", flipX = false, flipY = false) {
 		const cmd = this._acquire();
 		const w = dstW ?? frame.w;
 		const h = dstH ?? frame.h;
@@ -1614,13 +1738,16 @@ var SpriteBatch = class {
 		cmd.anchorX = anchorX;
 		cmd.anchorY = anchorY;
 		cmd.stretch = stretch;
+		cmd.blend = blend;
+		cmd.flipX = flipX;
+		cmd.flipY = flipY;
 		this._commands.push(cmd);
 	}
 	/** Queue a raw sprite draw with explicit src/dst rects. `dstX` / `dstY`
 	*  refer to the anchor point — offset by `anchorX * dstW` / `anchorY * dstH`.
 	*
 	*  `alpha` is a per-instance opacity multiplier in [0, 1]. Default 1. */
-	drawRaw(image, srcX, srcY, srcW, srcH, dstX, dstY, dstW, dstH, effect, anchorX = 0, anchorY = 0, alpha = 1, rotation = 0, stretch = false) {
+	drawRaw(image, srcX, srcY, srcW, srcH, dstX, dstY, dstW, dstH, effect, anchorX = 0, anchorY = 0, alpha = 1, rotation = 0, stretch = false, blend = "normal", flipX = false, flipY = false) {
 		const cmd = this._acquire();
 		cmd.image = image;
 		cmd.srcX = srcX;
@@ -1637,6 +1764,9 @@ var SpriteBatch = class {
 		cmd.anchorX = anchorX;
 		cmd.anchorY = anchorY;
 		cmd.stretch = stretch;
+		cmd.blend = blend;
+		cmd.flipX = flipX;
+		cmd.flipY = flipY;
 		this._commands.push(cmd);
 	}
 	/**
@@ -1660,12 +1790,15 @@ var SpriteBatch = class {
 				effect: void 0,
 				alpha: 1,
 				stretch: false,
+				blend: "normal",
+				flipX: false,
+				flipY: false,
 				commands: []
 			};
 			this._batches[0] = run;
 		}
 		for (const cmd of this._commands) {
-			if (run.commands.length > 0 && (cmd.image !== run.image || cmd.effect !== run.effect || cmd.alpha !== run.alpha || cmd.stretch !== run.stretch)) {
+			if (run.commands.length > 0 && (cmd.image !== run.image || cmd.effect !== run.effect || cmd.alpha !== run.alpha || cmd.stretch !== run.stretch || cmd.blend !== run.blend || cmd.flipX !== run.flipX || cmd.flipY !== run.flipY)) {
 				drawAtlas(run.image, run.commands);
 				if (renderer) {
 					renderer.recordDrawCall();
@@ -1677,6 +1810,9 @@ var SpriteBatch = class {
 			run.effect = cmd.effect;
 			run.alpha = cmd.alpha;
 			run.stretch = cmd.stretch;
+			run.blend = cmd.blend;
+			run.flipX = cmd.flipX;
+			run.flipY = cmd.flipY;
 			run.commands.push(cmd);
 		}
 		if (run.commands.length > 0) {
@@ -1713,7 +1849,10 @@ var SpriteBatch = class {
 			rotation: 0,
 			anchorX: 0,
 			anchorY: 0,
-			stretch: false
+			stretch: false,
+			blend: "normal",
+			flipX: false,
+			flipY: false
 		};
 	}
 };
@@ -1797,6 +1936,7 @@ exports.caveInterior = caveInterior;
 exports.createFrameRenderer = createFrameRenderer;
 exports.createRenderSystem = createRenderSystem;
 exports.custom = custom;
+exports.drawNineSlice = drawNineSlice;
 exports.drawOrderCompare = drawOrderCompare;
 exports.drawText = drawText;
 exports.dropShadow = dropShadow;