4 ms·

I'm curious why the decision to redraw the entire tree when a node has been touched, rather than just that node or that branch?

by elif 7y ago

acephal 7y ago
That's a typical quality of game engines, they just blast the whole screen away. If their design is similar to CreateJS' they likely walk the tree and reduce it to a flat array of Canvas instructions. I imagine reconcilling with a cache structure is expensive for whatever reason.
jmull 7y ago
It takes a bunch of effort to keep track of which nodes need to be redrawn (and in which areas of the screen). If you end up needing to redraw most (or all) of the screen anyway, that effort is wasted. The overhead of it can even end up slowing things down. Just assuming everything needs to be redraw from the start saves the effort, and is optimal in the case where everything does need to be redrawn. For games in particular, this is usually a good assumption. If you're wrong, you end up slowing down less complex cases but they can usually afford it. When you're right, you're optimal for the most demanding cases. You're usually trying to hit a frame rate and care a lot more about hard cases falling below the target than how far above target easy cases are. And there are many common cases in games where you do need to redraw everything anyway. E.g., once you start scrolling or any other kind of full-screen effect. (In the old, pre-PGU days you often actually would scroll the image in a buffer and only redraw newly the exposed area through the scene graph, but there's really not an advantage to that these days and doesn't help you with any other kind of full screen effect.)
Rotten194 7y ago
Games typically need to redraw the entire screen anyways. Imagine a sidescroller where even a 1px movement requires the entire background and every object on top to be redrawn, or in 3D even a tiny camera move shifts the position of every triangle on the screen. Even very simple games without a lot of movement often have animations, where you then have to worry about transparency so you may have to redraw the region under the animated element anyways even of it doesn't move, etc. You could do a diff hoping for the happy occasion of a mostly-static frame, but a) that gives a performance penalty to the majority of frames that would need a total or near-total redraw anyways, and b) would lead to either unstable FPS or pointlessly hitting the FPS cap. There are exceptions to this, for example a visual novel or a turn-based strategy game, but those are often satisfied to just eat the performance penalty for the ability to use standard tooling, or can use engines or standard UI toolkits like React that can do a temporal diff. For example, I've written several text-based games [1] that just use the DOM because using canvas or WebGL wasn't necessary. I've written other games that use a hybrid approach of absolutely-positioning temporally diffed DOM over a frame-by-frame redrawn canvas, to get the best of both worlds [2]. And I've also written games in e.g. Unity where it's easier and performant enough to use ImGui and redraw it every frame. Ultimately it cones down to what's practical and what's performant enough. [1] https://vgel.itch.io/themengi https://vgel.itch.io/themengi , https://vgel.itch.io/the-sacred-text https://vgel.itch.io/the-sacred-text [2] https://vgel.me/hoverator https://vgel.me/hoverator
- aliswe 7y ago
  But 2D sidescrollers have traditionally just "paned" the already drawn/rendered (buffer?) and only redraws the new bits. In some cases this caused artifacts to stick to the screen. Specifically thos was not unheard of regarding games made with KnP, TGF and MMF. I guess this was before HWA, though.
- victorNicollet 7y ago
  There used to be a time when the game would render to a buffer slightly larger than the screen, then blit the right portion of that buffer to the screen. This meant that scrolling just consisted in blitting from a different offset. Composing the background image, then, would only require changing the bits behind animated sprites (so you would usually intersect the old and new position of each sprite with the background tile grid to find which tiles to draw again). All of this changed with the advent of 3d hardware acceleration, but I remember doing it up until 2005 to get significant performance gains (on bad hardware).
- elif 7y ago
  I guess my understanding of an HTML canvas is that it takes less work to "translate these 1000 objects 5 pixels left" than "draw these 1000 objects" e.g. mozilla's tips for canvas performance state: "Avoid unnecessary canvas state changes." And: "Render screen differences only, not the whole new state." https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/...

