@rpgjs/client 5.0.0-beta.20 → 5.0.0-beta.23

package/dist/components/character-hitbox.d.ts

@@ -0,0 +1,13 @@
+export type CharacterHitbox = {
+    w: number;
+    h: number;
+    anchorMode?: "top-left" | "center" | "foot";
+};
+export declare const toPositiveNumber: (value: unknown) => number | undefined;
+export declare const scaleHitboxForGraphicDisplay: (box: CharacterHitbox | null | undefined, scale: [number, number]) => CharacterHitbox | null;
+export declare const resolveHitboxAnchor: (spriteWidth: number | undefined, spriteHeight: number | undefined, realSize: number | {
+    height?: number;
+} | undefined, box: CharacterHitbox | null | undefined) => [number, number];
+export declare const resolveScaledHitboxAnchor: (spriteWidth: number | undefined, spriteHeight: number | undefined, realSize: number | {
+    height?: number;
+} | undefined, box: CharacterHitbox | null | undefined, scale: [number, number]) => [number, number];

package/dist/components/character-hitbox.js

@@ -0,0 +1,38 @@
+//#region src/components/character-hitbox.ts
+var toPositiveNumber = (value) => {
+	const number = typeof value === "number" ? value : parseFloat(String(value));
+	return Number.isFinite(number) && number > 0 ? number : void 0;
+};
+var clampRatio = (value) => Math.min(1, Math.max(0, value));
+var scaleHitboxForGraphicDisplay = (box, scale) => {
+	if (!box) return null;
+	const scaleX = Math.abs(toPositiveNumber(scale[0]) ?? 1);
+	const scaleY = Math.abs(toPositiveNumber(scale[1]) ?? scaleX);
+	return {
+		...box,
+		w: box.w / scaleX,
+		h: box.h / scaleY
+	};
+};
+var resolveHitboxAnchor = (spriteWidth, spriteHeight, realSize, box) => {
+	if (!spriteWidth || !spriteHeight || !box) return [0, 0];
+	const resolvedHeight = toPositiveNumber(typeof realSize === "number" ? realSize : realSize?.height) ?? spriteHeight;
+	const gap = Math.max(0, (spriteHeight - resolvedHeight) / 2);
+	const hitboxTopLeftX = clampRatio((spriteWidth - box.w) / 2 / spriteWidth);
+	const hitboxTopLeftY = clampRatio((spriteHeight - box.h - gap) / spriteHeight);
+	const hitboxCenterX = clampRatio(hitboxTopLeftX + box.w / 2 / spriteWidth);
+	const hitboxCenterY = clampRatio(hitboxTopLeftY + box.h / 2 / spriteHeight);
+	const footY = clampRatio((spriteHeight - gap) / spriteHeight);
+	switch (box.anchorMode ?? "top-left") {
+		case "center": return [hitboxCenterX, hitboxCenterY];
+		case "foot": return [hitboxCenterX, footY];
+		default: return [hitboxTopLeftX, hitboxTopLeftY];
+	}
+};
+var resolveScaledHitboxAnchor = (spriteWidth, spriteHeight, realSize, box, scale) => {
+	return resolveHitboxAnchor(spriteWidth, spriteHeight, realSize, scaleHitboxForGraphicDisplay(box, scale));
+};
+//#endregion
+export { resolveScaledHitboxAnchor, scaleHitboxForGraphicDisplay, toPositiveNumber };
+
+//# sourceMappingURL=character-hitbox.js.map

