Sprite перемещения с помощью ввода координат

Question

\t \t \t \t /************ON RECEIVING MESSAGES VIA WEBSOCKET FROM THE SERVER********/ 
 
\t \t \t \t ws.onmessage = function(event) { 
 
\t \t \t \t \t var mySpan = document.getElementById("messageGoesHere"); 
 
\t \t \t \t \t var mySpan2 = document.getElementById("messageGoesHere2"); 
 
\t \t \t \t \t var str = event.data; 
 
\t \t \t \t \t //var temp = new Array(); 
 
\t \t \t \t \t //temp = str.split("\\|"); 
 
\t \t \t \t \t /***********SPLITS THE RECEIVED MESSAGE**************** 
 
\t \t \t \t \t *********AND STORES THE VALUE IN THE VARIABLES*********/ 
 
\t \t \t \t \t if((str.localeCompare('connected'))==0) 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t document.getElementById("connection").innerHTML='Connected'; \t 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t else if((str.localeCompare('closed'))==0) 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t document.getElementById("connection").innerHTML='No connection'; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t else{ 
 
\t \t \t \t \t \t \t var array = str.split('|'); 
 
\t \t \t \t \t \t \t mySpan.innerHTML = parseInt(array[5]) 
 
\t \t \t \t \t \t \t mySpan2.innerHTML = parseInt(array[6]); \t 
 
\t \t \t \t \t \t \t draw(parseInt(array[5]), parseInt(array[6])); 
 
\t \t \t \t \t } 
 
\t \t \t \t };

Я работаю над игрой робота, и я использую требование фазер library.My это передать ху координаты робота (спрайты), и он должен двигаться в соответствии с который координирует без какой-либо скорости или скорости. Я использую следующий код для перемещения робота. Теперь я хочу переместить его на карту, используя входящие координаты. Итак, любезно дайте мне несколько советов.

// The following code is for the robot movement \t 
 
    \t 
 
    \t // This is initial velocity 
 
    \t player.body.velocity.x = 0; 
 
     player.body.velocity.y = 0; 
 

 
     if (cursors.left.isDown) 
 
     { 
 
      player.body.velocity.x = -200; 
 
     } 
 
     else if (cursors.right.isDown) 
 
     { 
 
      player.body.velocity.x = 200; 
 
     } 
 

 
     if (cursors.up.isDown) 
 
     { 
 
      player.body.velocity.y = -200; 
 
     } 
 
     else if (cursors.down.isDown) 
 
     { 
 
      player.body.velocity.y = 200; 
 
     }

Answer 1

ОК, так это выглядит, как ваш вопрос связан с тем, как позиционировать Sprite в игровом мире, используя координаты, полученные из внешнего источника - через Интернет. Это проблема в любой многопользовательской игре. В основном, как вы размещаете своих игроков, когда позиции вашего сервера по своей сути устарели от того, что делают ваши пользователи? Here is a really good article from Valve on the subject. Вам не нужно делать все это для однопользовательской игры, которая просто устанавливает позицию из websocket. Тем не менее, я бы рекомендовал сохранить последние 1 или 2 координаты last_positions и lerping между ними, пока вы ждете следующую координату значения.

Если ваш вопрос больше связан с тем, как получить координаты из вашего внешнего скрипта в вашу игру Phaser, то похоже, что вы в настоящее время храните ваши данные WebSocket в HTML-div? Если это так, Phaser все еще JS и имеет возможность взаимодействовать с DOM. В своей функции update() войдите в элемент DOM и получите свое значение.

Не могу сказать, что я рекомендовал бы этот подход. Бьюсь об заклад, что написание/извлечение из DOM приведет к штрафу ввода-вывода (возможно, даже некоторого повторного рендера). Вместо этого я бы порекомендовал загрузить ваш скрипт игры перед вашим скриптом websocket, обнажив глобальную функцию updateCoordinates(x,y) в вашей игре и используя этот обратный вызов из вашего сценария websocket. Затем вы можете обновить свои 1 или 2 last_positions, а в update() lerp между этими позициями.

//game.js, load before webSocket 
var game = ... //global variable 
//state 'PlayGame' is where your robot moves 

//webSocket.js 
ws.onmessage = function(event) { 
    ... 
    game.states.state.PlayGame.updateCoordinates(x,y); 
}