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 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)

Highcharts - Solid Gauge - Inconsistent Styling and Improper Values

I have a website which makes use of HighCharts Solid Gauge .
There are two rows of gauges.
The first row of gauges is built as follows.
var workgroups =['WG01','WG02','WG04',
'WG05','WG06','All'];
$(function ()
{
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: 'Gauge',
pane: {
// Positioning
center: ['50%', '60%'],
// img size
size: '100%',
// full circle/half circle
startAngle: -90,
endAngle: 90,
// gauge coloring
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#000',
// Inner semi circle sizing
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
// Set the limits for coloring
[0.1, '#55BF3B'], // green
[0.4, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
// Outside Line buffer
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
// Title Location
y: -30
},
labels: {
style:{
color: "#000000",
fontSize: "13px"
},
// Bottom Label Offset
y: 15,
distance: -10,
}
},
plotOptions: {
solidgauge: {
dataLabels: {
style:{
color: "000000",
fontSize: "15px"
},
borderWidth: 0,
useHTML: true
}
}
}
};
// The gauges
for( i in workgroups){
if(workgroups[i] == 'All'){
header = "All";
gaugeOptions.yAxis['stops'] = [[.5, '#000000']]
}else{
header = "WG" + workgroups[i].slice(-2);
}
$('#'+workgroups[i]).highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
style:{
color: "#000000",
fontWeight: 'bold',
fontSize: '22px'
},
text: header
}
},
credits: {
enabled: false
},
series: [{
name: workgroups[i],
data: [0],
dataLabels: {
y: 40,
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">clients</span></div>'
},
}]
}));
}
}
);
and results in the following image.
This is fine, proper values, all styles fit where they are supposed to.
After doing these gauges, we then do a second row of gauges.
The (Current) Configuration for these gauges are:
var application_array = new Array(3);
application_array['Sapphire'] = 50;
application_array['Magic Bullet'] = 35;
application_array['Boris'] = 30;
$(function ()
{
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: 'Gauge',
pane: {
// Positioning
center: ['50%', '85%'],
// img size
size: '150%',
// full circle/half circle
startAngle: -90,
endAngle: 90,
// gauge coloring
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#000',
// Inner semi circle sizing
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
// Set the limits for coloring
[0.1, '#55BF3B'], // green
[0.4, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
// Outside Line buffer
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
// Title Location
y: -30
},
labels:{
y:13
}
},
};
// Build the gauges here
var license_gauges = document.getElementsByClassName('gaugeCell2');
var myLength = license_gauges.length;
for (i=0; i <myLength; i++){
var header = license_gauges[i].id;
var selector = "[id='"+header+"']";
if (header == 'Boris'){
var max_value = 30;
}else if (header == 'Magic Bullet'){
var max_value = 35;
}else if (header == 'Sapphire'){
var max_value = 50;
}
console.log(header)
$(selector).highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: max_value,
title: {
style:{
color: "#000000",
fontWeight: 'bold',
fontSize: '22px'
},
text: header
}
},
credits: {
enabled: false
},
series: [{
name: header,
data: [0],
}]
}));
}
});
Which Produces the following BAD Gauges
My Question
1) In the second row of gauges, Why is it printing 25 as max for the 2nd and 3rd gauge?
- I have tried an associate array to hold the proper value, same issue occurs
I have tried a function which returns a static value, same issue occurs
I have tried logic in the gauge creation itself, same issue occurs
I have tried writing a static value as max, and all gauges get the proper value
2) In the second row of gauges, why is it that the max Value, for the second and third gauges is inconsistently formatted with the first gauge?
I have tried virtually every layout configuration I can think of, but yet it stays the same issue.
When Using a static max value, this issue does not occur.
Do I need to make an individual gaugeoption for each gauge since they have different max values? I would like to use 1 gauge style for the top row and 1 gauge style for the bottom row (fatter).
A JSFiddle has been created here. There is most likely extraneous code (especially css), as I wanted to get it up and running quickly.
http://jsfiddle.net/v341z7tk/1/
Thanks for reading

Why is it printing 25 as max for the 2nd and 3rd gauge?
It isn't. That is, the max isn't 25, but the drawn axis label shows the value 25, as there is an axis tick at this value. The max value is not showing with a label.
why is it that the max Value, for the second and third gauges is inconsistently formatted with the first gauge?
The position is inconsistent because the 25 label is in varying positions depending on what the max value is. In your case it is 35 and 30 for the last two gauges.
Do I need to make an individual gaugeoption for each gauge since they have different max values?
No. From my understanding you want a label at the start (0) and end (max_value). To get this you need to ensure that the axis ticks (which have associated labels) are at these positions, and only these.
A simple way is this (JSFiddle):
yAxis: {
min: 0,
max: max_value,
tickPositions: [0, max_value], // Ensure position of ticks, which have labels
// ...
}

I was having the same issue, but following what Halvor Strang said solved my problem like so
displayOptions.yAxis.min = widget.display.minimum;
displayOptions.yAxis.max = widget.display.maximum;
displayOptions.yAxis.tickPositions = [widget.display.minimum, widget.display.maximum];
distorted labels
- Minimum and maximum out of place

