I created a logic to add new users’ sprite sheet and than remove them if they logged out from the page. It works like I want, problem is when they logged in back, their sprite sheet is not appears in the page. How can I make their sprite sheet appear when they logged in back?
I tried to remove their record from the slicer so inactiveUsers array would cleaned after deletion of sprite sheets. I thought that would cause sprite sheet to added if user comes back but it didn’t worked.
Update method where I created this logic,
update(time, delta) {
const state = store.getState();
const avatar = state.communities.avatar;
const inactiveUsers = state.websocket.inactiveUsers;
this.activeUsers = state.communities.activeUsers;
const currentUser = this.activeUsers.find((user) => user.id === this.userid);
// Ensure we only act on the current user's character
if(!currentUser) return;
const distance = Phaser.Math.Distance.Between(
this.character?.x,
this.character?.y,
this.targetX,
this.targetY
);
if(distance > 5) {
// Move the character smoothly towards the target
const angle = Phaser.Math.Angle.Between(
this.character.x,
this.character.y,
this.targetX,
this.targetY
);
this.character.x += Math.cos(angle) * this.speed * (delta / 1000);
this.character.y += Math.sin(angle) * this.speed * (delta / 1000);
// Adjust character orientation based on movement direction
if(this.targetX < this.character.x) {
this.character.setScale(avatar === 'defaultgirl' ? -1.2 : -1.2, 1.2);
}
else {
this.character.setScale(avatar === 'defaultgirl' ? 1.2 : 1.2, 1.2);
}
}
else {
// Stop movement animation when the character reaches the target
if(this.character?.anims?.isPlaying) {
this.character.stop(`walk_${avatar}`);
this.character.setTexture(`${avatar}idle`, 0);
}
}
// Sync other users' positions from activeUsers
this.activeUsers.forEach((user) => {
if(user.id !== this.userid) {
const { avatar: otherAvatar, character_position_x, character_position_y } = user;
// Use spriteMap to track the sprite for each user
let otherCharacters = this.spriteMap[user.id];
if(!otherCharacters) {
otherCharacters = this.add.sprite(this.cameras.main.width / 2, this.cameras.main.height / 2, `${otherAvatar}idle`);
this.spriteMap[user.id] = otherCharacters; // Save the reference
otherCharacters.setDepth(1);
otherCharacters.setScale(1.2);
otherCharacters.setOrigin(0.5, 0.9);
otherCharacters.play(`walk_${otherAvatar}`);
}
// Update position if valid
if(character_position_x && character_position_y) {
const distanceToTarget = Phaser.Math.Distance.Between(
otherCharacters.x,
otherCharacters.y,
character_position_x,
character_position_y
);
if(distanceToTarget > 5) {
const angleToTarget = Phaser.Math.Angle.Between(
otherCharacters.x,
otherCharacters.y,
character_position_x,
character_position_y
);
otherCharacters.x += Math.cos(angleToTarget) * this.speed * (delta / 1000);
otherCharacters.y += Math.sin(angleToTarget) * this.speed * (delta / 1000);
}
else {
otherCharacters.setTexture(`${otherAvatar}idle`, 0);
}
}
if(inactiveUsers.includes(user.id)) {
otherCharacters.destroy();
delete this.spriteMap[user.id];
}
//this.dispatch(removeFromInactiveUsersArray(user.id));
}
});
// Update the position of the speech bubble
if (this.targetX) {
const bubbleX = this.character?.x - 0; // Adjust for center alignment
const bubbleY = this.character?.y - 80; // Position above the character
this.speechBubbleElement.setPosition(bubbleX, bubbleY);
}
}