We Keep Coding

Phaser 3 - Particles become more the more often I emit them?

I have particles that I emit when clicking and moving my mouse over a certain object. However I noticed that while the particles start out as little, they become more and more the more often I click and move my mouse,until the stream of particles is far too dense.
This only seems to happen when I click down multiple times (thus triggering the pointerdown event multiple times), not when I click once and keep moving.
How can I stop this?
function pet(start, scene, pointer = null)
{
if(start){
scene.input.on('pointermove', function(){
if (scene.input.activePointer.isDown && gameState.chara.getBounds().contains(scene.input.activePointer.x, scene.input.activePointer.y)){
gameState.sparkle.emitParticle(1,scene.input.activePointer.x, scene.input.activePointer.y); // !!!! Here is where I emit my particles
}
});
} else {
gameState.sparkle.stop(); // !!!! Here I stop my particles
}
}
const gameState = {
gameWidth: 800,
gameHeight: 800,
menu: {},
textStyle: {
fontFamily: "'Comic Sans MS'",
fill: "#fff",
align: "center",
boundsAlignH: "left",
boundsAlignV: "top"
},
};
function preload()
{
this.load.baseURL = 'assets/';
// Chara
this.load.atlas('chara', 'chara.png', 'chara.json');
// Particle
this.load.image('sparkle', 'sparkle.png'); // Here I load my particle image
}
function create()
{
// Scene
let scene = this;
// Chara
this.anims.create({
key: "wag",
frameRate: 12,
frames: this.anims.generateFrameNames("chara", {
prefix: 'idle_000',
start: 0,
end: 5}),
repeat: 0,
});
this.anims.create({
key: "happy",
frameRate: 12,
frames: this.anims.generateFrameNames("chara", {
prefix: 'happy_000',
start: 0,
end: 5}),
repeat: -1
});
gameState.chara = this.add.sprite(400, 400, "chara", "idle_0000");
gameState.chara.setInteractive({cursor: "pointer"});
// !!!! Here I set up my Particle Emitter !!!!
gameState.sparkle = this.add.particles('sparkle').createEmitter({
x: gameState.height/2,
y: gameState.width/2,
scale: { min: 0.1, max: 0.5 },
speed: { min: -100, max: 100 },
quantity: 0.1,
frequency: 1,
lifespan: 1000,
gravityY: 100,
on: false,
});
gameState.chara.on('pointerdown', function(){ pet(true, scene) });
gameState.chara.on('pointerout', function(){ pet(false, scene, 'default') });
gameState.chara.on('pointerup', function(){ pet(false, scene, 'pointer') });
}
function update()
{
}
// Configs
var config = {
backgroundColor: "0xf0f0f0",
scale: {
width: gameState.gameWidth,
height: gameState.gameHeight,
autoCenter: Phaser.Scale.CENTER_BOTH
},
scene: {
preload, create, update
}
};
var game = new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>

