Rotate manifest-driven Asteroids bullets to match fire direction - PR_26133_126-asteroids-manifest-bullet-rotation

Author: DavidQ

docs/dev/reports/PR_26133_126-asteroids-manifest-bullet-rotation_report.md

@@ -0,0 +1,34 @@
+# PR_26133_126 Asteroids Manifest Bullet Rotation Report
+
+## Summary
+
+- Asteroids bullets now retain an instance `angle` when fired or restored from state.
+- Player bullets capture the ship fire angle at spawn; UFO bullets capture the aimed fire angle.
+- Bullet rendering still uses `object.asteroids.bullet` from the Object Vector Studio V2 manifest and now applies the bullet instance rotation through the shared Object Vector runtime.
+- The manifest bullet object geometry, style, origin, and active state data are not mutated by runtime rendering.
+
+## Implementation Notes
+
+- `Bullet` stores a sanitized `angle` value beside position, velocity, and life.
+- `AsteroidsWorld.fire()` passes `this.ship.angle` into new bullets.
+- `Ufo.fireAt()` passes its computed `aimAngle` into new UFO bullets.
+- `AsteroidsWorld` save/load includes bullet `angle`, with legacy state fallback inferred from bullet velocity when angle is missing.
+- `AsteroidsGameScene` renders both player bullets and UFO bullets with `objectId: object.asteroids.bullet`, `requireManifestBinding: true`, and `rotation: bullet.angle`.
+
+## Validation
+
+- PASS `node -e "import('./tests/games/AsteroidsPresentation.test.mjs').then((m)=>m.run()).then(()=>console.log('PASS AsteroidsPresentation'))"`
+- PASS `node -e "import('./tests/games/AsteroidsVectorTransforms.test.mjs').then((m)=>m.run()).then(()=>console.log('PASS AsteroidsVectorTransforms'))"`
+- PASS `node -e "import('./tests/games/AsteroidsValidation.test.mjs').then((m)=>m.run()).then(()=>console.log('PASS AsteroidsValidation'))"`
+- PASS `node -e "import('./tests/games/AsteroidsPlatformDemo.test.mjs').then((m)=>m.run()).then(()=>console.log('PASS AsteroidsPlatformDemo'))"`
+- PASS `node -e "import('./tests/games/AsteroidsAssetReferenceAdoption.test.mjs').then((m)=>m.run()).then(()=>console.log('PASS AsteroidsAssetReferenceAdoption'))"`
+- PASS `npx playwright test tests/playwright/tools/WorkspaceManagerV2.spec.mjs --project=playwright --workers=1 --reporter=list -g "loads Object Vector Studio V2 runtime assets into Asteroids gameplay rendering"`
+- PASS `git diff --check` with line-ending warnings only.
+
+## Manual Notes
+
+- Playwright impacted: Yes.
+- Playwright validates the Asteroids Object Vector runtime asset path and gameplay bullet manifest rendering path.
+- Expected pass behavior: bullets fired at different ship angles render the manifest bullet object with matching instance rotations.
+- Expected fail behavior: missing `object.asteroids.bullet` or mismatched manifest binding fails through the Object Vector runtime instead of a hardcoded bullet draw fallback.
+- Full regression and full samples smoke tests were skipped per PR instructions.

games/Asteroids/entities/Bullet.js

