Tutorial: RPG Maker RGSS – Pixel and Color Tests

RPG Maker (RGSS)

Tutorial: RPG Maker RGSS – Pixel and Color Tests

Another beginner tutorial.

The current demo 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. Follow these steps.

1-) Open RPG Maker and open the Script Edition (F11).
2-) Delete every piece of code there. Absolutely everything.
3-) Insert a new script and name it to something like “My Script”
4-) Enter the following snippet of code in the editor.

PLOT A PIXEL ON THE SCREEN

my_bitmap = Bitmap.new(544, 416)

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

my_sprite = Sprite.new()
my_sprite.bitmap = my_bitmap
my_sprite.bitmap.set_pixel(272,208, my_color)

loop do
Graphics.update
end

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 SIMPLE 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 do
Graphics.update
end

In this demo, a new pixel is plotted on the screen at each For-Loop increment. Keep in mind it’s not the smartest way to draw a line on the screen. Under normal circumstances you’ll want to use the Bresenham’s line algorithm, which I’ll cover in a future demo if requested.

I’ve added a few more lines in the code. It’s important to remember to avoid magic numbers as much as possible. For example, Bitmap.new(544, 416) is bad, because you have to guess what these numbers stand for. It’s easier to understand the purpose of Bitmap.new(screen_width, screen_height). Still, for my upcoming demos I may still use some magic number for the sake of keeping code very short.

FILL THE SCREEN WITH LINEAR GRADIANT 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 do
Graphics.update
end

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.

Leave a Reply

Your email address will not be published. Required fields are marked *