Author Topic: Palette Cycling Tutorial  (Read 133 times)

0 Members and 1 Guest are viewing this topic.

Offline gumby

Palette Cycling Tutorial
« on: October 11, 2020, 02:41:18 PM »
The SCICompanion instructions are very good; I've put this tutorial together for someone who wants to do this in Paint.NET.  This is how I did it, there are probably different/better ways but I'm putting this out there in hopes it might help others.  I've uploaded the final result, along with all the artifacts I used to create it from the fan games section here: http://sciprogramming.com/fangames.php?action=review&id=210

Step-By-Step (geared for following the demo game)

1. In SCICompanion, create a new template game for SCI 1.1.

2. Create/import your background pic (refer to 'original background.bmp').  Right click 'Import bitmap to pic', reserving the last 2 rows (32 colors) for the palette cycling

3. Create the first gradient.  Edit the palette, select the first 8 unused colors, hit 'Gradient'.  Choose A-B as the gradient type and leave the default colors (white to black) as is.  Save the PIC (you have to save the palette to the PIC before attempting an import utilizing palette changes)

4. Create an 8 color palette file matching the gradient you created in the palette tool in Companion (I've included a 8-color and 16-color file in the demo game you can use - refer to the '8 color cycle' file).  If you are creating these from scratch, you will need to look at every color in the palette for the RGB values and make corresponding entries in the Paint.NET palette files. Drop these in the Documents\paint.net User Files\Palettes folder on your file system
   
5. In Paint.NET open the background pic (needs to be already sized to 320x190 - again, refer to 'original background.bmp')

6. Create a new layer (Layers->Add New Layer).  Make sure this new layer is on top and selected.

7. Open the 'Colors' window, and select the 8 color palette file that you just created.

8. Draw, pixel by pixel, typically in an ascending/descending pattern of colors from the 8 color palette on the top (transparent) layer.

9. When finished, delete the 'Background' layer and 'Save-As' the top layer.  Save as a PNG with a bit depth of 8 and dithering level of 0 (refer to 'pixels - range 1.png')

10. In Companion, import the PNG you just created, choosing 'Overlay on current' and 'Map to current palette', selecting the 8 color gradient that you created in step 3.

11. Save the pic and reopen.  You should now see the background merged with the the PNG that you just imported.  Change the gradient colors to whatever suits your picture. I've done a combination of the following with varying success:
   1) Use the gradient tool.  Pick a start color and end color and you are done
   2) Random copy/paste.  Choose colors that are already preexisting from the room palette and just paste them into each of the cycle indexes with little/no regard to neighboring colors
   3) If after testing out the color cycling it's too light or dark with the surrounding areas, use the 'Adjust' tool against the full cycle range and lighten/darken it (or do other color adjustments)

12. Test out the results.  Open the corresponding room script (110) and this code to the room instance (assuming that your gradient uses color indexes 224 to 232)

   (method (doit)
       (Palette palANIMATE 224 231 -20)      
   )
   
13. At this point I strongly suggest exporting the palette (assuming you are reasonably happy with the results).  This allows you to rework (add/delete pixels) on your transparent layer and re-import without having to redefine the palette every time (refer to 'pal range 1.pal').  You may also want to export the full pic resource as well to support 'mutiple passes' at giving the room  - if you don't do this, you'll just have to re-import each layer individually and reapply the palettes you defined (not a big deal).
   
14. Technically, at this point you are 'done' - but in reality you will more than likely need to work & rework your transparent image before you are satisfied.  Let's create another color cycling range and corresponding transparent layer:

15. Repeat Steps 3-11, this time with another 8 color gradient range (colors 232 - 239).   

16. Test out your new changes.  Change your Palette command to this and test the room:
        (Palette palANIMATE 224 231 -20 231 239 -50)
      
17. If you are satisified, again I recommend doing Step 13 (export the palette range and pic resource if desired)

18. Now we can move on to the last range, this time using a 16 color range (again, see included resources in the demo).  Perform the same steps (making adjustments) 15-17.  Here's the updated Palette command:
       (Palette palANIMATE 224 231 -20 232 239 -50 240 255 -35)
« Last Edit: October 16, 2020, 02:26:56 PM by gumby »


In the Great Underground Empire (Zork port in development)
Winter Break 2012 Rope Prop Competition

Offline gumby

Re: Palette Cycling Tutorial
« Reply #1 on: October 16, 2020, 02:26:16 PM »
Just a heads up, I found that I had made a mistake with one of the included palette files.  The 'pal range 1.pal' included a full palette export, not just the range in question.  I've corrected the issue and re-uploaded the demo.
In the Great Underground Empire (Zork port in development)
Winter Break 2012 Rope Prop Competition

Offline Collector

Re: Palette Cycling Tutorial
« Reply #2 on: October 16, 2020, 07:19:26 PM »
The demo doesn't do anything. It is just a static picture.
KQII Remake Pic

Offline gumby

Re: Palette Cycling Tutorial
« Reply #3 on: October 16, 2020, 09:25:10 PM »
It's very subtle, but it does cycle the palette, visible in several places on the pic.
In the Great Underground Empire (Zork port in development)
Winter Break 2012 Rope Prop Competition


SMF 2.0.14 | SMF © 2017, Simple Machines
Simple Audio Video Embedder

Page created in 0.08 seconds with 24 queries.