Rendering: Difference between revisions
No edit summary |
Dat Hack3r (talk | contribs) m Added page to Documentation category. |
||
| (3 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
== Overview == | == Overview == | ||
Our World of Text uses HTML5 canvas as the core for its world rendering. HTML5 canvas allows for advanced graphics capabilities and high performance, unlike direct DOM text. | Our World of Text uses HTML5 canvas as the core for its world rendering. HTML5 canvas allows for advanced graphics capabilities and high performance, unlike direct DOM text. | ||
| Line 11: | Line 9: | ||
Rendering text takes a lot of time. To save on time, the content of a tile is cached to a canvas. This avoids the need to re-render all tiles every time the user moves the page. | Rendering text takes a lot of time. To save on time, the content of a tile is cached to a canvas. This avoids the need to re-render all tiles every time the user moves the page. | ||
Prior to July 2021, all tiles had their own dedicated canvas to cache the rendered content. This later proved to be inefficient, since browsers tend to struggle having hundreds of canvas contexts in memory. | Prior to July 2021, all tiles had their own dedicated canvas to cache the rendered content. This later proved to be inefficient, since browsers tend to struggle having hundreds of canvas contexts in memory. The solution was to create large canvases, storing multiple tiles per canvas. Whenever a tile is ready to be placed onto the main screen, the specific region where the tile is located within the canvas is put onto the screen. | ||
==Transparency== | |||
By default, the text rendering canvas has the 'alpha' flag set to true, meaning its background is transparent. This means the tile's background color and cell protections are re-drawn for every frame and are not cached. | |||
In non-transparent mode, the 'alpha' flag is set to false, meaning the background along the text is cached. Thus the tile's background is not redrawn for every frame. This mode also has the added consequence of text having subpixel rendering, which may make the text look crisper on LCD screens. | |||
==Queued rendering== | ==Queued rendering== | ||
| Line 33: | Line 31: | ||
The client's `w` namespace has several functions pertaining to rendering. It's important to know when it's appropriate to use certain functions. | The client's `w` namespace has several functions pertaining to rendering. It's important to know when it's appropriate to use certain functions. | ||
=== w.redraw() | === w.redraw() === | ||
Forces all loaded tiles to have its text content re-rendered. This can be called frequently with no performance issues. | Forces all loaded tiles to have its text content re-rendered. This can be called frequently with no performance issues. | ||
=== w.reloadRenderer() | === w.reloadRenderer() === | ||
Fully clears the renderer cache. | Fully clears the renderer cache. | ||
=== w.setRedraw() | === w.setRedraw() === | ||
Alias for w.redraw() | Alias for w.redraw() | ||
=== w.setTileRedraw(tileX, tileY, highPriority, fastQueue) | === w.setTileRedraw(tileX, tileY, highPriority, fastQueue) === | ||
Forces a specific tile to have its text content re-renderered. | Forces a specific tile to have its text content re-renderered. | ||
| Line 49: | Line 47: | ||
The fastQueue parameter forces the renderer queue to process all tiles with this option immediately. This is useful for hiding the row-by-row rendering effect. | The fastQueue parameter forces the renderer queue to process all tiles with this option immediately. This is useful for hiding the row-by-row rendering effect. | ||
=== w.setTileRender(tileX, tileY) | === w.setTileRender(tileX, tileY) === | ||
Schedule a tile to be blitted onto the screen. | Schedule a tile to be blitted onto the screen. | ||
In transparent mode, only the background content and protections are re-rendered. | In transparent mode, only the background content and protections are re-rendered. | ||
=== w.setTransparency(transparent) | === w.setTransparency(transparent) === | ||
Change the renderer's 'alpha' mode. Please see the Transparency section above for more details. | Change the renderer's 'alpha' mode. Please see the Transparency section above for more details. | ||
=== w.render(redraw) | === w.render(redraw) === | ||
Blits all tiles onto the screen. Must be called when the world position changes. | Blits all tiles onto the screen. Must be called when the world position changes. | ||
If the redraw parameter is set to true, then it's equivalent to calling w.redraw(). | If the redraw parameter is set to true, then it's equivalent to calling w.redraw(). | ||
[[Category:Documentation]] | |||