The problem is, that you are adding a new scene.input.on('pointermove',...) event-handler in the pet function, on each click.
I would only change the code abit (look below), this should prevent generating too many particles and too many event-handlers (too many event-handlers could harm performance, so be careful, when adding them).
Here is how I would modify the Code:
(I stripped out and added some stuff to make the demo, easier to understand and shorter. And also that the snippet can be executed, without errors/warnings)
The main changes are marked and explained in the code, with comments
function pet(start, scene, pointer = null)
{
if(start){
// Update: remove Event listener add click state
gameState.mouseDown = true
} else {
// Update: add click state
gameState.mouseDown = false;
gameState.sparkle.stop();
}
}
const gameState = {
gameWidth: 400,
gameHeight: 200,
// Update: add click state
mouseDown: false
};
function create()
{
// Scene
let scene = this;
// Just could for Demo START
var graphics = this.add.graphics();
graphics.fillStyle(0xff0000);
graphics.fillRect(2,2,10,10);
graphics.generateTexture('particle', 20, 20);
graphics.clear();
graphics.fillStyle(0xffffff);
graphics.fillRect(0,0,40,40);
graphics.generateTexture('player', 40, 40);
graphics.destroy();
// Just Code for Demo END
gameState.chara = this.add.sprite(200, 100, "player");
gameState.chara.setInteractive({cursor: "pointer"});
gameState.sparkle = this.add.particles('particle').createEmitter({
scale: { min: 0.1, max: 0.5 },
speed: { min: -100, max: 100 },
quantity: 0.1,
frequency: 1,
lifespan: 1000,
gravityY: 100,
on: false,
});
gameState.chara.on('pointerdown', function(){ pet(true, scene) });
gameState.chara.on('pointerout', function(){ pet(false, scene, 'default') });
gameState.chara.on('pointerup', function(){ pet(false, scene, 'pointer') });
// Update: add new single Event Listener
gameState.chara.on('pointermove', function(pointer){
if(gameState.mouseDown){
gameState.sparkle.emitParticle(1,pointer.x, pointer.y);
}
});
}
// Configs
var config = {
width: gameState.gameWidth,
height: gameState.gameHeight,
scene: { create }
};
var game = new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>

Phaser: How to fix the delay of the restart function, i am using window.setTimeout

var config = {
type: Phaser.AUTO,
width: 1900,
height: 1000,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var main = document.getElementById("startBtn")
var gameOver
score = 0;
function start() {
game = new Phaser.Game(config);
main.innerHTML = ''
score = 0;
}
function preload() {
this.load.image('Background', 'assets/Background.jpg');
this.load.image('ground', 'assets/platform.png');
this.load.image('coin', 'assets/coin.png');
this.load.image('redCoin', 'assets/redCoin.png');
this.load.spritesheet('monkey',
'assets/monkey.png',
{ frameWidth: 600, frameHeight: 720 }
);
}
var platforms;
var score = 0;
var scoreText;
function create() {
this.add.image(500, 275, 'Background').setScale(3);
this.w = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W)
this.a = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A)
this.s = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S)
this.d = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D)
platforms = this.physics.add.staticGroup();
platforms.create(200, 650, 'ground').setScale(0.15).refreshBody();
platforms.create(600, 400, 'ground').setScale(0.15).refreshBody();
platforms.create(1600, 650, 'ground').setScale(0.15).refreshBody();
platforms.create(750, 100, 'ground').setScale(0.15).refreshBody();
platforms.create(850, 750, 'ground').setScale(0.15).refreshBody();
platforms.create(100, 950, 'ground').setScale(0.15).refreshBody();
platforms.create(400, 950, 'ground').setScale(0.15).refreshBody();
platforms.create(700, 950, 'ground').setScale(0.15).refreshBody();
platforms.create(1000, 950, 'ground').setScale(0.15).refreshBody();
platforms.create(1300, 950, 'ground').setScale(0.15).refreshBody();
platforms.create(1600, 950, 'ground').setScale(0.15).refreshBody();
platforms.create(1900, 950, 'ground').setScale(0.15).refreshBody();
platforms.create(1800, 800, 'ground').setScale(0.15).refreshBody();
platforms.create(250, 250, 'ground').setScale(0.15).refreshBody();
platforms.create(1000, 500, 'ground').setScale(0.15).refreshBody();
platforms.create(1150, 220, 'ground').setScale(0.15).refreshBody();
player = this.physics.add.sprite(100, 450, 'monkey').setScale(0.075);
this.physics.add.collider(player, platforms);
player.setBounce(0.2);
player.setCollideWorldBounds(true);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('monkey', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [{ key: 'monkey', frame: 4 }],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('monkey', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
coins = this.physics.add.group({
key: 'coin',
repeat: 10,
setXY: { x: 12, y: 0, stepX: 150 }
});
coins.children.iterate(function (child) {
child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
child.setScale(0.05)
});
this.physics.add.collider(coins, platforms);
this.physics.add.overlap(player, coins, collectCoin, null, this);
redCoins = this.physics.add.group();
this.physics.add.collider(redCoins, platforms);
this.physics.add.collider(player, redCoins, hitredCoin, null, this);
scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '64px', fill: 'rgb(85, 1, 1)' });
}
function update() {
cursors = this.input.keyboard.createCursorKeys();
if (cursors.left.isDown) {
player.setVelocityX(-160);
player.anims.play('left', true);
}
else if (cursors.right.isDown) {
player.setVelocityX(160);
player.anims.play('right', true);
}
else {
player.setVelocityX(0);
player.anims.play('turn');
}
if (cursors.up.isDown && player.body.touching.down) {
player.setVelocityY(-330);
}
}
function collectCoin(player, coin) {
coin.disableBody(true, true);
score += 1;
scoreText.setText('Score: ' + score);
if (coins.countActive(true) === 0) {
coins.children.iterate(function (child) {
child.enableBody(true, child.x, 0, true, true);
});
var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);
var redCoin = redCoins.create(x, 16, 'redCoin').setScale(0.05);
redCoin.setBounce(1);
redCoin.setCollideWorldBounds(true);
redCoin.setVelocity(Phaser.Math.Between(-200, 200), 20);
}
}
function hitredCoin(player, redCoin) {
this.physics.pause();
player.setTint(0xff0000);
player.anims.play('turn');
gameOver = true;
window.setTimeout(restart, 3000);
}
function restart () {
this.scene.stop();
this.scene.start();
}
This code is my game and it doesn't work because you can not respawn when you die, the delay doesn't work. I would like help fixing the time delay at the end of the hitredcoinfunction that calls the restart function. Please help me with this problem
it may be because I am using a delay thing from javascript, if so please tell me how to swap it out for the phaser version
pls help me with this, I really need my game to work