package/dist/components/character-hitbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"character-hitbox.js","names":[],"sources":["../../src/components/character-hitbox.ts"],"sourcesContent":["export type CharacterHitbox = {\n  w: number;\n  h: number;\n  anchorMode?: \"top-left\" | \"center\" | \"foot\";\n};\n\nexport const toPositiveNumber = (value: unknown): number | undefined => {\n  const number = typeof value === \"number\" ? value : parseFloat(String(value));\n  return Number.isFinite(number) && number > 0 ? number : undefined;\n};\n\nconst clampRatio = (value: number): number => Math.min(1, Math.max(0, value));\n\nexport const scaleHitboxForGraphicDisplay = (\n  box: CharacterHitbox | null | undefined,\n  scale: [number, number],\n): CharacterHitbox | null => {\n  if (!box) return null;\n  const scaleX = Math.abs(toPositiveNumber(scale[0]) ?? 1);\n  const scaleY = Math.abs(toPositiveNumber(scale[1]) ?? scaleX);\n\n  return {\n    ...box,\n    w: box.w / scaleX,\n    h: box.h / scaleY,\n  };\n};\n\nexport const resolveHitboxAnchor = (\n  spriteWidth: number | undefined,\n  spriteHeight: number | undefined,\n  realSize: number | { height?: number } | undefined,\n  box: CharacterHitbox | null | undefined,\n): [number, number] => {\n  if (!spriteWidth || !spriteHeight || !box) {\n    return [0, 0];\n  }\n\n  const heightOfSprite = typeof realSize === \"number\" ? realSize : realSize?.height;\n  const resolvedHeight = toPositiveNumber(heightOfSprite) ?? spriteHeight;\n  const gap = Math.max(0, (spriteHeight - resolvedHeight) / 2);\n  const hitboxTopLeftX = clampRatio((spriteWidth - box.w) / 2 / spriteWidth);\n  const hitboxTopLeftY = clampRatio((spriteHeight - box.h - gap) / spriteHeight);\n  const hitboxCenterX = clampRatio(hitboxTopLeftX + box.w / 2 / spriteWidth);\n  const hitboxCenterY = clampRatio(hitboxTopLeftY + box.h / 2 / spriteHeight);\n  const footY = clampRatio((spriteHeight - gap) / spriteHeight);\n\n  switch (box.anchorMode ?? \"top-left\") {\n    case \"center\":\n      return [hitboxCenterX, hitboxCenterY];\n    case \"foot\":\n      return [hitboxCenterX, footY];\n    case \"top-left\":\n    default:\n      return [hitboxTopLeftX, hitboxTopLeftY];\n  }\n};\n\nexport const resolveScaledHitboxAnchor = (\n  spriteWidth: number | undefined,\n  spriteHeight: number | undefined,\n  realSize: number | { height?: number } | undefined,\n  box: CharacterHitbox | null | undefined,\n  scale: [number, number],\n): [number, number] => {\n  return resolveHitboxAnchor(\n    spriteWidth,\n    spriteHeight,\n    realSize,\n    scaleHitboxForGraphicDisplay(box, scale),\n  );\n};\n"],"mappings":";AAMA,IAAa,oBAAoB,UAAuC;CACtE,MAAM,SAAS,OAAO,UAAU,WAAW,QAAQ,WAAW,OAAO,KAAK,CAAC;CAC3E,OAAO,OAAO,SAAS,MAAM,KAAK,SAAS,IAAI,SAAS,KAAA;AAC1D;AAEA,IAAM,cAAc,UAA0B,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC;AAE5E,IAAa,gCACX,KACA,UAC2B;CAC3B,IAAI,CAAC,KAAK,OAAO;CACjB,MAAM,SAAS,KAAK,IAAI,iBAAiB,MAAM,EAAE,KAAK,CAAC;CACvD,MAAM,SAAS,KAAK,IAAI,iBAAiB,MAAM,EAAE,KAAK,MAAM;CAE5D,OAAO;EACL,GAAG;EACH,GAAG,IAAI,IAAI;EACX,GAAG,IAAI,IAAI;CACb;AACF;AAEA,IAAa,uBACX,aACA,cACA,UACA,QACqB;CACrB,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,KACpC,OAAO,CAAC,GAAG,CAAC;CAId,MAAM,iBAAiB,iBADA,OAAO,aAAa,WAAW,WAAW,UAAU,MACrB,KAAK;CAC3D,MAAM,MAAM,KAAK,IAAI,IAAI,eAAe,kBAAkB,CAAC;CAC3D,MAAM,iBAAiB,YAAY,cAAc,IAAI,KAAK,IAAI,WAAW;CACzE,MAAM,iBAAiB,YAAY,eAAe,IAAI,IAAI,OAAO,YAAY;CAC7E,MAAM,gBAAgB,WAAW,iBAAiB,IAAI,IAAI,IAAI,WAAW;CACzE,MAAM,gBAAgB,WAAW,iBAAiB,IAAI,IAAI,IAAI,YAAY;CAC1E,MAAM,QAAQ,YAAY,eAAe,OAAO,YAAY;CAE5D,QAAQ,IAAI,cAAc,YAA1B;EACE,KAAK,UACH,OAAO,CAAC,eAAe,aAAa;EACtC,KAAK,QACH,OAAO,CAAC,eAAe,KAAK;EAE9B,SACE,OAAO,CAAC,gBAAgB,cAAc;CAC1C;AACF;AAEA,IAAa,6BACX,aACA,cACA,UACA,KACA,UACqB;CACrB,OAAO,oBACL,aACA,cACA,UACA,6BAA6B,KAAK,KAAK,CACzC;AACF"}

