Strange Text Outlines? - Trying To Polish Beta1...

[JeZxLee]

Hi,

We are ahead of schedule for a Beta1 release.
Trying to polish the game now...

We are seeing weird text outlines in the game?
Our text code is below, what could be the problem?(see attached screenshot)

Thanks!

JeZxLee

function PlaceTextOntoScreen(size, justification, texts, screenX, screenY, rFillT, gFillT, bFillT, rFillB, gFillB, bFillB, rOutline, gOutline, bOutline, alphaVal)
{
	var outlineThinkness = 3;
	if (ScreenToDisplay == AboutScreen)  outlineThinkness = 7;
	
	var style = new PIXI.TextStyle({
		font: "FreeSans",
		fontSize: size,
		fill: [PIXI.utils.rgb2hex([rFillT, gFillT, bFillT]), PIXI.utils.rgb2hex([rFillB, gFillB, bFillB])],
		stroke: PIXI.utils.rgb2hex([rOutline, gOutline, bOutline]),
		strokeThickness: outlineThinkness
	});

	TextSprites[CurrentTextSpriteIndex] = new PIXI.Text( texts, style );

	if (justification == TextLeft)  TextSprites[CurrentTextSpriteIndex].position.set(screenX + (TextSprites[CurrentTextSpriteIndex].width/2), screenY);
	else if (justification == TextCenter)  TextSprites[CurrentTextSpriteIndex].position.set(screenX, screenY );
	else if (justification == TextRight)  TextSprites[CurrentTextSpriteIndex].position.set( (OriginalCanvasWidth - screenX - (TextSprites[CurrentTextSpriteIndex].width/2) ), screenY );

	TextSprites[CurrentTextSpriteIndex].alpha = alphaVal;
	TextSprites[CurrentTextSpriteIndex].anchor.set(0.5);

	stage.addChild(TextSprites[CurrentTextSpriteIndex]);

	if (CurrentTextSpriteIndex < 100)  CurrentTextSpriteIndex++;
	return(CurrentTextSpriteIndex-1);
}

 

[JeZxLee]

Sorry, code got cut off:

function PlaceTextOntoScreen(size, justification, texts, screenX, screenY, rFillT, gFillT, bFillT, rFillB, gFillB, bFillB, rOutline, gOutline, bOutline, alphaVal)
{
    var outlineThinkness = 3;
    if (ScreenToDisplay == AboutScreen)  outlineThinkness = 7;
    
    var style = new PIXI.TextStyle({
        font: "FreeSans",
        fontSize: size,
        fill: [PIXI.utils.rgb2hex([rFillT, gFillT, bFillT]), PIXI.utils.rgb2hex([rFillB, gFillB, bFillB])],
        stroke: PIXI.utils.rgb2hex([rOutline, gOutline, bOutline]),
        strokeThickness: outlineThinkness
    });

    TextSprites[CurrentTextSpriteIndex] = new PIXI.Text( texts, style );

    if (justification == TextLeft)  TextSprites[CurrentTextSpriteIndex].position.set(screenX + (TextSprites[CurrentTextSpriteIndex].width/2), screenY);
    else if (justification == TextCenter)  TextSprites[CurrentTextSpriteIndex].position.set(screenX, screenY );
    else if (justification == TextRight)  TextSprites[CurrentTextSpriteIndex].position.set( (OriginalCanvasWidth - screenX - (TextSprites[CurrentTextSpriteIndex].width/2) ), screenY );

    TextSprites[CurrentTextSpriteIndex].alpha = alphaVal;
    TextSprites[CurrentTextSpriteIndex].anchor.set(0.5);

    stage.addChild(TextSprites[CurrentTextSpriteIndex]);

    if (CurrentTextSpriteIndex < 100)  CurrentTextSpriteIndex++;
    return(CurrentTextSpriteIndex-1);
}
 

[bubamara]

http://pixijs.download/release/docs/PIXI.TextStyle.html

The lineJoin property sets the type of corner created, it can resolve spiked text issues. Default is 'miter' (creates a sharp corner).

try 'round'

[JeZxLee]

Hi,

Many thanks, that fixed the issue!

JeZxLee

PS - Beta1 should be done by Wednesday!