Develop Reference

A `graphics` object works well by itself but doesn't work with `Phaser.Display.Align.In.Center`, what am I missing?

I'm trying to center a circle in a given rectangle. One of the approaches to do the job could be graphics working with Phaser.Display.Align.In.Center and I'm having trouble doing that. Here is the code.
class BootScene extends Phaser.Scene {
constructor() {
super({
key: 'BootScene'
});
}
create() {
let btn = this.add.rectangle(800, 600, 200, 150, '#000').setOrigin(1);
let txt = this.add.text(0, 0, 'click');
Phaser.Display.Align.In.Center(txt, btn, );
let graphics = this.add.graphics({
x: 750,
y: 550
});
var shape = new Phaser.Geom.Circle(0, 0, 24);
graphics.fillStyle(0xff0000, 1);
graphics.fillCircleShape(shape);
//Phaser.Display.Align.In.Center(graphics, btn);
}
}
var config = {
width: 800,
height: 600,
backgroundColor: '#555',
scene: [BootScene]
}
var game = new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
There are 3 visual parts in the code above: the btn rectangle, the txt text and the graphics.
Phaser.Display.Align.In.Center works well with btn and txt.
graphics works well with btn using
this.add.graphics({
x: 750,
y: 550
});
However, if I uncomment the following line below out
Phaser.Display.Align.In.Center(graphics, btn);
the graphics is gone, not matter I set the config as { x: 750, y: 550 } or { x: 0, y: 0 }.
What am I missing?
I know I could use something like
let circle2 = this.add.circle(0, 0, 32, 0xf00000);
Phaser.Display.Align.In.Center(btn_circle, circle2);
I'd just like to know why it doesn't work when I combine graphics and Phaser.Display.Align.In.Center together.

Update: it seems to be a bug of phaser (or a mistake in the documentation), since after calling Phaser.Display.Align.In.Center on the graphics object, the x and y properties are set to NaN, and acording the documenation Align should accept a GameObject, which the Graphics object is.
Here is a possible solution:
You could simply generate a texture out of the graphics object, with the function generateTexture on the graphics object
Align the newly created image with the btn
I just added a setDepth call to the txt object, so it would be visible
class BootScene extends Phaser.Scene {
constructor() {
super({
key: 'BootScene'
});
}
create() {
let btn = this.add.rectangle(300, 175, 200, 150, '#000').setOrigin(1);
let txt = this.add.text(0, 0, 'click');
Phaser.Display.Align.In.Center(txt, btn );
let graphics = this.make.graphics({
x: 24,
y: 24,
});
var shape = new Phaser.Geom.Circle(24, 24, 24);
graphics.fillStyle(0xff0000, 1);
graphics.fillCircleShape(shape);
graphics.generateTexture('gCircle', 48, 48);
let image = this.add.image(200, 200, 'gCircle');
Phaser.Display.Align.In.Center(image, btn);
// only to make the Button visible
txt.setDepth(2);
}
}
var config = {
width: 400,
height: 200,
backgroundColor: '#555',
scene: [BootScene]
}
var game = new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>

Snap.svg change attr on hover using this

I'm drawing four rectangles on a Snap.svg canvas and want to change e.g. the opacity of the one the mouse cursor currently hovers over. I wanted one function to work for all those rects and thought there must be a way doing this using the keyword this but my code doesn't work and I don't understand why.
What am I doing wrong? This should be possible right?
var s = Snap(viewportWidth, viewportHeight);
var firstBox = s.rect(0, 0, 480, viewportHeight);
var secondBox = s.rect(480, 0, 480, viewportHeight);
var thirdBox = s.rect(960, 0, 480, viewportHeight);
var fourthBox = s.rect(1440, 0, 480, viewportHeight);
firstBox.attr({
fill: "lightblue",
id: "firstBox"
});
function hoverEffect() {
this.attr({
fill: "red"
});
}
$(this).on("hover", hoverEffect);

How to create sprite animation from particles animation by means of tweens?