The problem is that the this context is not set.
you can do this simply with the bind function. Here is the link to the documentation (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind)
Just change the line to this:
window.setTimeout(restart.bind(this), 3000);
the bind function, passes an object/context (in this case the phaser scene) to the function, so that it can be referred to as this.
If you want to use the phaser delayedCall function you have to replace the line with (link to the documentation https://photonstorm.github.io/phaser3-docs/Phaser.Time.Clock.html ):
this.time.delayedCall(3000, restart, null, this);
the first parameter is the time in ms: 3000
the second parameter is the function to call: restart
the third parameter are arguments, that should be passed to the passed function: null
the last parameter is the context, for the passed function: this (the current scene)

Particles.js not working properly in .NET Core

NET MVC Core and I am trying to use Particles.js. I have already tried referencing a few tutorials, but am unable to solve this issue. This is how it normally looks like. https://vincentgarreau.com/particles.js/#default
I got this however, with big and super laggy buttons and also it does not occupy full screen nor does it have the hover action (whereby the circle moves away as the mouse approaches). The onclick circle works though. And the configuration shouldn't be wrong, as I downloaded the default one.
Update: Just before posting I managed to make it full screen. However, the big buttons and lagginess remains.
The following is my codes so far. I tried to search the id or class but due to the lack of documentation it is quite hard to find. Hope someone who knows it can help! Thank you very much :)
#{
ViewData["Title"] = "Home Page";
}
<div id="particles-js" style="background-color: rgb(0, 0, 0); background-image: url(""); background-size: cover; background-repeat: no-repeat; ba">
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div>
<script src="~/js/particles.js" data-turbolinks-track="reload" asp-append-version="true"></script>
<script>
particlesJS("particles-js", {
particles: {
number: {
value: 400,
density: {
enable: true,
value_area: 800
}
},
color: {
value: '#fff'
},
shape: {
type: 'circle',
stroke: {
width: 0,
color: '#ff0000'
},
polygon: {
nb_sides: 5
},
image: {
src: '',
width: 100,
height: 100
}
},
opacity: {
value: 1,
random: false,
anim: {
enable: false,
speed: 2,
opacity_min: 0,
sync: false
}
},
size: {
value: 20,
random: false,
anim: {
enable: false,
speed: 20,
size_min: 0,
sync: false
}
},
line_linked: {
enable: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: false,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 3000,
rotateY: 3000
}
},
array: []
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: true,
mode: 'grab'
},
onclick: {
enable: true,
mode: 'push'
},
resize: true
},
modes: {
grab: {
distance: 100,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 200,
size: 80,
duration: 0.4
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
},
mouse: {}
},
retina_detect: false,
});
//var count_particles, stats, update;
//stats = new Stats;
//stats.setMode(0);
//stats.domElement.style.position = 'absolute';
//stats.domElement.style.left = '0px';
//stats.domElement.style.top = '0px';
//document.body.appendChild(stats.domElement);
//count_particles = document.querySelector('.js-count-particles');
//update = function () {
// stats.begin();
// stats.end();
// if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
// count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
// }
// requestAnimationFrame(update);
//};
//requestAnimationFrame(update);;
</script>

