We Keep Coding

Timed particle emitters in Phaser 3

I'm adding a blood effect for when enemies are hit in my game and I want to be able to specify how long the particle emitter will emit particles for, but the lifespan property when creating a particle emitter is the lifespan of the particles, not the emitter. Is there something like this, or another way? I could set it to off after a minute but I'm not sure how a ton of inactive particle emitters would affect performance.
this.add.particles({
//particle stuff
emitterLifespan: 1000
})
Any suggestions? Thanks!

tldr; ("easy" solution simply use setTimeout(() => emiter.stop(), 1000) , to stop the emitter. In the demo below, it is the last/yellow emitter)
I don't know of any such property, and is also not mentioned in the documentation (or the unofficial more hands on documentation)
I had the same problem, since the particles work abit odd, I think.
It seems you must balance the properies carefully. For the basic scenario, (seen below), the following properties could cause a problem:
lifespan lifespan of emitted particles
maxParticles hard limit of particles
frequency milliseconds for emit cycle
I noticed if the particles "die" before it reaches maxParticles, the emitter won't "stop".
You could configer the properties, so that the emitter stop when it reaches the max ( the red particles in the example), or you could use the setTimeout function to stop it, after some time(like the yellow particles). Green and blue just show how different values won't stop the emitter. (due to the random part, and depending on the performance of the browser/pc, this might run forever or stop. On my CellPhone the blue emitter stops, but the green ones don't. And on my PC green and blue run for "ever")
document.body.style = 'margin:0;';
var config = {
type: Phaser.AUTO,
width: 536,
height: 183,
physics: {
default: 'arcade',
arcade: {
gravity:{ y: 100 },
debug: true
}
},
scene: {
create
},
banner: false
};
function create () {
this.add.text(10,10, 'Click to Create Blood').setOrigin(0);
let g = this.make.graphics({add:false});
g.fillStyle(0xffffff)
g.fillCircle(4,4,4);
g.generateTexture('blood', 8, 8)
let particles = this.add.particles('blood');
this.input.on('pointerdown', p => {
particles.createEmitter({
tint: 0xff0000,
alpha: { start: 1, end: 0 },
scale: { start: 0.5, end: 1.5 },
speed: {random: [20, 100] },
accelerationY: {random: [-100, 200] },
rotate: { min: -180, max: 180 },
lifespan: { min: 300, max: 800 },
frequency: 20,
maxParticles: 10,
x: p.x,
y: p.y
});
particles.createEmitter({
alpha: { start: 1, end: 0 },
tint: 0x00ff00,
scale: { start: 0.5, end: 1.5 },
speed: {random: [20, 100] },
accelerationY: {random: [-100, 200] },
rotate: { min: -180, max: 180 },
lifespan: { min: 300, max: 800 },
frequency: 120,
maxParticles: 10,
x: p.x + 100,
y: p.y
});
particles.createEmitter({
alpha: { start: 1, end: 0 },
tint: 0x0000ff,
scale: { start: 0.5, end: 1.5 },
speed: {random: [20, 100] },
accelerationY: {random: [-100, 200] },
rotate: { min: -180, max: 180 },
lifespan: { min: 200, max: 300 },
frequency: 10,
maxParticles: 20,
x: p.x + 200,
y: p.y
});
let emitter = particles.createEmitter({
alpha: { start: 1, end: 0 },
tint: 0xffff00,
scale: { start: 0.5, end: 1.5 },
speed: {random: [20, 100] },
accelerationY: {random: [-100, 200] },
rotate: { min: -180, max: 180 },
lifespan: { min: 200, max: 300 },
frequency: 10,
maxParticles: 20,
x: p.x + 300,
y: p.y
});
// Stop after 1000 ms
setTimeout(()=> emitter.stop(), 1000);
});
}
new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
btw.: you could also use the explode function if all particles should be emitted at once, checkout this official example, and here the link to the documenation.

How can I have different values for a set of same properties depending on value outside in constant objects?

I am doing some kind of a skill overview, where you have different stuff for each skill level, ranging from Level 1 to 10.
props = {
name: 'N/A',
skillType: 'N/A',
level: {
1: {
skillPoints: 0,
mp: 0,
attackPower: 0,
effect: 0,
requiredLevel: 0,
castTime: {
fixed: 0,
variable: 0,
total: 0
},
cooldown: {
fixed: 0,
variable: 0,
total: 0,
},
duration: 0,
attackEnemyNumber: 0,
description: ''
},
},
weaponType: '',
posX: 0,
posY: 0
}
The issue now here is that I'd like to have the same values
skillPoints: 0,
mp: 0,
attackPower: 0,
effect: 0,
requiredLevel: 0,
castTime: {
fixed: 0,
variable: 0,
total: 0
},
cooldown: {
fixed: 0,
variable: 0,
total: 0,
},
duration: 0,
attackEnemyNumber: 0,
description: ''
for every level from 0 to 10, but not exactly the same, as I might need to adjust the skillPoints you need to spend, or the attack power, the mp or other properties.
So I don't want to take every property under '1: {}' and copy it over to make a '2: {}' with the same properties. Is there a way to achieve that? Not sure if a constant object is a good way to do it anyway. But that would make stuff a lot easier...

Particles spawn too fast - Phaser 3

