feat(sdk): new property to set max width of a text in px before ellipsis

Author: CGjupoulton

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

@@ -1,6 +1,7 @@
 package com.codingame.gameengine.module.entities;
 
 import java.util.Objects;
+
 /**
  * Generic type for entities containing text.
  * @param <T> a subclass inheriting TextureBasedEntity, used in order to return <b>this</b> as a T instead of a <code>TextBasedEntity</code>.
@@ -33,10 +34,12 @@ private int getValue() {
             return value;
         }
     }
+
     protected String text = "";
     protected int fontSize = 26;
+    protected int maxWidth = 0;
     protected TextAlign textAlign;
-    
+
     /**
      * Returns the string this <code>TextBasedEntity</code> displays.
      * <p>
@@ -47,7 +50,6 @@ private int getValue() {
     public String getText() {
         return text;
     }
-    
 
     /**
      * Sets the string for this <code>TextBasedEntity</code> to display.
@@ -64,6 +66,7 @@ public T setText(String text) {
         set("text", text, null);
         return self();
     }
+
     /**
      * Returns text alignment of this <code>TextBasedEntity</code>.
      * <p>
@@ -74,7 +77,6 @@ public T setText(String text) {
     public TextAlign getTextAlign() {
         return textAlign;
     }
-    
 
     /**
      * Sets the text alignment of this <code>TextBasedEntity</code>.
@@ -91,7 +93,7 @@ public T setTextAlign(TextAlign align) {
         set("textAlign", align.getValue(), null);
         return self();
     }
-    
+
     /**
      * Returns the size of the font of this <code>TextBasedEntity</code> in px.
      * <p>
@@ -130,4 +132,41 @@ public T setFontSize(int fontSize, Curve curve) {
         set("fontSize", fontSize, curve);
         return self();
     }
+
+    /**
+     * Returns the maximum width of this <code>TextBasedEntity</code> in pixels, before it gets ellipsed. 
+     * <p>
+     * The ellipsis is applied before the entity is scaled. A max width of 0 means there is no maximum width.
+     * </p> 
+     * <p>
+     * Default is 0 (no max width).
+     * </p>
+     * @return the maximum width in pixels of this <code>TextBasedEntity</code>.
+     */
+    public int getMaxWidth() {
+        return maxWidth;
+    }
+
+    /**
+     * Sets the maximum width of this <code>TextBasedEntity</code> in pixels before it gets ellipsed.
+     * <p>
+     * The ellipsis is applied before the entity is scaled. A max width of 0 means there is no maximum width.
+     * </p>
+     * <p>
+     * Default is 0 (no max width).
+     * </p>
+     * 
+     * @param maxWidth
+     *            the maximum width in pixels of this <code>TextBasedEntity</code>.
+     * @return this <code>Text</code>.
+     */
+    public T setMaxWidth(int maxWidth) {
+        if (maxWidth < 0) {
+            throw new IllegalArgumentException("Invalid max width: " + maxWidth);
+        }
+
+        this.maxWidth = maxWidth;
+        set("maxWidth", maxWidth, null);
+        return self();
+    }
 }

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

@@ -2,6 +2,7 @@ import { Entity } from './Entity.js'
 import { ErrorLog } from '../core/ErrorLog.js'
 import { MissingBitmapFontError } from './errors/MissingBitmapFontError.js'
 import { TextureBasedEntity } from './TextureBasedEntity.js'
+import { ellipsis } from './textUtils.js'
 
 /* global PIXI */
 
@@ -16,7 +17,8 @@ export class BitmapText extends Entity {
       anchorX: TextureBasedEntity.defaultAnchor(),
       anchorY: TextureBasedEntity.defaultAnchor(),
       blendMode: PIXI.BLEND_MODES.NORMAL,
-      tint: 0xFFFFFF
+      tint: 0xFFFFFF,
+      maxWidth: 0
     })
     this.missingFonts = {}
   }
@@ -31,18 +33,25 @@ export class BitmapText extends Entity {
     if (state.fontFamily !== null) {
       if (PIXI.extras.BitmapText.fonts[state.fontFamily]) {
         if (this.graphics.children.length === 0) {
-          this.displayed = new PIXI.BitmapText(state.text, {
+          this.displayed = new PIXI.extras.BitmapText('', {
             font: { size: state.fontSize || 1, name: state.fontFamily }
           })
           this.graphics.addChild(this.displayed)
         } else {
-          this.displayed.text = state.text
           this.displayed.font = { size: state.fontSize || 1, name: state.fontFamily }
         }
         this.displayed.anchor.set(state.anchorX, state.anchorY)
         this.displayed.blendMode = state.blendMode
         this.displayed.tint = state.tint
         this.displayed.align = state.textAlign
+
+        if (changed.text || changed.maxWidth || changed.fontSize ||
+            changed.fontFamily) {
+          this.displayed.text = state.text
+          if (state.maxWidth) {
+            ellipsis(this.displayed, state.maxWidth)
+          }
+        }
       } else {
         if (!this.missingFonts[state.fontFamily]) {
           this.missingFonts[state.fontFamily] = true

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

@@ -1,4 +1,5 @@
 import { TextureBasedEntity } from './TextureBasedEntity.js'
+import { ellipsis } from './textUtils.js'
 
 /* global PIXI */
 
@@ -13,7 +14,8 @@ export class Text extends TextureBasedEntity {
       fillColor: 0,
       fontSize: 26,
       fontFamily: 'Lato',
-      fontWeight: 'normal'
+      fontWeight: 'normal',
+      maxWidth: 0
     })
   }
 
@@ -30,13 +32,22 @@ export class Text extends TextureBasedEntity {
 
   updateDisplay (state, changed, globalData) {
     super.updateDisplay(state, changed, globalData)
-    this.graphics.text = state.text
+
     this.graphics.style.align = state.textAlign
     this.graphics.style.stroke = state.strokeColor
     this.graphics.style.strokeThickness = state.strokeThickness
     this.graphics.style.fill = state.fillColor
     this.graphics.style.fontSize = state.fontSize || 1
     this.graphics.style.fontFamily = state.fontFamily
     this.graphics.style.fontWeight = state.fontWeight
+
+    if (changed.text || changed.strokeThickness || changed.fontSize ||
+        changed.fontFamily || changed.fontWeight || changed.maxWidth ||
+        changed.maxWidth) {
+      this.graphics.text = state.text
+      if (state.maxWidth) {
+        ellipsis(this.graphics, state.maxWidth)
+      }
+    }
   }
 }

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

@@ -71,6 +71,7 @@ export const PROPERTIES = {
 
   animationProgressTime: timeOpts,
 
+  maxWidth: constOpts,
   mask: constOpts,
   baseWidth: constOpts,
   baseHeight: constOpts,

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

@@ -0,0 +1,7 @@
+export function ellipsis (text, maxWidth) {
+  if (text.width > maxWidth) {
+    while (text.text.length > 3 && text.width > maxWidth) {
+      text.text = text.text.slice(0, -4) + '...'
+    }
+  }
+}

playground/misc/misc-3-release-notes.md

@@ -4,6 +4,10 @@ The CodinGame SDK is regularly updated and improved. This document lets you know
 
 ## Next Release
 
+### 🎁 Features
+
+- It is now possible to set the maximum width of a Text or BitmapText. This will add an ellipsis to the string.
+
 ### 🐞 Bug fix
 
 - Fixed an issue where games with a `stepByStepAnimateSpeed` would sometimes try to animate frame 0, causing a black screen.