Basic Overview of Blend Modes

In this article we explore a feature built into RPG Maker sprites called Blend Type. Personally, I don’t see it come up very often, and initially I didn’t have much idea how it works either. It just seemed like it did something with your colours but it wasn’t clear what it was doing. After doing some research and understanding what colour blending is, I have (almost) successfully created a tunnel vision effect using only pictures.

Understanding Blend Modes

As always, Wikipedia helps us with a general idea of what this concept is. Here’s what it says:

Blend modes (or Mixing modes) in digital image editing are used to determine how two layers are blended into each other. The default blend mode in most applications is simply to hide the lower layer with whatever is present in the top layer. However, as each pixel has a numerical representation, a large number of ways to blend two layers is possible. Note that the top layer is not necessarily called a "layer" in the application. It may be applied with a painting or editing tool.

Which doesn’t really explain much about how it works, but that’s because “blend mode” refers to the type of blending you are performing.

You have to read the other article on colour mixing to understand what mixing means in the context of digital graphics (or light in general), and to understand that you have to understand how colour works. So to avoid all that reading I will provide some summaries based on my own understanding (which may or may not be accurate since I’m overly simplifying it).

Quick Summary

Colours in Graphics

  • Every pixel is represented by an RGB for the colour
  • RGB stands for Red, Green, and Blue. These are the primary colours of light
  • Each component has a value between 0 and 255 inclusively.
  • If you tried to go below 0, it’ll just be set to 0.
  • If you tried to go above 255, it’ll just be set to 255.
  • Typical syntax I use is (R, G, B)
  • (255, 0, 0) is red, (0, 255, 0) is green, (0, 0, 255) is blue
  • Different amounts of each component will result in a different colour.
  • (0, 0, 0) is black, while (255, 255, 255) is white.

Here’s a colour wheel. You can see the RGB value in the lower-left, though it is represented in hex format #RRGGBB

Transparency

  • In addition to the RGB value, some image formats store an Alpha value with the pixel
  • Basically, in RPG Maker, 0 is transparent, 255 is opaque, and anything in between is semi-transparent.
  • This is how you can make ghosts sprites or windows look see-through.

How Blending Works

Now that you know how colour works, we can finally talk about blending.

Recall that pixels are composed of three individual colour components, and each colour is simply a unique combination of these values. Because the components are numbers, you can perform math on them. All algebraic operations follows the same rules as vector algebra: operate on each corresponding components; R with R, G with G, B with B.

So for example, if you had a black pixel (0, 0, 0), and then you add some pure red to it (255, 0, 0) you will result in a pixel that is pure red (255, 0, 0). Just accept that it works that way.

Similarly, if you had a pure red pixel (255, 0, 0) and then you subtracted white from it (255, 255, 255), it will result in a pixel that is black (0, 0, 0). Remember, trying to go below 0 will simply be rounded to 0. The Wikipedia article on colour mixing has some pretty nice images about it. If anything they are colourful.

Blend Modes in RPG Maker

(Un)fortunately, RPG maker only provides three blend modes

  1. Normal – upper layers will simply replace lower layers
  2. Additive – add colours together
  3. Subtraction – subtract colours

The order is important:  it is always from the lowest layer up to the top layer. Basically, “255 – 0” does not equal “0 – 255”.

So for example, suppose you have your map. The tiles are rendered on viewport1, which is the lowest layer compared to viewport2 where pictures and character sprites are drawn. If you displayed a completely white picture using the Show Picture command and set the blend type to zero, this means that you are taking the pixels on the lowest layer (tiles) and subtracting the colours by white. Subtracting anything by white will result in black, so you will simply have a black screen.

Not very exciting.

On the other hand, if you subtract anything by 0, there will be no change. This means that if you subtract any colour by black, you will have the same colour.

Which is also not very exciting.

But what happens if we combine the two rules together?

The Tunnel Picture

If subtracting white results in black pixels, and subtracting black results in no change, we can craft a little picture like this:

blendModeTunnelVision1

 

And then use a Show Picture event to display it.

blendModeTunnelVision2

 

Now we go into the game and see how it looks:

blendModeTunnelVision3

 

Of course we could have just created an image of  a transparent circle on a black background, so at this point I’m not exactly sure what the point of using blend mode was.

At a loss for examples, I decided to remove red instead of white and made the black circle a bit smaller, resulting in an image that looks like this:

blendModeTunnelVision4

That’s not something you’d be able to do with a regular picture right? Some sort of blending would be required now!

Pictures do not Follow You

Note that due to the way pictures work, the circle doesn’t really follow you around. It’s just that the picture is attached to the screen, and the camera is centered on the player by default. Once you move to the side of the map, you’ll see that the circle is no longer centered on the player. We will explore this in a different article.

Summary

Math is the general idea behind colour blending. In RPG Maker you can replace, add, or subtract colour from each pixel, allowing you to create some fairly intricate colour effects. Combined with other picture-related functionality such as resizing or moving around, you can create various dynamic effects.

Spread the Word

If you liked the post and feel that others could benefit from it, consider tweeting it or sharing it on whichever social media channels that you use. You can also follow @HimeWorks on Twitter or like my Facebook page to get the latest updates or suggest topics that you would like to read about.

You may also like...

