CreateColorMatrix

From Spheriki

Creates a ColorMatrix. With a ColorMatrix you can change the colors of an image.

Contents 1 Usage 1.1 Red Component 1.2 Green Component 1.3 Blue Component 2 Examples 3 Notes 4 See also

Usage

All parameters are integer numbers between 0 and 255

For each pixel in the image, it will transform it's color applying the following formula:

      newcolor.red   = rn + (rr * oldcolor.red + rg * oldcolor.green + rb * oldcolor.blue) / 255;
      newcolor.green = gn + (gr * oldcolor.red + gg * oldcolor.green + gb * oldcolor.blue) / 255;
      newcolor.blue  = bn + (br * oldcolor.red + bg * oldcolor.green + bb * oldcolor.blue) / 255;

Red Component

• rn Red minimal intensity
• rr Red additional intensity inherited from the red channel
• rg Red additional intensity inherited from the green channel
• rb Red additional intensity inherited from the blue channel

Green Component

• gn Green minimal intensity
• gr Green additional intensity inherited from the red channel
• gg Green additional intensity inherited from the green channel
• gb Green additional intensity inherited from the blue channel

Blue Component

• bn Blue minimal intensity
• br Blue additional intensity inherited from the red channel
• bg Blue additional intensity inherited from the green channel
• bb Blue additional intensity inherited from the blue channel

Examples

A list of useful ColorMatrices:

var ColorMatrix = { 
	"Swap_red_and_blue" : CreateColorMatrix(0, 0,0,255,  0, 0,255,0,  0, 255,0,0), 
	"Swap_blue_and_green" : CreateColorMatrix(0, 255,0,0,  0, 0,0,255,  0, 0,255,0), 
	"Swap_green_and_red" : CreateColorMatrix(0, 0,255,0,  0, 255,0,0,  0, 0,0,255),
	"Rotate_forth" : CreateColorMatrix(0, 0,255,0,  0, 0,0,255,  0, 255,0,0),
	"Rotate_back" :  CreateColorMatrix(0, 0,0,255,  0, 255,0,0,  0, 0,255,0),
	"Reverse" : CreateColorMatrix(0, 0,255,255,  0, 255,0,255,  0, 255,255,0),
	"grayscale" : CreateColorMatrix(0, 85,85,85,  0, 85,85,85,  0, 85,85,85),
	"lighten20":  CreateColorMatrix(20, 255,0,0,  20, 0,255,0,  20, 0,0,255),
	"darken20": CreateColorMatrix(-20, 255,0,0,  -20, 0,255,0,  -20, 0,0,255),
	"hue_red":  CreateColorMatrix(20, 255,0,0,  0, 0,255,0,  0, 0,0,255),
	"hue_green":  CreateColorMatrix(0, 255,0,0,  20, 0,255,0,  0, 0,0,255),
	"hue_blue": CreateColorMatrix(0, 255,0,0,  0, 0,255,0,  20, 0,0,255),
	"hue_red55": CreateColorMatrix(55, 200,0,0,  0, 0,200,0,  0, 0,0,200),
	"hue_green55": CreateColorMatrix(0, 200,0,0,  55, 0,200,0,  0, 0,0,200),
	"hue_blue55": CreateColorMatrix(0, 200,0,0,  0, 0,200,0,  55, 0,0,200),
};

A real game usage example. Lets say you want to do a cutscene in the past and need to gray all tiles and spritesets on the map, you would call these 2 functions inside the map entry script:

function GrayAllTiles() { colorMatrixMap(ColorMatrix.grayscale); }

function GrayAllSprites() {
	var Persons=GetPersonList();
	var i=Persons.length-1;
	do {
		ColorMatrixPerson(Persons[i],ColorMatrix.grayscale);
	} while (i--);
}

Which use the following supporting functions:

/**
 * Applies a ColorMatrix to the tiles of a map
 * @param {colormatrix} cm A colormatrix, See the variable ColorMatrix for predefined values.
 * @param {array} skiparray Where the index of a tile is true to skip it. Optional.
 * example: 
 * 	var sA=new Array();
 *	sA[6]=1; //Will make tile with index 6 stay like it is.
 * 	colorMatrixMap(ColorMatrix.grayscale, sA);
 */
function colorMatrixMap(cm,skiparray) {
	if (skiparray == undefined) skiparray = new Array();
	if (IsMapEngineRunning()) { 
		var stile;
		var i=GetNumTiles()-1;
		do {
			if (skiparray.length>i && skiparray[i]) continue;
			stile = GetTileImage(i).createSurface();
			stile.applyColorFX(0, 0, stile.width, stile.height,  cm);
			SetTileImage(i, stile.createImage() );
		} while (i--);
	}
}


/**
 * Applies a ColorMatrix to a Person
 * @param {string} person Name of the person you want to apply the colormatrix to
 * @param {colormatrix} colormatrix A colormatrix, See the variable ColorMatrix for predefined values.
 */
function ColorMatrixPerson(person,colormatrix) {
	var GPSS = GetPersonSpriteset(person);
	var surf1;
	var i = GPSS.images.length-1;
	do {
		surf1= GPSS.images[i].createSurface();
		surf1.applyColorFX(0, 0, surf1.width, surf1.height,  colormatrix);
		GPSS.images[i]=surf1.createImage();
	} while(i--);
	SetPersonSpriteset(person,GPSS);
}

Notes

• A ColorMatrix can only be applied to Surfaces. Convert images to surfaces and back to use them on images.

See also

• Surface.applyColorFX()
• Surface.applyColorFX4()
• Surface.applyLookup()