Merge pull request #140 from Ikalou/p2js-box-angle

p2js: Add angle body setting so we don't only rely on the actor orientation

Author: bilou84

plugins/extra/p2js/componentConfigs/P2BodyConfig.ts

@@ -8,6 +8,7 @@ export interface P2BodyConfigPub {
   shape: string;
   width: number;
   height: number;
+  angle: number;
   radius: number;
   length: number;
 }
@@ -24,6 +25,7 @@ export default class P2BodyConfig extends SupCore.Data.Base.ComponentConfig {
     shape: { type: "enum", items: [ "box", "circle" ], mutable: true },
     width: { type: "number", min: 0, mutable: true },
     height: { type: "number", min: 0, mutable: true },
+    angle: { type: "number", min: -360, max: 360, mutable: true },
     radius: { type: "number", min: 0, mutable: true }
   };
 
@@ -38,13 +40,14 @@ export default class P2BodyConfig extends SupCore.Data.Base.ComponentConfig {
       shape: "box",
       width: 1,
       height: 1,
+      angle: 0,
       radius: 1,
       length: 1
     };
     return emptyConfig;
   }
 
-  static currentFormatVersion = 1;
+  static currentFormatVersion = 2;
   static migrate(pub: P2BodyConfigPub) {
     if (pub.formatVersion === P2BodyConfig.currentFormatVersion) return false;
 
@@ -55,6 +58,12 @@ export default class P2BodyConfig extends SupCore.Data.Base.ComponentConfig {
       if (pub.shape === "rectangle") pub.shape = "box";
     }
 
+    if (pub.formatVersion === 1) {
+      pub.formatVersion = 2;
+
+      pub.angle = 0;
+    }
+
     return true;
   }
 

plugins/extra/p2js/componentEditors/P2BodyEditor.ts

@@ -7,6 +7,7 @@ export default class P2BodyEditor {
 
   sizeRow: SupClient.table.RowParts;
   radiusRow: SupClient.table.RowParts;
+  angleRow: SupClient.table.RowParts;
 
   constructor(tbody: HTMLTableSectionElement, config: any, projectClient: SupClient.ProjectClient, editConfig: any) {
     this.tbody = tbody;
@@ -61,6 +62,12 @@ export default class P2BodyEditor {
       this.editConfig("setProperty", "height", parseFloat(event.target.value));
     });
 
+    this.angleRow = SupClient.table.appendRow(this.tbody, SupClient.i18n.t("componentEditors:P2Body.angle"));
+    this.fields["angle"] = SupClient.table.appendNumberField(this.angleRow.valueCell, config.angle, { min: -360, max: 360 });
+    this.fields["angle"].addEventListener("change", (event: any) => {
+      this.editConfig("setProperty", "angle", parseFloat(event.target.value));
+    });
+
     // Circle
     this.radiusRow = SupClient.table.appendRow(this.tbody, SupClient.i18n.t("componentEditors:P2Body.radius"));
     this.fields["radius"] = SupClient.table.appendNumberField(this.radiusRow.valueCell, config.radius, { min: 0 });
@@ -76,11 +83,13 @@ export default class P2BodyEditor {
       case "box": {
         this.sizeRow.row.hidden = false;
         this.radiusRow.row.hidden = true;
+        this.angleRow.row.hidden = false;
       } break;
 
       case "circle": {
         this.sizeRow.row.hidden = true;
         this.radiusRow.row.hidden = false;
+        this.angleRow.row.hidden = true;
       } break;
     }
   }

plugins/extra/p2js/components/P2Body.ts

@@ -11,6 +11,7 @@ export default class P2Body extends SupEngine.ActorComponent {
 
   width: number;
   height: number;
+  angle: number;
   radius: number;
 
   actorPosition = new THREE.Vector3();
@@ -45,24 +46,26 @@ export default class P2Body extends SupEngine.ActorComponent {
       case "box": {
         this.width = (config.width != null) ? config.width : 0.5;
         this.height = (config.height != null) ? config.height : 0.5;
+        this.angle = (config.angle != null) ? config.angle * (Math.PI / 180) : 0;
         this.body.addShape(new (<any>window).p2.Box({ width: this.width, height: this.height }));
       } break;
       case "circle": {
         this.radius = (config.radius != null) ? config.radius : 1;
+        this.angle = 0;
         this.body.addShape(new (<any>window).p2.Circle({ radius: this.radius }));
       } break;
     }
     this.body.position = [ this.actorPosition.x, this.actorPosition.y ];
     this.body.shapes[0].position = [ this.offsetX, this.offsetY ];
-    this.body.angle = this.actorAngles.z;
+    this.body.angle = this.actorAngles.z + this.angle;
   }
 
   update() {
     this.actorPosition.x = this.body.position[0];
     this.actorPosition.y = this.body.position[1];
     this.actor.setGlobalPosition(this.actorPosition);
 
-    this.actorAngles.z = this.body.angle;
+    this.actorAngles.z = this.body.angle - this.angle;
     this.actor.setGlobalEulerAngles(this.actorAngles);
   }
 

plugins/extra/p2js/components/P2BodyMarker.ts

@@ -8,6 +8,7 @@ export default class P2BodyMarker extends SupEngine.ActorComponent {
 
   mesh: THREE.Line|THREE.Mesh;
   offset = new THREE.Vector3(0, 0, 0);
+  angle = 0;
 
   constructor(actor: SupEngine.Actor) {
     super(actor, "P2BodyMarker");
@@ -32,6 +33,7 @@ export default class P2BodyMarker extends SupEngine.ActorComponent {
     this.mesh = new THREE.Line(geometry, material);
     this.actor.threeObject.add(this.mesh);
     this.mesh.position.copy(this.offset);
+    this.mesh.rotation.z = this.angle;
     this.mesh.updateMatrixWorld(false);
   }
 
@@ -52,6 +54,12 @@ export default class P2BodyMarker extends SupEngine.ActorComponent {
     this.mesh.updateMatrixWorld(false);
   }
 
+  setAngle(angle: number) {
+    this.angle = angle * (Math.PI / 180);
+    this.mesh.rotation.z = this.angle;
+    this.mesh.updateMatrixWorld(false);
+  }
+
   _clearRenderer() {
     this.actor.threeObject.remove(this.mesh);
     this.mesh.geometry.dispose();

plugins/extra/p2js/components/P2BodyMarkerUpdater.ts

@@ -14,6 +14,7 @@ export default class P2BodyMarkerUpdater {
       case "circle": { this.bodyRenderer.setCircle(this.config.radius); } break;
     }
     this.bodyRenderer.setOffset(this.config.offsetX, this.config.offsetY);
+    this.bodyRenderer.setAngle(this.config.angle);
   }
 
   destroy() { /* Ignore */ }
@@ -30,5 +31,9 @@ export default class P2BodyMarkerUpdater {
     if (path === "offsetX" || path === "offsetY") {
       this.bodyRenderer.setOffset(this.config.offsetX, this.config.offsetY);
     }
+
+    if (path === "angle") {
+      this.bodyRenderer.setAngle(this.config.angle);
+    }
   }
 }

plugins/extra/p2js/public/locales/en/componentEditors.json

@@ -4,6 +4,7 @@
     "mass": "Mass",
     "fixedRotation": "Fixed rotation",
     "offset": "Offset",
+    "angle": "Angle",
     "shape": "Shape",
     "shapeOptions": {
       "box": "Box",