Palette Swapping or alternative

Post your help queries and engine programming questions here

Palette Swapping or alternative

Postby JudgeX » Mon Jul 14, 2014 9:26 pm

I am trying to make an item system that allows me to create an object, say, a blue potion, from a single image, and then at instantiation time be able to make it a red or green or yellow potion instead without having to have more files...

I've tried doing this with the color overlay and looked over the other image filters, and they don't really give me the flexibility I need...

Has anyone else done something similar to this and wouldn't mind sharing the basics of how it's done in isogenic in a non-performance-killing way?

I know I could just have my color options as other cells, but I was hoping to make something a touch more dynamic, and this would greatly simplify my art pipeline, and I was hoping to find the engine-proper way of doing it before researching my own solution.

Any input would be appreciated!
Posts: 21
Joined: Mon Jan 06, 2014 7:46 am

Re: Palette Swapping or alternative

Postby robaldred » Tue Jul 15, 2014 10:13 am

Use a spritesheet.
You're never really going to get perfect results with filters.
I assume you've tried the built in IgeFilters.colorOverlay filter.

Code: Select all
myentity.applyFilter(IgeFilters.colorOverlay, {color: 'rgba(0, 0, 255, 0.5)'});

Checkout example 1.5-filters, if you're interested. You could of course write your own filter.

Filters are just functions that take some arguments.
You can maniplulate the pixel data as you wish.
The basic colorOverlay filter is very basic, it draws a rectangle over the existing render using the source-atop blend mode.
Code: Select all
IgeFilters.colorOverlay = function (canvas, ctx, originalImage, texture, data) {
   // Set the composite operation and draw the colour over the top
   ctx.globalCompositeOperation = 'source-atop';

   ctx.fillStyle = data.color;
   ctx.fillRect(0, 0, canvas.width, canvas.height);

A better solution would be to shift the colour data of each pixel.
Something like...
Code: Select all
IgeFilters.colorize = function (canvas, ctx, originalImage, texture, data) {
   var i,
      w = canvas.width,
      h = canvas.height,
      color = data.color,
      intensity = data.intensity,
      canvasData = ctx.getImageData(0, 0, w, h);

   var arr =;
   var arrCount = arr.length;

   for (i = 0; i < arrCount; i += 4) {
      arr[i] -= (arr[i] - color.r) * (intensity / 100);
      arr[i + 1] -= (arr[i + 1] - color.g) * (intensity / 100);
      arr[i + 2] -= (arr[i + 2] - color.b) * (intensity / 100);

   ctx.putImageData(canvasData, 0, 0);

Call like so...
Code: Select all
myEntity.applyFilter(IgeFilters.colorize, {color: {r:255,g:215,b:0},intensity: 50});

Color is RGB values, Intensity is from 0 to 100

This will destroy colour data, so you can only really make this adjustment once, further adjustments will probably start looking odd.
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England

Return to Help & Questions

Who is online

Users browsing this forum: No registered users and 1 guest