Here is such a code snippet:
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });
var emitter;
function preload() {
game.load.image('wasp', 'assets/glass.png');
game.load.image('glass', 'assets/glass.png');
game.load.image('water', 'assets/blue-raster-floor.png');
}
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.add.tileSprite(0, 344, 800, 256, 'water');
emitter = game.add.emitter(game.world.centerX, 200);
emitter.makeParticles('glass');
emitter.setXSpeed(-200, 200);
emitter.setYSpeed(-150, -250);
emitter.bringToTop = true;
emitter.setAlpha(0.1, 1, 500);
emitter.setScale(-2, 2, 1, 1, 3000, Phaser.Easing.Sinusoidal.InOut, true);
emitter.gravity = 300;
emitter.start(false, 5000, 700, 50);
game.time.events.add(3000, destroyEmitter, this);
}
function tweens(cash) {
var bugs;
var index = 0;
var data;
var pos = [];
var tween;
var tweenData = { x: 0, y: 0 };
tween = game.make.tween(tweenData).to( { x: 100, y: 400 }, 2000, "Sine.easeInOut");
tween.yoyo(true);
data = tween.generateData(60);
bugs = game.add.group();
pos.push(new Phaser.Point(32, 0));
pos.push(new Phaser.Point(300, 100));
pos.push(new Phaser.Point(600, 70));
bugs.create(pos[0].x, pos[0].y, 'wasp');
bugs.create(pos[1].x, pos[1].y, 'wasp');
bugs.create(pos[2].x, pos[2].y, 'wasp');
tween.onUpdateCallback(function () {
bugs.getAt(0).x = pos[0].x + data[index].x;
bugs.getAt(0).y = pos[0].y + data[index].y;
bugs.getAt(1).x = pos[1].x + (data[index].x / 2);
bugs.getAt(1).y = pos[1].y + data[index].y;
// Inverse one of the values
bugs.getAt(2).x = pos[2].x - data[index].x;
bugs.getAt(2).y = pos[2].y + data[index].y;
index++;
if (index === data.length)
{
index = 0;
}
});
tween.start();
}
function destroyEmitter() {
console.log(emitter);
emitter.destroy();
tweens();
}
As you can see, I have made the particle-animation. Such steps need to be taken:
Particle-animation should be cached in the form of a set of shots (textures)
Particle-animation should be deleted. I have already done it (by means of ‘destroy‘)
Instead of the particle animation sprite animation should be realized by means of the function tweens using received textures
and passing these textures as the argument of the function tweens
Any refractoring is welcome.

In Phaser, the emitter particles are of the relatively simple DisplayObject class which do not support animations like the Phaser.Sprite does. Btw I don't know if using tweens is the best way to animate particles, because I suspect it will be heavy on CPU usage, using Sprite animations on the other hand is a bit more "light weight".
But either way, you could create a custom particle class which contains the code for your particle animation (using tweens, animations, timers, whatever) and then set that custom class as the emitter.particleClass, see a code example in link below:
http://codetuto.com/2016/02/phaser-animated-particles/

Var working but stops when doing the same using an array

I'm practicing some Javascript. I used a var to create an object (because before that I created a class) and now I'm trying to do the same, but instead of using a variable I want to use an array.
While this is working:
function start (){
var brick = new create_class_brick(10, 400, 10, 400, 0, 2.5, "brick");
window.setInterval(function(){brick.MOVE_BRICK();}, 25);
the MOVE_BRICK function doesn't work here:
function start (){
var i = 0;
vector_bricks[i++] = new create_class_brick(300, 500, 800, 600, 0, 2.5, "brick");
vector_bricks[i++] = new create_class_brick(200, 200, 600, 300, 0, 2.5, "brick");
for ( i = 0; i<vector_bricks.length; i++ ){
vector_bricks[i].create_brick();
vector_bricks[i].MOVE_BRICK();
}
}
Can anyone give me a hand?

Do you forget to call the function move_brick with window.setInterval? So it's not looping.

Simply change where you put the interval.
You get an error if you put it inside the for loop.
Meaning you should have this :
function start (){
var i = 0;
vector_bricks[i++] = new create_class_brick(300, 500, 800, 600, 0, 2.5, "brick");
vector_bricks[i++] = new create_class_brick(200, 200, 600, 300, 0, 2.5, "brick");
setInterval(function(){
for (var i = 0; i<vector_bricks.length; i++ ){
vector_bricks[i].create_brick(); // Not sure what this is for
vector_bricks[i].MOVE_BRICK();
}
}, 25);
}

rapheal js Element.node.onclick() and Element.click()

hello i have just start using Raphael but i'm very confused in the following code
WHY this code works
var paper = Raphael("canvas_container", 320, 200);
var mycir = paper.circle(50, 40, 30);
mycir.node.onclick = function() { alert("any thing") }
AND this doesn't
var paper = Raphael("canvas_container", 320, 200);
var mycir = paper.circle(50, 40, 30);
mycir.click = function() { alert("any thing") }
i also tried and it didn't work :
mycir.click(function(){alert("any thing")});
what the diffrence ? when i look at the raphaeal document they use Element.click() . why can't i use it them , is this is my version or What ?

The problem is that you are trying to assign to click, instead of calling it.
This should work:
var paper = Raphael("canvas_container", 320, 200);
var mycir = paper.circle(50, 40, 30);
mycir.click(function() { alert("any thing") });
Note that Raphael recommends not to use .node (as it says: "Don’t mess with it.")