521
edits
256 Colour Tutorial Part 1(V2.62): Difference between revisions
Jump to navigation
Jump to search
m
256 Colour Tutorial Part 1(V2.62) (view source)
Revision as of 01:09, 15 January 2010
, 15 January 2010no edit summary
mNo edit summary |
|||
| (20 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{deprecated}} | |||
{{non-OOP}} | |||
'''Basic Setups''' | '''Basic Setups''' | ||
(by [[user:Gilbert|Gilbert Cheung]]) | (by [[user:Gilbert|Gilbert Cheung]]) | ||
| Line 5: | Line 8: | ||
First, here are some basic knowledge about 256 colour modes. You may skip the following paragraph if you think you know enough about them already. | First, here are some basic knowledge about 256 colour modes. You may skip the following paragraph if you think you know enough about them already. | ||
Under 256 (8-bit) colour modes, each pixel on screen is stored as one byte (8-bit). Unlike the "'''Direct Colour'''" modes (15/16-bit hi-colour and 24/32-bit true-colour modes, 8-bit colour mode is an "'''Indiced Colour'''" mode) the contents of the 256 colour slots in 8-bit modes need ''not'' be fixed, but instead, each of the slots can be set to ''any'' of the available 262,144 colours | Under 256 (8-bit) colour modes, each pixel on screen is stored as one byte (8-bit). Unlike the "'''Direct Colour'''" modes (15/16-bit hi-colour and 24/32-bit true-colour modes, 8-bit colour mode is an "'''Indiced Colour'''" mode) the contents of the 256 colour slots in 8-bit modes need ''not'' be fixed, but instead, each of the slots can be set to ''any'' of the available 262,144 colours (the VGA/MCGA base palette) at one time, so you can make variations to the colours displayed to suit your needs. | ||
==Preparations== | ==Preparations== | ||
| Line 12: | Line 15: | ||
When you start a new game in the AGS editor, by default, it will be a 256 colour one (unless you have it changed by clicking the "'''Change game colour depth'''" button in the '''Palette editor'''). Now go to the '''Palette''' editor, you'll see the default set of palette colours: | When you start a new game in the AGS editor, by default, it will be a 256 colour one (unless you have it changed by clicking the "'''Change game colour depth'''" button in the '''Palette editor'''). Now go to the '''Palette''' editor, you'll see the default set of palette colours: | ||
[Image:8bittut_basepal.png] | [[Image:8bittut_basepal.png|center|The default AGS palette]] | ||
There are a total of '''256''' usable colour slots (slot #0 through slot #255), you may also notice that there is a letter "'''L'''" on each of the first 17 colour slots (slot #0 through #16), it means that these slots are "''locked''" by the editor, so you should ''leave them unchanged through-out the whole game'' (actually you ''can'' change their values in-game, but this is not advisable, as they're mainly used for system graphics/messages/etc., moreover, without messing with them, you still have full control of 239 colours). Slot #17 through slot #41 are assigned as ''sprite colours'' by default, you can just leave them alone, or if you don't like them, you can change them to suit your needs. The remaining 214 colours (slot #42 through #255) are "'''room dependent'''" by default, so their values can be different in different rooms (mainly used for room backgrounds), as shown by the big "'''X'''" on each of these slots. | There are a total of '''256''' usable colour slots (slot #0 through slot #255), you may also notice that there is a letter "'''L'''" on each of the first 17 colour slots (slot #0 through #16), it means that these slots are "'''locked'''" by the editor, so you should ''leave them unchanged through-out the whole game'' (actually you ''can'' change their values in-game, but this is not advisable, as they're mainly used for system graphics/messages/etc., moreover, without messing with them, you still have full control of 239 colours). Slot #17 through slot #41 are assigned as ''sprite colours'' by default, you can just leave them alone, or if you don't like them, you can change them to suit your needs. The remaining 214 colours (slot #42 through #255) are "'''room dependent'''" by default, so their values can be different in different rooms (mainly used for room backgrounds), as shown by the big "'''X'''" on each of these slots. | ||
Now, click on one of the colour slots, if it's not a "'''room dependent'''" colour, you'll see some (<font color="FF0000">R</font>, <font color="00FF00">G</font>, <font color="0000FF">B</font>) values on the upper-right corner of the '''Palette editor''', this order-tuple of values determines how the colour of that particular slot will be like in the game. If the colour you clicked is ''not'' a "'''locked'''" one there'll be three (3) adjustable sliders, with which you can adjust each of the <font color="FF0000">(R)ed</font>, <font color="00FF00">(G)reen</font> and <font color="0000FF">(B)lue</font> channel values for that slot. Under standard VGA/MCGA palette, each channel can have '''64''' levels of different intensities, running from 0 (zero intensity) to 63 (full intensity). For example, (0,0,0) is <font color="000000">black</font>, (63,0,0) is <font color="FF0000">red</font>, whereas (63,63,63) is <span style="background-color:#999;"><font color="#FFFFFF">white</font></span>. Now, try dragging the sliders and watch the colour changes, hope you'll get a hang on how things work now. | |||
'''<u>Note</u>: Depending on the graphics packages you use, the channel ranges may be expressed differently. For example, in Deluxe Paint ][ Enhanced, each of the channels' intensity ranges from 0 to 100, and in some of the more "modern" programmes like Grafix 2 the range is probably from 0 to 255. Nonetheless, when imported into the AGS editor, they will be hashed to the standard 64 level intensity anyway.''' | '''<u>Note</u>: Depending on the graphics packages you use, the channel ranges may be expressed differently. For example, in Deluxe Paint ][ Enhanced, each of the channels' intensity ranges from 0 to 100, and in some of the more "modern" programmes like Grafix 2 the range is probably from 0 to 255. Nonetheless, when imported into the AGS editor, they will be hashed to the standard 64 level intensity anyway.''' | ||
| Line 36: | Line 40: | ||
# You may have noticed that colour #0 is black by default, but now I am telling you, that you ''should'' change the colour of this entry to something else (even if it belongs to a "'''locked'''" colour, I will explain later), I usually change it to <font color="FF00FF">pink</font> (by dragging both of the <font color="FF0000">R</font> and <font color="0000FF">B</font> sliders to full intensity) which is the default transparent colour used in many programmes, if you want to use this <font color="FF00FF">pink</font> colour (or some other colours close enough to it) in you game's graphics, you may change the colour of this slot to some other colour that will clash less with your in-game graphics. After the changes the palette should look like this: | # You may have noticed that colour #0 is black by default, but now I am telling you, that you ''should'' change the colour of this entry to something else (even if it belongs to a "'''locked'''" colour, I will explain later), I usually change it to <font color="FF00FF">pink</font> (by dragging both of the <font color="FF0000">R</font> and <font color="0000FF">B</font> sliders to full intensity) which is the default transparent colour used in many programmes, if you want to use this <font color="FF00FF">pink</font> colour (or some other colours close enough to it) in you game's graphics, you may change the colour of this slot to some other colour that will clash less with your in-game graphics. After the changes the palette should look like this: | ||
[[Image:8bittut_initpal.png]] | [[Image:8bittut_initpal.png|center|Initial palette]] | ||
You can now start setting some of the colours, starting from the ''first editable one'' (ie. slot #17, or #42 if you want to keep the original colours set by the AGS editor), to colours that you think will be commonly used by your sprites, then you may start drawing your sprites, adding more colours to the palette in the process, if needed. For example, I come up with [[media: | You can now start setting some of the colours, starting from the ''first editable one'' (ie. slot #17, or #42 if you want to keep the original colours set by the AGS editor), to colours that you think will be commonly used by your sprites, then you may start drawing your sprites, adding more colours to the palette in the process, if needed. For example, I come up with [[media:8bittut_ss0.pcx|this]] which contains the following sprite: | ||
[[Image:8bittut_sprite0.png]] | [[Image:8bittut_sprite0.png|center|68px|Girl sprite]] | ||
and the palette is currently set up like this: | and the palette is currently set up like this: | ||
[[Image:8bittut_ss0pal.png]] | [[Image:8bittut_ss0pal.png|center|Girl sprite palette]] | ||
You'll see that before drawing this first sprite, ''I thought'' that shades of skin colour, red and blue might be quite frequently used in my sprites, so I first set up slots #17 to #31 to contain these colours (the second row), even though some of the slots were still not used for painting my first sprite, they may still be used later in some other sprites, so don't be afraid that they'd be wasted at the time being. When I was drawing a sprite I add more colours to the palette when needed (see the third row of colours). Note that when I needed the black colour I used slot #16 (like in her antenna and eyes), whereas when I needed transparent colour I used slot #0, as shown by the surrounding pink colour, that's the reason I changed slot #0 to some other colour - so it won't clash with the black colour in case I need to use it in my sprites. Note also that I put a white rectangle surrounding the sprite, it will certainly help when it is to be imported into an AGS game. | You'll see that before drawing this first sprite, ''I thought'' that shades of skin colour, red and blue might be quite frequently used in my sprites, so I first set up slots #17 to #31 to contain these colours (the second row), even though some of the slots were still not used for painting my first sprite, they may still be used later in some other sprites, so don't be afraid that they'd be wasted at the time being. When I was drawing a sprite I add more colours to the palette when needed (see the third row of colours). Note that when I needed the black colour I used slot #16 (like in her antenna and eyes), whereas when I needed transparent colour I used slot #0, as shown by the surrounding pink colour, that's the reason I changed slot #0 to some other colour - so it won't clash with the black colour in case I need to use it in my sprites. Note also that I put a white rectangle surrounding the sprite, it will certainly help when it is to be imported into an AGS game. | ||
Next I may continue to draw more sprites, but as I am so excited I really want to see it imported into my game. Go to "'''palette editor'''" of the AGS editor, check the range of colours to import as ''sprite colours'', in my case it's slot #17 through #37, so I first click slot #17, ''HOLD'' the '''SHIFT''' key and click slot #37, so that the desired range is selected, make sure that the "'''This colour is room-dependent'''" checkbox is ''UNCHECKED'' and click the "'''Import slots from file...'''" button, now we just need to choose the image file containing the sprite (if it already is in '''.PCX''' format, if not, convert it to '''.PCX''' format first, too bad you can't import colour slots from '''.BMP''' files at the moment), and the colours of the selected slots will change to match your image file. Now, slot #38 through #41 still contains the original colours set by the editor and I don't like them, I just select these 4 slots (click slot #38, hold '''SHIFT''' and click slot #41), then check the "'''This colour is room-dependent'''" checkbox, to make them get out of my sight ''temporally''. The current palette should look like this: | Next I may continue to draw more sprites, but as I am so excited I really want to see it imported into my game. Go to "'''palette editor'''" of the AGS editor, check the range of colours to import as ''sprite colours'', in my case it's slot #17 through #37, so I first click slot #17, ''HOLD'' the '''SHIFT''' key and click slot #37, so that the desired range is selected, make sure that the "'''This colour is room-dependent'''" checkbox is ''UNCHECKED'' and click the "'''Import slots from file...'''" button, now we just need to choose the image file containing the sprite (if it already is in '''.PCX''' format, if not, convert it to '''.PCX''' format first, too bad you can't import colour slots from '''.BMP''' files at the moment), and the colours of the selected slots will change to match your image file. Now, slot #38 through #41 still contains the original colours set by the editor and I don't like them, I just select these 4 slots (click slot #38, hold '''SHIFT''' and click slot #41), then check the "'''This colour is room-dependent'''" checkbox, to make them get out of my sight ''temporally''. The current palette should look like this: | ||
[[Image:8bittut_ss0pala.png]] | [[Image:8bittut_ss0pala.png|center|AGS palette after for importing Girl sprite]] | ||
Now, go to "'''Sprite manager'''" of the AGS editor, right click and select "'''import new sprite...'''", make sure that 1) the "'''Remap colours to game palette'''" checkbox is ''un''checked'', and 2) the "'''Transparent colour'''" is set to "'''Palette index 0'''" (you can set the other settings yourself depending on your need), like below: | Now, go to "'''Sprite manager'''" of the AGS editor, right click and select "'''import new sprite...'''", make sure that 1) the "'''Remap colours to game palette'''" checkbox is ''un''checked'', and 2) the "'''Transparent colour'''" is set to "'''Palette index 0'''" (you can set the other settings yourself depending on your need), like below: | ||
[[Image:8bittut_imspr00.png]] | [[Image:8bittut_imspr00.png|center|Exact palette import sprite settings]] | ||
Now, click "'''Import from file...'''" and select that image file containing the sprite, right drag the rectangle to match the size, blah bla..., your imported sprite will now be stored '''EXACTLY''' like the originally drawn one. (During import you may see that the pink colour becomes black, don't panic, as you'll later find out that it should be imported perfectly with that "pink" colour region transparent when you put it over a background. You may also find out that drawing a rectangle around the sprite helps, otherwise I might have cropped out the antenna accidentally.) | Now, click "'''Import from file...'''" and select that image file containing the sprite, right drag the rectangle to match the size, blah bla..., your imported sprite will now be stored '''EXACTLY''' like the originally drawn one. (During import you may see that the pink colour becomes black, don't panic, as you'll later find out that it should be imported perfectly with that "pink" colour region transparent when you put it over a background. You may also find out that drawing a rectangle around the sprite helps, otherwise I might have cropped out the antenna accidentally.) | ||
| Line 61: | Line 65: | ||
Now I draw another sprite on the [[media:8bittut_ss1.pcx|same image file]], adding the following sprite: | Now I draw another sprite on the [[media:8bittut_ss1.pcx|same image file]], adding the following sprite: | ||
[[Image:8bittut_sprite1.png]] | [[Image:8bittut_sprite1.png|center|96px|Alien sprite]] | ||
The palette has now become: | The palette has now become: | ||
[[Image:8bittut_ss1pal.png]] | [[Image:8bittut_ss1pal.png|center|Alien sprite palette]] | ||
You'll see that in this second sprite some of the sprite colours set before were used (this time I even used some of the colours not used in the last sprite, e.g. slot #17, the darkest skin tone), and more colours were added (slots #38 through #40). | You'll see that in this second sprite some of the sprite colours set before were used (this time I even used some of the colours not used in the last sprite, e.g. slot #17, the darkest skin tone), and more colours were added (slots #38 through #40). | ||
So, to import this sprite, I first select slot #38 to slot #40 in the '''Palette editor''' (like before), uncheck the "'''This colour is room-dependent'''" checkbox (if necessary), and then import these 3 new colours from the sprite sheet into the editor: | So, to import this sprite, I first select slot #38 to slot #40 in the '''Palette editor''' (like before), uncheck the "'''This colour is room-dependent'''" checkbox (if necessary), and then import these 3 new colours from the sprite sheet into the editor: | ||
[[Image:8bittut_ss1pala.png]] | [[Image:8bittut_ss1pala.png|center|AGS palette for importing Alien sprite]] | ||
That's one way you can create sprites in the game making process, and how to add more colours (if needed) in due course, so basically you can draw more sprites, adding more colours if needed, import, draw more sprites... etc. One thing you need to take care of is what you had decided at the beginning - how many colour slots were actually assigned for those "'''fixed'''" sprite colours (in my case it's slot #0 to #127), so when you design your sprites and add colours to the palette, make sure you have some planning on them, and don't add too many new colours unless it's really necessary, or it will reach the limit you set real quickly, and that should not be considered good organisation. (If you are sure that your backgrounds won't need that many colours, you may make a compromise though, that is, change your decision by increasing the number of colour slots planned for sprites, you will have less free slots for backgrounds then.) | That's one way you can create sprites in the game making process, and how to add more colours (if needed) in due course, so basically you can draw more sprites, adding more colours if needed, import, draw more sprites... etc. One thing you need to take care of is what you had decided at the beginning - how many colour slots were actually assigned for those "'''fixed'''" sprite colours (in my case it's slot #0 to #127), so when you design your sprites and add colours to the palette, make sure you have some planning on them, and don't add too many new colours unless it's really necessary, or it will reach the limit you set real quickly, and that should not be considered good organisation. (If you are sure that your backgrounds won't need that many colours, you may make a compromise though, that is, change your decision by increasing the number of colour slots planned for sprites, you will have less free slots for backgrounds then.) | ||
==Making your first | ==Making your first backgrounds in 256 colours== | ||
Having done some sprites I think it's now time for me to make some backgrounds. First I make [[media:8bittut_dizzy.pcx|this background]], you may check out that its palette is like: | Having done some sprites I think it's now time for me to make some backgrounds. First I make [[media:8bittut_dizzy.pcx|this background]], you may check out that its palette is like: | ||
[[Image:8bittut_dizzypal.png]] | [[Image:8bittut_dizzypal.png|center|Dizzy bg palette]] | ||
Note that when I make a background I just save a sprite image ''as a different name'' (so it has all the sprite colours properly set), ''change | Note that when I make a background I just save a sprite image ''as a different name'' (so it has all the sprite colours properly set), ''change its size'' to the background size I need, ''clear'' it, and then start adding colours from ''the end'' of the palette, as they're supposed to be "'''room dependent'''", so you can paint your backgrounds with these slots and make them different in different backgrounds if necessary. Note also that the first half of the palette matches that of the sprites so I can still use the fixed colours in my backgrounds if necessary (just don't change their colours as you may have drawn some of the sprites with these slots already). Now you may try importing it as a room background. My test game used 320x240 as its default resolution, so the background is of this dimension. Go to "'''Room Editor --> Setting'''" of the AGS Editor, and click the '''Import background (exact palette)''' [[Image:8bittut_exactpal.png|Import background (exact palette) button]] button (make sure you didn't click the '''Import background''' [[Image:8bittut_impbgbut.png|Import background button]] button wrongly, note also that these two actions are now moved to the '''Room''' dropdown menu since AGS V2.7), the background should be imported without any problem. '''NOW''' (that is, you didn't restart the editor, start/load a new room, etc.) if you select the last few rows of slots in "'''Palette Editor'''" and uncheck the "'''This colour is room-dependent'''" box you'll see that the colours are imported perfectly like in the original image: | ||
[[Image:8bittut_dizzpala.png]] | [[Image:8bittut_dizzpala.png|center|AGS palette after importing Dizzy background]] | ||
(Don't forget to set these colours back to "'''room-dependent'''" after checking, otherwise your next background may not be imported perfectly.) | (Don't forget to set these colours back to "'''room-dependent'''" after checking, otherwise your next background may not be imported perfectly.) | ||
It's time for me to try out how it'll look like in a compiled game now: | It's time for me to try out how it'll look like in a compiled game now: | ||
[[Image:8bittut_dizzygam.png]] | [[Image:8bittut_dizzygam.png|center|Dizzy room screenshot]] | ||
I had added the two imported sprites as objects to check if things went smoothly, note that the girl's sprite was imported perfectly as her antenna are intact and are not "eaten" by the dark transparent colour during import. This is one importance of using exact palette import. | I had added the two imported sprites as objects to check if things went smoothly, note that the girl's sprite was imported perfectly as her antenna are intact and are not "eaten" by the dark transparent colour during import. This is one importance of using exact palette import. | ||
I am happy, so I draw [[media:8bittut_disco.pcx | I am happy, so I draw [[media:8bittut_disco.pcx|one more background]], this time the palette is like: | ||
[[Image:8bittut_discopal.png]] | [[Image:8bittut_discopal.png|center|AGS palette after importing Disco background]] | ||
Obviously the colours assigned for this background are different from the last one, that's how "'''room-dependent'''" slots work. | Obviously the colours assigned for this background are different from the last one, that's how "'''room-dependent'''" slots work. | ||
| Line 104: | Line 108: | ||
If you place the sprite as an object in the room you'll find out whether it's imported properly (if you try putting it in the "dizzy" room, you may find it looking funny, since the two room backgrounds used different colours): | If you place the sprite as an object in the room you'll find out whether it's imported properly (if you try putting it in the "dizzy" room, you may find it looking funny, since the two room backgrounds used different colours): | ||
[[Image:8bittut_discogam.png]] | [[Image:8bittut_discogam.png|center|Disco room screenshot]] | ||
Note that I also placed | Note that I also placed [[Roger]] in the room for comparison, and he looks ''real'' funny, like a zombie, that's because I changed the colours of slots #17 through #41 when I first set up the palette, so if you want to keep CJ's original roger and GUI, etc. sprites intact you shouldn't change them. | ||
==Conclusion== | ==Conclusion== | ||
I think this tutorial is long enough to keep you awake, and it's only about basic | I think this tutorial is long enough to keep you awake, and it's only about basic stuff, I think it's about done for this part already, but before I stop I'll give you a present, which is how the materials put together into an AGS "game" would be like: | ||
[[media:8bittut_paltut1.zip|Download this file]] | [[media:8bittut_paltut1.zip|Download this file]] | ||
| Line 116: | Line 120: | ||
Coming next - [[256 Colour Tutorial Part 2|Part 2: Palette effects using pre-defined functions]] | Coming next - [[256 Colour Tutorial Part 2(V2.62)|Part 2: Palette effects using pre-defined functions]] | ||
==Downloadable files used in this part== | |||
*[[media:8bittut_basepal.pcx|PCX image - default AGS palette]] | |||
*[[media:8bittut_ss0.pcx|PCX image - the Girl sprite]] | |||
*[[media:8bittut_ss1.pcx|PCX image - the Girl and the Alien sprites]] | |||
*[[media:8bittut_dizzy.pcx|PCX image - "Dizzy" background]] | |||
*[[media:8bittut_disco.pcx|PCX image - "Disco" background]] | |||
*[[media:8bittut_door.pcx|PCX image - Door sprite]] | |||
*[[media:8bittut_paltut1.zip|ZIP file - part 1 stuff]] | |||
(Return to [[Using 256 colour graphics in AGS]]) | (Return to [[Using 256 colour graphics in AGS]]) | ||
[[Category:Tutorials]] | [[Category:Intermediate Tutorials:Graphics Related:256 colour]] | ||