Rendering - Bitmaps
This example demonstrates the use of WOWCube API for rendering bitmaps or sprites.
A bitmap is a type of memory organization used to store digital images. The term
bitmapcomes from the computer graphics therminology, meaning just a map of bits, a spacially mapped array of bits. It refers to a spacially mapped array of pixels.
A sprite is a two-dimensional bitmap that is integrated into a larger scene, most often is a 2D video game.
Generally, the drawing of a bitmap requires two separate steps:
- First, bitmap data must be loaded from image file into device memory.
- Second, the coordinate of a pivot point of a bitmap should be passed to WOWCube API bitmap drawing funciton to render the bitmap on screen
A pivot point is a central point of any rotational system.
In WOWCube API, bitmap pivot point is always at the geometrical center of an image. For example, if bitmap width is 240 and height is 240, its pivot point is at (120, 120)
As it was mentioned above, a bitmap is an array of pixels. Each pixel has a color encoded in RGB value.
The RGB color model is an additive color model in which the red, green and blue primary colors of light are added together in various ways to reproduce a broad spectrum of colors. The name of the model comes from the first letters of the three primary colors: Red, Green and Blue
Actual values of each primary color range from 0 to 255, the range that a single 8-bit byte can offer. Since higher value means brighter color, the (0,0,0) represents no color, or so-called transparent color, (1,1,1) gives solid black, while (255,255,255) gives white.
The example
In order to demonstrate the rendering of bitmaps, we will create a cubeapp that visualizes a system of a star and planets orbiting the star.
Loading the bitmap data
First off, we must load image files to WOWCube device memory. Once loaded, the content of each image file creates a resource with its own unique identifier called a resouce handle, or just a handle.
Our example uses three static images, so let's declare three new variables for saving handles of these images
and load them when cubeapp initializes:
To load image file data into a graphics asset, WOWCube API GFX_getAssetId function is used:
At this point, we have background and foreground images plus an image of a star. But what about planets?
For planets, we will implement a very simple particle system of just three particles, each drawn as a sprite.
As with any particly system, first we declare an array of particle objects that represent planets:
Each planet object has the following properties:
- sprite - a handle to the bitmap resource used for rendering of the particle
- (x, y) - screen coordinate of the plant;
- z - "depth" coordinate of the planet;
- angle - current angular position of the planet;
- radius - a radius of planet's orbit
- speed - plant angular speed
- orbIncl - an inclanation of planet's orbit
Next step is to complete an emission stage, or, in other words, to put our planets at initial positions:
Drawing sprites
We have all bitmap resources loaded, so let's draw them!
The simulation stage of our particle system is where we animate sprites of our planets to make them orbit the star.
It is done in ON_PhysicsTick() callback:
The actual algorithm is quite simple: coordinates of each planet are getting changed according to the circle equation. The "depth" parameter is evaluated from the value of current angular position of a planet. It is needed to be able to tell whether the planet is behind or ahead of the star.
And finally, the rendering stage is as usual performed in on_Render() callback:
To render bitmaps, GFX_drawImage function is used: