Merge branch 'ellipsis-px' into 'master'

[FEAT][SDK] new property to set max width of a text in px before ellipsis

See merge request codingame/game-engine!267

Author: CodinGameCommunity

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. If the string is too long, it will be shortened until it fits the given width and will include an ellipsis. This is useful when the text length is unknown during runtime, such as using the player's username token.
+
 ### 🐞 Bug fix
 
 - Fixed an issue where games with a `stepByStepAnimateSpeed` would sometimes try to animate frame 0, causing a black screen.