Skip to content

Fix rotated text position when content changes #8584

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mizoz wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix rotated text position when content changes #8584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 29 additions & 25 deletions Extensions/BBText/bbtextruntimeobject-pixi-renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,38 +125,42 @@ namespace gdjs {
}

updatePosition(): void {
if (this._object.isWrapping() && this._pixiObject.width !== 0) {
const alignmentX =
this._object._textAlign === 'right'
? 1
: this._object._textAlign === 'center'
? 0.5
: 0;

const width = this._object.getWrappingWidth();

// A vector from the custom size center to the renderer center.
const centerToCenterX =
(width - this._pixiObject.width) * (alignmentX - 0.5);

this._pixiObject.position.x = this._object.x + width / 2;
this._pixiObject.anchor.x =
0.5 - centerToCenterX / this._pixiObject.width;
} else {
this._pixiObject.position.x =
this._object.x + this._pixiObject.width / 2;
this._pixiObject.anchor.x = 0.5;
}
const alignmentX =
this._object._textAlign === 'right'
? 1
: this._object._textAlign === 'center'
? 0.5
: 0;
const objectWidth = this._object.isWrapping()
? this._object.getWrappingWidth()
: this._pixiObject.width;
const textLeftOffset = this._object.isWrapping()
? (objectWidth - this._pixiObject.width) * alignmentX
: 0;
const centerX = this._object._rotationCenter
? this._object._rotationCenter[0]
: objectWidth / 2;

this._pixiObject.position.x = this._object.getDrawableX() + centerX;
this._pixiObject.anchor.x =
this._pixiObject.width !== 0
? (centerX - textLeftOffset) / this._pixiObject.width
: 0;

const alignmentY =
this._object._verticalTextAlignment === 'bottom'
? 1
: this._object._verticalTextAlignment === 'center'
? 0.5
: 0;
this._pixiObject.position.y =
this._object.y + this._pixiObject.height * (0.5 - alignmentY);
this._pixiObject.anchor.y = 0.5;
const textTopOffset = this._pixiObject.height * alignmentY;
const centerY = this._object._rotationCenter
? this._object._rotationCenter[1]
: this._pixiObject.height / 2;

this._pixiObject.position.y = this._object.y + centerY - textTopOffset;
this._pixiObject.anchor.y =
this._pixiObject.height !== 0 ? centerY / this._pixiObject.height : 0;
}

