We Keep Coding

Scaling a shape in Phaser 2 without having it move

So, I'm trying to create a (very) simple progress bar in Phaser, (initially it's empty) and getting it to resize/scale to a specific size.
I'm not a fan of erasing and redrawing, since I assume this is more resource-heavy / not as efficient as simply tweening.
Whenever I scale its width, it insists on moving to the right - it is also updating its X coordinate as well.
I do know that we should change/set the anchor. I tried setting it to 0.5 (center), to 0 (left, top) and to 1.0 (bottom, right) as I saw in this question (and in the Phaser forums), but no matter the value that I set, the progress bar always moves (and always to the same place) as well.
Here is my code:
//Fill
var graphs = game.add.graphics(0, 0);
graphs.lineStyle(2, 0xFF0000, 1);
graphs.beginFill(0xFF0000, 1);
progressBar = graphs.drawRect(100, 50, 1, 20);
progressBar.anchor.setTo(0.5, 0.5);
//Outline
graphs = game.add.graphics(0, 0);
graphs.lineStyle(2, 0xFFFFFF, 1);
progressBarOutline = graphs.drawRect(100, 50, 100, 20);
progressBarOutline.anchor.setTo(0.5, 0.5);
//Resize it whenever the user presses the game area
game.input.onDown.add( resizeProgressBar, this );
And here is the code that I call to resize the (fill) bar (currently done through a tween):
function resizeProgressBar()
{
game.add.tween(loadingProgressBar.scale).to( { x: 2.5},
1000, Phaser.Easing.Quadratic.InOut, true);
}
Here is a fiddle that shows the issue (click on the canvas to update the bar).
This can't be that complicated. Am I forgetting something? Or am I supposed to calculate the new x position myself?
I'm using Phaser CE 2.11

I'm not sure why the height of the progressBar is growing, nor why it's moving, as I haven't done much with the raw graphics drawing capabilities in Phaser. However, there's a few things I do know which might help.
The difference between the questions you've linked to and your progress bar is that you're using raw graphics, instead of sprites.
If you switch to using a sprite-based progress bar you could either scale or set the width, depending upon what your progress graphic looks like.
Another option would be to do something similar to this tutorial for progress bars in Phaser 3. The relevant bits are defining the progress bar and then creating it:
var progressBar = this.add.graphics();
/// ...
this.load.on('progress', function (value) {
progressBar.clear();
progressBar.fillStyle(0xffffff, 1);
progressBar.fillRect(250, 280, 300 * value, 30);
});
You can change the last five lines as needed for your particular circumstances.
While this does clear and then redraw the rectangle, I personally haven't seen much of a performance hit doing this. At least with older versions of Phaser 2, using Sprites instead of Graphics seems to be the way to go. Of course, it also depends upon how often and how many of these progress bars you'll be displaying.

How to tween a line color in easeljs canvas

I have a series of dots with connected lines that I am animating in an easel.js canvas. The dots move around, and the lines stay connected to them as they move. As the dots move, I'm animating their color, so I want the lines to animate color as well.
I tried calling a color tween on the line, but it requires that I cache the line first.
For a circle, that's easy - I get the radius and, since its registration is in the center, its x and y coordinates and width and height are easy to calculate (for a circle with r=100 at 50,50, its cache would be cache(0,0,100,100). But for a line, I'm not sure how to reference the right coordinates for the cache statement, especially since the line start position, end position, and length are always changing.
Anyone have a way to do this?
I'm using greensock's timelinemax / tweenlite with the easeljs plugin to handle all the animations, if that's helpful.

If TweenLite handles color tweens, then you should just be able to update the "style" of your line any time:
var shape = new createjs.Shape();
var colorCommand = shape.graphics.beginStroke("#000000").command;
shape.graphics.moveTo(0,0).lineTo(100,100); // Draw the line
// Any time
colorCommand.style = "#ff0000";
// So in a tween:
TweenLite.to(colorCommand, 20, {style:"#00ffff"});
If you are using EaselJS, you can also use TweenJS, which has a ColorPlugin. Using similar code:
createjs.Tween.get(colorCommand).to({style:"#00fffff"}, 20000);
Here is a fiddle I made tweening the color of a line with TweenJS https://jsfiddle.net/lannymcnie/5zxpb944/
Cheers.

Resetting transform: rotate() by removing and appending canvas not showing data after appending and redrawing chart

I am trying to overcome the problem found in my previous question. Since it doesn't seem to be 100% possible I am attempting to destroy the canvas element and re-append it thus clearing all the rotation on the canvas element.
This almost works however the last step, when redrawing the chart from chart.js, nothing appears.
Putting some console.log inside the onComplete for the chart.js shows data in the console but nothing appears.
Current jsfiddle with onComplete data not appearing.
jsfiddle with rotation problem that I am trying to fix.
Previous question: here
I am drawing a wheel on a canvas, rotating it and then wanting to reset the rotation to 0. however due to the css property: -webkit-transition: -webkit-transform 15s ease; when resetting the rotation, it is rotation from r -> 0 and taking 15 seconds. Is there a way to reset the rotation without invoking the transform 15s ease?
I am redrawing data on the canvas after the rotation transform has finished thus needing an instant reset.
Many thanks
var r=-(3600 + random);
$("#wheel").css("transform","rotate("+r+"deg)");
$("#wheel").css("-moz-transform","rotate("+r+"deg)");
$("#wheel").css("-webkit-transform","rotate("+r+"deg)");
$("#wheel").css("-o-transform","rotate("+r+"deg)");
$("#wheel").one('webkitTransitionEnd', function() {
$("#wheel").css("transform","none");
$("#wheel").css("-moz-transform","none");
$("#wheel").css("-webkit-transform","none");
$("#wheel").css("-o-transform","none");
});