package/dist/components/character-hitbox.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/character.ce.js

@@ -4,6 +4,8 @@ import { getCanMoveValue } from "../utils/readPropValue.js";
 import { RpgGui } from "../Gui/Gui.js";
 import { normalizeEventComponent } from "../Game/EventComponentResolver.js";
 import { RpgClientEngine } from "../RpgClientEngine.js";
+import { applyCameraFollow, clearCameraFollowPlugins, ownsCameraFollowRevision } from "../services/cameraFollow.js";
+import { resolveScaledHitboxAnchor, scaleHitboxForGraphicDisplay, toPositiveNumber } from "./character-hitbox.js";
 import __ce_component$1 from "./player-components.ce.js";
 import __ce_component$2 from "./interaction-components.ce.js";
 import { Container, Sprite, animatedSignal, computed, cond, effect, h, loop, mount, on, signal, tick, useDefineEmits, useDefineProps, useProps } from "canvasengine";
@@ -118,8 +120,33 @@ function component($$props) {
 	const canControls = () => isMe() && getCanMoveValue(sprite);
 	const keyboardControls = client.globalConfig.keyboardControls;
 	const activeDirectionKeys = /* @__PURE__ */ new Map();
+	const activeControlDirections = /* @__PURE__ */ new Map();
+	const activeControlDirectionReleaseTimers = /* @__PURE__ */ new Map();
+	const CONTROL_DIRECTION_RELEASE_GRACE_MS = 160;
+	const hasHeldDirection = () => activeDirectionKeys.size > 0 || activeControlDirections.size > 0;
+	const publishMobileDebug = (type, payload = {}) => {
+		const target = typeof window !== "undefined" ? window : globalThis;
+		if (!target.__RPGJS_MOBILE_DEBUG__) return;
+		const event = {
+			source: "character",
+			type,
+			time: Date.now(),
+			isCurrentPlayer: isCurrentPlayer(),
+			animationName: animationName(),
+			realAnimationName: realAnimationName?.(),
+			activeKeyboardDirections: Array.from(activeDirectionKeys.values()),
+			activeControlDirections: Array.from(activeControlDirections.values()),
+			heldDirection: resolveHeldDirection(),
+			canControls: canControls(),
+			x: x(),
+			y: y(),
+			...payload
+		};
+		target.__RPGJS_MOBILE_DEBUG_EVENTS__ = [...(target.__RPGJS_MOBILE_DEBUG_EVENTS__ || []).slice(-199), event];
+		target.__RPGJS_MOBILE_DEBUG_LAST__ = event;
+	};
 	const resolveHeldDirection = () => {
-		const directions = Array.from(activeDirectionKeys.values());
+		const directions = [...Array.from(activeDirectionKeys.values()), ...Array.from(activeControlDirections.values())];
 		return directions[directions.length - 1];
 	};
 	const resolveSpriteDirection = () => {
@@ -163,24 +190,75 @@ function component($$props) {
 	};
 	const resolveCurrentActionInput = () => withCurrentDirection(resolveKeyboardActionInput(keyboardControls.action, client, sprite));
 	const playPredictedWalkAnimation = () => {
-		if (sprite.animationFixed) return;
-		if (sprite.animationIsPlaying && sprite.animationIsPlaying()) return;
+		if (sprite.animationFixed) {
+			publishMobileDebug("walk:skip", { reason: "animationFixed" });
+			return;
+		}
+		if (sprite.animationIsPlaying && sprite.animationIsPlaying()) {
+			publishMobileDebug("walk:skip", { reason: "animationIsPlaying" });
+			return;
+		}
 		realAnimationName.set("walk");
+		publishMobileDebug("walk:set", { reason: "predicted" });
 	};
 	const resumeHeldDirectionWalkAnimation = () => {
-		if (!isCurrentPlayer()) return false;
-		if (activeDirectionKeys.size === 0) return false;
-		if (!canControls()) return false;
-		if (sprite.animationFixed) return false;
-		if (sprite.animationIsPlaying && sprite.animationIsPlaying()) return false;
+		if (!isCurrentPlayer()) {
+			publishMobileDebug("walk:resume-fail", { reason: "notCurrentPlayer" });
+			return false;
+		}
+		if (!hasHeldDirection()) {
+			publishMobileDebug("walk:resume-fail", { reason: "noHeldDirection" });
+			return false;
+		}
+		if (!canControls()) {
+			publishMobileDebug("walk:resume-fail", { reason: "cannotControl" });
+			return false;
+		}
+		if (sprite.animationFixed) {
+			publishMobileDebug("walk:resume-fail", { reason: "animationFixed" });
+			return false;
+		}
+		if (sprite.animationIsPlaying && sprite.animationIsPlaying()) {
+			publishMobileDebug("walk:resume-fail", { reason: "animationIsPlaying" });
+			return false;
+		}
 		realAnimationName.set("walk");
+		publishMobileDebug("walk:set", { reason: "resumeHeldDirection" });
 		return true;
 	};
 	const processMovementInput = (input) => {
 		if (!canControls()) return;
+		publishMobileDebug("movement:input", { input });
 		client.processInput({ input });
 		playPredictedWalkAnimation();
 	};
+	const activateControlDirection = (name, directionInput) => {
+		const releaseTimer = activeControlDirectionReleaseTimers.get(name);
+		if (releaseTimer) {
+			clearTimeout(releaseTimer);
+			activeControlDirectionReleaseTimers.delete(name);
+		}
+		activeControlDirections.delete(name);
+		activeControlDirections.set(name, directionInput);
+		publishMobileDebug("control:activate", {
+			name,
+			directionInput
+		});
+		resumeHeldDirectionWalkAnimation();
+	};
+	const releaseControlDirection = (name) => {
+		const previousTimer = activeControlDirectionReleaseTimers.get(name);
+		if (previousTimer) clearTimeout(previousTimer);
+		activeControlDirectionReleaseTimers.set(name, setTimeout(() => {
+			activeControlDirectionReleaseTimers.delete(name);
+			activeControlDirections.delete(name);
+			publishMobileDebug("control:release", { name });
+			if (!hasHeldDirection() && animationName() === "stand") {
+				realAnimationName.set("stand");
+				publishMobileDebug("stand:set", { reason: "controlRelease" });
+			}
+		}, CONTROL_DIRECTION_RELEASE_GRACE_MS));
+	};
 	const processDashInput = () => {
 		if (!canControls()) return;
 		client.processDash({ direction: directionToDashVector(resolveSpriteDirection()) });
@@ -213,28 +291,44 @@ function component($$props) {
 			repeat: true,
 			bind: keyboardControls.down,
 			keyDown() {
+				activateControlDirection("down", Direction.Down);
 				processMovementInput(Direction.Down);
+			},
+			keyUp() {
+				releaseControlDirection("down");
 			}
 		},
 		up: {
 			repeat: true,
 			bind: keyboardControls.up,
 			keyDown() {
+				activateControlDirection("up", Direction.Up);
 				processMovementInput(Direction.Up);
+			},
+			keyUp() {
+				releaseControlDirection("up");
 			}
 		},
 		left: {
 			repeat: true,
 			bind: keyboardControls.left,
 			keyDown() {
+				activateControlDirection("left", Direction.Left);
 				processMovementInput(Direction.Left);
+			},
+			keyUp() {
+				releaseControlDirection("left");
 			}
 		},
 		right: {
 			repeat: true,
 			bind: keyboardControls.right,
 			keyDown() {
+				activateControlDirection("right", Direction.Right);
 				processMovementInput(Direction.Right);
+			},
+			keyUp() {
+				releaseControlDirection("right");
 			}
 		},
 		action: {
@@ -249,12 +343,33 @@ function component($$props) {
 				processDashInput();
 			}
 		},
+		back: {
+			bind: keyboardControls.escape,
+			keyDown() {
+				if (canControls()) client.processAction({ action: "escape" });
+			}
+		},
 		escape: {
 			bind: keyboardControls.escape,
 			keyDown() {
 				if (canControls()) client.processAction({ action: "escape" });
 			}
 		},
+		joystick: {
+			enabled: true,
+			directionMapping: {
+				top: "up",
+				bottom: "down",
+				left: "left",
+				right: "right",
+				top_left: ["up", "left"],
+				top_right: ["up", "right"],
+				bottom_left: ["down", "left"],
+				bottom_right: ["down", "right"]
+			},
+			moveInterval: 50,
+			threshold: .1
+		},
 		gamepad: { enabled: true }
 	};
 	const smoothX = animatedSignal(x(), { duration: isMe() ? 0 : 0 });
@@ -281,20 +396,36 @@ function component($$props) {
 		};
 	};
 	const graphicScale = (graphicObject) => {
-		const scale = graphicObject?.displayScale ?? graphicObject?.scale;
+		const scale = graphicObject?.scale;
+		if (Array.isArray(scale)) return scale;
+		if (typeof scale === "number") return [scale, scale];
+		if (scale && typeof scale === "object") {
+			const x = typeof scale.x === "number" ? scale.x : 1;
+			return [x, typeof scale.y === "number" ? scale.y : x];
+		}
+	};
+	const graphicContainerScale = (graphicObject) => {
+		const scale = graphicObject?.displayScale;
 		if (Array.isArray(scale)) return scale;
 		if (typeof scale === "number") return [scale, scale];
 		if (scale && typeof scale === "object") {
 			const x = typeof scale.x === "number" ? scale.x : 1;
 			return [x, typeof scale.y === "number" ? scale.y : x];
 		}
+		return [1, 1];
+	};
+	const multiplyScale = (left, right) => {
+		const a = normalizePair(left);
+		const b = normalizePair(right);
+		return [a[0] * b[0], a[1] * b[1]];
+	};
+	const graphicHitbox = (graphicObject) => {
+		return scaleHitboxForGraphicDisplay(hitbox(), graphicEffectiveScale(graphicObject));
 	};
 	const shadowCaster = (graphicObject) => {
 		const box = hitbox();
 		const bounds = graphicBounds();
-		const scale = graphicScale(graphicObject);
-		const scaleY = Array.isArray(scale) && typeof scale[1] === "number" ? Math.abs(scale[1]) : 1;
-		const height = Math.max(bounds?.height ?? box?.h ?? 32, box?.h ?? 32) * scaleY;
+		const height = Math.max(bounds?.height ?? box?.h ?? 32, box?.h ?? 32);
 		return {
 			enabled: shadowsEnabled,
 			height,
@@ -318,10 +449,6 @@ function component($$props) {
 	};
 	const imageDimensions = signal({});
 	const loadingImageDimensions = /* @__PURE__ */ new Set();
-	const toPositiveNumber = (value) => {
-		const number = typeof value === "number" ? value : parseFloat(value);
-		return Number.isFinite(number) && number > 0 ? number : void 0;
-	};
 	const toFiniteNumber = (value, fallback = 0) => {
 		const number = typeof value === "number" ? value : parseFloat(value);
 		return Number.isFinite(number) ? number : fallback;
@@ -394,6 +521,10 @@ function component($$props) {
 	const optionValue = (prop, frame, textureOptions, graphicObject) => {
 		return frame?.[prop] ?? textureOptions?.[prop] ?? graphicObject?.[prop];
 	};
+	const graphicEffectiveScale = (graphicObject) => {
+		const textureOptions = resolveTextureOptions(graphicObject);
+		return multiplyScale(normalizePair(optionValue("scale", resolveFirstAnimationFrame(textureOptions), textureOptions, graphicObject) ?? graphicScale(graphicObject)), graphicContainerScale(graphicObject));
+	};
 	const resolveFrameSize = (textureOptions, dimensions) => {
 		const framesWidth = toPositiveNumber(textureOptions?.framesWidth) ?? 1;
 		const framesHeight = toPositiveNumber(textureOptions?.framesHeight) ?? 1;
@@ -406,21 +537,6 @@ function component($$props) {
 			height: toPositiveNumber(textureOptions?.rectHeight) ?? toPositiveNumber(textureOptions?.spriteHeight) ?? (fullHeight ? fullHeight / framesHeight : void 0)
 		};
 	};
-	const resolveHitboxAnchor = (spriteWidth, spriteHeight, realSize, box) => {
-		if (!spriteWidth || !spriteHeight || !box) return [0, 0];
-		const resolvedHeight = toPositiveNumber(typeof realSize === "number" ? realSize : realSize?.height) ?? spriteHeight;
-		const gap = Math.max(0, (spriteHeight - resolvedHeight) / 2);
-		const hitboxTopLeftX = clampRatio((spriteWidth - box.w) / 2 / spriteWidth);
-		const hitboxTopLeftY = clampRatio((spriteHeight - box.h - gap) / spriteHeight);
-		const hitboxCenterX = clampRatio(hitboxTopLeftX + box.w / 2 / spriteWidth);
-		const hitboxCenterY = clampRatio(hitboxTopLeftY + box.h / 2 / spriteHeight);
-		const footY = clampRatio((spriteHeight - gap) / spriteHeight);
-		switch (box.anchorMode ?? "top-left") {
-			case "center": return [hitboxCenterX, hitboxCenterY];
-			case "foot": return [hitboxCenterX, footY];
-			default: return [hitboxTopLeftX, hitboxTopLeftY];
-		}
-	};
 	const loadImageDimensions = (image) => {
 		const source = resolveImageSource(image);
 		if (!source || imageDimensions()[source] || loadingImageDimensions.has(source)) return;
@@ -482,8 +598,8 @@ function component($$props) {
 			const spriteWidth = size.width ?? box?.w;
 			const spriteHeight = size.height ?? box?.h;
 			if (!spriteWidth || !spriteHeight) return;
-			const anchor = normalizeAnchor(optionValue("anchor", frame, textureOptions, graphicObject)) ?? resolveHitboxAnchor(spriteWidth, spriteHeight, optionValue("spriteRealSize", frame, textureOptions, graphicObject), box);
-			const scale = normalizePair(optionValue("scale", frame, textureOptions, graphicObject) ?? graphicScale(graphicObject));
+			const scale = graphicEffectiveScale(graphicObject);
+			const anchor = normalizeAnchor(optionValue("anchor", frame, textureOptions, graphicObject)) ?? resolveScaledHitboxAnchor(spriteWidth, spriteHeight, optionValue("spriteRealSize", frame, textureOptions, graphicObject), box, scale);
 			const x = toFiniteNumber(optionValue("x", frame, textureOptions, graphicObject), 0);
 			const y = toFiniteNumber(optionValue("y", frame, textureOptions, graphicObject), 0);
 			const leftEdge = -anchor[0] * spriteWidth * scale[0];
@@ -628,12 +744,15 @@ function component($$props) {
 		removeTransitionSubscription?.unsubscribe();
 		animationMovementSubscription.unsubscribe();
 		resumeWalkSubscriptions.forEach((subscription) => subscription.unsubscribe());
+		activeControlDirectionReleaseTimers.forEach((timer) => clearTimeout(timer));
+		activeControlDirectionReleaseTimers.clear();
 		xSubscription.unsubscribe();
 		ySubscription.unsubscribe();
 		await lastValueFrom(hooks.callHooks("client-sprite-onDestroy", sprite));
 		await lastValueFrom(hooks.callHooks("client-sceneMap-onRemoveSprite", client.sceneMap, sprite));
 	};
 	mount((element) => {
+		let appliedCameraFollowRevision = null;
 		if (typeof document !== "undefined") {
 			document.addEventListener("keydown", handleNativeActionWhileMoving);
 			document.addEventListener("keyup", handleNativeActionWhileMoving);
@@ -643,6 +762,31 @@ function component($$props) {
 		effect(() => {
 			if (isCurrentPlayer()) client.setKeyboardControls(element.directives.controls);
 		});
+		effect(() => {
+			const followRevision = client.cameraFollowRevision();
+			if (!shouldFollowCamera()) {
+				appliedCameraFollowRevision = null;
+				return;
+			}
+			const smoothMove = client.cameraFollowSmoothMove;
+			const viewport = element.props.context?.viewport;
+			const target = element.componentInstance;
+			if (!viewport || !target) {
+				appliedCameraFollowRevision = null;
+				return;
+			}
+			appliedCameraFollowRevision = applyCameraFollow({
+				viewport,
+				target,
+				smoothMove,
+				followRevision,
+				isCurrentRevision: (revision) => client.cameraFollowRevision() === revision,
+				shouldFollowCamera
+			}) ? followRevision : null;
+		});
+		return () => {
+			if (ownsCameraFollowRevision(appliedCameraFollowRevision, client.cameraFollowRevision())) clearCameraFollowPlugins(element.props.context?.viewport);
+		};
 	});
 	const normalizeOpenId = (value) => {
 		const resolved = typeof value === "function" ? value() : value;
@@ -664,7 +808,6 @@ function component($$props) {
 		x: smoothX,
 		y: smoothY,
 		zIndex: z,
-		viewportFollow: shouldFollowCamera,
 		controls,
 		onBeforeDestroy,
 		visible,
@@ -696,11 +839,11 @@ function component($$props) {
 			zIndex: 1e3,
 			name: particleName
 		}),
-		h(Container, null, [loop(renderedGraphics, (graphicObj) => h(Container, { scale: computed(() => graphicScale(graphicObj)) }, h(Sprite, {
+		h(Container, null, [loop(renderedGraphics, (graphicObj) => h(Container, { scale: computed(() => graphicContainerScale(graphicObj)) }, h(Sprite, {
 			sheet: computed(() => sheet(graphicObj)),
 			direction,
 			tint,
-			hitbox,
+			hitbox: computed(() => graphicHitbox(graphicObj)),
 			shadowCaster: computed(() => shadowCaster(graphicObj)),
 			flash: flashConfig
 		}))), loop(resolvedEventComponents, (eventComponent) => h(Container, { dependencies: eventComponent.dependencies }, h(eventComponent.component, eventComponent.props)))]),