GRAPHICS AND SOUND
1: GRAPHICS
RCBasic has a powerful 2D graphics API. To be able to draw graphics you first need a window. You can have up to 8 windows in desktop
applications and only a single window in a mobile app. Once a window is opened, all drawing is done on virtual render targets called
canvases. Each window can have up to 8 canvases, which are numbered 0 to 7. When defining a canvas, you will need to consider the size
of the canvas and the size of its viewport. The canvas size specifies the total area available to draw on and the viewport specifies the total area that will be displayed.
The image shown above outlines the structure of a graphics program consisting of one 640x480 window which has a 220x200 canvas in it.
The viewport of this canvas is 120x100 which means only a 120x100 section of the total canvas will be shown. Below is the code to create
this window.
mode = WINDOW_VISIBLE
WindowOpen(0, "GFX Exampe", 0, 0, 640, 480, mode, 1)
CanvasOpen(0, 220, 200, 60, 90, 120, 100, 0)
There is quite a bit that is being done in the 2 lines of code above.
WindowOpen(0, "GFX Exampe", 0, 0, 640, 480, mode, 1)
0 - The number of the window. Windows can be numbered from 0 to 7. (Only window 0 is accessible on mobile)
"GFX Example" - The title of the window
0, 0 - The x and y position of the window (you can use the constant WINDOWPOS_CENTERED to open the window in the middle of the desktop)
640, 480 - The width and height of the window
mode - This is the combination of flags that decides how the window is drawn.
1 - If this is 0 then vsync is disabled. Else it is enabled.
CanvasOpen(0, 220, 200, 60, 90, 120, 100, 0)
0 - The number of the canvas. Canvases can be numbered from 0 to 7.
220, 200 - The total area available for drawing
60, 90 - Where in the window the canvas will be displayed. (This point will be where the (x,y) will be 0 when drawing on this canvas)
120, 100 - The width and height of the viewport. This is the size of the canvas area that will be displayed.
0 - This flag can be 0 for solid and 1 for transparent.
Once a canvas is opened you can begin drawing to the canvas. Once you are done drawing you have to call the Update() function to
display everything you have drawn. Even if you are not drawing anything you should call Update() atleast once in your main loop
to update the event queue otherwise you will not be able to get mouse/keyboard/joystick events, window events, touch events, etc.
So a simple program that draws a red rectangle on the screen would look like this:
mode = WINDOW_VISIBLE
WindowOpen(0, "GFX Exampe", 0, 0, 640, 480, mode, 1)
CanvasOpen(0, 220, 200, 60, 90, 120, 100, 0)
SetColor(RGB(255,0,0)) Set the Drawing color to RED
RectFill(20, 20, 100, 100) Draw a 100x100 rectangle at position (20, 20) on the canvas
Update() 'Show all the drawing we have done and update the event queue
WaitKey() 'This will make our program wait until a key is pressed before ending
As previously mentioned, you have access to up to 8 canvases. If you have more than one canvas you can use the Canvas() function to
switch which canvas you are drawing to. Here is an example of drawing a rectangle to 2 different canvases.
mode = WINDOW_VISIBLE
WindowOpen(0, "GFX Exampe", 0, 0, 640, 480, mode, 1)
CanvasOpen(0, 220, 200, 60, 90, 120, 100, 0)
CanvasOpen(1, 150, 150, 200, 200, 150, 150, 0)
Canvas(0)
SetColor(RGB(255,0,0))
RectFill(20, 20, 100, 100)
Canvas(1)
SetColor(RGB(0,255,0))
RectFill(10, 10, 90, 90)
Update() 'Show all the drawing we have done and update the event queue
WaitKey() 'This will make our program wait until a key is pressed before ending
Along with being able to draw shapes, RCBasic has several built-in commands for loading and drawing images. You can load a total of
4096 images that can be loaded at one time which are numbered from 0 to 4095. The following will load an image and draw it.
mode = WINDOW_VISIBLE
WindowOpen(0, "GFX Exampe", 0, 0, 640, 480, mode, 1)
CanvasOpen(0, 220, 200, 60, 90, 120, 100, 0)
LoadImage(0, "tst_image.png") 'loads an image file called tst_image.png into image slot 0
DrawImage(0, 20, 20) 'draws the image in slot 0 at position (20, 20) on the canvas
Update() 'Show all the drawing we have done and update the event queue
WaitKey() 'This will make our program wait until a key is pressed before ending
2: SOUND
Loading and playing sounds is similiar to how you would load and draw images. There are a total 1024 sounds that can be loaded at
one time. Here is a simple program that loads and plays a single sound.
mode = WINDOW_VISIBLE
WindowOpen(0, "GFX Exampe", 0, 0, 640, 480, mode, 1)
LoadSound(0, "MySound.wav") 'Load a sound file into sound slot 0
PlaySound(0, 1, 3) 'Play the sound loaded in slot 0 on channel 1 for 3 loops
Update()
waitkey()
There is only 1 music track that can be loaded at one time. Loading and playing music is pretty straight forward.
mode = WINDOW_VISIBLE
WindowOpen(0, "GFX Exampe", 0, 0, 640, 480, mode, 1)
LoadMusic ( "MYMUSIC.MP3" )
PlayMusic ( -1 ) 'Setting the music loop to -1 will have it loop infinitely
Update()
waitkey()
This is only a brief overview of integrating graphics and audio into your programs. For more info on these you can reference these categories:
Window Management
Canvases
Graphics Primitives
Loading and Drawing Images
Sound and Music
It is also highly reccomended to go through the examples included with RCBasic.