JeZxLee

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

23 posts in this topic

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

^^^ 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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

oh, sorry, I missread

let me try again

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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;)

Share this post


Link to post
Share on other sites

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

JeZxLee

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 likes this

Share this post


Link to post
Share on other sites

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

PixiWebStormErrors-01.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

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

Thank you very much!

JeZxLee

PixiWorks-01.png

ivan.popelyshev likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.