I am trying to make a snow effect behind the main menu of my game using the particle emitter but particles spawn way too fast.
I have this code:
var particles = this.add.particles('snow');
var emitter = particles.createEmitter({
speedY: { min: 15, max: 40 },
gravityY: 0,
scale: 0.2,
quantity: 1,
lifespan: { min: 28000, max: 30000 },
emitZone: { source: new Phaser.Geom.Line(-20, -100, 820, -100 )}
});
And quantity is only one, so I do not know how to fix this. Is it possible to change the spawn speed of the particles?
I am using Phaser 3 and the arcade physics.

I think what you're looking for is the frequency setting.
It doesn't exactly change the spawn speed, but it changes the time between flow cycles. If you add a frequency: 1000 to the emitter you currently have, it gives you about 8-10 particles on the screen at a time. You can play with that number until you get the flow you want.

I achieved for my snow effect this way, maybe it helps you. It has a random wind blow and rotation for the snowflakes.
this.emitter = snowParticles.createEmitter({
frame: [0, 1, 2, 3, 4, 5],
x: {min: 0, max: this.sys.game.canvas.width},
y: 0 ,
lifespan: {min: 20000, max: 60000},
speedY: 50,
gravityX: Math.ceil((Math.random() - 0.5) * 2) < 1 ? -10 : 10,
gravityY: 10,
minVelocityY: 10,
maxVelocityY: 30,
minVelocityX: 10,
maxVelocityX: 30,
quantity: 1,
scale: 0.4,
frequency: 1000,
blendMode: 'ADD',
rotate: { start: 0, end: 180 }
});
Here is the uploaded live example: https://vajda.co.uk/demo/react/winter-landscape/

Change zoom level 3d scatterPlot (Plotly)

I have a 3d scatterplot of which i want to change its zoom level and pan around it programmatically. I have tried setting the range in the layout from the beggining but it does not change the actual zoom level, just the points in the range:
"layout":
{
margin: {
l: 0,
r: 0,
b: 0,
t: 0,
pad: 1
},
scene:{
xaxis: {range:[-13,13.5]},
yaxis: {range:[-15.5,13.5]},
zaxis: {range:[-14.5,13.5]},
}
},
Also i've tried invoking it with the relayout function, but it is also not working
var update = {
scene:{
xaxis: {range:[-13,13.5]},
yaxis: {range:[-15.5,13.5]},
zaxis: {range:[-14.5,13.5]},
},
};
Plotly.relayout(gd, update);

Finally i found the property to change the camera position:
var update = {
scene:{
camera: {
center: { x: 0, y: 0, z: 0 },
eye: { x: 2, y: 2, z: 0.1 },
up: { x: 0, y: 0, z: 1 }
}
},
};
Plotly.relayout(gd, update);

Vuex state not updating on mutation

In my Vue.js/Vuex based application I'm using this mutation to reset part of the Vuex state:
restartGame(state) {
state.gameRunning = true
state.camera = {
position: {
x: 0,
y: 10,
z: 0
},
moveForward: false,
moveBackward: false,
moveLeft: false,
moveRight: false,
velocity: {
x: 0,
z: 0
},
mouseMovement: {
x: 0,
y: 0
},
rotation: {
x: 0,
y: 0
}
}
}
This way, things work out fine, but writing out the whole camera state seems pretty verbose to me. So I extracted the initial camera state into a seperate file:
initialCameraState.js
export default {
position: {
x: 0,
y: 10,
z: 0
},
moveForward: false,
moveBackward: false,
moveLeft: false,
moveRight: false,
velocity: {
x: 0,
z: 0
},
mouseMovement: {
x: 0,
y: 0
},
rotation: {
x: 0,
y: 0
}
}
I've refactored the resetGame() mutation like this:
import initialCameraState from './initialCameraState'
restartGame(state) {
state.gameRunning = true
state.camera = initialCameraState
}
But somehow this doesn't work, the Vuex store does not get updated but seems to just stay the same. How can this be?
I'm also using initialCameraState.js to set (part of) the initial state of the Vuex store. My first thought was that when mutating the according part of the state, initialCameraState is also being mutated. That would explain resetGame() not showing any effects. So I tried using the object spread operator in both places where initialCameraState.js gets imported/used, but this didn't solve the issue.

I don't have all your code, but here's what I think may be happening. You are initing the game with the initial state which you have imported. During the game you update the state of the object by doing something like:
state.camera['position'] = {
x: 100,
y: 100,
z: 100
}
}
What actually happens is that your initial state has been updated because you have a reference to the object, not a copy of it, so when you try to reset the state it just remains the same, because you have inadvertently changed the initial state object.
To solve this simply wrap the initial state in a function (a factory function) so that the init state always gets returned:
export default function() {
return {
position: {
x: 0,
y: 10,
z: 0
},
moveForward: false,
moveBackward: false,
moveLeft: false,
moveRight: false,
velocity: {
x: 0,
z: 0
},
mouseMovement: {
x: 0,
y: 0
},
rotation: {
x: 0,
y: 0
}
}
};
Here's a JSFiddle showing what happens without a function (the positions remain the same): https://jsfiddle.net/9qg8ws0x/
And here one with the function (the positions are reset): https://jsfiddle.net/27xozazf/

export default {
initializeCamera () {
return {
position: {
x: 0,
y: 10,
z: 0
},
moveForward: false,
moveBackward: false,
moveLeft: false,
moveRight: false,
velocity: {
x: 0,
z: 0
},
mouseMovement: {
x: 0,
y: 0
},
rotation: {
x: 0,
y: 0
}
}
}
}
import initial from './initial'
restartGame(state) {
state.gameRunning = true
state.camera = initial.initializeCamera()
}