[Graphics] Bitmaps and Sprites.

Bitmaps and Sprites. - Printable Version

+- Save-Point (https://www.save-point.org)
+-- Forum: Games Development (https://www.save-point.org/forum-4.html)
+--- Forum: Tutorials (https://www.save-point.org/forum-19.html)
+--- Thread:

Bitmaps and Sprites. (/thread-3387.html)

Bitmaps and Sprites. - deValdr - 04-21-2011

Bitmaps and Sprites
Learn how to make your game more visually appealing and exciting with scripted Sprites.

Creating a Sprite
Sprite is a class built into RGSS. It displays a bitmap on the screen. This is how you create a sprite that is displayed on the screen:

Code:
@sprite = Sprite.new

@sprite.bitmap = Bitmap.new(640, 480)

What I did here is to create the sprite. I then create a bitmap for the sprite specifying that it is 640 pixels wide and 480 pixels high. Alternatively, I can make the bitmap load a picture instead.

Code:
@sprite = Sprite.new

@sprite.bitmap = Bitmap.new("Graphics/Pictures/picture.png")

It will learn the dimensions of the picture so this makes your job easier.

Position of the sprite
The position of the sprite is handled using x and y as well as a z variable. The z variables determines where in the queue of visual elements it will be drawn. Far behind or in front. We set position this way:

Code:
@sprite.x = 50

@sprite.y = 60

@sprite.z = 250

If you leave them unassigned they will all be assigned the value of 0 making the sprite appear on the top left of the screen and down. This is usually a wanted position to have it in.
Some additional properties for the Sprite class are:

Code:
@sprite.angle = 360

@sprite.opacity = 255

@sprite.visible = true

@sprite.zoom_x = 50

@sprite.zoom_y = 40

@sprite.mirror = false

@sprite.tone = Tone.new(0, 0, 0, 20)

Color
Color is important in bitmaps. Every pixel in a bitmap is made up of four different values. Red, Green, Blue and alpha. The alpha channel is opacity. The rest is obvious.
RGSS has a built in Color class. You create a new Color object like this.

Code:
@black = Color.new(0, 0, 0, 255)

# Or you can leave out the alpha channel which will make it 0% transparent

@black = Color.new(0, 0, 0)

@white = Color.new(255,255,255)

@red = Color.new(255, 0, 0)

255 is the max value, while 0 is the lowest possible.

Setting pixels
In order to draw a pixel on a bitmap you use the .set_pixel method of the Bitmap object.

Code:
@sprite.bitmap.set_pixel(x, y, color)

# Or if we insert the values

@sprite.bitmap.set_pixel(0, 0, Color.new(0, 0, 0))

The above will make the top left pixel of the bitmap black.

Drawing rectangles
Sometimes we would rather want to draw a rectangle spanning over many pixels than just single pixels. It can be done very easily:

Code:
@sprite.bitmap.fill_rect(x, y, width, height, color)

# Or with inserted values

@sprite.bitmap.fill_rect(0, 0, 640, 480, Color.new(0, 0, 0))

The above will make the entire screen black.

Using loops to create dynamic effects
You can read about for loops in my other tutorial. They can be very handy if you want to create gradients for example:

Code:
for i in 1..100

c = Color.new(i*2, i*2, i*2)

@sprite.bitmap.fill_rect(0, i, 640, 1, c)

end

This will draw a quite nice gradient on the bitmap. The rect starts one pixel lower for each iteration as the i will go up one every time. The color changes as all the channels change to the value of i times two every iteration.

More may be coming soon. :) Hope it helped. I appreciate replies if you liked it. :)