Update: I finally found the answer. To facilitate people who working on this in the future, make sure to use the download from the sidebar and not the one in the center.
Not this (the download in the center):
But this (the one at the bottom right side, "Download current config(json)"):

fabric.js construct groups on conditions

I'm trying to create several groups. Each of the group will get a custom attribute to indicate its position. Depending on this attribute I want to set different images as a group members. This part doesn't work and I cannot figure it out. image header.png is added twice and shows in content-footer area. in the header area there is no image at all.
Also when I try to log the output
console.log(JSON.stringify(canvasBuild)
there is no content inside the "objects" property of a group. When I try to log stringified group - it does show the image objects.
This is the simplified code so far
var hasHeader = false;
var hasFooter = false;
// users choice of layout
var customPosition = [];
$(this).siblings('.layoutOptions').children('input:checked').each(function(i)
{
customPosition[i] = $(this).val();
if ( customPosition[i]=='content-header'){
hasHeader = true;
}else if (customPosition[i]=='content-footer'){
hasFooter = true;
}
});
$(this).siblings('.contentOptions').children('input:checked').val();
for (i = 0; i< customPosition.length; i++){
console.log(i);
console.log(customPosition[i]);
var canvField = (canvasBHeight - shadowBVal*2) - strokeBWidth*2;
if (customPosition[i] == 'content-header'){
//header positioning
var group = new fabric.Group([],{
left: strokeBWidth + 10,
stroke: '#ddd',
strokeLineJoin: 'round',
strokeWidth: 2,
hasControls: true,
lockMovementX: false,
lockMovementY: false,
lockRotation: true,
selectable: true,
position: posB,
fill: '#ccc',
width: ((canvasBWidth - shadowBVal*2) - strokeBWidth*2 - 10),
//height: canvasBHeight/5 - strokeBWidth,
height: canvField/5,
top: strokeBWidth,
ry: 0,
rx: 20,
//originX: 'center',
//originY: 'center'
});
//add dummy content
fabric.Image.fromURL('image/bordenconfigurator/dummies/header.png', function(oImg) {
oImg.set({
});
group.add(oImg);
console.log('group '+i+' '+customPosition[i]+':');
console.log(JSON.stringify(group));
//console.log(group);
});
}else if(customPosition[i] == 'content-footer') {
console.log(customPosition[i]);
//footer positioning
var group = new fabric.Group([],{
left: strokeBWidth + 10,
stroke: '#ddd',
strokeLineJoin: 'round',
strokeWidth: 2,
hasControls: true,
lockMovementX: false,
lockMovementY: false,
lockRotation: true,
selectable: true,
position: posB,
fill: '#ccc',
width: ((canvasBWidth - shadowBVal*2) - strokeBWidth*2 - 10),
//height: canvasBHeight/5 - strokeBWidth,
height: canvField/5,
top: strokeBWidth + canvField*4/5 + 10,
ry: 0,
rx: 20,
//originX: 'center',
//originY: 'center'
});
//add dummy content
fabric.Image.fromURL('image/bordenconfigurator/dummies/footer.png', function(oImg) {
oImg.set({
top: canvasBHeight- strokeBWidth-shadowBVal,
});
group.add(oImg);
canvasBuild.centerObjectH(oImg);
console.log('group '+i+' '+customPosition[i]+':');
console.log(JSON.stringify(group));
});
}else{
console.log(customPosition[i]);
//body positioning
var height,top;
if (hasHeader === true && hasFooter === true){
height = canvField*3/5 + 5;
top = strokeBWidth + canvField/5 + 5;
}else if(hasHeader ===true && hasFooter === false){
height = canvField*4/5 + 5;
top = strokeBWidth + canvField/5 + 5;
}else if(hasHeader ===false && hasFooter === true){
height = canvField*4/5;
top = strokeBWidth + 5;
}
var group = new fabric.Group([],{
left: strokeBWidth + 10,
stroke: '#ddd',
strokeLineJoin: 'round',
strokeWidth: 2,
hasControls: true,
lockMovementX: false,
lockMovementY: false,
lockRotation: true,
selectable: true,
position: posB,
fill: 'rgba(255,255,255,0)',
width: ((canvasBWidth - shadowBVal*2) - strokeBWidth*2 - 10),
height: height,
//top: strokeBWidth + canvField/5 + 5,
top: top,
ry: 20,
rx: 20
});
}
group.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
customPosition: this.customPosition,
label: this.label,
id: this.id
});
};
})(group.toObject);
group.customPosition = customPosition[i];
group.id = posB;
canvasBuild.add(group);
group.length = 0;
posB++;
}
//addOrientationLines();
//canvasBuild.renderAll();
//console.log(JSON.stringify(canvasBuild));
});

