We Keep Coding

Set and Get array from cookies with js-cookie and JSON.parse

I'm using js-cookie to store data and get them back, I'm trying to sore an array variable but I have trouble mantaining its format. This is the process that create, retrive, change and save data of the cookie, it works but just the first time, as I'm not able to
// store array in cookie
Cookies.set('points', '0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0', { expires: 30 });
// get data from cookie into a variable (becomes a string)
points = Cookies.get('points');
// convert to object with (length 12)
points = JSON.parse("[" + points + "]");
// change value of the array in the varable position
points[playerId]++;
// save data in cookie
Cookies.set('points', points, {expires: 30});
This works only the first time, any subsequent time I get error and the array become length 1. I'm sure it's because I'm missing squarebrackets but if I try:
Cookies.set('points', '[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]', { expires: 30 });
the variable becomes an object with lenght 1 and it does not work.

The reason it fails the second time is that you pass to Cookies.set an array as second argument, making assumptions that this will end up as a comma separated string in the cookie. But js-cookie will in that case do the conversion to string by adding the square brackets.
So the very quick solution is to change this:
Cookies.set('points', points, {expires: 30});
to:
Cookies.set('points', points.toString(), {expires: 30});
However, it is better to encode and decode with JSON.stringify and JSON.parse without doing any string manipulation "yourself", like this:
var points = Array(12).fill(0);
Cookies.set('points', JSON.stringify(points), { expires: 30 });
var points = JSON.parse(Cookies.get('points'));
points[0]++;
Cookies.set('points', JSON.stringify(points), {expires: 30});
// ...etc

Ways to limit Phaser3 update rate?

In my Phaser3 game there is a global gameTick variable that is incremented every update. I am using this to spawn in enemies in my game every 100th update.
Here is a simplifed example of what is going on in my scene class:
update () {
global.gameTick++;
if (global.gameTick % 100 === 0) {
this.spawnAlien();
}
}
This works fine but as soon as a user plays the game on a monitor with a refresh rate >60hz the update timing breaks and causes the aliens to spawn more frequently.
I have checked this.physics.world.fps and it is 60. I can also modify this.physics.world.timescale but then I would have to do a giant switch statement for every refresh rate.
Either I am missing an obvious solution or my global.gameTick method is not an effective way to accomplish this task.
This is what I have in my config so far
let config = {
type: Phaser.AUTO,
backgroundColor: "#000",
scale: {
parent: "game",
mode: Phaser.Scale.FIT,
width: 1900,
height: 600,
},
physics: {
default: "arcade",
arcade: {
debug: true,
fps: 60 // doesn't fix update frequency
},
fps: { // not sure if this is even doing anything
max: 60,
min: 20,
target: 60,
}
},
pixelArt: true,
};

You can also set the following property in your game's config object:
fps: {
target: 24,
forceSetTimeOut: true
},
Source: https://phaser.discourse.group/t/how-to-limit-fps-with-phaser-3/275/14?u=saricden

To limit the update rate, use the following method.
// The time and delta variables are passed to `update()` by Phaser
update(time, delta) {
this.frameTime += delta
if (this.frameTime > 16.5) {
this.frameTime = 0;
g.gameTick++;
// Code that relies on a consistent 60hz update
}
}
This accumulates the miiliseconds between the last frame and the current frame. It only runs the update() code if there has been 16.5ms of delay.
The example above works for 60fps, but if you want to limit the FPS to a different value use the formula: delay = 1000/fps.

Surrounding 3d sound effects using howler.js or another library?

I'm working on a project and I need to add 3d sounds effects, like the sound is continually moving around the listener effects. Is it possible to achieve that with howlerjs i see that with howler i'm able to play a sound from specific coordinates/orientation but how to achieve surrounding/ambisonics sounds ?
Or another library in JavaScript to achieve that?
Thanks for your help.

