Table of Contents
- MonochromeLib
- What is it ?
- Functions
- ML_vram_adress
- ML_clear_vram
- ML_clear_screen
- ML_display_vram
- ML_set_contrast
- ML_get_contrast
- ML_pixel
- ML_point
- ML_pixel_test
- ML_line
- ML_horizontal_line
- ML_vertical_line
- ML_rectangle
- ML_polygon
- ML_filled_polygon
- ML_circle
- ML_filled_circle
- ML_ellipse
- ML_ellipse_in_rect
- ML_filled_ellipse
- ML_filled_ellipse_in_rect
- ML_horizontal_scroll
- ML_vertical_scroll
- ML_bmp...
- Constants
- ML_Color
- ML_SCREEN_WIDTH and ML_SCREEN_HEIGHT
- ML_CONTRAST_MIN, ML_CONTRAST_NORMAL and ML_CONTRAST_MAX
- Tutorials
MonochromeLib
What is it ?
MonochromeLib is a graphic library for Casio fx-9860G SDK. It provides fast and efficient drawing functions to developpers. Every functions of MonochromeLib are significantly faster than its counterpart from fxlib.h, and this library provides lot of others functionnalities.
Functions
ML_vram_adress
char* ML_vram_adress();
Returns the VRAM adress (which is different on OS 1, OS 2, and emulator). VRAM is a video memory, a buffer of 1024 bytes made to receive drawings before to be copied on screen, on the double-buffering principle.
This function is not really useful for a normal use of MonochromeLib, but it's useful for all others functions of the lib.
See also: The VRAM, Double buffering, ML_display_vram
ML_clear_vram
void ML_clear_vram();
Clears the VRAM.
This function is 5 times faster than Bdisp_AllClr_VRAM
.
See also: The VRAM, ML_clear_screen, ML_display_vram
ML_clear_screen
void ML_clear_screen();
Clears the screen.
This function is 2 times faster than Bdisp_AllClr_DD
.
Note : It's not necessary to call ML_clear_screen
just before ML_display_vram
.
See also: ML_clear_vram, ML_display_vram
ML_display_vram
void ML_display_vram();
Copies VRAM content to screen.
This function is 2 times faster than Bdisp_PutDisp_DD
.
Note : It's not necessary to call ML_clear_screen
just before ML_display_vram
.
See also: The VRAM, ML_clear_vram, ML_clear_screen
ML_set_contrast
void ML_set_contrast(unsigned char contrast);
Set contrast value.
This value have to be between ML_CONTRAST_MIN
and ML_CONTRAST_MAX
.
See also: ML_CONTRAST, ML_get_contrast
ML_get_contrast
unsigned char ML_get_contrast();
Returns actual contrast value.
See also: ML_CONTRAST, ML_set_contrast
ML_pixel
void ML_pixel(int x, int y, ML_Color color);
Set the color of a dot in VRAM. The upper left pixel have for coordinate (0, 0), and the bottom right (127, 63).
See also: ML_Color, ML_pixel_test
ML_point
void ML_point(int x, int y, int width, ML_Color color);
Draws a point (square) in VRAM, centered at (x, y), with sides lenght (in pixel) are defined by parameter width.
Example:
ML_point(10, 10, 3, ML_BLACK);
will draw a black rectangle from (9, 9) to (11, 11).
See also: ML_Color, ML_pixel, ML_rectangle
ML_pixel_test
ML_Color ML_pixel_test(int x, int y);
Returns the color of the pixel in coordinates (x, y), ML_BLACK
or ML_WHITE
.
If coordinates are out of screen, the function return ML_TRANSPARENT
.
ML_line
void ML_line(int x1, int y1, int x2, int y2, ML_Color color);
Draws a line between points in coordinates (x1, y1) and (x2, y2) using Bresenham algorithm.
See also: ML_Color, ML_horizontal_line, ML_vertical_line
ML_horizontal_line
void ML_horizontal_line(int y, int x1, int x2, ML_Color color);
Draws a horizontal line.
This function is faster than a call to ML_line
with y1 == y2.
ML_vertical_line
void ML_vertical_line(int x, int y1, int y2, ML_Color color);
Draws a vertical line.
This function is faster than a call to ML_line
with x1 == x2.
ML_rectangle
void ML_rectangle(int x1, int y1, int x2, int y2, int border_width, ML_Color border_color, ML_Color fill_color);
Draws a rectangle with or without border.
You can define the border color, and the fill color.
If you want no border, set border_width
to 0.
ML_polygon
void ML_polygon(const int *x, const int *y, int nb_vertices, ML_Color color);
Draws a polygon.
This function needs as parameters 2 arrays, containing abscissa and ordinates of the polygon vertices. Parameter nb_vertices
should be the number of data to read in arrays.
This function draws a line between each vertices of the polygon.
Example :
int abscissa[] = {60, 75, 70, 50, 45};
int ordinate[] = {20, 30, 45, 45, 30};
ML_clear_vram();
ML_polygon(abscissa, ordinate, 5, ML_BLACK);
ML_display_vram();
Well done, a "pretty" pentagon in the middle of screen.
See also: ML_Color, ML_filled_polygon, ML_line
ML_filled_polygon
void ML_filled_polygon(const int *x, const int *y, int nb_vertices, ML_Color color);
Similar to ML_polygon
, but draws filled polygon.
See also: ML_Color, ML_polygon
ML_circle
void ML_circle(int x, int y, int radius, ML_Color color);
Draws a circle centered on (x, y) using Bresenham algorithm.
See also: ML_Color, ML_filled_circle
ML_filled_circle
void ML_filled_circle(int x, int y, int radius, ML_Color color);
Similar to ML_circle
, but draws filled circle..
ML_ellipse
void ML_ellipse(int x, int y, int radius1, int radius2, ML_Color color);
Draws an ellipse centered on (x, y) with radiuses radius1
et radius2
. radius1
is distance between center and lefmost point of ellipse, radius2
is distance between center and upper point of ellipse. Uses the Bresenham algorithm.
See also: ML_Color, ML_ellipse_in_rect, ML_filled_ellipse
ML_ellipse_in_rect
void ML_ellipse_in_rect(int x1, int y1, int x2, int y2, ML_Color color);
This function calls ML_ellipse
. It expect rectangle coordinates, and draw an ellipse in this rectangle..
See also: ML_Color, ML_ellipse, ML_filled_ellipse_in_rect
ML_filled_ellipse
void ML_filled_ellipse(int x, int y, int radius1, int radius2, ML_Color color);
Similar to ML_ellipse
, but draws a filled ellipse.
See also: ML_Color, ML_ellipse, ML_filled_ellipse_in_rect
ML_filled_ellipse_in_rect
void ML_filled_ellipse_in_rect(int x, int y, int radius1, int radius2, ML_Color color);
Similar to ML_ellipse_in_rect
, but draws a filled ellipse.
See also: ML_Color, ML_ellipse_in_rect, ML_filled_ellipse
ML_horizontal_scroll
void ML_horizontal_scroll(int scroll);
Shifts all pixels in VRAM to left or right. For example, if scroll
= 5, then a pixel on (2, 3) will be moved on (7, 3). If scroll is a negative value, pixels will be shift to left. When pixels reach screen boundaries, they reappear on the other side.
See also: ML_vertical_scroll
ML_vertical_scroll
void ML_vertical_scroll(int scroll);
Similar to ML_horizontal_scroll
, but scrolls vertically.
See also: ML_horizontal_scroll
ML_bmp...
void ML_bmp_or(const unsigned char *bmp, int x, int y, int width, int height);
void ML_bmp_and(const unsigned char *bmp, int x, int y, int width, int height);
void ML_bmp_xor(const unsigned char *bmp, int x, int y, int width, int height);
void ML_bmp_or_cl(const unsigned char *bmp, int x, int y, int width, int height);
void ML_bmp_and_cl(const unsigned char *bmp, int x, int y, int width, int height);
void ML_bmp_xor_cl(const unsigned char *bmp, int x, int y, int width, int height);
void ML_bmp_8_or(const unsigned char *bmp, int x, int y);
void ML_bmp_8_and(const unsigned char *bmp, int x, int y);
void ML_bmp_8_xor(const unsigned char *bmp, int x, int y);
void ML_bmp_8_or_cl(const unsigned char *bmp, int x, int y);
void ML_bmp_8_and_cl(const unsigned char *bmp, int x, int y);
void ML_bmp_8_xor_cl(const unsigned char *bmp, int x, int y);
void ML_bmp_16_or(const unsigned short *bmp, int x, int y);
void ML_bmp_16_and(const unsigned short *bmp, int x, int y);
void ML_bmp_16_xor(const unsigned short *bmp, int x, int y);
void ML_bmp_16_or_cl(const unsigned short *bmp, int x, int y);
void ML_bmp_16_and_cl(const unsigned short *bmp, int x, int y);
void ML_bmp_16_xor_cl(const unsigned short *bmp, int x, int y);
These functions are made to draw images in monochrome bitmap format. They are very useful to draw tiles and sprites in games.
Functions with prefix ML_bmp_8
are used to draw 88 sized bitmap.
Functions with prefix ML_bmp_16
are used to draw 1616 sized bitmap.
Others expect dimensions of the bitmap in width and height parameters.
Functions with suffix _cl
are with clipping. They can draw the bitmap even if it's not totally in screen.
Others draw the bitmap only if it's totally in screen. As a result, they are a little faster.
See also: Bitmap
Constants
ML_Color
typedef enum {ML_TRANSPARENT=-1, ML_WHITE, ML_BLACK, ML_XOR, ML_CHECKER} ML_Color;
ML_Color
is an enumeration of the different colors usable in MonochromeLib.
Only ML_TRANSPARENT
is set, with a value of -1, so the compiler give to others the following values :
ML_TRANSPARENT
= -1ML_WHITE
= 0ML_BLACK
= 1ML_XOR
= 2ML_CHECKER
= 3
ML_XOR
reverses actual color of the pixel in VRAM.
ML_CHECKER
is a "checkerboard" color. It makes black 1 pixel on 2, and white the other, according the following rule : if (x and y are even) or (x and y are odd), then the pixel becomes black, else it becomes white.
Example:
ML_rectangle(50, 20, 80, 40, 2, ML_BLACK, ML_CHECKER);
ML_SCREEN_WIDTH and ML_SCREEN_HEIGHT
These constants specify the screen size for which MonochromeLib is made.
ML_SCREEN_WIDTH
= 128ML_SCREEN_HEIGHT
= 64
These constants are not used by the library, and change will not affect its behavior. MonochromeLib isn't made for working with other screen size.
See also: ML_vram_adress
ML_CONTRAST_MIN, ML_CONTRAST_NORMAL and ML_CONTRAST_MAX
These constants spécify the minimum and maximum values accepted by fx-9860G as contrast.
ML_CONTRAST_MIN
= 130ML_CONTRAST_NORMAL
= 168ML_CONTRAST_MAX
= 190
See also: ML_set_contrast, ML_get_contrast
Tutorials
The VRAM
VRAM (abbreviation of Video RAM) is a buffer created by the operating system. It allows to practice double-buffering.
Screen of the fx-9860G contains 128*64 = 8192 pixels. It's a monochrome screen, that means each pixel have 2 possible states, ON or OFF (black or white). Therefore a pixel can be stored in one bit (0 ou 1). A byte is consisting of 8 bits, so we can store all pixels of the screen in 1024 bytes (8192/8 = 1024). The VRAM is thus a buffer of 1024 bytes.
One function in operating system (a syscall) return the VRAM adress in memory. With this adress, we can write and read in VRAM, for draw, or analyze the content. It's this function which is called in ML_vram_adress.
At the beginning of fx-9860G programming, this function was unknown, although we known the VRAM adress : 0x8800498D
. But this adress have changed with release 2.0 of the operating system, making several programs ineffective. So, the use of this syscall is necessary to guarantee the good working of programs on every operating system version.
The VRAM is organized as follows:
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
... | |||||||||||||||
1008 | 1009 | 1010 | 1011 | 1012 | 1013 | 1014 | 1015 | 1016 | 1017 | 1018 | 1019 | 1020 | 1021 | 1022 | 1023 |
The "0" box is the first byte of VRAM, the "1023" box is the last.
Example of handling :
memset(ML_vram_adress(), 255, 1024);
This line will copy the value 255 in the 1024 bytes of VRAM. 255 in binary is written 11111111, only 1. So this line fill VRAM with black. We can then call ML_display_vram
and the screen will be all black.
See also: ML_vram_adress, Double buffering
Double buffering
Double buffering is a technique of computer graphics. The principle is to make all drawing operations in a video memory (VRAM) before to copy it on the real screen. This allows not to display an image under construction and prevents screen flicker.
At first, clear the VRAM content with ML_clear_vram
, next do your drawings, and finally display the VRAM content on screen with ML_display_vram
.
See also: ML_clear_vram, ML_display_vram
Bitmap
A bitmap is a data array in which each bit account for one pixel.
Create a 8*8 bitmap
A pixel is either black or white, so we can store its state in one bit (0 or 1). A byte is consisting of 8 bits, therefore 8 pixels. For a 8*8 bitmap, each line fits in a byte, so we need 8 bytes, one per line.
Take an example, the picture of a ball :
00111100 -> 60
01111110 -> 126
11111011 -> 251
11111101 -> 253
11111101 -> 253
11111111 -> 255
01111110 -> 126
00111100 -> 60
Here, I taken binary numbers of each line of the picture, and I converted them in decimal. This gives us the following array :
char ball[] = {60, 126, 251, 253, 253, 255, 126, 60};
This array is a 8*8 bitmap that can be used with ML_bmp
functions to draw it.
Create a bitmap of any dimensions
Now we know how 88 bitmaps are encoded, it gonna be easy to understand the management of other sizes. For an 1616 bitmap, we have 16 bits per line, 2 bytes. 2 bytes per line multiplied by 16 lines, gives us 32 bytes for a 16*16 bitmap. The first two are the first line, the next two are the second line, etc.
For a bitmap whose width is less than 8, each line still take a byte. The last bits of each byte are simply unused. For a bitmap whose width is greater than 8, but non multiple of 8, it will be the same, the last bits of the last byte of each line will be unused. The ML_bmp functions apply a mask on these last bits to disable them, regardless of content. So if I take the ball bitmap created previously, and I draw it this way :
ML_bmp_or(ball, x, y, 4, 8);
Only the left half will be drawn.
The different drawing modes: OR, AND, XOR
Take for example the ball bitmap created previously, and draw it in the 3 different modes on black and white background :
char ball[] = {60, 126, 251, 253, 253, 255, 126, 60};
ML_rectangle(1, 1, 12, 32, 0, ML_TRANSPARENT, ML_BLACK); //black background
//draw on black background
ML_bmp_8_or(ball, 3, 3);
ML_bmp_8_and(ball, 3, 13);
ML_bmp_8_xor(ball, 3, 23);
//draw on white background
ML_bmp_8_or(ball, 15, 3);
ML_bmp_8_and(ball, 15, 13);
ML_bmp_8_xor(ball, 15, 23);
The ML_bmp_or functions make a binary OR between bitmap and VRAM bits.
Reminder :
- 0 OR 0 = 0
- 0 OR 1 = 1
- 1 OR 0 = 1
- 1 OR 1 = 1
So a bitmap drawing in OR mode will copy black pixels of the bitmap and let others like "transparent".
The AND mode will copy only white pixels of the bitmap. With XOR mode, the black pixels of the bitmap will reverse the color of VRAM pixels, and the white pixels of the bitmap have no effect.
To overwrite VRAM pixels without transparency, draw the bitmap with AND, then with OR. If you have a sprite with black, white and transparent pixels, you need 2 bitmaps. The first containing 0 on white pixels to be applied with AND, the second containing 1 on black pixels to be applied with OR. Pixels at 1 in first and 0 in second, will be transparent. If you want the black pixels of the bitmap to be copied in white in VRAM, you must apply the same bitmap with OR then with XOR. So, with these 3 modes, you can do what you want.
Software to encode bitmap
There is a lot of software which can generate bitmap in this format.
- Tile Creator
- Sprite Maker (made for AFX, but compatible)
- Find_Sprites_In_Bitmap, a small program I have made.
You can also make your own ! It's not really hard, as you can program in C, and you now know how bitmaps are encoded.
See also: ML_bmp...