mla

Members
  • Content count

    23
  • Joined

  • Last visited

  1. mla

    Images disappearing

    Worked like a charm!! Pre-loaded images, created gameloop on client and no flickering. Gameloop updates and draws images perfectly! Great help!! Thanks!!
  2. mla

    Images disappearing

    Each person who joins the game, is represented by a specific avatar that is placed on the screen at specific x, y coordinates. I am attaching the screen shot that will hopefully provide a better explanation. The game works, just that the images are flickering.
  3. mla

    Images disappearing

    I have re-coded the game and now the players connect and disconnect correctly. I save the disconnected player details in an array before the disconnect to allow him/her to comeback. The issue I seem to now face, is why my avatars are flickering on screen. They work great, but the image flickers. I have an interval to loop through the players{} and draw them out. My assumption is that the requestAnimFrame function is needed here. In Server: //show all logged players setInterval(function(){ io.sockets.emit('state', PLAYER_LIST); } },1000/25); In Client: socket.on('state', function(players){ context.clearRect(0, 0, canvas.width, canvas.height); context.font = '12pt Arial'; context.fillStyle = 'white'; context.textAlign="center"; for (var id in players) { var player = players[id]; var rectHeight = 50; var rectWidth = 100; var rectX = player.getX; var rectY = player.getY+200; context.fillText(player.name, rectX+(rectWidth/2),rectY+(rectHeight/2)); var img = new Image(); img.onload = function () { context.drawImage(img, x, y, 85, 201); } img.src = imgFile; } });
  4. mla

    When to use a database in a game

    Thank you chriswa! After your first reply and then hearing from mattstyles, I decided to go forward with localStorage and not with the database. Since I'm utilizing local storage currently, I am re-coding the game entry part to recall the player id if it exists and show their last known information if the game is still in play. Since I already am using random ids, there is no worry about conflicting player logins or hijacking spots. I have a better understanding now of when to use a DB. Thanks All!!
  5. mla

    When to use a database in a game

    The minimum is 6 simultaneous players to a maximum of 12 simultaneous players. The game is pretty simple, and briefly explained below. Host logs in and received a gameID Between 6 - 12 players access the game using the gameID Each player is represented by a static non-moving image. When host starts the game, each player has 4 colored balls and a card showing the sequence of colored balls to complete. Each player passes balls around until the player completes their card showing the colored sequence of balls. This means that each player has 4 colored balls that are being tracked, and between 1-4 of each ball that matches their card. (When they get a ball matching their card, they will add it on the actual card. So I am saving, for each player (min 6, max 12), 4 balls / player, plus the 4 balls appearing on each of their cards. Totaling 8 balls / player. Game ends when each player completes their card or time runs out. What I am storing is the player id, name, 4 balls on hand, 4 balls on card, player status, x coordinate, y coordinate and static image. (The x and y, are where each player should appear on screen. They cannot appear randomly on the screen.) The only movement happening in this game is the balls being passed simultaneously around. (Player 1 can pass ball to player 2, while player 3 passes to player 4 at the same time, etc.) My worry is not if the server crashes, but if one player loses internet connect during the game, example power outage at his home, then he will be booted out of the game. My aim is to allow that player to be able to come back, provided game is still in play, and continue from where he left off.
  6. Hi, I'm creating a node js game, using javascript and socket io. I originally was not going to add a mongo DB, but now I'm thinking I should for anyone who may accidentally be disconnected from the game. What would the best game option be? To use a database or not, and the reasons behind it. Many thanks, MLA
  7. mla

    Images disappearing

    Thanks @b10b. Everything is pretty clear. One question - my avatars are not moving or doing anything. They simply represent a player in a specific x,y location. What does move are chain-links that are attached to each avatar. These chain-links only appear after the Host starts the game. Meanwhile, players appear as avatars in a waiting room. Given the players are not moving, do you feel a game loop to show players is still required or do you feel it's only required for the chain-links? Thanks.
  8. mla

    Images disappearing

    ImgFile is the actual spirit file for the avatar. Each player has a different avatar when they access the game, placed on specified x and y coordinates. Here is the playerById() function. // Find player by ID function playerById(id) { var i; for (i = 0; i < players.length; i++) { if (players[i].id == id) return players[i]; }; return false; }; My logic for the clear context is as follows: New player connects to the game and is broadcasted to all connected players Clear the canvas and draw all connected players, so the new player can see all players who connected before him
  9. mla

    Images disappearing

    It's a node.js game built using canvas, html5 and socket.io with express. The game works, but the players seem to drop at times. Example, player 6 signs in and then we lose player 2. When a player joins the game, the player is broadcasted to all players and then I redraw all logged players. socket.on('new player', function(data, callback) { ... //broadcasting player to all players in gameID socket.broadcast.to(roomID).emit('setPosition', {id: newPlayer.id, x: newPlayer.getX, y: newPlayer.getY, imgFile: newPlayer.getImgFile, name: newPlayer.name}); //show all logged players in the gameID for (var i = 0; i < players.length; i++) { io.sockets.in(roomID).emit('setPosition', {id: players[i].id, x: players[i].getX, y: players[i].getY, imgFile: players[i].getImgFile, name: players[i].name}); } }); //Drawing of the players socket.on('setPosition', function(data){ context.clearRect(0, 0, canvas.width, canvas.height); var img = new Image(); function redraw() { context.drawImage(img, data.x, data.y, 85, 201); context.font = '12pt Arial'; context.fillStyle = 'white'; context.textAlign="center"; var rectHeight = 50; var rectWidth = 100; var rectX = data.x; var rectY = data.y+200; context.fillText(data.name, rectX+(rectWidth/2),rectY+(rectHeight/2)); requestAnimFrame(redraw); } img.src = data.imgFile; requestAnimFrame(redraw); }); socket.on('disconnect', function(data) { console.log("Disconnected to server socket" + socket.id); if (!socket.nickname) {return;} nicknames.splice(nicknames.indexOf(socket.nickname),1); var removePlayer = playerById(socket.id); players.splice(players.indexOf(removePlayer), 1); for (var i = 0; i < players.length; i++) { io.sockets.in(roomID).emit('setPosition', {id: players[i].id, x: players[i].getX, y: players[i].getY, imgFile: players[i].getImgFile, name: players[i].name}); } io.sockets.in(roomID).emit('logout message', {msg: data, nick: socket.nickname}); });
  10. mla

    Images disappearing

    My game is build for 6 players. Each player loads the game in a browser is assigned a unique room that displays a personal card and is represented by an avatar. The game works well, the images all load, however for some reason as more players access the game, some images may disappear. The player is actually still logged into the game and can even play the game, however their avatar image may have disappeared or their personal card may have disappeared. There is no consistency to which image may vanish and it doesn't always happen, but in most cases it does. Would anyone know why this may be? Thanks!
  11. mla

    socket.to(socket.id).emit - Not Working

    Figured it out. Emit an image in a room does work. I just had my socket.on, placed in the wrong file. Added to the correct client file and it all works great!
  12. mla

    (On Disconnect) Last player hangs

    The host doesn't get an avatar. He's there as the facilitator who is watching the players and answering questions. Each player has a unique avatar based on a set x, y position. socket.on('setPosition', function(data){ context.clearRect(0, 0, canvas.width, canvas.height); var floorplan = new Image(); floorplan.onload = function () { context.drawImage(floorplan, 150, 360); var img = new Image(); img.onload = function () { context.drawImage(img, data.x, data.y, 85, 210); context.font = '12pt Arial'; context.fillStyle = 'white'; context.textAlign="center"; var rectHeight = 50; var rectWidth = 100; var rectX = data.x; var rectY = data.y+200; context.fillText(data.name, rectX+(rectWidth/2),rectY+(rectHeight/2)); } img.src = data.imgFile; } floorplan.src = '../images/floor6P.png'; }); server side:
  13. mla

    socket.to(socket.id).emit - Not Working

    server code: var myroom = 'room' + playerNumber; socket.join(myroom); io.sockets.in(myroom).emit('showCard', {x: newPlayer.getX, y: newPlayer.getY, objCard: newPlayer.getobjCard}); client code: socket.on('showCard', function(data){ var objCard = new Image(); objCard.onload = function() { context.drawImage(objCard, data.x+100, data.y); console.log('image card'); } objCard.src = data.objCard; }); I emit 'message' and it works, but not when I try to show an image. If I simply use, io.sockets.emit, the image displays, but to all rooms. I only want it in one room.
  14. mla

    socket.to(socket.id).emit - Not Working

    Update on this - when I emit a private message it works, when I emit a private picture on canvas, it doesn't work. Any ideas why this would be? Thanks!
  15. mla

    socket.to(socket.id).emit - Not Working

    Okay, I think I just answered my own question. I need a room.id for each and then broadcast to the room. If anyone knows a better way, please do let me know. Thanks, Laura