32 Responses

  1. This is a topic which is near to my heart…
    Many thanks! Where are your contact details though?

  2. Thank you a lot for sharing this with all people you actually realize
    what you are speaking about! Bookmarked. Please additionally discuss
    with my website =). We will have a link alternate contract between us

    Have a look at my homepage vpn code 2024

  3. Nice post. I learn something new and challenging on blogs I stumbleupon on a daily
    basis. It’s always interesting to read through content from other authors
    and practice a little something from their websites.

    Here is my page: vpn special code

  4. I’m curious to find out what blog system you are utilizing?
    I’m experiencing some minor security problems with my latest blog
    and I would like to find something more safe. Do you have any
    suggestions?

  5. Awesome website you have here but I was curious if you knew
    of any message boards that cover the same
    topics talked about in this article? I’d really love to be a part of group
    where I can get suggestions from other experienced
    people that share the same interest. If you have any recommendations, please let
    me know. Kudos!

    Check out my web blog … vpn code 2024

  6. Hi there to all, it’s in fact a pleasant for
    me to visit this web site, it includes priceless Information.

    Here is my page vpn special coupon

  7. I need to to thank you for this good read!! I certainly loved every little bit of it.
    I have got you book marked to look at new stuff you post…

    Also visit my website … vpn coupon 2024

  8. Tory says:

    Great information. Lucky me I found your website by chance
    (stumbleupon). I’ve book-marked it for later!

  9. Lindsi says:

    This article is in fact a nice one it helps new internet viewers, who are wishing for blogging.

  10. Raoul says:

    I absolutely love your site.. Excellent colors & theme. Did you build this web site yourself?
    Please reply back as I’m hoping to create my
    own personal website and want to find out where you
    got this from or what the theme is called. Many thanks!

  11. Cynthiaann says:

    Its such as you learn my mind! You appear to understand a lot approximately this,
    such as you wrote the book in it or something. I believe that you simply could
    do with a few percent to force the message home a little bit, but instead of that, that
    is wonderful blog. A great read. I will definitely be back.

  12. Elisabet says:

    I like it whenever people come together and share thoughts.
    Great site, stick with it!

  13. Regis says:

    Hello, Neat post. There’s an issue together with your website in internet explorer, might test this?
    IE still is the market leader and a good component
    to other folks will omit your wonderful writing because of this problem.

  14. Lissa says:

    No matter if some one searches for his vital thing, therefore he/she desires to be available that in detail, therefore that thing
    is maintained over here.

  15. Geofrey says:

    Paragraph writing is also a fun, if you be acquainted with
    then you can write if not it is complex to write.

  16. Sunshine says:

    What’s Going down i am new to this, I stumbled upon this I’ve discovered It absolutely helpful and it has aided me out loads.

    I am hoping to contribute & help other users like its aided me.
    Great job.

  17. Delroy says:

    Hi there everyone, it’s my first pay a visit at this
    web site, and paragraph is truly fruitful designed for me, keep up posting
    these types of posts.

  18. Kobi says:

    First of all I want to say wonderful blog! I had a quick question in which I’d like to ask if you don’t mind.
    I was curious to know how you center yourself and clear your mind before
    writing. I’ve had a difficult time clearing my mind in getting my thoughts out there.

    I do take pleasure in writing however it just seems like the first 10
    to 15 minutes are lost just trying to figure out how to
    begin. Any suggestions or hints? Thanks!

  19. Mckayla says:

    Thanks for any other informative website. Where else may just I am
    getting that type of info written in such an ideal method?
    I’ve a undertaking that I am simply now operating on, and I’ve been at
    the glance out for such info.

  20. Hugh says:

    Hi there! Quick question that’s entirely off topic.
    Do you know how to make your site mobile friendly?
    My website looks weird when viewing from my iphone4. I’m trying to find a template or
    plugin that might be able to correct this
    problem. If you have any recommendations, please share.

    Thank you!

  21. Deleena says:

    Thanks designed for sharing such a pleasant thought, post is nice, thats why i
    have read it fully

  22. Madyson says:

    I like the valuable info you provide in your articles.

    I will bookmark your weblog and check again here regularly.
    I am quite sure I’ll learn many new stuff right here! Good luck for the
    next!

  23. Deshondra says:

    Hey this is kinda of off topic but I was wondering if blogs use WYSIWYG editors or if
    you have to manually code with HTML. I’m starting a
    blog soon but have no coding knowledge so I wanted to get advice from someone
    with experience. Any help would be enormously appreciated!

  24. Kallen says:

    Good blog you’ve got here.. It’s hard to find excellent writing
    like yours these days. I seriously appreciate individuals like you!
    Take care!!

  25. Niketa says:

    Helpful information. Lucky me I found your website unintentionally,
    and I am surprised why this coincidence did not took place in advance!
    I bookmarked it.

  26. Yoland says:

    Wonderful post however I was wondering if you could write a
    litte more on this subject? I’d be very thankful if you could elaborate a little
    bit further. Bless you!

  27. Alida says:

    Hey there, I think your site might be having browser
    compatibility issues. When I look at your blog site in Chrome,
    it looks fine but when opening in Internet Explorer, it
    has some overlapping. I just wanted to give you a quick heads up!

    Other then that, excellent blog!

  28. Antwoine says:

    Howdy, I think your website could be having browser compatibility problems.
    Whenever I take a look at your blog in Safari, it looks fine however when opening in IE, it’s got some overlapping issues.
    I just wanted to give you a quick heads up! Besides
    that, excellent blog!

  29. Demitrus says:

    Why people still make use of to read news papers when in this
    technological world all is existing on web?

  30. Erineo says:

    I’ve been exploring for a little bit for any high quality articles
    or weblog posts in this sort of house . Exploring in Yahoo I at last stumbled upon this site.
    Reading this info So i am happy to show that I’ve a very just right uncanny feeling
    I found out just what I needed. I most for sure will make
    sure to don?t put out of your mind this website and give
    it a look regularly.

  31. Rober says:

    It’s going to be ending of mine day, except before end I
    am reading this great post to increase my know-how.

  32. Nirwanda says:

    I’ve always wondered about uses for the blend mode. Great article, thanks. 🙂

Leave a Reply

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