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