I'm curious why the decision to redraw the entire tree when a node has been touched, rather than just that node or that branch?

by elif 7y ago

I'm curious why the decision to redraw the entire tree when a node has been touched, rather than just that node or that branch?

acephal 7y ago

That's a typical quality of game engines, they just blast the whole screen away. If their design is similar to CreateJS' they likely walk the tree and reduce it to a flat array of Canvas instructions. I imagine reconcilling with a cache structure is expensive for whatever reason.

jmull 7y ago

It takes a bunch of effort to keep track of which nodes need to be redrawn (and in which areas of the screen). If you end up needing to redraw most (or all) of the screen anyway, that effort is wasted. The overhead of it can even end up slowing things down. Just assuming everything needs to be redraw from the start saves the effort, and is optimal in the case where everything does need to be redrawn. For games in particular, this is usually a good assumption. If you're wrong, you end up slowing down less complex cases but they can usually afford it. When you're right, you're optimal for the most demanding cases. You're usually trying to hit a frame rate and care a lot more about hard cases falling below the target than how far above target easy cases are. And there are many common cases in games where you do need to redraw everything anyway. E.g., once you start scrolling or any other kind of full-screen effect. (In the old, pre-PGU days you often actually would scroll the image in a buffer and only redraw newly the exposed area through the scene graph, but there's really not an advantage to that these days and doesn't help you with any other kind of full screen effect.)

Rotten194 7y ago

Games typically need to redraw the entire screen anyways. Imagine a sidescroller where even a 1px movement requires the entire background and every object on top to be redrawn, or in 3D even a tiny camera move shifts the position of every triangle on the screen. Even very simple games without a lot of movement often have animations, where you then have to worry about transparency so you may have to redraw the region under the animated element anyways even of it doesn't move, etc. You could do a diff hoping for the happy occasion of a mostly-static frame, but a) that gives a performance penalty to the majority of frames that would need a total or near-total redraw anyways, and b) would lead to either unstable FPS or pointlessly hitting the FPS cap. There are exceptions to this, for example a visual novel or a turn-based strategy game, but those are often satisfied to just eat the performance penalty for the ability to use standard tooling, or can use engines or standard UI toolkits like React that can do a temporal diff. For example, I've written several text-based games [1] that just use the DOM because using canvas or WebGL wasn't necessary. I've written other games that use a hybrid approach of absolutely-positioning temporally diffed DOM over a frame-by-frame redrawn canvas, to get the best of both worlds [2]. And I've also written games in e.g. Unity where it's easier and performant enough to use ImGui and redraw it every frame. Ultimately it cones down to what's practical and what's performant enough. [1] https://vgel.itch.io/themengi https://vgel.itch.io/themengi , https://vgel.itch.io/the-sacred-text https://vgel.itch.io/the-sacred-text [2] https://vgel.me/hoverator https://vgel.me/hoverator

aliswe 7y ago
But 2D sidescrollers have traditionally just "paned" the already drawn/rendered (buffer?) and only redraws the new bits. In some cases this caused artifacts to stick to the screen. Specifically thos was not unheard of regarding games made with KnP, TGF and MMF. I guess this was before HWA, though.
victorNicollet 7y ago
There used to be a time when the game would render to a buffer slightly larger than the screen, then blit the right portion of that buffer to the screen. This meant that scrolling just consisted in blitting from a different offset. Composing the background image, then, would only require changing the bits behind animated sprites (so you would usually intersect the old and new position of each sprite with the background tile grid to find which tiles to draw again). All of this changed with the advent of 3d hardware acceleration, but I remember doing it up until 2005 to get significant performance gains (on bad hardware).
elif 7y ago
I guess my understanding of an HTML canvas is that it takes less work to "translate these 1000 objects 5 pixels left" than "draw these 1000 objects" e.g. mozilla's tips for canvas performance state: "Avoid unnecessary canvas state changes." And: "Render screen differences only, not the whole new state." https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/...