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.