Position an inset legend at the top-center

According to the C3 documentation, legend.inset.postition only supports top-left, top-right, bottom-left and bottom-right positions. I would like to have my legend positioned at the top-center.
Here is the JS that creates the plot:
var chart = c3.generate({
data: {
columns: [
['data1', 100, 200, 50, 300, 200, 50, 250, 100, 200, 400, 50],
['data2', 400, 500, 250, null, 300, 50, 200, 450, 300, 300, 100]
],
},
legend: {
position: 'inset',
inset: {
anchor: 'top-left', // how do I implement 'top-center'?
x: 40,
y: 2,
step: 1
}
}
});
I have attempted to re-position the element after the chart has been rendered via figuring out its current position. However, none of the SVG elements appear to have attributes that enable this kind of introspection:
var legend = d3.select(".c3-legend-background");
console.log("style[width]: " + legend.style("width")); // style[width]: auto
console.log("attr[x]: " + legend.attr("x")); // attr[x]: null
console.log("attr[y]: " + legend.attr("y")); // attr[y]: null

Wouldn't you just set the x value of the inset object to the correct value to get it to center across the top?
This would depend on your wide your chart if and how wide your legend is. So the calculation would be (ChartWidth - LegendWidth) / 2.
The legend object is then something like:
legend: {
position:'inset',
inset: {
anchor: 'top-left',
x: 200 // put the result of your calculation here
}
}
Here's a rough example: http://jsfiddle.net/jrdsxvys/11/

jqplot changes the color of graph on mouse hover

jqPlot changes the color of the fill when mouse hovers... I want to remove that effect.. How ??
Here are the options used:
var options={
series: [{
neighborThreshold: -1,
shadowAngle:0,
shadowOffset:2.5,
shadowAlpha:.05,
shadowDepth:5
}],
seriesDefaults: {
color: '#224',
fill: true, // fill under the line,
fillAndStroke: true, // *stroke a line at top of fill area.
fillColor: '#66CCCC', // *custom fill color for filled lines (default is line color).
fillAlpha: 0.2, // *custom alpha to apply to fillColor.
markerRenderer: $.jqplot.MarkerRenderer, // renderer to use to draw the data
// point markers.
markerOptions: {
show: false, // wether to show data point markers.
style: 'filledCircle', // circle, diamond, square, filledCircle.
// filledDiamond or filledSquare.
lineWidth: 2, // width of the stroke drawing the marker.
size: 9, // size (diameter, edge length, etc.) of the marker.
color: '#FFFF00', // color of marker, set to color of line by default.
shadow: true, // wether to draw shadow on marker or not.
shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
shadowOffset: 1, // offset from the line of the shadow,
shadowDepth: 3, // Number of strokes to make when drawing shadow. Each stroke
// offset by shadowOffset from the last.
shadowAlpha: 0.07 // Opacity of the shadow
},
trendline: {
show: false, // show the trend line
color: '#666666', // CSS color spec for the trend line.
label: '', // label for the trend line.
type: 'linear', // 'linear', 'exponential' or 'exp'
shadow: true, // show the trend line shadow.
lineWidth: 1.5, // width of the trend line.
shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
shadowOffset: 1.5, // offset from the line of the shadow.
shadowDepth: 3, // Number of strokes to make when drawing shadow.
// Each stroke offset by shadowOffset from the last.
shadowAlpha: 0.07 // Opacity of the shadow
}
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: '#d0d0d0', // *Color of the grid lines.
background: '#ffffff', // CSS color spec for background color of grid.
borderColor: '#ffffff', // CSS color spec for border around grid.
borderWidth: 2.0, // pixel width of border around grid.
shadow: true, // draw a shadow for grid.
shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
shadowOffset: 1.5, // offset from the line of the shadow.
shadowWidth: 3, // width of the stroke for the shadow.
shadowDepth: 3, // Number of strokes to make when drawing shadow.
// Each stroke offset by shadowOffset from the last.
shadowAlpha: 0.07, // Opacity of the shadow
renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid.
rendererOptions: {} // options to pass to the renderer. Note, the default
// CanvasGridRenderer takes no additional options.
},
axes: {
xaxis: {
renderer:$.jqplot.DateAxisRenderer,
rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
tickOptions:{
formatString:'%b %#d,%y'
}
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
borderColor:'#808080',
renderer: $.jqplot.LogAxisRenderer,
autoscale:true,
min:0,
tickOptions:{formatString:'$%.2f'}
}
},
highlighter: {
show:true,
sizeAdjust: 7.5
},
cursor:{zoom:true, showTooltip:true},
legend:{show:false}
};

There was a change in jqueryplot version 0.9.7-546 and later that added a few new properties for series:
seriesDefaults: {
rendererOptions: {
highlightMouseOver: true,
highlightMouseDown: false,
highlightColor: null,
},
},
If you set highlightMouseOver to false, this goes away.
More details are available in the source code for the line renderer