Merge branch 'rounded-rect' into 'master'

feat(sdk): New Shape: RoundedRectangle

See merge request codingame/game-engine!187

Author: Builder

engine/modules/entities/src/main/java/com/codingame/gameengine/module/entities/Entity.java

@@ -23,7 +23,7 @@ public abstract class Entity<T extends Entity<?>> {
     Mask mask;
 
     static enum Type {
-        CIRCLE, LINE, RECTANGLE, SPRITE, TEXT, BITMAPTEXT, GROUP, BUFFERED_GROUP, SPRITEANIMATION
+        CIRCLE, LINE, RECTANGLE, SPRITE, TEXT, BITMAPTEXT, GROUP, BUFFERED_GROUP, SPRITEANIMATION, ROUNDED_RECTANGLE
     }
 
     Entity() {

engine/modules/entities/src/main/java/com/codingame/gameengine/module/entities/GraphicEntityModule.java

@@ -265,6 +265,17 @@ public Rectangle createRectangle() {
         newEntity(c);
         return c;
     }
+    
+    /**
+     * Creates a new RoundedRectangle entity, its graphical counterpart will be created on the frame currently being computed.
+     * 
+     * @return the entity. Modify its properties to animate the graphical counterpart.
+     */
+    public RoundedRectangle createRoundedRectangle() {
+        RoundedRectangle c = new RoundedRectangle();
+        newEntity(c);
+        return c;
+    }
 
     /**
      * Creates a new Text entity, its graphical counterpart will be created on the frame currently being computed.

engine/modules/entities/src/main/java/com/codingame/gameengine/module/entities/RoundedRectangle.java

@@ -0,0 +1,137 @@
+package com.codingame.gameengine.module.entities;
+
+/**
+ * A RoundedRectangle specifies an area in a the <code>world</code> enclosed by the Rectangle's upper-left point (x,y), its width, and its height.
+ * <p>
+ * The rectangle on screen will have rounded corners
+ * </p>
+ * The coordinates, width and height are in world units.
+ */
+public class RoundedRectangle extends Shape<RoundedRectangle> {
+
+    private int width = 100;
+    private int height = 100;
+    private int radius = 20;
+
+    RoundedRectangle() {
+        super();
+    }
+
+    /**
+     * Sets the width of this <code>RoundedRectangle</code> in world units.
+     * 
+     * @param width
+     *            the width for this <code>RoundedRectangle</code>.
+     * @return this <code>RoundedRectangle</code>
+     */
+    public RoundedRectangle setWidth(int width) {
+        return setWidth(width, null);
+    }
+
+    /**
+     * Sets the width of this <code>RoundedRectangle</code> in world units.
+     * 
+     * @param width
+     *            the width for this <code>RoundedRectangle</code>.
+     * @param curve
+     *            the transition to animate between values of this property.
+     * @return this <code>RoundedRectangle</code>
+     */
+    public RoundedRectangle setWidth(int width, Curve curve) {
+        this.width = width;
+        set("width", width, curve);
+        return this;
+    }
+
+    /**
+     * Returns the width of this <code>RoundedRectangle</code> in world units.
+     * <p>
+     * Default is 100.
+     * 
+     * @return the width of this <code>RoundedRectangle</code>.
+     */
+    public int getWidth() {
+        return width;
+    }
+
+    /**
+     * Sets the height of this <code>RoundedRectangle</code> in world units.
+     * 
+     * @param height
+     *            the height for this <code>RoundedRectangle</code>.
+     * @return this <code>RoundedRectangle</code>
+     */
+    public RoundedRectangle setHeight(int height) {
+        return setHeight(height, null);
+    }
+
+    /**
+     * Sets the height of this <code>RoundedRectangle</code> in world units.
+     * 
+     * @param height
+     *            the height for this <code>RoundedRectangle</code>.
+     * @param curve
+     *            the transition to animate between values of this property.
+     * @return this <code>RoundedRectangle</code>
+     */
+    public RoundedRectangle setHeight(int height, Curve curve) {
+        this.height = height;
+        set("height", height, curve);
+        return this;
+    }
+
+    /**
+     * Returns the height of this <code>RoundedRectangle</code> in world units.
+     * <p>
+     * Default is 100.
+     * 
+     * @return the height of this <code>RoundedRectangle</code>.
+     */
+    public int getHeight() {
+        return height;
+    }
+
+    /**
+     * Sets the radius of this <code>RoundedRectangle</code>'s corners in world units.
+     * 
+     * @param radius
+     *            the radius for the corners of this <code>RoundedRectangle</code>.
+     * @param curve
+     *            the transition to animate between values of this property.
+     * @return this <code>RoundedRectangle</code>
+     */
+    public RoundedRectangle setRadius(int radius, Curve curve) {
+        this.radius = radius;
+        set("radius", radius, curve);
+        return this;
+    }
+    
+    /**
+     * Sets the radius of this <code>RoundedRectangle</code>'s corners in world units.
+     * 
+     * @param radius
+     *            the radius for the corners of this <code>RoundedRectangle</code>.
+     * @return this <code>RoundedRectangle</code>
+     */
+    public RoundedRectangle setRadius(int radius) {
+        return setRadius(radius,null);
+    }
+
+    /**
+     * Returns the radius of this <code>RoundedRectangle</code>'s corners in world units.
+     * <p>
+     * Default is 20.
+     * </p>
+     * 
+     * @return the radius of the corners of this <code>RoundedRectangle</code>.
+     */
+    public int getRadius() {
+        return radius;
+    }
+
+    @Override
+    Entity.Type getType() {
+        return Entity.Type.ROUNDED_RECTANGLE;
+    }
+
+}

engine/modules/entities/src/main/java/com/codingame/gameengine/module/entities/Serializer.java

@@ -87,6 +87,7 @@ class Serializer {
 
         types = new HashMap<>();
         types.put(Type.RECTANGLE, "R");
+        types.put(Type.ROUNDED_RECTANGLE, "K");
         types.put(Type.CIRCLE, "C");
         types.put(Type.GROUP, "G");
         types.put(Type.BUFFERED_GROUP, "B");

engine/modules/entities/src/main/resources/view/entity-module/Entity.js

@@ -145,7 +145,7 @@ export class Entity {
 
     this.container.zIndex = state.zIndex
     this.container.alpha = state.alpha
-    this.container.position.set(state.x * globalData.coeff, state.y * globalData.coeff)
+    this.container.position.set(state.x * globalData.toWorldUnits, state.y * globalData.toWorldUnits)
     this.container.scale.set(state.scaleX || eps, state.scaleY || eps)
     this.container.rotation = state.rotation
     this.container._visible = state.visible && !this.hide

engine/modules/entities/src/main/resources/view/entity-module/EntityFactory.js

@@ -7,41 +7,25 @@ import { BitmapText } from './BitmapText.js'
 import { Group } from './Group.js'
 import { BufferedGroup } from './BufferedGroup.js'
 import { SpriteAnimation } from './SpriteAnimation.js'
+import { RoundedRectangle } from './RoundedRectangle.js';
 
 export class EntityFactory {
   static create (type) {
-    var entity
-    switch (type) {
-      case 'C':
-        entity = new Circle()
-        break
-      case 'R':
-        entity = new Rectangle()
-        break
-      case 'L':
-        entity = new Line()
-        break
-      case 'S':
-        entity = new Sprite()
-        break
-      case 'T':
-        entity = new Text()
-        break
-      case 'X':
-        entity = new BitmapText()
-        break
-      case 'G':
-        entity = new Group()
-        break
-      case 'B':
-        entity = new BufferedGroup()
-        break
-      case 'A':
-        entity = new SpriteAnimation()
-        break
-      default:
-        throw new Error('Exception: entity type not found: ' + type)
+    const EntityClass = {
+      C: Circle,
+      R: Rectangle,
+      L: Line,
+      S: Sprite,
+      T: Text,
+      X: BitmapText,
+      G: Group,
+      B: BufferedGroup,
+      A: SpriteAnimation,
+      K: RoundedRectangle
+    }[type]
+    if (!EntityClass) {
+      throw new Error('Exception: entity type not found: ' + type)
     }
-    return entity
+    return new EntityClass()
   }
 }

engine/modules/entities/src/main/resources/view/entity-module/GraphicEntityModule.js

@@ -13,7 +13,7 @@ export class GraphicEntityModule {
     this.extrapolationMap = {}
 
     this.globalData = {
-      coeff: 1,
+      toWorldUnits: 1,
       mustResetTree: true,
       mustResort: true,
       maskUpdates: {},
@@ -204,7 +204,28 @@ export class GraphicEntityModule {
     this.globalData.players = players
     const width = globalData.width
     const height = globalData.height
-    this.globalData.coeff = fitAspectRatio(width, height, WIDTH, HEIGHT)
-    api.coeff = this.globalData.coeff
+    this.globalData.toWorldUnits = fitAspectRatio(width, height, WIDTH, HEIGHT)
+    api.toWorldUnits = this.globalData.toWorldUnits
+
+    // Retro-compatibility
+    Object.defineProperty(api, 'coeff', {get: () => {
+      const msg = 'The "coeff" property of GraphicEntityModule\'s API is deprecated, please use "toWorldUnits" instead'
+      const stack = (new Error).stack
+      
+      if (console.groupCollapsed) {
+        console.groupCollapsed(
+          "%cDeprecation Warning: %c%s",
+          "color:#614108;background:#fffbe6",
+          "font-weight:normal;color:#614108;background:#fffbe6",
+          msg
+        )
+        console.warn(stack)
+        console.groupEnd()
+      } else {
+        console.warn("Deprecation Warning: ", msg)
+      }
+
+      return api.toWorldUnits
+    }})
   }
 }

engine/modules/entities/src/main/resources/view/entity-module/Line.js

@@ -26,7 +26,7 @@ export default class Line extends Shape {
       this.graphics.clear()
       this.graphics.lineStyle(globalData.atLeastOnePixel(state.lineWidth), state.lineColor, state.lineAlpha)
       this.graphics.moveTo(0, 0)
-      this.graphics.lineTo(-this.container.x + state.x2 * globalData.coeff, -this.container.y + state.y2 * globalData.coeff)
+      this.graphics.lineTo(-this.container.x + state.x2 * globalData.toWorldUnits, -this.container.y + state.y2 * globalData.toWorldUnits)
     }
   }
 }

engine/modules/entities/src/main/resources/view/entity-module/Rectangle.js

@@ -33,7 +33,7 @@ export class Rectangle extends Shape {
       }
 
       this.graphics.lineStyle(globalData.atLeastOnePixel(state.lineWidth), state.lineColor, state.lineAlpha)
-      this.graphics.drawRect(0, 0, state.width * globalData.coeff, state.height * globalData.coeff)
+      this.graphics.drawRect(0, 0, state.width * globalData.toWorldUnits, state.height * globalData.toWorldUnits)
       if (state.fillColor !== null) {
         this.graphics.endFill()
       }

engine/modules/entities/src/main/resources/view/entity-module/RoundedRectangle.js

@@ -0,0 +1,49 @@
+import { Shape } from './Shape.js'
+
+export class RoundedRectangle extends Shape {
+  static defaultSideLength () {
+    return 100
+  }
+  static defaultRadius () {
+    return 20
+  }
+  constructor () {
+    super()
+    Object.assign(this.defaultState, {
+      width: RoundedRectangle.defaultSideLength(),
+      height: RoundedRectangle.defaultSideLength(),
+      radius: RoundedRectangle.defaultRadius()
+    })
+  }
+
+  initDisplay () {
+    super.initDisplay()
+    this.graphics.drawRoundedRect(0, 0, this.defaultState.width, this.defaultState.height, this.defaultState.radius)
+    this.graphics.endFill()
+  }
+
+  updateDisplay (state, changed, globalData) {
+    super.updateDisplay(state, changed, globalData)
+    if (changed.lineWidth ||
+      changed.lineColor ||
+      changed.lineAlpha ||
+      changed.fillColor ||
+      changed.radius ||
+      changed.height ||
+      changed.width) {
+      this.graphics.clear()
+      if (state.fillColor !== null) {
+        this.graphics.beginFill(state.fillColor, state.fillAlpha)
+      }
+
+      this.graphics.lineStyle(globalData.atLeastOnePixel(state.lineWidth), state.lineColor, state.lineAlpha)
+      this.graphics.drawRoundedRect(0, 0, 
+        state.width * globalData.toWorldUnits, 
+        state.height * globalData.toWorldUnits,
+        state.radius * globalData.toWorldUnits)
+      if (state.fillColor !== null) {
+        this.graphics.endFill()
+      }
+    }
+  }
+}