527
edits
256 Colour Tutorial Part 2: Difference between revisions
m
→Palette cycling
| Line 17: | Line 17: | ||
===Palette cycling=== | ===Palette cycling=== | ||
Do you remember the warp scenes in | Do you remember the warp scenes in Space Quest IV? The colourful backgrounds animated smoothly. How did they do that? Paint each frame of the backgrounds with different colours, and then display them one by one? Nah, that's just a waste of time and memory. But how? Use '''palettes'''! Use the '''CyclePalette()''' function in AGS! | ||
Now, how does this function work? Read the manual first: | Now, how does this function work? Read the manual first: | ||
| Line 31: | Line 31: | ||
</blockquote> | </blockquote> | ||
Don't get confused, yet | Don't get confused, yet. It's not really that hard. Let me demonstrate it with an example. You may still remember that I made [[media:8bittut_dizzy.bmp|this background]] in Part 1, and its palette is like: | ||
[[Image:8bittut_dizzypal.png|center|Dizzy background palette]] | [[Image:8bittut_dizzypal.png|center|Dizzy background palette]] | ||
You may have noticed that, I used the "rainbow" colours in slots #240 | You may have noticed that, I used the "rainbow" colours in slots #240 thru #253 (the first 14 slots in the last line of the above palette) to draw the circular "warping frame" of the background. If the colours of these slots are altered the colours of that "warping frame" will be changed accordingly (you can load the background into a graphics programme and play with the colours of these slots and see what will happen). To make an animated effect, you may try using the function '''CyclePalette()''' with #240 as the ''starting slot'' and #253 as the ''ending slot''. Here's a graphical illustration of what will happen if you do that: | ||
[[Image:8bittut_dizzypalcp.png|Diagram illustrating the effect of CyclePalette()]] | [[Image:8bittut_dizzypalcp.png|Diagram illustrating the effect of CyclePalette()]] | ||
Whenever the function CyclePalette(240, 253) is executed, the colours in these slots are shifted to the left by one slot, and the original colour in the first slot (#240) will be warped to the last slot (#253). Similarly, if we swap the two parameters of this function the direction of the shifting of the colours will be reversed. | Whenever the function CyclePalette(240, 253) is executed, the colours in these slots are shifted to the left by one slot, and the original colour in the first slot (#240) will be warped to the last slot (#253). Similarly, if we swap the two parameters of this function the direction of the shifting of the colours will be reversed. | ||
Now, let's decide where to put | |||
Now, let's decide where to put the codes in, for example, I want the colours to cycle in the ''forward'' direction whenever I press the '''Space Bar''', and in the ''backwards'' direction when I press the '''Backspace''', so I type this into the room's script: | |||
function on_key_press(eKeyCode key){ | function on_key_press(eKeyCode key){ | ||
if (key==eKeySpace) CyclePalette(240, 253); | if (key==eKeySpace) CyclePalette(240, 253); | ||
if (key==eKeyBackspace) CyclePalette(253, 240); | if (key==eKeyBackspace) CyclePalette(253, 240); | ||
} | } | ||
Save the script and compile the game to test it, you'll notice that whenever you press the '''Space Bar''', the colours of the "warping frame" changes. This is due to the shift in colours in the mentioned 14 colour slots. If you keep the '''Space Bar''' pressed you'll see a smooth colour rotation animation. Try it out also with the '''Backspace''' key. | Save the script and compile the game to test it, you'll notice that whenever you press the '''Space Bar''', the colours of the "warping frame" changes. This is due to the shift in colours in the mentioned 14 colour slots. If you keep the '''Space Bar''' pressed you'll see a smooth colour rotation animation. Try it out also with the '''Backspace''' key. | ||
I'm not satisfied with this yet, now I want the water at the centre to fall ''continuously''. What can we do now? Again, we can use '''CyclePalette()''' | I'm not satisfied with this yet, now I want the water at the centre to fall ''continuously''. What can we do now? Again, we can use '''CyclePalette()'''. We can use this in the '''repeatedly_execute()''' or the '''repeatedly_execute _always()''' events for the continuous motion. Now, look at the background again. You'll see that the waterfall was carefully drawn using colours ''mostly'' from slot #208 through #215. I want the animation to play without ''any'' interruptions, so I add the following into the room's script: | ||
function repeatedly_execute_always() { | function repeatedly_execute_always() { | ||
CyclePalette(208, 215); | CyclePalette(208, 215); | ||
| Line 66: | Line 67: | ||
} | } | ||
Test the game again, the animation is now slower and looks better | Test the game again, the animation is now slower and looks better. You may have noticed that some of teh white pixels on the water won't animate. This is because I drew them with a colour not using the slots included in the cycle. If you care, they're actually using colour slot #15 (instead of slot #215 in the cycle), which is a '''Gamewide''' "sprite" colour. From this you'll know that it may not be a bad practice to use duplicated colours in a 256 colour image, as there may be cases that you want the colour of a pixel to be changed somewhere in game (like in a palette rotation animation, say for example) while keeping the colour of another pixel unchanged. This is true as long as you manage your palette wisely in a systematic way. | ||
===Changing an individual colour=== | ===Changing an individual colour=== | ||