170 lines
10 KiB
HTML
170 lines
10 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 Sprites [RCBasic Doc] </title>
|
|
</head>
|
|
|
|
<body>
|
|
<p><h2>SPRITES </h2></p>
|
|
<p>
|
|
The last section was a basic overview of graphics so in this section, I am going to go more indepth on sprites. In RCBasic, sprites are 2D objects with animation and physics properties. Sprite physics and animations are updated each time Update() is called.
|
|
</p>
|
|
<p>
|
|
To create a sprite, you must have a sprite canvas as your active canvas. Here is a quick explanation of how to open a new sprite canvas.
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
pos_x = <span class="rc_number">0</span> <br>
|
|
pos_y = <span class="rc_number">0</span> <br>
|
|
viewport_width = <span class="rc_number">640</span> <br>
|
|
viewport_height = <span class="rc_number">480</span> <br>
|
|
<br>
|
|
sprite_canvas = OpenCanvasSpriteLayer<b>(</b>pos_x, pos_y, viewport_width, viewport_height<b>)</b> <br>
|
|
</code></p>
|
|
<p>
|
|
Sprite canvases are opened with <a href="opencanvasspritelayer.html">OpenCanvasSpriteLayer()</a>. You only need to pass the position in the window where the viewport starts at and the size of the viewport. Sprite canvases don't have a fixed size since it only renders the part of the canvas that is visible.
|
|
</p>
|
|
<p>
|
|
Once you have opened a sprite canvas, use the <a href="canvas.html">Canvas()</a> function to set the sprite canvas as active.
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
Canvas<b>(</b>sprite_canvas<b>)</b> <br>
|
|
</code></p>
|
|
<p>
|
|
Now you are ready to create a sprite. To create a sprite, normally you would need a sprite sheet. The sprite sheet is a image file that contains all the animations for your sprite.
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
spriteSheet = LoadImage<b>(</b><span class="rc_string">"graizor.png"</span><b>)</b> <br>
|
|
<br>
|
|
frame_width = <span class="rc_number">32</span> <br>
|
|
frame_height = <span class="rc_number">32</span> <br>
|
|
<br>
|
|
mySprite = CreateSprite<b>(</b>spriteSheet, frame_width, frame_height<b>)</b> <br>
|
|
</code></p>
|
|
<p>
|
|
Sprites are created with the <a href="createsprite.html">CreateSprite()</a> function. Sprites have a default animation that is 1 frame in length and set as the first frame in the sprite sheet. The frames in a sprite sheet start at 0 and increase going from left to right and continue incrementing down each row. So if each row as 4 frames then the first row would have frames 0 to 3 and the second row would start at 4 and continue until the end of the last row.
|
|
</p>
|
|
<p><img src="images/sprite_frames.png" ></p>
|
|
<p>
|
|
To animate our sprite, we have to create an animation for it. You can create an animation with the <a href="createspriteanimation.html">CreateSpriteAnimation()</a> function.
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
walk_left_animation = CreateSpriteAnimation<b>(</b>mySprite, <span class="rc_number">4</span>, <span class="rc_number">12</span><b>)</b> <br>
|
|
SetSpriteAnimationFrame<b>(</b>mySprite, walk_left_animation, <span class="rc_number">0</span>, <span class="rc_number">28</span><b>)</b> <br>
|
|
SetSpriteAnimationFrame<b>(</b>mySprite, walk_left_animation, <span class="rc_number">1</span>, <span class="rc_number">29</span><b>)</b> <br>
|
|
SetSpriteAnimationFrame<b>(</b>mySprite, walk_left_animation, <span class="rc_number">2</span>, <span class="rc_number">30</span><b>)</b> <br>
|
|
SetSpriteAnimationFrame<b>(</b>mySprite, walk_left_animation, <span class="rc_number">3</span>, <span class="rc_number">31</span><b>)</b> <br>
|
|
</code></p>
|
|
<p>
|
|
CreateSpriteAnimation() takes 3 parameters
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
sprite - A sprite created with CreateSprite()
|
|
</li>
|
|
<li>
|
|
animation length - number of frames in the animation
|
|
</li>
|
|
<li>
|
|
animation speed - frames per second for the animation
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
<a href="setspriteanimationframe.html">SetSpriteAnimationFrame()</a> takes 4 parameters
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
sprite - the sprite the animation is on
|
|
</li>
|
|
<li>
|
|
animation - the animation created with CreateSpriteAnimation()
|
|
</li>
|
|
<li>
|
|
animation frame - the animation frame number NOTE: first frame is 0
|
|
</li>
|
|
<li>
|
|
sheet index - the index of the frame on the sprite sheet NOTE: This will match one of the numbers in the top corner of each frame in the picture above
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
Now to play the animation, we just set the animation on the sprite.
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
SetSpriteAnimation<b>(</b>mySprite, walk_left_animation, -<span class="rc_number">1</span><b>)</b> <br>
|
|
</code></p>
|
|
<p>
|
|
<a href="setspriteanimation.html">SetSpriteAnimation()</a> takes the sprite, the animation, and the last parameter is the number of times to loop the animation. Setting it to a value less than 0 will cause it to loop infinitely.
|
|
</p>
|
|
<p>
|
|
Thats the basics of sprite animation. Next lets go over sprite physics. By default, a sprite is non-solid which means it won't collide with anything. To change our sprite to solid, we just call the <a href="setspritesolid.html">SetSpriteSolid()</a> function.
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
SetSpriteSolid<b>(</b>mySprite, <span class="rc_keyword">TRUE</span><b>)</b> <br>
|
|
</code></p>
|
|
<p>
|
|
To have the sprite fall, we need to set gravity for our sprite canvas. We do that with <a href="setgravity2d.html">SetGravity2D()</a>.
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
SetGravity2D<b>(</b><span class="rc_number">0</span>, <span class="rc_number">30</span><b>)</b> <br>
|
|
</code></p>
|
|
<p>
|
|
SetGravity2D() takes an x and y value for the direction gravity pulls in. We just want gravity pulling down on our sprite. This would have our sprite falling forever since there is no ground for the sprite to collide with. So we need to create another sprite for the ground.
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
ground = CreateSprite<b>(</b>-<span class="rc_number">1</span>, <span class="rc_number">640</span>, <span class="rc_number">100</span><b>)</b> <br>
|
|
SetSpriteSolid<b>(</b>ground, <span class="rc_keyword">TRUE</span><b>)</b> <br>
|
|
SetSpritePosition<b>(</b>ground, <span class="rc_number">0</span>, <span class="rc_number">380</span><b>)</b> <br>
|
|
SetSpriteType<b>(</b>ground, SPRITE_TYPE_STATIC<b>)</b> <br>
|
|
</code></p>
|
|
<p>
|
|
There is a few things to go over with how the ground was created. First, we use -1 instead of an image for the ground. If you use a value less than 0 when creating a sprite, it will just create a physics object without any animation. This works well for a ground since we can draw an image on a paint canvas or draw a tile map.
|
|
</p>
|
|
<p>
|
|
On the next 2 lines we are setting the ground as solid and setting the grounds position to the bottom of our screen.
|
|
</p>
|
|
<p>
|
|
The last line is setting the ground sprite as static. This sets the ground as an unmovable object.
|
|
</p>
|
|
<p>
|
|
Since the ground does not have an image associated with it, we can just open a paint canvas over the sprite layer and draw a rectangle covering the area where our ground physics object is.
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
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>
|
|
SetCanvasZ<b>(</b>paint_canvas, <span class="rc_number">1</span><b>)</b> <br>
|
|
</code></p>
|
|
<p>
|
|
We use OpenCanvas() from the last section to open a paint canvas here. Setting the last parameter in OpenCanvas() to 1 will make the canvas background clear so we can see the sprite canvas behind it.
|
|
</p>
|
|
<p>
|
|
<a href="setcanvasz.html">SetCanvasZ()</a> changes the render order for the canvas. Canvases with a higher Z order are drawn on top of canvases with lower Z order. Now we can switch to the paint canvas to draw a rectangle using the functions from the last section.
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
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">0</span>, <span class="rc_number">380</span>, <span class="rc_number">640</span>, <span class="rc_number">100</span><b>)</b> <span class="rc_comment">'Draws a filled rectangle with the current draw color </span><br>
|
|
</code></p>
|
|
<p>
|
|
We are drawing our rectangle at the location where we positioned our ground sprite above with the size that we made our ground sprite object. That will make our sprite ground visible for us to land on.
|
|
</p>
|
|
<p>
|
|
The last thing we will do is make our sprite move when we press a key.
|
|
</p>
|
|
<p id="rc_code"><code>
|
|
<span class="rc_keyword">If</span> Key<b>(</b>K_RIGHT<b>)</b> <span class="rc_keyword">Then</span> <br>
|
|
SetSpriteLinearVelocity<b>(</b>mySprite, <span class="rc_number">30</span>, <span class="rc_number">0</span><b>)</b> <br>
|
|
<span class="rc_keyword">End</span> <span class="rc_keyword">If</span> <br>
|
|
</code></p>
|
|
<p>
|
|
<a href="key.html">Key()</a> returns true if the key code parameter is pressed. You can see a list of all the key codes in the <a href="key_codes.html">Key Codes</a> section in the Appendix.
|
|
</p>
|
|
<p>
|
|
We use <a href="setspritelinearvelocity.html">SetSpriteLinearVelocity()</a> to move the sprite instead of SetSpritePosition() because we don't want to directly move a sprite that we want physics to be applied to. There are a few functions for applying forces to a sprite that you can find under the Sprite Physics section in the manual.
|
|
</p>
|
|
<p>
|
|
And that is it for our simple overview of sprites. To see a full working example of the concepts covered here, try out the Sprite Test example in the examples folder.
|
|
</p>
|
|
<p>
|
|
</p>
|
|
|
|
</body>
|
|
</html> |