Develop Reference

Why is sprite.tintBottomLeft returning the wrong color in phaser 3?

I'm currently working on a project using Phaser 3.
I'm tring to save a sprite ("object" in the code section below) current color before modifying it.
I am saving the values of tintBottomLeft, tintBottomRight, tintTopLeft and tintTopRigh into 4 other variables.
object.on('pointerover', function() {
console.log(object);
console.log("_tintBL", object._tintBL);
previousTintBL = object.tintBottomLeft;
previousTintBR = object.tintBottomRight;
previousTintTL = object.tintTopLeft;
previousTintTR = object.tintTopRight;
object.setTint(0xff00ff);
});
object.on('pointerout', function() {
object.clearTint();
object.setTint(previousTintTL, previousTintTR, previousTintBL, previousTintBR);
previousTintBL = object.tintBottomLeft;
previousTintBR = object.tintBottomRight;
previousTintTL = object.tintTopLeft;
previousTintTR = object.tintTopRight;
});
The prolem is that the sprite current color is 16711680 (printed in the object propriety using console.log, image linked)
But when I'm accessing th variable _tintBL alone, the color is now 255 and I really don't understand why this is happening.
Any help ?
console.log screenchot

Alright, I got an answer on another forum. So here is the answer :
" Because before version 3.50 tint used to be stored in BGR instead of RGB. https://github.com/photonstorm/phaser/blob/v3.24.1/src/gameobjects/components/Tint.js#L14
Given that it was applied automatically in the setter, but not reversed in the getter, the value reads as different one than what was set.
Either convert to RGB yourself, or update to the 3.50 beta version where it’s no longer an issue."

Formula not calculating correctly in JavaScript

I'm experiencing an issue with a formula in JavaScript.
var animMoveX = $(this).attr('data-start') + (animPercentage / 100) * ($(this).attr('data-finish') - $(this).attr('data-start'));
To my eyes it's a fairly simple piece of math, but the console outputs 120-[variable no relative to animPercentage, eg. 126.49681528662421].
I've double-checked all variables, and they are correct, and if I replace one of the $(this).attr('data-start') variable in one of the positions with a fixed number, then the calculation is run just fine. Can someone shed some light on why this is, and how I could potentially work around it?

From my comment: Precedence means it will calculate a number on the right and add it to the string from data-start (i.e. using string concatenation). That needs to be converted to a number too. #Pointy's suggestion will do that as data converts strings to appropriate data types (when it can).
So basically change all the attr() calls to data() calls and "numbers" (stored in attributes) will become numbers:
var animMoveX = $(this).data('start') + (animPercentage / 100) * ($(this).data('finish') - $(this).data('start'));
As an added bonus, using data instead of attr is shorter code too :)

Comparing two colors to get likeness rating

I have a color selector that allows a user to change fore and background color for a grid. I wondered if there is a way to compare two colors in the #FFFFFF format to get a "likeness" rating, i.e. to try and verify if the foreground colors are readable on a specified background.

If colour_1 = #aabbcc and colour_2 = #AABBCC you could do something like:
diff = sqrt((aa - AA)^2 + (bb - BB)^2 + (cc - CC)^2)
The smaller this value is, the more alike the two colours should be.

Using different fillStyles in the same string?

I'm wondering if there is a way to do 2 different fillStyle's in the same fillText on canvas.
Example: If I have a string var string = "text";.
How could i then write that string in different colors with fillText(string, X, Y).
Is this even possible?

You would need to split the string into its specific coloured parts, and render each part separately, though position them together to appear as if they were rendered using one fillText() call.
In order to properly position your multiple text rendering, you can use measureText() to assist you.

How to get a part of CSS code to JavaScript/jQuery?

I have asked a question few days ago and I got a answer, that wasn't truly answering it but it gave me an idea... The code below was in that answer and I quite understood it after a moment...Except one part. I wanted to animate some radial gradients and that guy made a jQuery plugin that wasn't doing what I wanted but it at least was some base. So the part that I don't understand is the one with command
.match(\d+/g))
He somehow (if I am right) got the RGB from the gradient and than used it to animate between the two colors. I tried to find something on google and jQ documentation but I wasn't able to find something startable with.
So my question is how can I get some stuff out of CSS like parts of gradients etc.? I want to make a gradient animating plugin for jQuery but I can't until I figure out how to change only parts of css attribs without changing the whole one as the guy did.
-- His example
jQuery.fx.step.gradient = function(fx) {
if (fx.state == 0) { //On the start iteration, convert the colors to arrays for calculation.
fx.start = fx.elem.style.background.match(/\d+/g); //Parse original state for numbers. Tougher because radial gradients have more of them
fx.start[0] = parseInt(fx.start[0]);
fx.start[1] = parseInt(fx.start[1]);
fx.start[2] = parseInt(fx.start[2]);
fx.end = fx.end.match(/\d+/g);
fx.end[0] = parseInt(fx.end[0]);
fx.end[1] = parseInt(fx.end[1]);
fx.end[2] = parseInt(fx.end[2]);
}
fx.elem.style.background = "-webkit-linear-gradient(rgb(" + [
Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
].join(",") + ")," + "rgb(0,0,0))";
}
$(this).animate({"gradient": "rgb(0, 255, 0)"});
--David

Well be careful, in his example the final code is actually
$(this).animate({"gradient": "rgb(" + c.join(",") + ")"});
You have what looks like a hard coded string in your question.
$.match() is a regex function that queries the object (fx.end or fx.elem.style.background) for the specified search string (/\d+/g). As he commented, he is parsing for numbers:
fx.start = fx.elem.style.background.match(/\d+/g); //Parse original state for numbers. Tougher because radial gradients have more of them
A regex pattern matching guide (one of gazillions) can be found here.
As far as assigning CSS values, in the end they are just strings. So you can retrieve any CSS value you want and parse it and plug it back in.
$('#myobject').css('<css property name>') // get value
$('#myobject').css('<css property name>', '<value'>) // set value
The logic you will have to work out yourself but it looks like the gentleman above has already pointed you in the right direction.
Or rather than just set the CSS property for gradient, in your case it seems you'd be using the animate plugin in jQuery UI along with his "gradient" method which does the CSS insertion for you.
$(this).animate({"gradient" : "<your parsed/calculated gradient value>"});

If you have a look at this JSFiddle, you'll see you can grab the gradient CSS for an element, however, it's the entire gradient definition instead of each value.
In the example above, FF6 spews out
-moz-radial-gradient(50% 50% 45deg, circle closest-side, rgb(255, 165, 0) 0%, rgb(255, 0, 0) 100%)
You could parse (sort of) with regex, but everyone writes their CSS differently so this would be pretty difficult.
There's a solution for setting the gradient, but not getting it. There should be good information in this answer.