Taking this as an example
mySprite.body.onBeginContact.add(() =>
{
if(collisions++ % 3 === 0)
{
physics.p2.pause();
setTimeout(() => physics.p2.resume(), 500);
}
});
when pause() is called the sprite is not always touching the collision object, worsened at higher velocity.
Is there a way, other than moving the sprite back against the colliding body to pause the sprite at the exact collision point?
Is it better to use a different means of pausing the sprite?
Related
EDITED at end!
Within the GameController API, is continuously polling of navigator.getGamepads() required?
I ask because my single call to this function returns a length = 0.
According to my Mac’s Bluetooth System Preferences my Nimbus+ game pad is connected.
Given that, should I use isetInterval` and wait for a length > 0?
EDIT begins here:
Macintosh with Monterey OS 12.4:
Safari (15.5) reports length = 0
Firefox (102.0b6) reports length = 0
Chrome (102.0.5005.115) reports length = 4,
but each in the array being = null
You first wait for the gamepad to be connected, which typically requires "waking" the gamepad by pressing one of its buttons:
window.addEventListener('gamepadconnected', (event) => {
console.log('✅ 🎮 A gamepad was connected:', event.gamepad);
});
Once the gamepad is connected, you start your game loop:
const pollGamepad = () => {
// Always call `navigator.getGamepads()` inside of
// the game loop, not outside.
const gamepads = navigator.getGamepads();
for (const gamepad of gamepads) {
// Disregard empty slots.
if (!gamepad) {
continue;
}
// Process the gamepad state.
console.log(gamepad);
}
// Call yourself upon the next animation frame.
// (Typically this happens every 60 times per second.)
window.requestAnimationFrame(pollGamepad);
};
// Kick off the initial game loop iteration.
pollGamepad();
You should stop polling when the gamepad gets disconnected, which you'll be informed of via an event:
window.addEventListener('gamepaddisconnected', (event) => {
console.log('❌ 🎮 A gamepad was disconnected:', event.gamepad);
});
I have a sprite and I set its y velocity to 200 so that it moves down.
The sprite moves perfectly fine except that sometimes it stutters a lot. The other times it is silky smooth. Its like the fps drops to 20.
How do I stop this stuttering?
Below is my code and you can try it live here
var SimpleGame = (function () {
function SimpleGame() {
this.game = new Phaser.Game(800, 400, Phaser.AUTO, 'content', { preload: this.preload, create: this.create, update: this.update });
}
SimpleGame.prototype.preload = function () {
this.game.load.image('logo', 'Sprites/icon.png');
};
SimpleGame.prototype.create = function () {
//Create Sprite
this.speed = 133;
this.game.stage.backgroundColor = 0xffffff;
this.logo = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'logo');
this.logo.position.set(200, 50);
this.game.physics.arcade.enable(this.logo);
//Set velocity
this.logo.body.velocity.y = this.speed;
};
return SimpleGame;
})();
window.onload = function () {
var game = new SimpleGame();
};
I am not getting the stuttering myself. So, try loading it with other computers, find friends with different levels of computers, to make sure that it isn't a local client-side problem. If it is, then check your computers firewall settings any antivirus that may be stopping a process which will slow down your game.
If it is a server-side problem- firstly, try to condense your code and the memory used. Use local variables instead of global ones, don't pass too many function arguments (If you are using a lot of function arguments then you are filling up the Stack and that may be causing the lag).
Also check your server. I don't know what web server you are using so I don't really know your specs on this, but I may be able to help. Does Phaser use too much memory for your webserver? Small Webservers are designed purely for small websites so by using a lot of JS (which Phaser does ,look in Phaser.min!) you may be using too much memory on your server. Maybe a bigger subscription?
I hope I've helped.
I'm using socket.io engine to track the mouse pointer movement from the browser and send it to multiple web browsers. Here I get the x, y coordinates of the mouse pointer and then send it using socket.io engine.
socket.emit('mouse_position', {mx : x, my : y});
after that I get the relevant data from the application by following code
socket.on('mouse_position', function(data) {
socket.broadcast.emit('mouse_position_update', data);
});
the I use a raphael object to show the mouse pointer in other browsers and use animate function to display the mouse pointer according to the parent mouse pointer movement.
var paper = new Raphael(canvas, 200, 200);
var cur = paper.circle(0, 0, 3);
cur.animate({
cx : data.mx,
cy : data.my
}, 1, 'linear');
the problem in this code is that if I lot of users (>100) log into this system , lot of bandwidth will be used and system may get crashed. can anybody tell me is there a better way to implement this system using socket.io engine or is there any algorithm we can use to solve the bandwidth issue.
Any kind of help would be a great help for me .
You should decrease the amount of time you send you mouse coordinates. In your way every pixel your mouse is changed, your data is sent. (put console.log(1) in your callback and move your mouse for a few seconds).
You can decrease the amount of time you send you data in the following way:
var prevMouseX, prevMouseY;
var intervalID = window.setInterval(function(){
... you get your mouse coordinates
if (prevMouseX !== x || !prevMouseY !== y) {
socket.emit('mouse_position', {mx : x, my : y});
}
}, 500);
This way you will send your mouse coordinates every 0.5 seconds and only if they changed.
Disclaimer: I'm a Node.js newbie and the following description may be lengthy...
I'm currently trying to teach myself Node.js for a little project I'm after. The project idea is the following: a RaspberryPI runs a Node.js application which allows me to control the colors of an RGB LED strip. The application should be able to set both a static color and also run color wheels that smoothly change colors.
My idea is now to create several Node.js scripts:
A "controller" that does the client communication, sets static colors or is able to start a color wheel
"client scripts" that each run a color wheel. At most one of them would be "alive", started/stopped by the "controller"
I've been able to create a little script that forks another script and is able to stop that script using child.send as follows:
controller.js
var fork = require('child_process').fork,
test2 = fork(__dirname + '/test2.js');
setTimeout(function() { test2.send({func: 'quit'}); }, 5000);
This forks the test2.js script and after 5 seconds sends a quit message that quits test2.js.
test2.js
function runLoop()
{
console.log("Hello");
setTimeout(runLoop, 1000);
}
process.on('message', function(m) {
if (m.func === 'quit')
{
process.exit(0);
}
});
setTimeout(runLoop, 1000);
This "client script" prints "Hello" every second until the controller sends the quit message.
This works pretty well - after 5 seconds the scripts finish gracefully.
My question is now: If I implement a color wheel, I'll need a possibly endless loop that changes the colors of the LED strip. Would the above (with shorter timer values of course - I need something like 10ms here) be a feasible way of implementing an interruptible loop or is there some neater mechanism I don't know of yet?
If you're using setTimeout, you shouldn't even need to fork a new process. Here's how I would write your example:
var ntrvl = setInterval(function() { console.log('Hello'); }, 1000);
setTimeout(function() { clearInterval(ntrvl); }, 5000);
... very simple. With setTimeout and setInterval, you're using asynchronous functions, so you will not block the event loop. When the timer is up, it runs your code, then waits for the next event. You should be able to control all of your "clients", you'll have bandwidth for far more than you'll actually need, all in the same process in this way, concurrently.
All you need to be wary of is that you're not blocking the script. If you attempt to perform any action synchronously (which means that the script will wait for the action to complete before performing the next command), then you need to make sure it runs quickly. If you have to run processor/time intensive tasks synchronously, that's when you'll need to fork a new process.
You're making the life complicated. Your global architecture is as follows:
external trigger --> listener ----------> code that changes color
(ie. web client) (ie. web server)
With that in mind you don't need to fork any process, you can control the LED strip within a single process. Somewhere in your code you'll have an object similar to this:
//"led" is the module that allows you to change the color of a led (suppose 4 leds)
var led = require ("led-controller");
var ColorChanger = module.exports = function (){
this._intervalId = null;
};
ColorChanger.prototype.setColor = function (hex){
//Color in hexadecimal
//Cancel any current interval
cancelInterval (this._intervalId);
led.color (0, hex);
led.color (1, hex);
led.color (2, hex);
led.color (3, hex);
};
ColorChanger.prototype.wheel = function (hex, ms){
//Color in hexadecimal
//"ms" is the time interval between leds going on and off
//Cancel any current interval
cancelInterval (this._intervalId);
//Shutdown all the leds
led.off (0);
led.off (1);
led.off (2);
led.off (3);
//Activate the first led
led.color (0, hex);
//Current active led
var curr = 0;
this._intervalId = setInterval (function (){
//Each "ms" the current led will go off and the next will go on
led.off (curr);
//Next led to activate
curr = ++curr%4;
led.color (curr, hex);
}, ms);
};
Then the listener module uses the ColorChanger.
var ColorChanger = require ("./color-changer");
var changer = new ColorChanger ();
//Set all the leds to red
changer.setColor ("#FF0000");
//Each 10ms one led goes green and the previous is turned off, in an endless loop
changer.wheel ("#00FF00", 10);
So, I've got this:
$('header').fadeIn(1000, function() {
// Animation complete
});
$('#intro').fadeIn(3000, function() {
// Animation complete
});
And now I want the second one to come in later, so with a delay. But where in the code do I put this?
EDIT: Got it, thanks!
If you want to start the second animation after the first one, you should do this
$('header').fadeIn(1000, function() {
$('#intro').fadeIn(3000, function() {
// Animation complete
});
});
jQuery maintains a queue of effects per element. You are animating 2 elements so they will fire simultaneously.
More info: http://api.jquery.com/queue/
You can nest the functions but that's going to get difficult if you want 10 effects.
Here's a good solution:
https://stackoverflow.com/a/11354378/907253