updateAngle(): void {
Expand Down
27 changes: 27 additions & 0 deletions Extensions/BBText/bbtextruntimeobject.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ namespace gdjs {
_verticalTextAlignment: string;

_renderer: gdjs.BBTextRuntimeObjectRenderer;
_rotationCenter: FloatPoint | null = null;

// While this should rather be exposed as a property for all objects, honor the "visible"
// property that is specific to this object.
Expand Down Expand Up @@ -241,6 +242,9 @@ namespace gdjs {
* Set the markup text to display.
*/
setBBText(text: string): void {
if (this.angle !== 0) {
this._lockRotationCenter();
}
this._text = text;
this._renderer.updateText();
this.invalidateHitboxes();
Expand Down Expand Up @@ -336,6 +340,11 @@ namespace gdjs {

override setAngle(angle: float): void {
super.setAngle(angle);
if (angle === 0 && this._rotationCenter) {
this._rotationCenter = null;
this._renderer.updatePosition();
this.invalidateHitboxes();
}
this._renderer.updateAngle();
}

Expand Down Expand Up @@ -414,6 +423,24 @@ namespace gdjs {
: 0)
);
}

private _lockRotationCenter() {
if (this._rotationCenter) return;

this._rotationCenter = [this.getCenterX(), this.getCenterY()];
}

override getCenterX(): float {
return this._rotationCenter
? this._rotationCenter[0]
: super.getCenterX();
}

override getCenterY(): float {
return this._rotationCenter
? this._rotationCenter[1]
: super.getCenterY();
}
}
// @ts-ignore
gdjs.registerObject('BBText::BBText', gdjs.BBTextRuntimeObject);
Expand Down
52 changes: 29 additions & 23 deletions Extensions/BitmapText/bitmaptextruntimeobject-pixi-renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,36 +156,42 @@ namespace gdjs {
}

updatePosition(): void {
if (this._object.isWrapping() && this.getWidth() !== 0) {
const alignmentX =
this._object._textAlign === 'right'
? 1
: this._object._textAlign === 'center'
? 0.5
: 0;

const width = this._object.getWrappingWidth();
const renderedWidth = this.getWidth();

// A vector from the custom size center to the renderer center.
const centerToCenterX = (width - renderedWidth) * (alignmentX - 0.5);

this._pixiObject.position.x = this._object.x + width / 2;
this._pixiObject.anchor.x = 0.5 - centerToCenterX / renderedWidth;
} else {
this._pixiObject.position.x = this._object.x + this.getWidth() / 2;
this._pixiObject.anchor.x = 0.5;
}
const alignmentX =
this._object._textAlign === 'right'
? 1
: this._object._textAlign === 'center'
? 0.5
: 0;
const renderedWidth = this.getWidth();
const objectWidth = this._object.isWrapping()
? this._object.getWrappingWidth()
: renderedWidth;
const textLeftOffset = this._object.isWrapping()
? (objectWidth - renderedWidth) * alignmentX
: 0;
const centerX = this._object._rotationCenter
? this._object._rotationCenter[0]
: objectWidth / 2;

this._pixiObject.position.x = this._object.getDrawableX() + centerX;
this._pixiObject.anchor.x =
renderedWidth !== 0 ? (centerX - textLeftOffset) / renderedWidth : 0;

const alignmentY =
this._object._verticalTextAlignment === 'bottom'
? 1
: this._object._verticalTextAlignment === 'center'
? 0.5
: 0;
this._pixiObject.position.y =
this._object.y + this.getHeight() * (0.5 - alignmentY);
this._pixiObject.anchor.y = 0.5;
const renderedHeight = this.getHeight();
const textTopOffset = renderedHeight * alignmentY;
const centerY = this._object._rotationCenter
? this._object._rotationCenter[1]
: renderedHeight / 2;

this._pixiObject.position.y = this._object.y + centerY - textTopOffset;
this._pixiObject.anchor.y =
renderedHeight !== 0 ? centerY / renderedHeight : 0;
}

updateAngle(): void {
Expand Down
27 changes: 27 additions & 0 deletions Extensions/BitmapText/bitmaptextruntimeobject.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ namespace gdjs {
_verticalTextAlignment: string;

_renderer: gdjs.BitmapTextRuntimeObjectPixiRenderer;
_rotationCenter: FloatPoint | null = null;

/**
* @param instanceContainer The container the object belongs to.
Expand Down Expand Up @@ -251,6 +252,9 @@ namespace gdjs {
* Set the text to display.
*/
setText(text: string): void {
if (this.angle !== 0) {
this._lockRotationCenter();
}
this._text = text;
this._renderer.updateTextContent();
this.invalidateHitboxes();
Expand Down Expand Up @@ -385,6 +389,11 @@ namespace gdjs {

override setAngle(angle: float): void {
super.setAngle(angle);
if (angle === 0 && this._rotationCenter) {
this._rotationCenter = null;
this._renderer.updatePosition();
this.invalidateHitboxes();
}
this._renderer.updateAngle();
}

Expand Down Expand Up @@ -459,6 +468,24 @@ namespace gdjs {
: 0)
);
}

private _lockRotationCenter() {
if (this._rotationCenter) return;

this._rotationCenter = [this.getCenterX(), this.getCenterY()];
}

override getCenterX(): float {
return this._rotationCenter
? this._rotationCenter[0]
: super.getCenterX();
}

override getCenterY(): float {
return this._rotationCenter
? this._rotationCenter[1]
: super.getCenterY();
}
}
gdjs.registerObject(
'BitmapText::BitmapTextObject',
Expand Down
128 changes: 128 additions & 0 deletions Extensions/TextObject/tests/textruntimeobject.pixiruntimegamewithassets.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
// @ts-check

describe('gdjs.TextRuntimeObject (using a PixiJS RuntimeGame)', function () {
/**
* @param {gdjs.RuntimeScene} runtimeScene
*/
const loadScene = (runtimeScene) => {
runtimeScene.loadFromScene({
sceneData: {
layers: [
{
name: '',
visibility: true,
effects: [],
cameras: [],
ambientLightColorR: 0,
ambientLightColorG: 0,
ambientLightColorB: 0,
isLightingLayer: false,
followBaseLayerCamera: true,
},
],
r: 0,
v: 0,
b: 0,
mangledName: 'Scene1',
name: 'Scene1',
stopSoundsOnStartup: false,
title: '',
behaviorsSharedData: [],
objects: [],
objectsGroups: [],
instances: [],
variables: [],
usedResources: [],
uiSettings: {
grid: false,
gridType: 'rectangular',
gridWidth: 10,
gridHeight: 10,
gridDepth: 10,
gridOffsetX: 0,
gridOffsetY: 0,
gridOffsetZ: 0,
gridColor: 0,
gridAlpha: 1,
snap: false,
},
},
usedExtensionsWithVariablesData: [],
});
};

/**
* @param {string} text
* @returns {gdjs.TextObjectData}
*/
const makeTextObjectData = (text) => ({
name: 'score',
type: 'TextObject::Text',
variables: [],
behaviors: [],
effects: [],
content: {
characterSize: 40,
font: '',
bold: false,
italic: false,
underlined: false,
color: '255;255;255',
text,
textAlignment: 'left',
verticalTextAlignment: 'top',
lineHeight: 0,
isOutlineEnabled: false,
outlineThickness: 0,
outlineColor: '0;0;0',
isShadowEnabled: false,
shadowColor: '0;0;0',
shadowOpacity: 255,
shadowDistance: 0,
shadowAngle: 90,
shadowBlurRadius: 0,
},
});

const makeTextRuntimeObject = async () => {
const runtimeGame = await gdjs.getPixiRuntimeGameWithAssets();
const runtimeScene = new gdjs.RuntimeScene(runtimeGame);
loadScene(runtimeScene);

const gameContainer = document.createElement('div');
runtimeGame.getRenderer().createStandardCanvas(gameContainer);

const object = new gdjs.TextRuntimeObject(
runtimeScene,
makeTextObjectData('9')
);
runtimeScene.addObject(object);
object.setPosition(200, 200);
object.setAngle(90);
runtimeScene.renderAndStep(1000 / 60);

return { runtimeScene, object };
};

it('keeps the same rotated origin when the text changes size', async () => {
const { runtimeScene, object } = await makeTextRuntimeObject();
const originalWidth = object.getWidth();
const originalRotatedOrigin = object.getHitBoxes()[0].vertices[0].slice();

object.setText('100000');
runtimeScene.renderAndStep(1000 / 60);

expect(object.getWidth()).to.be.greaterThan(originalWidth);
const updatedRotatedOrigin = object.getHitBoxes()[0].vertices[0];
expect(updatedRotatedOrigin[0]).to.be.within(
originalRotatedOrigin[0] - 0.001,
originalRotatedOrigin[0] + 0.001
);
expect(updatedRotatedOrigin[1]).to.be.within(
originalRotatedOrigin[1] - 0.001,
originalRotatedOrigin[1] + 0.001
);

runtimeScene.unloadScene();
});
});
Loading