104 lines
7.2 KiB
HTML
104 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="style.css">
|
|
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
|
|
<title>RCBasic Graphics [RCBasic Doc] </title>
|
|
</head>
|
|
|
|
<body>
|
|
<p><h2>GRAPHICS </h2></p>
|
|
<p>
|
|
Finally, the reason we are all here. Lets draw pretty pictures on the screen. The first thing we need is a window. To open the graphics window, we need to use OpenWindow().
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
fullscreen = <span class="rc_keyword">false</span> <br>
|
|
vsync = <span class="rc_keyword">true</span> <br>
|
|
<br>
|
|
OpenWindow<b>(</b><span class="rc_string">"My Graphics Window"</span>, <span class="rc_number">640</span>, <span class="rc_number">480</span>, fullscreen, vsync<b>)</b> <br>
|
|
</code></p>
|
|
<p>
|
|
The above code will open a 640 x 480 window with vsync enabled. You can reference <a href="openwindow.html">OpenWindow()</a> for a little more detail.
|
|
</p>
|
|
<p>
|
|
If we tried to run the code we have so far, the window would open and immediately close. So next to keep our window open and ensure its getting updated we need to make our render loop.
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
<span class="rc_keyword">While</span> <span class="rc_keyword">Not</span> Key<b>(</b>K_ESCAPE<b>)</b> <br>
|
|
Update<b>(</b><b>)</b> <span class="rc_comment">'This needs to be called every frame to refresh the window and poll events </span><br>
|
|
<span class="rc_keyword">Wend</span> <br>
|
|
</code></p>
|
|
<p>
|
|
So now we have our basic render loop but nothing is being drawn. Now is a good time to explain how RCBasic's graphics system works. RCBasic uses virtual render targets called canvases. There are 3 different types of canvases that are used for rendering depending on what you are trying to do. Here is an overview of the different types of canvases:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
2D Paint Canvas - This is a canvas for rendering drawing commands (ie. DrawImage, Rect, FloodFill, etc.)
|
|
</li>
|
|
<li>
|
|
Sprite Layer - A canvas for rendering sprites. Sprite canvases will only render sprites but they have infinite 2D space to place sprites in.
|
|
</li>
|
|
<li>
|
|
3D Canvas - This canvas is a 3D viewport. Each 3D canvas has its own camera so having multiple can impact performance since it re-renders the scene for each 3D canvas.
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
For now, lets just use a paint canvas. We use OpenCanvas() to open a paint canvas. Before our render loop, we will open our canvas.
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
<br>
|
|
paint_canvas = OpenCanvas<b>(</b><span class="rc_number">640</span>, <span class="rc_number">480</span>, <span class="rc_number">0</span>, <span class="rc_number">0</span>, <span class="rc_number">640</span>, <span class="rc_number">480</span>, <span class="rc_number">1</span><b>)</b> <br>
|
|
<br>
|
|
Canvas<b>(</b>paint_canvas<b>)</b> <span class="rc_comment">'Sets out canvas as the active canvas. This is unnecessary since we only have one canvas but its a good habit to get into to set your desired canvas active before doing anything on it. </span><br>
|
|
<br>
|
|
<span class="rc_keyword">While</span> <span class="rc_keyword">Not</span> Key<b>(</b>K_ESCAPE<b>)</b> <br>
|
|
ClearCanvas<b>(</b><b>)</b> <span class="rc_comment">'Clears the canvas every frame. If you have an image that never changes you may not want to do this. </span><br>
|
|
Update<b>(</b><b>)</b> <br>
|
|
<span class="rc_keyword">Wend</span> <br>
|
|
</code></p>
|
|
<p>
|
|
Here we are opening a canvas for drawing and storing the handle for that canvas in a variable called paint_canvas. Anytime we want to reference that canvas we will use the paint_canvas variable. You can reference <a href="opencanvas.html">OpenCanvas()</a> for more details on how it works. After we opened our canvas, we set it as the active canvas using <a href="canvas.html">Canvas()</a>. This was not necessary right now since RCBasic sets the first canvas created as the default canvas but its still a good habit to set a canvas active before doing anything with it to ensure you are targeting the right canvas.
|
|
</p>
|
|
<p>
|
|
Ok, we have a window and a canvas but we still haven't drawn anything. So lets do that. Inside our render loop, we are going to set our draw color to red and draw a box.
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
<span class="rc_keyword">While</span> <span class="rc_keyword">Not</span> Key<b>(</b>K_ESCAPE<b>)</b> <br>
|
|
ClearCanvas<b>(</b><b>)</b> <br>
|
|
<br>
|
|
SetColor<b>(</b> RGB<b>(</b><span class="rc_number">200</span>, <span class="rc_number">0</span>, <span class="rc_number">0</span><b>)</b> <b>)</b> <span class="rc_comment">'Sets the drawing color to red </span><br>
|
|
RectFill<b>(</b><span class="rc_number">20</span>, <span class="rc_number">20</span>, <span class="rc_number">50</span>, <span class="rc_number">50</span><b>)</b> <span class="rc_comment">'Draws a filled rectangle with the current draw color </span><br>
|
|
<br>
|
|
Update<b>(</b><b>)</b> <br>
|
|
<span class="rc_keyword">Wend</span> <br>
|
|
</code></p>
|
|
<p>
|
|
So now our finished program looks like this:
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
fullscreen = <span class="rc_keyword">false</span> <br>
|
|
vsync = <span class="rc_keyword">true</span> <br>
|
|
<br>
|
|
OpenWindow<b>(</b><span class="rc_string">"My Graphics Window"</span>, <span class="rc_number">640</span>, <span class="rc_number">480</span>, fullscreen, vsync<b>)</b> <br>
|
|
<br>
|
|
paint_canvas = OpenCanvas<b>(</b><span class="rc_number">640</span>, <span class="rc_number">480</span>, <span class="rc_number">0</span>, <span class="rc_number">0</span>, <span class="rc_number">640</span>, <span class="rc_number">480</span>, <span class="rc_number">1</span><b>)</b> <br>
|
|
<br>
|
|
Canvas<b>(</b>paint_canvas<b>)</b> <br>
|
|
<br>
|
|
<span class="rc_keyword">While</span> <span class="rc_keyword">Not</span> Key<b>(</b>K_ESCAPE<b>)</b> <br>
|
|
ClearCanvas<b>(</b><b>)</b> <br>
|
|
<br>
|
|
SetColor<b>(</b> RGB<b>(</b><span class="rc_number">200</span>, <span class="rc_number">0</span>, <span class="rc_number">0</span><b>)</b> <b>)</b> <span class="rc_comment">'Sets the drawing color to red </span><br>
|
|
RectFill<b>(</b><span class="rc_number">20</span>, <span class="rc_number">20</span>, <span class="rc_number">50</span>, <span class="rc_number">50</span><b>)</b> <span class="rc_comment">'Draws a filled rectangle with the current draw color </span><br>
|
|
<br>
|
|
Update<b>(</b><b>)</b> <br>
|
|
<span class="rc_keyword">Wend</span> <br>
|
|
</code></p>
|
|
<p>
|
|
RCBasic allows you to create as many canvases as you want and you can have multiple different types of canvases at once. This is just a brief overview of how graphics work but I highly encourage you to check out all the included examples to see more of what is possible.
|
|
</p>
|
|
<p>
|
|
</p>
|
|
|
|
</body>
|
|
</html> |