add example renderers to concepts page
parent
cadb230de6
commit
8fe24b8174
|
@ -14,6 +14,43 @@ There are two kinds of renderers: GeneralRenderers and EntityRenderers.
|
||||||
|
|
||||||
A GeneralRenderer is a Renderer which reads the game state in order to draw elements to the screen. It also requires a layer, which represents the order in which it will draw to the screen.
|
A GeneralRenderer is a Renderer which reads the game state in order to draw elements to the screen. It also requires a layer, which represents the order in which it will draw to the screen.
|
||||||
|
|
||||||
|
If you were using the LOVE engine, a GeneralRenderer might look like this:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { GeneralRenderer } from "encompass-ecs";
|
||||||
|
import { ScoreComponent } from "game/components/score";
|
||||||
|
|
||||||
|
export class ScoreRenderer extends GeneralRenderer {
|
||||||
|
public layer = 4;
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const score_component = this.read_component(ScoreComponent);
|
||||||
|
|
||||||
|
love.graphics.print(score_component.score, 20, 20);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
An EntityRenderer provides a structure for the common pattern of drawing an Entity which has a particular collection of Components and a specific type of DrawComponent. They also have the ability to draw DrawComponents at their specific layer.
|
An EntityRenderer provides a structure for the common pattern of drawing an Entity which has a particular collection of Components and a specific type of DrawComponent. They also have the ability to draw DrawComponents at their specific layer.
|
||||||
|
|
||||||
For 2D games, you will need to be specific about the order in which things draw. For a 3D game you will probably end up delegating rendering to some kind of scene/camera system.
|
If you were using the LOVE engine, a GeneralRenderer might look like this:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { EntityRenderer } from "encompass-ecs";
|
||||||
|
import { PointComponent } from "game/components/point";
|
||||||
|
import { PositionComponent } from "game/components/position";
|
||||||
|
|
||||||
|
@Renders(PointComponent, PositionComponent)
|
||||||
|
export class PointRenderer extends EntityRenderer {
|
||||||
|
public render(entity: Entity) {
|
||||||
|
const point_component = entity.get_component(PointComponent);
|
||||||
|
const position_component = entity.get_component(PositionComponent);
|
||||||
|
|
||||||
|
const color = point_component.color;
|
||||||
|
love.graphics.setColor(color.r, color.g, color.b, color.a);
|
||||||
|
love.graphics.point(position_component.x, position_component.y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
For 2D games, you will need to be use layers to be specific about the order in which entities draw. For a 3D game you will probably end up delegating rendering to some kind of scene/camera system.
|
||||||
|
|
Loading…
Reference in New Issue