@@ -17,12 +17,13 @@ function normalizePoints(points) {
 }
 
 export default class Bullet {
-  constructor(x, y, vx, vy, life = 1.1, { collisionPoints = [] } = {}) {
+  constructor(x, y, vx, vy, life = 1.1, { angle = 0, collisionPoints = [] } = {}) {
     this.x = x;
     this.y = y;
     this.vx = vx;
     this.vy = vy;
     this.life = life;
+    this.angle = Number.isFinite(angle) ? angle : 0;
     this.collisionPoints = normalizePoints(collisionPoints);
     if (this.collisionPoints.length < 3) {
       throw new Error('Asteroids Bullet requires manifest-loaded bullet object geometry.');

games/Asteroids/entities/Ufo.js

@@ -99,6 +99,7 @@ export default class Ufo {
       Math.sin(aimAngle) * shotSpeed,
       fullScreenLife,
       {
+        angle: aimAngle,
         collisionPoints: this.bulletCollisionPoints,
       }
     );

games/Asteroids/game.manifest.json

@@ -219,7 +219,7 @@
           "shapes": [
             {
               "tool": "polygon",
-              "order": 0,
+              "order": 1,
               "visible": true,
               "locked": false,
               "geometry": {
@@ -256,36 +256,6 @@
                 "x": 0,
                 "y": 0
               }
-            },
-            {
-              "tool": "line",
-              "order": 1,
-              "visible": true,
-              "locked": false,
-              "geometry": {
-                "point1": {
-                  "x": -16,
-                  "y": 2
-                },
-                "point2": {
-                  "x": -3,
-                  "y": 2
-                }
-              },
-              "style": {
-                "fill": "#00000000",
-                "stroke": "#F87171",
-                "strokeWidth": 2,
-                "fillOpacity": 1,
-                "strokeOpacity": 1
-              },
-              "transform": {
-                "rotation": 0,
-                "scaleX": 1,
-                "scaleY": 1,
-                "x": 0,
-                "y": 0
-              }
             }
           ],
           "states": [
@@ -334,11 +304,11 @@
               "locked": false,
               "geometry": {
                 "point1": {
-                  "x": -6,
-                  "y": -3
+                  "x": -6.6,
+                  "y": -3.3
                 },
                 "point2": {
-                  "x": -10,
+                  "x": -11,
                   "y": 0
                 }
               },
@@ -364,12 +334,12 @@
               "locked": false,
               "geometry": {
                 "point1": {
-                  "x": -10,
+                  "x": -11,
                   "y": 0
                 },
                 "point2": {
-                  "x": -6,
-                  "y": 3
+                  "x": -6.6,
+                  "y": 3.3
                 }
               },
               "style": {
@@ -395,27 +365,27 @@
               "geometry": {
                 "points": [
                   {
-                    "x": 14,
+                    "x": 15.4,
                     "y": 0
                   },
                   {
-                    "x": -10,
-                    "y": -8
+                    "x": -11,
+                    "y": -8.8
                   },
                   {
-                    "x": -6,
-                    "y": -3
+                    "x": -6.6,
+                    "y": -3.3
                   },
                   {
-                    "x": -6,
-                    "y": 3
+                    "x": -6.6,
+                    "y": 3.3
                   },
                   {
-                    "x": -10,
-                    "y": 8
+                    "x": -11,
+                    "y": 8.8
                   },
                   {
-                    "x": 14,
+                    "x": 15.4,
                     "y": 0
                   }
                 ]
@@ -453,11 +423,11 @@
               "locked": false,
               "geometry": {
                 "point1": {
-                  "x": -6,
-                  "y": -3
+                  "x": -6.6,
+                  "y": -3.3
                 },
                 "point2": {
-                  "x": -8,
+                  "x": -8.8,
                   "y": 0
                 }
               },
@@ -483,11 +453,11 @@
               "locked": false,
               "geometry": {
                 "point1": {
-                  "x": -6,
-                  "y": 3
+                  "x": -6.6,
+                  "y": 3.3
                 },
                 "point2": {
-                  "x": -8,
+                  "x": -8.8,
                   "y": 0
                 }
               },
@@ -909,7 +879,7 @@
               },
               "style": {
                 "fill": "#00000000",
-                "stroke": "#F87171",
+                "stroke": "#DBEAFE",
                 "strokeWidth": 2,
                 "fillOpacity": 1,
                 "strokeOpacity": 1
@@ -1239,7 +1209,7 @@
               },
               "style": {
                 "fill": "#00000000",
-                "stroke": "#FFBE64",
+                "stroke": "#DBEAFE",
                 "strokeWidth": 2,
                 "fillOpacity": 1,
                 "strokeOpacity": 1
@@ -1339,7 +1309,7 @@
               },
               "style": {
                 "fill": "#00000000",
-                "stroke": "#78B7FF",
+                "stroke": "#DBEAFE",
                 "strokeWidth": 2,
                 "fillOpacity": 1,
                 "strokeOpacity": 1

games/Asteroids/game/AsteroidsGameScene.js

@@ -763,6 +763,9 @@ export default class AsteroidsGameScene extends Scene {
     this.world.bullets.forEach((bullet) => {
       this.drawObjectVectorAsset(renderer, "bullet", {
         ...this.objectVectorTagOptions("bullet"),
+        objectId: this.objectVectorRuntimeObjectValidation.objectsByKey.bullet?.id || "",
+        requireManifestBinding: true,
+        rotation: bullet.angle,
         stateId: "active",
         x: bullet.x,
         y: bullet.y,
@@ -772,6 +775,9 @@ export default class AsteroidsGameScene extends Scene {
     this.world.ufoBullets.forEach((bullet) => {
       this.drawObjectVectorAsset(renderer, "bullet", {
         ...this.objectVectorTagOptions("bullet"),
+        objectId: this.objectVectorRuntimeObjectValidation.objectsByKey.bullet?.id || "",
+        requireManifestBinding: true,
+        rotation: bullet.angle,
         stateId: "active",
         x: bullet.x,
         y: bullet.y,

games/Asteroids/game/AsteroidsWorld.js

@@ -305,13 +305,16 @@ export default class AsteroidsWorld {
 
   createBulletFromState(state) {
     const source = state && typeof state === 'object' ? state : {};
+    const vx = sanitizeFiniteNumber(source.vx, 0);
+    const vy = sanitizeFiniteNumber(source.vy, 0);
     return new Bullet(
       sanitizeFiniteNumber(source.x, this.bounds.width * 0.5),
       sanitizeFiniteNumber(source.y, this.bounds.height * 0.5),
-      sanitizeFiniteNumber(source.vx, 0),
-      sanitizeFiniteNumber(source.vy, 0),
+      vx,
+      vy,
       Math.max(0, sanitizeFiniteNumber(source.life, 1.1)),
       {
+        angle: sanitizeFiniteNumber(source.angle, (vx || vy) ? Math.atan2(vy, vx) : 0),
         collisionPoints: this.bulletCollisionPoints,
       }
     );
@@ -371,13 +374,15 @@ export default class AsteroidsWorld {
         radius: asteroid.radius,
       })),
       bullets: this.bullets.map((bullet) => ({
+        angle: bullet.angle,
         x: bullet.x,
         y: bullet.y,
         vx: bullet.vx,
         vy: bullet.vy,
         life: bullet.life,
       })),
       ufoBullets: this.ufoBullets.map((bullet) => ({
+        angle: bullet.angle,
         x: bullet.x,
         y: bullet.y,
         vx: bullet.vx,
@@ -570,6 +575,7 @@ export default class AsteroidsWorld {
       this.ship.vy + Math.sin(this.ship.angle) * shotSpeed,
       fullScreenLife,
       {
+        angle: this.ship.angle,
         collisionPoints: this.bulletCollisionPoints,
       }
     ));

tests/games/AsteroidsPresentation.test.mjs

@@ -55,6 +55,10 @@ function objectHasTags(object, tags = []) {
   return tags.every((tag) => objectTags.has(String(tag).toLowerCase()));
 }
 
+function roundedAngle(value) {
+  return Number(value.toFixed(6));
+}
+
 function createObjectVectorRuntime(calls) {
   return {
     getDiagnostics() {
@@ -70,6 +74,7 @@ function createObjectVectorRuntime(calls) {
         objectId: object?.id || options.objectId,
         requireManifestBinding: options.requireManifestBinding === true,
         renderKey: options.runtimeRole,
+        rotation: options.rotation,
         stroke: shape?.style?.stroke || '',
         stateId: options.stateId,
         tags: options.tags,
@@ -253,27 +258,31 @@ function testAsteroidsAttractAsteroidsUseManifestObjectsAndStyles() {
 
 function testAsteroidsGameplayBulletsUseManifestObjectGeometry() {
   const renderCalls = [];
+  const payload = loadAsteroidsObjectVectorPayload();
+  const bulletObject = payload.objects.find((object) => object.id === 'object.asteroids.bullet');
+  const bulletShapesBeforeRender = JSON.stringify(bulletObject.shapes);
   const scene = new AsteroidsGameScene(createAsteroidsTestSceneOptions({
     objectVectorAssets: createObjectVectorAssetSet(),
     objectVectorRuntime: createObjectVectorRuntime(renderCalls),
   }));
   scene.session.mode = 'playing';
   scene.attractController.active = false;
   scene.world.asteroids = [];
-  scene.world.bullets = [scene.world.createBulletFromState({
-    x: 100,
-    y: 110,
-    vx: 0,
-    vy: 0,
-    life: 1,
-  })];
-  scene.world.ufoBullets = [scene.world.createBulletFromState({
-    x: 120,
-    y: 130,
-    vx: 0,
-    vy: 0,
-    life: 1,
-  })];
+  scene.world.bullets = [];
+  scene.world.ufoBullets = [];
+  scene.world.ship.x = 220;
+  scene.world.ship.y = 240;
+  scene.world.ship.vx = 0;
+  scene.world.ship.vy = 0;
+  const fireAngles = [-Math.PI / 2, 0, Math.PI / 3];
+  fireAngles.forEach((angle) => {
+    scene.world.ship.angle = angle;
+    assert.equal(scene.world.fire(), true);
+  });
+  assert.deepEqual(
+    scene.world.bullets.map((bullet) => roundedAngle(bullet.angle)),
+    fireAngles.map(roundedAngle),
+  );
 
   const polygonCalls = [];
   const renderer = {
@@ -288,9 +297,17 @@ function testAsteroidsGameplayBulletsUseManifestObjectGeometry() {
   };
 
   scene.render(renderer);
-  assert.equal(scene.objectVectorRenderCounts.bullet, 2);
-  assert.equal(renderCalls.filter((call) => call.objectId === 'object.asteroids.bullet').length, 2);
-  assert.equal(polygonCalls.length >= 2, true);
+  const bulletCalls = renderCalls.filter((call) => call.objectId === 'object.asteroids.bullet');
+  assert.equal(scene.objectVectorRenderCounts.bullet, fireAngles.length);
+  assert.equal(bulletCalls.length, fireAngles.length);
+  assert.deepEqual(
+    bulletCalls.map((call) => roundedAngle(call.rotation)),
+    fireAngles.map(roundedAngle),
+  );
+  assert.equal(bulletCalls.every((call) => call.requireManifestBinding), true);
+  assert.equal(bulletCalls.every((call) => call.stroke === bulletObject.shapes[0].style.stroke), true);
+  assert.equal(JSON.stringify(bulletObject.shapes), bulletShapesBeforeRender);
+  assert.equal(polygonCalls.length >= fireAngles.length, true);
 }
 
 function testAsteroidsGameplayRenderDoesNotCoverBackgroundLayer() {