With a couple of changes, your code should work
Looks like there is some problem with the Chart.js version you are using. I changed it to the latest version (2.1 # https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js)
Before you do $('#wheel').remove(); you need to do myChart.destroy(); to remove that particular chart from Chart.js's internal list of objects (which it uses to resize existing charts when the window resizes)
The following bit in your code clears off the complete data.
...
for(i=chartData.datasets[0].data.length-1; i>=0; i--) {
chartData.datasets[0].data.splice(i,1);
chartData.datasets[0].backgroundColor.splice(i,1);
}
...
Since you then user chartData to initialize your chart, you are effectively trying to draw a blank chart. I assume this was some sort of copy-paste error. I've changed it in the updated fiddle to just remove the last sector alone, like so.
var i=chartData.datasets[0].data.length-1;
chartData.datasets[0].data.splice(i,1);
chartData.datasets[0].backgroundColor.splice(i,1);
If you want all the sectors again for the next run, just remove that block.
Fiddle - https://jsfiddle.net/wzbxuo5n/

How to make a 'Flash' effect over a Sprite in Phaser.js?

I'm creating an Rpg in Phaser, and I'm trying to make a Flash effect happen over a Sprite -that means turning the Sprite all white for a moment and then returning to its original color-.
So my question is: what's the best way of achieving this effect?. I've tried two solutions so far, but i'm missing something:
Solution 1:
I tried tweening the tint parameter of the sprite, like this:
this.game.add.tween(enemy).to({
tint: 0xffffff,
}, 100, Phaser.Easing.Exponential.Out, true, 0, 0, true);
But it doesn't work since setting the tint to 0xffffff is the same as setting it to its default color.
Solution 2:
My second possible solution is adding a white square that has the same size of the sprite, and using the actual sprite as a mask for the square:
var flash = this.game.add.graphics(0, 0);
flash.beginFill(0xffffff);
flash.drawRect(enemy.x, enemy.y, enemy.width, enemy.height);
flash.endFill();
flash.mask = enemy // enemy is my Sprite
/* .. code for tweening the flash */
The problem with this solution is that the mask needs to be a PIXI.Graphics object; and I'm using a Sprite object.
So please, any guidance would be appreciated.

In the version of Pixi that Phaser 2.2.2 uses there is a 'tintCache' which basically rounds the tint value, then caches the result. This means you can't do subtle tint ramping like you're trying to do with a tween. We removed this in Phaser 2.3, so it will be available from then, but as of now it's still in dev.
Also you can tint to a 'near white' colour - only 0xffffff precisely resets the tint. But a value very close to that would still be set ok and probably have the desired result.
If you're using WebGL I would still use a tint with 'as near as white as possible' colour values and tween them. You could disable the tint cache for yourself by copying that part of the changed code from the Phaser dev branch.
In Canvas mode it's expensive though as it has to recalculate the pixels every single time you update it.
If you need to worry about Canvas performance then honestly I would create a new PNG that matches your sprite, colour it in all-white and display it over the top of your main sprite as needed and alpha it out. It's less than ideal because of the extra assets required, but it would be the fastest in canvas mode for sure. All depends on your game though is that's acceptable or not.
Edit: Also occurred to me that you could probably achieve what you need by using a blend mode too, such as lighten. You'd duplicate your main sprite, set the blend mode on it, display it over the top of your sprite and fade it out. This would work fine in Canvas at least.

You can use a ColorMatrixFilter on the Sprite. In Phaser, you may have to manually load in the PIXI script first:
game.load.script('filter', 'js/filters/ColorMatrixFilter.js');
Use this for white:
var filter = new PIXI.ColorMatrixFilter();
filter.matrix = [1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1];
this.game.filter = [filter];
You can also tween the matrix values if you want a smooth transition.

Javascript animations in jQuery using transform.js

i'm performing some animations with transitions using the plugin demo'd here http://www.binpress.com/app/demo/app/145
However i'm using multiple transitions on the same element.
Basically i have an animation with 5 circles working as satellite objects around a central point. The central point has a little arrow and as you hover over any of the satellite points it transforms using this plugin to the satellite circle being hovered over.
Here's an example of what i'm doing, simplified.
jQuery(".applications").bind('mouseover', function(){
console.log('fired the second animation');
jQuery(".midpointer").animate({
transform: 'rotate(190deg)'
});
});
jQuery(".hosting").bind('mouseover', function(){
console.log('fired the second animation');
jQuery(".midpointer").animate({
transform: 'rotate(190deg)'
});
});
Now the problem with this, is that after the first animation any subsequent hovers do not rotate the element. So i'm assuming I need to do some form of reset, I had been looking at .stop() in jQuery but to little avail.
Anyone shed any light on this for me?

I believe that you rotate 190deg from the starting position each time you do a mouse over, not relative to the current rotation of the object.
According to the documentation, you can use += to add to the current rotation:
transform: '+=rotate(190deg)'