escClose in simple modal

I'm working with simple modal, and I'm trying to prevent the close on escape. This says it should be simple, but this doesn't work for me, am I putting this in the wrong place?
$(document).ready(function(){
$("#login_modal").modal({
overlayCss: {
backgroundColor: '#000',
},
containerCss: {
height: 485,
width: 385,
backgroundColor: "#f6f6f6",
border: '3px solid #d3d5d6',
fontSize: '10pt',
color: '#58595b',
fontFamily: 'sans-Serif',
fontWeight: '100',
paddingLeft: 5,
paddingTop: 5,
opacity: .94,
escClose: false,
},
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow');
dialog.data.show();
dialog.container.fadeIn('slow', function () {
$('body').css('overflow', 'hidden');
});
},
onClose: function (dialog){
$('body').css('overflow', 'auto');
dialog.container.fadeOut('200');
dialog.overlay.fadeOut('200', function () {
$.modal.close();
});
},
});
});

Yes, escClose is in the wrong place - it's a parameter on the modal itself, not the containerCss array. You also have extra commas at the end of your overlayCss and containerCss property arrays. This sometimes causes issues in browsers. Try this;
$(document).ready(function(){
$("#login_modal").modal({
escClose: false,
overlayCss: {
backgroundColor: '#000'
},
containerCss: {
height: 485,
width: 385,
backgroundColor: "#f6f6f6",
border: '3px solid #d3d5d6',
fontSize: '10pt',
color: '#58595b',
fontFamily: 'sans-Serif',
fontWeight: '100',
paddingLeft: 5,
paddingTop: 5,
opacity: .94
},
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow');
dialog.data.show();
dialog.container.fadeIn('slow', function () {
$('body').css('overflow', 'hidden');
});
},
onClose: function (dialog){
$('body').css('overflow', 'auto');
dialog.container.fadeOut('200');
dialog.overlay.fadeOut('200', function () {
$.modal.close();
});
},
});
});