Half a year late, but yeah that's entirely possible in howler.js, haven't used it myself but judging from the docs you can just update the position. there's some more libraries that do it that I've found, check here how 3dage does exactly what you want:
https://codepen.io/naugtur/pen/QgmvOB?editors=1010
var world = IIIdage.World({
tickInterval: 200
})
var annoyingFly = IIIdage.Thing({
is: ['fly'],
sounds: {
'buzzing constantly': {
sound: 'buzz',
times: Infinity
}
},
reacts: [
{
// to: world.random.veryOften(),
to: world.time.once(),
with: 'buzzing constantly'
}
]
})
// scene should create and expose a default world or accept one
var scene = IIIdage.Scene({
title: 'Annoying fly',
library: {
sounds: {
'buzz': {
src: ['https://webaudiogaming.github.io/3dage/fly.mp3']
}
}
},
world: world,
things: [ // scene iterates all things and spawns them into the world. same can be done manually later on.
annoyingFly({
pos: [-1, -15, 0],
dir: [1, 0, 0],
v: 1
})
]
}).load().run()
setTimeout(function () {
scene.dev.trace(IIIdage.dev.preview.dom())
}, 500)
setInterval(function rotateVector() {
var angleRad = 0.15
var d=scene.things[0].attributes.dir
var x=d[0], y=d[1]
var cosAngle = Math.cos(angleRad), sinAngle = Math.sin(angleRad)
scene.things[0].attributes.dir = [x * cosAngle - y * sinAngle, y * cosAngle + x * sinAngle, 0]
}, 500)
window.scene = scene
There's still some others that do similar stuff:
https://www.npmjs.com/package/songbird-audio
https://www.npmjs.com/package/ambisonics
Hope this pushes you in the right direction if you still want help with it.

AmCharts - set max value axis using dataprovider

I'm trying to set max value axis using dataprovider, since I'm dynamically loading data in my bar chart I need to see the "progress" on one of the bars compared to the one that is supposed to be the total.
How do I achieve this?
I' tried with:
"valueAxes": [
{
"id": "ValueAxis-1",
"stackType": "regular",
"maximum": myDataProviderAttribute
}
But no luck.
Any suggestion will be much apreciated.

I've submited a ticket to AmCharts support and got this feedback:
You can set max before the chart is initialized based on the data you have, inside addInitHandler. Here is an example for a simple column chart:
AmCharts.addInitHandler(function(chart) {
// find data maximum:
var min = chart.dataProvider[0].visits;
for (var i in chart.dataProvider) {
if (chart.dataProvider[i].visits > max) {
max = chart.dataProvider[i].visits;
}
}
// set axes max based on value above:
chart.valueAxes[0].maximum = max + 100;
chart.valueAxes[0].strictMinMax = true;
});
You may need to use strictMinMax as above to enforce the value:
https://docs.amcharts.com/3/javascriptcharts/ValueAxis#strictMinMax
Example of setting minimum inside addInitHandler:
https://codepen.io/team/amcharts/pen/b4be8cb4e3c073909860720e0909a876?editors=1010
If you refresh the data, or use live data, then before you animate or validate the chart to show the updated data, you should recalculate the max and, if you want the axis to change then use chart.valueAxes[0].maximum = max; where max is something you calculate based on data input.
Here is an example:
function loop() {
var data = generateChartData();
chart.valueAxes[0].maximum = max;
// refresh data:
chart.animateData(data, {
duration: 1000,
complete: function () {
setTimeout(loop, 2000);
}
});
}
The lines above were used in this example:
https://codepen.io/team/amcharts/pen/d0d5d03cfdcc2cc256e28ec52ad8b95c/?editors=1010

CreateJs EaselJS spritesheet frames not working

So I have spritesheet i have almost looked everywhere nor i can find good tutorial neither i can get this thing to work .Can some one point it out for me that what's wrong here.?Coz none error is generated nor is anythign getting showed on the canvas .
var result = queue.getResult("avatar1");
var data=
{
images: [ result],
// The 5th value is the image index per the list defined in "images" (defaults to 0).
frames: [
// x, y, width, height, imageIndex, regX, regY
//head_south":{"x":120,"h":20,"y":138,"w":15}
[120,138,15,20],
[64,0,15,20,2],
],
animations: {
show: { frames: [0,1], next: true, frequency: 1 }
}
};
var sp = new createjs.SpriteSheet(data);
createjs.Ticker.setFPS(60);
var sprite_anim = new createjs.BitmapAnimation(sp,"show");
sprite_anim.x=100;
sprite_anim.y=100;
stage.addChild(this.sprite_anim);
sprite_anim.play("show");
sprite_anim.gotoAndPlay('show');

Do you update the stage with the ticker ? :
createjs.Ticker.addEventListener("tick", function(event) {
stage.update(event);
});

4 arguments [120,138,15,20], 5 arguments [64,0,15,20,2]
Arguments that are allowed are either 4 or 7.So changed back to 4.That was why it was generating error of" createjs type error '.
Thank everyone for your conern .Closing this question.