<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Syncing part of state &#x2F; design paradigm]]></title><description><![CDATA[<p>Hi, I am experimenting with this library and have a setup like this (JS, a lot omitted for brevity):</p>
<pre><code>class MyRoom extends Room {
  onInit () {
     this.setState({ players: {} })
     this.tick = this.tick.bind(this)
     this.setSimulationInterval(this.tick, 1000 / 30)
  }
  onJoin (client, options) {
    this.state.players[client.sessionId] = new Player(sessionId, this)
  }
  tick () {
    Object.values(this.state.players).forEach(player =&gt; player.update())
  }
}

class Player {
  constructor (id, game) {
     this.id = id
     this.game = game // &lt;-- this is the main problem
     this.x = randX()
     this.y = randY()
     this.update = this.update.bind(this)
  }
  update () {
     // perform some calculations and update this.x and this.y
     // this involves this.game (for collision detections against other players, for example)
  }
}
</code></pre>
<p>As you can see, the room has a game loop which calls <code>Player#update</code> every frame (this just moves the player according to his velocity vector and checks collisions against walls and other players via <code>this.game</code>).</p>
<p>The problem is that <code>this.game</code> puts <code>game</code> on the player state object which is transmitted to the clients, as well as the <code>update</code> function. (This actually crashes the process because it cannot format it correctly). Using <code>nosync</code> also doesn't work because then for some reason <code>this.game</code> is not available in <code>Player#update</code>.</p>
<p>Ideally I could have a <code>this.state</code> field on <code>Player</code> with the actual state, and the rest left as variables for use in the class (similar to how the room works), ie:</p>
<pre><code>class Player {
   constructor (id, game) {
      this.id = id
      this.game = game
      this.state = { x: randX(), y: randY() }
   }
}
</code></pre>
<p>What's the recommended approach here?</p>
]]></description><link>http://discuss.colyseus.io/topic/162/syncing-part-of-state-design-paradigm</link><generator>RSS for Node</generator><lastBuildDate>Thu, 12 Mar 2026 16:52:25 GMT</lastBuildDate><atom:link href="http://discuss.colyseus.io/topic/162.rss" rel="self" type="application/rss+xml"/><pubDate>Fri, 19 Oct 2018 19:51:05 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to Syncing part of state &#x2F; design paradigm on Fri, 19 Oct 2018 22:58:36 GMT]]></title><description><![CDATA[<p>Hi, I am experimenting with this library and have a setup like this (JS, a lot omitted for brevity):</p>
<pre><code>class MyRoom extends Room {
  onInit () {
     this.setState({ players: {} })
     this.tick = this.tick.bind(this)
     this.setSimulationInterval(this.tick, 1000 / 30)
  }
  onJoin (client, options) {
    this.state.players[client.sessionId] = new Player(sessionId, this)
  }
  tick () {
    Object.values(this.state.players).forEach(player =&gt; player.update())
  }
}

class Player {
  constructor (id, game) {
     this.id = id
     this.game = game // &lt;-- this is the main problem
     this.x = randX()
     this.y = randY()
     this.update = this.update.bind(this)
  }
  update () {
     // perform some calculations and update this.x and this.y
     // this involves this.game (for collision detections against other players, for example)
  }
}
</code></pre>
<p>As you can see, the room has a game loop which calls <code>Player#update</code> every frame (this just moves the player according to his velocity vector and checks collisions against walls and other players via <code>this.game</code>).</p>
<p>The problem is that <code>this.game</code> puts <code>game</code> on the player state object which is transmitted to the clients, as well as the <code>update</code> function. (This actually crashes the process because it cannot format it correctly). Using <code>nosync</code> also doesn't work because then for some reason <code>this.game</code> is not available in <code>Player#update</code>.</p>
<p>Ideally I could have a <code>this.state</code> field on <code>Player</code> with the actual state, and the rest left as variables for use in the class (similar to how the room works), ie:</p>
<pre><code>class Player {
   constructor (id, game) {
      this.id = id
      this.game = game
      this.state = { x: randX(), y: randY() }
   }
}
</code></pre>
<p>What's the recommended approach here?</p>
]]></description><link>http://discuss.colyseus.io/post/542</link><guid isPermaLink="true">http://discuss.colyseus.io/post/542</guid><dc:creator><![CDATA[zpr]]></dc:creator><pubDate>Fri, 19 Oct 2018 22:58:36 GMT</pubDate></item><item><title><![CDATA[Reply to Syncing part of state &#x2F; design paradigm on Invalid Date]]></title><description><![CDATA[<p>Hi <a class="plugin-mentions-user plugin-mentions-a" href="http://discuss.colyseus.io/uid/216">@zpr</a>, welcome!</p>
<p>I think the problem you're facing is exactly what <a class="plugin-mentions-user plugin-mentions-a" href="http://discuss.colyseus.io/uid/214">@Nebri</a> just asked about in the <a href="https://gitter.im/gamestdio/colyseus" rel="nofollow">Gitter</a> channel.</p>
<p>You're probably facing the famous <code>this</code> problem in JavaScript. When referencing the function directly on <code>setSimulationInterval</code> you will lose the <code>this</code> reference.</p>
<p>You can call it like this instead:</p>
<pre><code>this.setSimulationInterval(() =&gt; this.tick())
</code></pre>
<p>or</p>
<pre><code>this.setSimulationInterval(this.tick.bind(this))
</code></pre>
]]></description><link>http://discuss.colyseus.io/post/543</link><guid isPermaLink="true">http://discuss.colyseus.io/post/543</guid><dc:creator><![CDATA[endel]]></dc:creator><pubDate>Invalid Date</pubDate></item><item><title><![CDATA[Reply to Syncing part of state &#x2F; design paradigm on Fri, 19 Oct 2018 23:01:36 GMT]]></title><description><![CDATA[<p>Hi <a class="plugin-mentions-user plugin-mentions-a" href="http://discuss.colyseus.io/uid/1">@endel</a> thanks for your response.</p>
<p>Unfortunately that is not the problem, I do have access to <code>this</code> as I have it bound in the constructor:</p>
<pre><code class="language-js">this.tick = this.tick.bind(this)
</code></pre>
<p>Perhaps my post was not clear. The problem is that the nested state object <code>Player</code> has too many fields. That is, the entire <code>Player</code> class is included as part of the <code>state</code> in the room (including the reference to <code>game</code>, and its own internal updating functions).</p>
]]></description><link>http://discuss.colyseus.io/post/545</link><guid isPermaLink="true">http://discuss.colyseus.io/post/545</guid><dc:creator><![CDATA[zpr]]></dc:creator><pubDate>Fri, 19 Oct 2018 23:01:36 GMT</pubDate></item><item><title><![CDATA[Reply to Syncing part of state &#x2F; design paradigm on Invalid Date]]></title><description><![CDATA[<p>I found by looking at the source of your <a href="https://github.com/endel/tanx" rel="nofollow">tanx game</a> overloading <code>toJSON</code> on the Player class to be very helpful.</p>
<p>Thanks</p>
]]></description><link>http://discuss.colyseus.io/post/547</link><guid isPermaLink="true">http://discuss.colyseus.io/post/547</guid><dc:creator><![CDATA[zpr]]></dc:creator><pubDate>Invalid Date</pubDate></item></channel></rss>