RGSS: Pixel & Color Tests

The next tutorial is the ‘pixel’ equivalent of our previous ‘Hello World’ program, except we’re going to plot a green pixel in the middle of the screen. Without delay, follow these steps.

Plot a pixel on the screen

color = Color.new(0,255,0)

my_sprite = Sprite.new()
my_sprite.bitmap = Bitmap.new(544, 416)
my_sprite.bitmap.set_pixel(272, 208, color)

loop { Graphics.update }

If you’ve followed the previous ‘Hello World’ tutorial carefully, you’ll notice that only two lines are new.

my_color = Color.new(0,255,0) is used to store a color in a variable from the Color class. It use the RBGA format, which stands for red, blue, green and alpha.

Then my_sprite.bitmap.set_pixel(272,208, my_color) allows us to plot a single colored pixel on the screen at [x, y]. This method is declared like this: set_pixel(x, y, color).

Pretty simple, huh?

Draw a line on the screen

Let’s draw a simple line with a For-Loop statement.

screen_width = 544
screen_height = 416
y_axis = screen_height / 2

my_sprite = Sprite.new()
my_sprite.bitmap = Bitmap.new(screen_width, screen_height)
my_color = Color.new(0,255,0)

for x in 0..screen_width
my_sprite.bitmap.set_pixel(x, y_axis, my_color)
end

loop { Graphics.update }

In this demo, a new pixel is plotted on the screen for each increment in the for-loop. Although this works, it’s not the most efficient way to draw a line on the screen. A more effective method is to use Bresenham’s line algorithm, which I can cover in a future demo upon request.

I’ve also made some modifications to the code. To avoid using magic numbers, which can make the code difficult to read and maintain, I used descriptive variable names for the screen width and height. Instead of using Bitmap.new(544, 416), I used Bitmap.new(screen_width, screen_height), which makes it clearer what those values represent. However, for the sake of brevity in future demos, I may use some magic numbers.

Simple Gradient

my_sprite = Sprite.new()
my_sprite.bitmap = Bitmap.new(544, 416)
my_color1 = Color.new(0, 0, 0)
my_color2 = Color.new(0, 255, 255)

my_sprite.bitmap.gradient_fill_rect(0, 0, 544, 416, my_color1, my_color2, true)

loop { Graphics.update }

The code creates a new sprite object named my_sprite, and assigns a new bitmap object to it with a width of 544 and a height of 416.

The next two lines of code create two color objects, my_color1 and my_color2. The first color is black (RGB values of 0, 0, 0), and the second color is a light blue (RGB values of 0, 255, 255).

The last line of code fills the entire bitmap with a gradient of the two colors created earlier, from the top left corner (0,0) to the bottom right corner (544, 416), in a vertical direction (specified by true). This is done using the gradient_fill_rect method provided by the Bitmap class in RGSS.

Finally, the loop statement keeps the game window open and updated, so the gradient remains visible.

Fill the screen with linear gradient colors

Now that we’re at it, let’s fill the screen with gradient colors.

my_sprite = Sprite.new()
my_sprite.bitmap = Bitmap.new(544, 416)
my_color = Color.new(0, 0, 0)

for x in 0..544
  for y in 0..416
    my_color.set(0, x, y)
    my_sprite.bitmap.set_pixel(x, y, my_color)
  end
end

loop { Graphics.update }

The result is quite interesting. The rendering process is quite slow but these examples are mostly for the sake of testing. Surely later we’ll be ready to test more complex and funnier scripts.

One important mention about color. Each RGBA value is from 0 to 255. Values out of range are automatically corrected. So in the above demo, it doesn’t matter whether the value exceeds 255 during the for-loop iteration.