"new PIXI.TextStyle" - RGB Conversion Gradient Error?

[JeZxLee]

Hi,

Trying to get this code working, but it has an error where indicated:

Calls to function:

PlaceTextOntoScreen(15, "''1993 Cobra 5.0 Engine[TM]''", 5, 512-40, 1, 1, 1, .5, .5, .5, 0, 0, 0, 1);
FPSmessage = PlaceTextOntoScreen(15, "FPS=", 5, 512-20, 1, 1, 1, .5, .5, .5, 0, 0, 0, 1);

The Function:

// ""visuals.js"

var FPS = 0;
var FPSText = "FPS="+FPS;

var FrameCount = 0;

var CurrentTime = new Date().getTime();
var NextSecond = CurrentTime+1000;

var FPSmessage;

var TextSprites = new Array(1000);
var CurrentTextSpriteIndex = 0;

function PlaceTextOntoScreen(size, texts, screenX, screenY, rFillT, gFillT, bFillT, rFillB, gFillB, bFillB, rOutline, gOutline, bOutline, alphaVal)
{
	var style = new PIXI.TextStyle({
		font: "FreeSans",
		fontSize: size,
		fill: [PIXI.utils.rgb2hex([rFillT, gFillT, bFillT]), PIXI.utils.rgb2hex([rFillB, gFillB, bFillB])], //<---ERROR? when values are not 0 or 1
		stroke: PIXI.utils.rgb2hex([rOutline, gOutline, bOutline]),
		strokeThickness: 3
	});

	TextSprites[CurrentTextSpriteIndex] = new PIXI.Text( texts, style );
	TextSprites[CurrentTextSpriteIndex].position.set(screenX, screenY);
	TextSprites[CurrentTextSpriteIndex].alpha = alphaVal;
	stage.addChild(TextSprites[CurrentTextSpriteIndex]);

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

I've been fighting with this for 3 hours, need some help!

JeZxLee

[ivan.popelyshev]

What kind of error? You specified where but which one?

Sometimes its enough to provide code, but right now i dont see the problem (

[JeZxLee]

Ok, sorry - the ERROR got cut off...

PlaceTextOntoScreen(15, "''1993 Cobra 5.0 Engine[TM]''", 5, 512-40, 1, 1, 1, .5, .5, .5, 0, 0, 0, 1);

When ".5" is used I get errors and no text on the canvas

Only "1" or "0" is working and nothing in between?

Line of code where error occurs is below:

fill: [PIXI.utils.rgb2hex([rFillT, gFillT, bFillT]), PIXI.utils.rgb2hex([rFillB, gFillB, bFillB])], //<---ERROR?

ERROR is:

"SyntaxError: An invalid or illegal string was specified pixi.js:20875"

gradient.addColorStop(stop, style.fill[j]);

Hope someone knows what is the problem, thanks!

JeZxLee

[Taz]

try range 0..255 instead of 0..1

[ivan.popelyshev]

^^^ 0..1 is correct. i doht know whether multiple fill accepts numbers, may be ".toString(16)" will help there or something like that.

Try that one:

PIXI.utils.hex2string(PIXI.utils.rgb2hex(...))

if it works, then we have a bug in gradient.

[Taz]

oh sorry thought I remembered needing to use 0..255 for params to PIXI.utils.rgb2hex()

[JeZxLee]

Sorry, no go on your suggestion:

fill: [  PIXI.utils.hex2string( PIXI.utils.rgb2hex(rFillT, gFillT, bFillT) ), PIXI.utils.hex2string( PIXI.utils.rgb2hex(rFillB, gFillB, bFillB) )  ],

Same error as before, Now what do I do?

JeZxLee

[JeZxLee]

oh, sorry, I missread

let me try again

[JeZxLee]

nope, no go...

[JeZxLee]

Hi,

Here is the broken full project in ZIP format, please help fix:

http://16bitsoft.com/files/PixiAudio5JS/Source/PixiAudio5JS.zip

Code is clean...

JeZxLee

[Taz]

as I recall when I used PIXI.utils.rgb2hex() with 0..1 for RGB values it didn't work but when tried with 0..255 range it did work. So worth trying IMO if nothing else is working

[ivan.popelyshev]

I guess you have to ask @themoonrat or look at canvas2d standart. Cheers up! Your first time finding a bug in pixi )))

[ivan.popelyshev]

2 minutes ago, Jinz said:

as I recall when I used PIXI.utils.rgb2hex() with 0..1 for RGB values it didn't work but when tried with 0..255 range it did work. So worth trying IMO if nothing else is working

export function rgb2hex(rgb)
{
    return (((rgb[0] * 255) << 16) + ((rgb[1] * 255) << 8) + (rgb[2] * 255 | 0));
}

Guys, dont play guessing game, just look at the sources and fix that place. I'll make PR for you if you find whats wrong. As you see, its muhltiplied by 255, so its supposed to be in 0..1 range.

@Jinz time to clone the project and open it in WebStorm

[JeZxLee]

is there some workaround I can use while the devs investigate bug and officially fix it?

JeZxLee

[ivan.popelyshev]

