# Rendering, the camera & the world

Prosperon is rendered via a single camera, defined on `prosperon.camera`. Examine the `camera` object in the API for detail about its properties.

The camera has a width and a height, which defines the resolution of the rendered game. The camera also has a transform `prosperon.camera.transform`, which should be used to move it. The camera's position can also be set via `prosperon.camera.pos`.

## Coordinate System
There are two important coordinate systems in Prosperon: world and hud. Both coordinate systems are measured in pixels, with X+ going to the right, and Y+ going up.

**World space** is the game world, and is what the camera "sees". The center of the camera is the coordinate it is viewing; so, for example, if the camera is at position [100,100], the pixel at the center of the screen is whatever pixel is at world space [100,100].

**Hud space** can be thought of as the screen itself, or the lens of the camera. The bottom left of the viewing window is [0,0], and the top right is [camera.width, camera.height].

## The render module & queues
Internally, prosperon keeps a rendering queue as draw commands are issued throughout the frame. It keeps two: 'draw' and 'hud'. At the end of the frame, draw commands are sorted and issued to the GPU: first the 'draw' queue, and then the 'hud' queue, so that it overlays.

The render module contains functionality for low level rendering. It includes commands like 'scissor' and 'viewport', it is more recommended to use the 'draw2d' module to do the majority of the drawing.

## Draw2d
The easiest way to draw with prosperon is to use the 'draw2d' module. Prosperon defines two events via `prosperon.on`: `draw` and `hud`. During a frame, the `render` module sets its internal queue to `draw`, and then the `draw` event is issued. Then it does the same for `hud`. The 'draw2d' module is a high level way to issue drawing commands to the current queue. So, a simple example:

```
var draw = use('draw2d')
// main.js
var rect = {x:0,y:0,width:100,height:100} // a 100x100 square at [0,0]
this.draw = function() {
  draw.rectangle(rect) // this will draw with the bottom left corner at the center of the screen
}

this.hud = function() { 
  draw.rectangle(rect) // this draws a rectangle at the botomm left corner of the screen
}
```

## Imgui
Prosperon includes imgui. Another event is the `imgui` event, where you can issue imguie commands via the 'imgui' module. Examine the 'imgui' API for more info.
