Particles spawn too fast - Phaser 3 - javascript

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/

Related

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 to add a needle or dial to gauge indicator in plotly.js?

I'm having hard time adding the dial/needle to the gauge chart from plotly.js.
gauge without needle
: As you could see in the image above it's gauge chart without any needle.
gauge with needle
: I want to build something similar to "gauge with needle", which is giving me hard time.
my code for "gauge without needle/dial" :
`https://codepen.io/vivek137/pen/rNyembX`
You will need to add an arrow annotation on top of your gauge chart. I answered a similar question and in that answer, I described how you can use polar coordinates to find out the ending position x and y for your arrow. Under the hood, the gauge chart you made has an x-range of [0,1] and a y-range of [0,1], so the starting point is ax=0.5 and ax=0 which are both parameters for your annotation. Then the ending position is given by x = 0.5 + r * cos(theta) and y = r * sin(theta) where theta is the angle taken from the right side of the chart and moving counterclockwise.
One thing you should keep in mind is that if the render area in your browser isn't a perfect square, then the r and theta values may need to be adjusted. For example, in my codepen, I used r=0.7, theta=93.5 to point to the 40.
let data = [
{
mode: "gauge",
type: "indicator",
value: 40,
gauge: {
shape: "angular",
bar: {
color: "blue",
line: {
color: "red",
width: 4
},
thickness: 0
},
bgcolor: "#388",
bordercolor: "#a89d32",
borderwidth: 3,
axis: {
range: [0,100],
visible: true,
tickmode: "array",
tickvals: [5, 10, 40, 80, 100],
ticks: "outside"
},
steps: [
{
range: [0, 40],
color: "#9032a8"
}
]
}
}
]
var theta = 93.5
var r = 0.7
var x_head = r * Math.cos(Math.PI/180*theta)
var y_head = r * Math.sin(Math.PI/180*theta)
let layout = {
xaxis: {range: [0, 1], showgrid: false, 'zeroline': false, 'visible': false},
yaxis: {range: [0, 1], showgrid: false, 'zeroline': false, 'visible': false},
showlegend: false,
annotations: [
{
ax: 0.5,
ay: 0,
axref: 'x',
ayref: 'y',
x: 0.5+x_head,
y: y_head,
xref: 'x',
yref: 'y',
showarrow: true,
arrowhead: 9,
}
]
};
Plotly.newPlot('gauge1', data, layout)

How to custom gauge js

I am doing gauge indicator and choose https://bernii.github.io/gauge.js/
my script is
var opts = {
angle: -0.12, // The span of the gauge arc
lineWidth: 0.16, // The line thickness
radiusScale: 1, // Relative radius
pointer: {
length: 0.35, // // Relative to gauge radius
strokeWidth: 0.035, // The thickness
color: '#000000' // Fill color
},
limitMax: false, // If false, max value increases automatically if value > maxValue
limitMin: false, // If true, the min value of the gauge will be fixed
colorStart: '#6FADCF', // Colors
colorStop: '#8FC0DA', // just experiment with them
strokeColor: '#E0E0E0', // to see which ones work best for you
generateGradient: true,
highDpiSupport: true, // High resolution support
// renderTicks is Optional
renderTicks: {
divisions: 5,
divWidth: 0.6,
divLength: 0.2,
divColor: '#333333',
subDivisions: 5,
subLength: 0.44,
subWidth: 0.4,
subColor: '#666666'
},
staticZones: [
{strokeStyle: "#F6424C", min: 0, max: 500}, // Red from 100 to 130
{strokeStyle: "#F9915A", min: 500, max: 550}, // Yellow
{strokeStyle: "#FFE848", min: 550, max: 650}, // Green
{strokeStyle: "#F9915A", min: 650, max: 750}, // Yellow
{strokeStyle: "#358607", min: 750, max: 1000} // Red
],
staticLabels: {
font: "12px sans-serif", // Specifies font
labels: [0, 500, 550, 650, 750, 1000], // Print labels at these values
color: "#414141", // Optional: Label text color
fractionDigits: 0 // Optional: Numerical precision. 0=round off.
}
};
var target = document.getElementById('foo'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 1000; // set max gauge value
gauge.setMinValue(0); // Prefer setter over gauge.minValue = 0
gauge.animationSpeed = 34; // set animation speed (32 is default value)
gauge.set(552); // set actual value
and I have goenter image description here
but i need such view.enter image description here Question is how can do this? If it's impossible with this, what you can offer me. Thanks for attention!

How to set equal width between ticks - chartjs

I have a chart which now looks like this:
xAxes: [{
scaleLabel: {
display: true,
labelString: 'log(Re)',
},
type: 'linear',
ticks: {
suggestedMax: 10000,
maxTicksLimit: 10,
},
afterBuildTicks: function(scale) {
scale.ticks = [1, 10, 100, 1000, 10000]
}
}]
Need to create ticks [1, 10, 100, 1000, 10000], (like in first image), but with equal spacing between this ticks, like here:
Dmytro, I think your basic problem is that the tick marks you want are powers of 10, not plain numbers. Set your tick marks to be 0, 1, 2, 3, 4 and they will be shown at even intervals. Then label them 1, 10, 100, etc. (1=10^0, 10=10^1, 100=10^2, etc). You may have to restructure your data set a bit to get the correct tick mark values in. But that should give you the effect you are after.

Matter JS - option list - Am I blind?

New to MatterJS.
In the example, theres is options to draw circle, rectangle, etc.
Those options are like using Sprite, FillStyle...
I see no where in the documentation the list of options and values related to that.
Anyone can help?
Thanks.
From reading the source code of matter.js I found the defaults for options. Doesn't explain what each does but at least here's a list of them:
var defaults = {
id: Common.nextId(),
type: 'body',
label: 'Body',
parts: [],
plugin: {},
angle: 0,
vertices: Vertices.fromPath('L 0 0 L 40 0 L 40 40 L 0 40'),
position: { x: 0, y: 0 },
force: { x: 0, y: 0 },
torque: 0,
positionImpulse: { x: 0, y: 0 },
constraintImpulse: { x: 0, y: 0, angle: 0 },
totalContacts: 0,
speed: 0,
angularSpeed: 0,
velocity: { x: 0, y: 0 },
angularVelocity: 0,
isSensor: false,
isStatic: false,
isSleeping: false,
motion: 0,
sleepThreshold: 60,
density: 0.001,
restitution: 0,
friction: 0.1,
frictionStatic: 0.5,
frictionAir: 0.01,
collisionFilter: {
category: 0x0001,
mask: 0xFFFFFFFF,
group: 0
},
slop: 0.05,
timeScale: 1,
render: {
visible: true,
opacity: 1,
sprite: {
xScale: 1,
yScale: 1,
xOffset: 0,
yOffset: 0
},
lineWidth: 0
}
};
As taras pointed out the object's properties are initialized from these options.
These options are body's properties, described in Matter.Body module: http://brm.io/matter-js/docs/classes/Body.html#properties
I think that in those examples, matter.js is handling the drawing of the shapes of the bodies itself through Render.bodies (inside matter.js file) and related functions.
In case anyone want to draw lines, circles or rectangles, they can access the canvas that matter.js uses, and draw them via lineTo, arc functions of canvas, I guess.

Categories