There is. Find whatever is wrong with that function. Here it is: https://github.com/pixijs/pixi.js/blob/dev/src/core/text/Text.js#L433

You can write "Text.prototype._generateFillStyle=..." make changes in the function. Study HTML5 Text Gradient API : https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient , look at what is passed to addColorStop in the function you copied.

Please dont be afraid of studying and modifying pixi code, you dont even have to build it, just hack the function and try to do something.

[JeZxLee]

Sorry, but I am a mediocre programmer.

Although I successfully built a custom HTML5/JS 2-D game engine, WebGL is alittle beyond my intelligence.

I'll move forward with something else, post when it's fixed, thank you!

JeZxLee

[ivan.popelyshev]

The part you have to edit has no relation to webgl, its old 2d context used for text. You just have to debug that piece of code  Or ask @themoonrat, i have sent him the link.

 

Please dont limit yourself

[JeZxLee]

I booted up my WebStorm.

Code inspection shows many warnings and some errors.

I'll move forward with something else and will come back to text when it's fixed, thanks!

JeZxLee

[ivan.popelyshev]

I ask you to just make one function in your own file, separate from pixi.js:

PIXI.Text.prototype._generateFillStyle = function(style, lines)
    {
        if (!Array.isArray(style.fill))
        {
            return style.fill;
        }

        // cocoon on canvas+ cannot generate textures, so use the first colour instead
        if (navigator.isCocoonJS)
        {
            return style.fill[0];
        }

        // the gradient will be evenly spaced out according to how large the array is.
        // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75
        let gradient;
        let totalIterations;
        let currentIteration;
        let stop;

        const width = this.canvas.width / this.resolution;
        const height = this.canvas.height / this.resolution;

        // make a copy of the style settings, so we can manipulate them later
        const fill = style.fill.slice();
        const fillGradientStops = style.fillGradientStops.slice();

        // wanting to evenly distribute the fills. So an array of 4 colours should give fills of 0.25, 0.5 and 0.75
        if (!fillGradientStops.length)
        {
            const lengthPlus1 = fill.length + 1;

            for (let i = 1; i < lengthPlus1; ++i)
            {
                fillGradientStops.push(i / lengthPlus1);
            }
        }

        // stop the bleeding of the last gradient on the line above to the top gradient of the this line
        // by hard defining the first gradient colour at point 0, and last gradient colour at point 1
        fill.unshift(style.fill[0]);
        fillGradientStops.unshift(0);

        fill.push(style.fill[style.fill.length - 1]);
        fillGradientStops.push(1);

        if (style.fillGradientType === TEXT_GRADIENT.LINEAR_VERTICAL)
        {
            // start the gradient at the top center of the canvas, and end at the bottom middle of the canvas
            gradient = this.context.createLinearGradient(width / 2, 0, width / 2, height);

            // we need to repeat the gradient so that each individual line of text has the same vertical gradient effect
            // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875
            totalIterations = (fill.length + 1) * lines.length;
            currentIteration = 0;
            for (let i = 0; i < lines.length; i++)
            {
                currentIteration += 1;
                for (let j = 0; j < fill.length; j++)
                {
                    if (typeof fillGradientStops[j] === 'number')
                    {
                        stop = (fillGradientStops[j] / lines.length) + (i / lines.length);
                    }
                    else
                    {
                        stop = currentIteration / totalIterations;
                    }
                    gradient.addColorStop(stop, fill[j]);
                    currentIteration++;
                }
            }
        }
        else
        {
            // start the gradient at the center left of the canvas, and end at the center right of the canvas
            gradient = this.context.createLinearGradient(0, height / 2, width, height / 2);

            // can just evenly space out the gradients in this case, as multiple lines makes no difference
            // to an even left to right gradient
            totalIterations = fill.length + 1;
            currentIteration = 1;

            for (let i = 0; i < fill.length; i++)
            {
                if (typeof fillGradientStops[i] === 'number')
                {
                    stop = fillGradientStops[i];
                }
                else
                {
                    stop = currentIteration / totalIterations;
                }
                gradient.addColorStop(stop, fill[i]);
                currentIteration++;
            }
        }

        return gradient;
    }

There. now you can debug it in separate file.

I understand that its difficult to do the first time, but it is in fact easy enough. Now try to debug it with chrome tools (step over, step into, breakpoints, all those things). Look at which variable go to addColorStop and read the docs why canvs2d is not accepting it. You can reproduce it easily.

[themoonrat]

@JeZxLee you are using an old version of PIXI, v4.0.0. This issue does not exist in the latest version, 4.5.3

[ivan.popelyshev]

33 minutes ago, themoonrat said:

@JeZxLee you are using an old version of PIXI, v4.0.0. This issue does not exist in the latest version, 4.5.3

@JeZxLee You sure needed programming skills above average to notice that I'm not scoffing at you, just pointing out that you should be more confident. You'll be the one answering people in this forum in no time!

[JeZxLee]

HaHa, yes, now it works with current version of pixi.js!

Thank you very much!

JeZxLee

[ivan.popelyshev]

Like my posts!!! I like yours