Welcome to another one of my general tutorials, covering the PNG filetype this time. And of course, this will cover more than the little information given in my RMXP Graphics Guide...
Part 1 :: Introduction
This tutorial will feature the different ways of editing and saving a PNG file with Photoshop (version CS2 is used), but you might be able to apply the tutorials below to the GIMP or other graphic editing programs. Of course, you can profit from the general information no matter what program you use. Also, all screens are made of the German version of Adobe PhotoShop I own, but knowing how guiding they can be, I'll include detailed descriptions with it. If anything's unclear on your side, just point it out and I'll work that part over.
The reason I write this tutorial is simple: PNG is the best, and therefore most often used filetype for RMXP. Not all people who use PNG do know how to create the files, though, and if you want to create graphics for special effects, it's essential to know about PNG's secrets. I'm neither a talented artist nor a good spriter or anything like that, but I'm quite experienced with the technical side of graphic editing, so I thought I share my knowledge with you artists out there to improve your skill. Of course, this might also come in handy for webdesigners or texturers, but please keep in mind that this tutorial is focussed on RMXP's usage.
Part 2 :: Content
Part 3 :: Conclusion
Well, I hope this tutorial is of any use, not only because it was hard work for me, but also because I think that going for perfect things where it's possible is a must. PNG will make whatever you do look more professional and offer you features you won't find anywhere else.
Part 4 :: Credits & Thanks
Yeyinde for writing the get_alpha_layer method
Part 1 :: Introduction
This tutorial will feature the different ways of editing and saving a PNG file with Photoshop (version CS2 is used), but you might be able to apply the tutorials below to the GIMP or other graphic editing programs. Of course, you can profit from the general information no matter what program you use. Also, all screens are made of the German version of Adobe PhotoShop I own, but knowing how guiding they can be, I'll include detailed descriptions with it. If anything's unclear on your side, just point it out and I'll work that part over.
The reason I write this tutorial is simple: PNG is the best, and therefore most often used filetype for RMXP. Not all people who use PNG do know how to create the files, though, and if you want to create graphics for special effects, it's essential to know about PNG's secrets. I'm neither a talented artist nor a good spriter or anything like that, but I'm quite experienced with the technical side of graphic editing, so I thought I share my knowledge with you artists out there to improve your skill. Of course, this might also come in handy for webdesigners or texturers, but please keep in mind that this tutorial is focussed on RMXP's usage.
Part 2 :: Content
As you might've already recognized, RMXP handles PNG files not equal to other filetypes. When you import a PNG file via RMXP's Resource Manager, you won't get the dialogue to select a transparent and invisible color. Instead, RMXP will just add the file to your Graphics folder without further needs to adjust it. Well, all of that applies for PNGs that have transparency in it - for solid PNG files, the dialog will show up. Well, In my opinion, that's something positive, isn't it?
All in all, that means that if you want to have transparency in your RMXP resources, include it in your file already, and therefore use PNG. While it saves the transparency setting in the Resorce Manager, you can also define up to 255 transparency levels rather than just full and half transparency by predefining your PNG's transparency. Read more on that in the next spoiler...
All in all, that means that if you want to have transparency in your RMXP resources, include it in your file already, and therefore use PNG. While it saves the transparency setting in the Resorce Manager, you can also define up to 255 transparency levels rather than just full and half transparency by predefining your PNG's transparency. Read more on that in the next spoiler...
PNGs normally consist of three color layers, Red, Green, and Blue, abbreviated to RGB.
If you don't know already, every pixel in each layer can hold a grayscaled color value, a number from 0 [black/empty] to 255 [white/full], so 256 colors in total. Your output device displays each layer with the assigned amount of color, like R255-G255-B000 (100% Red, 100% Green, 0% Blue), which'd return the color yellow. You don't need to know this if you want to edit graphics really, I just think it's good to understand what's behind the stuff you use.
PNGs can have a fourth layer, called the Alpha channel. That layer saves the image's transparency by converting the 256 available colors to visibility (not transparency). If your saved Alpha layer is completely black (remember: Black has the value 0), your image'd be completely transparent, no matter what the other layers contain. The other way round, if your Alpha layer is solid white, you'll see every color in everyone of the other channels. However, if you don't save a fourth layer, you can also see all of the other channels completely, but do not confuse this with a solid white alpha channel, as there's still the difference that the PNG only has three layers instead of four. You don't need to know this unless you're into 3D model texturing, however, or you have specific requirements that ask for 24 or 32 bit.
Lastly, PNG supports interlaced graphics, meaning you can save the image to be displayed at several 'stages'. For example, if you open up an interlaced PNG in a web browser, you'd only need about 5% of the actual picture to be loaded to get a rough preview - in bad quality, of course, but still. It doesn't have much use for RMXP, though, and most people don't have dial-up connections anymore, but there's nothing wrong with saving a PNG with the interlaced flag for web design purposes. For game design, never use this save function, as it'll needlessly increase your filesize and may confuse the engine of your choice (not RMXP, however)
If you don't know already, every pixel in each layer can hold a grayscaled color value, a number from 0 [black/empty] to 255 [white/full], so 256 colors in total. Your output device displays each layer with the assigned amount of color, like R255-G255-B000 (100% Red, 100% Green, 0% Blue), which'd return the color yellow. You don't need to know this if you want to edit graphics really, I just think it's good to understand what's behind the stuff you use.
PNGs can have a fourth layer, called the Alpha channel. That layer saves the image's transparency by converting the 256 available colors to visibility (not transparency). If your saved Alpha layer is completely black (remember: Black has the value 0), your image'd be completely transparent, no matter what the other layers contain. The other way round, if your Alpha layer is solid white, you'll see every color in everyone of the other channels. However, if you don't save a fourth layer, you can also see all of the other channels completely, but do not confuse this with a solid white alpha channel, as there's still the difference that the PNG only has three layers instead of four. You don't need to know this unless you're into 3D model texturing, however, or you have specific requirements that ask for 24 or 32 bit.
Lastly, PNG supports interlaced graphics, meaning you can save the image to be displayed at several 'stages'. For example, if you open up an interlaced PNG in a web browser, you'd only need about 5% of the actual picture to be loaded to get a rough preview - in bad quality, of course, but still. It doesn't have much use for RMXP, though, and most people don't have dial-up connections anymore, but there's nothing wrong with saving a PNG with the interlaced flag for web design purposes. For game design, never use this save function, as it'll needlessly increase your filesize and may confuse the engine of your choice (not RMXP, however)
If you read the chapter before, you most likely got that Alpha channels set the visibility for an image's pixels - black sets the visibility to 0, white makes the colors 100% visible, thus solid.
PhotoShop has an option to create an image off of a either white or 100% transparent base. For the former, Adobe supports you with a graphical aid to recognize what's transparent and what not, as just showing 'nothing' is impossible for a monitor. The thing you'll see is this grid-like thing:
http://img291.imageshack.us/img291/8277/emptyay9.png[/img]
If you draw your image with this background and save it, you'll automatically have PhotoShop save your Alpha channel in it. Note that PhotoShop saves up to 255 transparency levels, depending on how excessively you used blurring or similar features of PhotoShop to get fading colors.
PhotoShop has an option to create an image off of a either white or 100% transparent base. For the former, Adobe supports you with a graphical aid to recognize what's transparent and what not, as just showing 'nothing' is impossible for a monitor. The thing you'll see is this grid-like thing:
http://img291.imageshack.us/img291/8277/emptyay9.png[/img]
If you draw your image with this background and save it, you'll automatically have PhotoShop save your Alpha channel in it. Note that PhotoShop saves up to 255 transparency levels, depending on how excessively you used blurring or similar features of PhotoShop to get fading colors.
To create Alpha layers manually, you first need to know where the channel list can be found. Go to your PhotoShop's Menu Bar > Window, and check if you have the Channel window activated. If you don't have it already, you should trigger it now, it won't bite you. As long as it's activated, you can find it in the same window as the layers. Here's a screen of the channel window, showing a sample image I did quickly...
http://img218.imageshack.us/img218/7585/channelsve6.png[/img]
The first channel is called 'RGB', and it's simply just a branch for the three layers below; you can trigger all color layers at once by highlighting that 'channel'. The three channels below are named Red, Green, Blue. They store the color values for the image split into those three colors for reasons I explained above. For example, to display red, you can see that the red channel has solid white in it, while all of the other channels are pitch black.
The last channel is of interest for us finally, as it's an Alpha channel. I added one for this sample picture already, there won't be one by default, of course. Click on the 'New Channel' button that's quite similar to the 'New Layer' button in the layer window.
As you can also see in that example picture, the Alpha channel is solid white, which means that everything in this image is fully visible. Unless you have some scripted use for a white alpha layer (once again, this only applies for 3D texturing guys), it wouldn't make much sense to save an image with this layer.
We - of course - do want to take advantage of that layer, so we'll have a little fun with it... first, create a new image, solid white. Now draw something random on it, but keep it simple for a start, and remember to draw it in the RGB layers. I drew a solid black square in the middle of the image, like this:
http://img157.imageshack.us/img157/5230 ... e01xy5.png[/img]
Now, let's assume you want the white border to be invisible in your finished image. Of course, once again, that example wouldn't make sense outside of a tutorial, as you could just draw the black square by itself, or in case of RMXP, draw a rectangular sprite per RGSS, but it's an example, so I'll try to visualize this as easy as possible.
If you remember what I wrote earlier, white in the Alpha keeps the image as it is, while black sets transparency. Therefore, for an invisible border, you have to draw the Alpha channel black where the white border is. Because that is a little confusing, here's another channel window picture to guide you:
http://img83.imageshack.us/img83/9063/example02ya2.png[/img]
Also, if you have both RGB and Alpha channels visible at the same time, Alpha will be displayed as a red overlay to all black parts of the image, like this:
http://img135.imageshack.us/img135/6886 ... e03ks8.png[/img]
That's what your screen should look like now. The transparency is now defined, but if you save it, it won't be visible - the border will still be white instead of transparent.
Before cursing me for wasting your time and destroying your hopes, hear my explanation: You once again created a channel that's of no use unless you read it out via a program's code, as it's commonly used for a model's texture. To make the actual picture have the transparency applied, you need to assign the Alpha to an actual layer in your image. Because PNG has only one layer, that layer must have the Alpha assigned to it. Sounds simple, and it's excactly that.
To assign the Alpha channel to a layer, you need to give the layer a mask, commonly refered to as 'layer mask'. Check your layer window for the 'Add Layer Mask' button - it's the third item from the left on that icon bar on the bottom of the window - three items left from the 'New Layer' icon. If you trigger it, you can see that the layer you selected got another layer 'chained' to it...
http://img84.imageshack.us/img84/6175/example04iv4.png[/img]
Well, to be exact, it's not another layer, it's an Alpha channel. If you check your channel window, you can see another channel in the list, named '[your layer's name] Mask' in italic writing. Well, you could redo the black border in this channel now, but especially for images with fading borders, that'd be a pain in the ass. Hence you can use almost every of PhotoShop's tools on the channels just as you can on layers, just select the Alpha channel you created earlier, and paste it into this channel. Delete the former Alpha channel now (it wouldn't interfere with the newly created Alpha, but if you delete it, your file won't be as big for obvious reasons).
If you did this, you can view your work now. If you make both RGB and Alpha channels visible, you can again see a red overlay, but this time, you can also see the grid-like transparency background of PhotoShop behind it. If your picture looks like the next and last example picture for this paragraph, you did everything right:
http://img100.imageshack.us/img100/6509 ... e05ff5.png[/img]
If you save the image now (remember that you still have to choose PNG from the list, or else, you'll save it as PSD), it'll have the transparency applied to it. Test it by placing it somewhere in RMXP or simply opening it up with your Windows image viewer gimmick program. You should also test it with your browser to see if it's displayed correctly (while Firefox supports PNG transparency completely, Internet Explorer will only display the correct Alpha values if you have version 7 or higher).
Of course, you can compare your result to my image... for whatever reason.
http://img132.imageshack.us/img132/3914/resultnp4.png[/img]
http://img218.imageshack.us/img218/7585/channelsve6.png[/img]
The first channel is called 'RGB', and it's simply just a branch for the three layers below; you can trigger all color layers at once by highlighting that 'channel'. The three channels below are named Red, Green, Blue. They store the color values for the image split into those three colors for reasons I explained above. For example, to display red, you can see that the red channel has solid white in it, while all of the other channels are pitch black.
The last channel is of interest for us finally, as it's an Alpha channel. I added one for this sample picture already, there won't be one by default, of course. Click on the 'New Channel' button that's quite similar to the 'New Layer' button in the layer window.
As you can also see in that example picture, the Alpha channel is solid white, which means that everything in this image is fully visible. Unless you have some scripted use for a white alpha layer (once again, this only applies for 3D texturing guys), it wouldn't make much sense to save an image with this layer.
We - of course - do want to take advantage of that layer, so we'll have a little fun with it... first, create a new image, solid white. Now draw something random on it, but keep it simple for a start, and remember to draw it in the RGB layers. I drew a solid black square in the middle of the image, like this:
http://img157.imageshack.us/img157/5230 ... e01xy5.png[/img]
Now, let's assume you want the white border to be invisible in your finished image. Of course, once again, that example wouldn't make sense outside of a tutorial, as you could just draw the black square by itself, or in case of RMXP, draw a rectangular sprite per RGSS, but it's an example, so I'll try to visualize this as easy as possible.
If you remember what I wrote earlier, white in the Alpha keeps the image as it is, while black sets transparency. Therefore, for an invisible border, you have to draw the Alpha channel black where the white border is. Because that is a little confusing, here's another channel window picture to guide you:
http://img83.imageshack.us/img83/9063/example02ya2.png[/img]
Also, if you have both RGB and Alpha channels visible at the same time, Alpha will be displayed as a red overlay to all black parts of the image, like this:
http://img135.imageshack.us/img135/6886 ... e03ks8.png[/img]
That's what your screen should look like now. The transparency is now defined, but if you save it, it won't be visible - the border will still be white instead of transparent.
Before cursing me for wasting your time and destroying your hopes, hear my explanation: You once again created a channel that's of no use unless you read it out via a program's code, as it's commonly used for a model's texture. To make the actual picture have the transparency applied, you need to assign the Alpha to an actual layer in your image. Because PNG has only one layer, that layer must have the Alpha assigned to it. Sounds simple, and it's excactly that.
To assign the Alpha channel to a layer, you need to give the layer a mask, commonly refered to as 'layer mask'. Check your layer window for the 'Add Layer Mask' button - it's the third item from the left on that icon bar on the bottom of the window - three items left from the 'New Layer' icon. If you trigger it, you can see that the layer you selected got another layer 'chained' to it...
http://img84.imageshack.us/img84/6175/example04iv4.png[/img]
Well, to be exact, it's not another layer, it's an Alpha channel. If you check your channel window, you can see another channel in the list, named '[your layer's name] Mask' in italic writing. Well, you could redo the black border in this channel now, but especially for images with fading borders, that'd be a pain in the ass. Hence you can use almost every of PhotoShop's tools on the channels just as you can on layers, just select the Alpha channel you created earlier, and paste it into this channel. Delete the former Alpha channel now (it wouldn't interfere with the newly created Alpha, but if you delete it, your file won't be as big for obvious reasons).
If you did this, you can view your work now. If you make both RGB and Alpha channels visible, you can again see a red overlay, but this time, you can also see the grid-like transparency background of PhotoShop behind it. If your picture looks like the next and last example picture for this paragraph, you did everything right:
http://img100.imageshack.us/img100/6509 ... e05ff5.png[/img]
If you save the image now (remember that you still have to choose PNG from the list, or else, you'll save it as PSD), it'll have the transparency applied to it. Test it by placing it somewhere in RMXP or simply opening it up with your Windows image viewer gimmick program. You should also test it with your browser to see if it's displayed correctly (while Firefox supports PNG transparency completely, Internet Explorer will only display the correct Alpha values if you have version 7 or higher).
Of course, you can compare your result to my image... for whatever reason.
http://img132.imageshack.us/img132/3914/resultnp4.png[/img]
We only used solid colors until now, but you wouldn't need an Alpha channel just for this. Instead, you'll have several fades or gradients in an image you want to be transparent. Drawing everything by hand would be a real pain, so you need to use a simple trick: Inverting. You surely realized by know that an Alpha channel is simply the inverted version of a normal grayscaled image.
Okay, now to show an example... let's say you have this nice Oda clan emblem... (BlueScope teaches Japanese history... kinda 8-) ):
http://img215.imageshack.us/img215/5342/odahd2.png[/img]
All you have to do is...
http://img84.imageshack.us/img84/8537/odakq4.png[/img]
Okay, now to show an example... let's say you have this nice Oda clan emblem... (BlueScope teaches Japanese history... kinda 8-) ):
http://img215.imageshack.us/img215/5342/odahd2.png[/img]
All you have to do is...
- open the file in PhotoShop
- add a layer mask for the only layer being there
(note that it doesn't work for locked layers, e.g. background layers - if you want to get past that, simply duplicate the layer and delete the locked one) - select the whole image area
- copy it
- go to your channel window, select the Alpha channel
- paste the image in the Alpha channel
- invert the Alpha channel
http://img84.imageshack.us/img84/8537/odakq4.png[/img]
Of course, you can also access Alpha layers via RGSS in RPG Maker XP. There are several methods, let's go through them one by one...
First, you can check a single pixel. Assuming you have a Bitmap instance, you can check any pixel inside the image by x and y coordinates for their Alpha value. Here's a coding example...
That should reaturn a value between 0 and 255, depending on the value of the Alpha channel's grayscaled color in that location. Remember, 0 is black, 255 is white.
To check the whole image's Alpha layer, you need to read every pixel's alpha value and create a new bitmap with the alpha values. To ease that process up, Yeyinde made a nice method for Bitmap class to achieve exactly that - you can grab it here:
get_alpha_layer method by Yeyinde
To use it, you need to simply apply the method to your bitmap, like this:
I stated before that you could only profit of a non-layer-applied Alpha channel if you can read it with a program's code... well, you can do it now, so profit from it.
First, you can check a single pixel. Assuming you have a Bitmap instance, you can check any pixel inside the image by x and y coordinates for their Alpha value. Here's a coding example...
Code:
@sprite.bitmap.get_pixel(x, y).alphaThat should reaturn a value between 0 and 255, depending on the value of the Alpha channel's grayscaled color in that location. Remember, 0 is black, 255 is white.
To check the whole image's Alpha layer, you need to read every pixel's alpha value and create a new bitmap with the alpha values. To ease that process up, Yeyinde made a nice method for Bitmap class to achieve exactly that - you can grab it here:
get_alpha_layer method by Yeyinde
To use it, you need to simply apply the method to your bitmap, like this:
Code:
@sprite.bitmap.get_alpha_layerI stated before that you could only profit of a non-layer-applied Alpha channel if you can read it with a program's code... well, you can do it now, so profit from it.
This is once again a paragraph to urge you not to cause more damage than take advantage from this tutorial. Alpha Channels are a great thing, and I doubt you can do anything wrong with it in RMXP, but it's something different for you web designers out there: Because not all browsers can display Alpha correctly, you better stick with GIF images. You only have one transparent color, but you can be sure that it can be viewed correctly by everyone (I doubt that there are browsers not supporting GIF...). Remember: 'This page is only perfectly viewed with [...]' is no option for professionals!
Part 3 :: Conclusion
Well, I hope this tutorial is of any use, not only because it was hard work for me, but also because I think that going for perfect things where it's possible is a must. PNG will make whatever you do look more professional and offer you features you won't find anywhere else.
Part 4 :: Credits & Thanks
Yeyinde for writing the get_alpha_layer method
