Jump to content

HSV color picker using BitmapData: how to get the color value?


Xellpher
 Share

Recommended Posts

I'm trying to create a HSV color picker using BitmapData. The implementation can be found in this Phaser Sandbox, I followed this example, with the notable difference, that I'm not using an image to generate the BitmapData but I'm generating the data myself. Unfortunately I seem to be unable to retrieve the color data for a given pixel (I tried BitmapData.getPixel(), getPixelRGB, getPixel32()).

Does anyone have an idea what I'm doing wrong?

Link to comment
Share on other sites

The result of the code below can be seen HERE

function preload() {
    this.svbmd = game.add.bitmapData(400, 300, "slbmd");
    this.svbmdAreas= [];
	
    var w = this.svbmd.width / 11;
    var h = this.svbmd.height / 6;
	
    for (var i = 0; i < 11; i++) {
	var areaCol = [];
	for (var j = 0; j < 6; j++) {
	    areaCol.push(new Phaser.Rectangle(i * w, j * h, w, h));
	}
	this.svbmdAreas.push(areaCol);
    }
		
    for (var k = 0; k < 11; k++) {
	var val = k / 10;
	for (var l = 0; l < 6; l++) {
	    var sat = l / 5;
	    var rect = this.svbmdAreas[k][l];
	    var col = Phaser.Color.HSVtoRGB(0.5, sat, val);
            this.svbmd.rect(rect.x, rect.y, rect.x + rect.width, rect.y + rect.height, Phaser.Color.RGBtoString(col.r, col.g, col.b, 255));
	}
    }
}

function create() {
    this.svpicker = this.svbmd.addToWorld(200, 100);
    this.tooltip = game.make.bitmapData(64, 64);
    this.sprite = game.add.sprite(0, 0, this.tooltip);

    game.input.addMoveCallback(function (pointer, x, y) {
    if (x >= this.svpicker.x && x <= this.svpicker.x + this.svpicker.width && y >= this.svpicker.y && y <= this.svpicker.y + this.svpicker.height) {
    	// for some reason color always seems to be the same, no matter which pixel is picked
        var color = this.svbmd.getPixelRGB(x - this.svpicker.x , y - this.svpicker.y);
    		
    	this.tooltip.fill(125, 125, 125);
    	this.tooltip.rect(1, 1, 62, 62, color.rgba);
    	
    	this.sprite.x = x;
    	this.sprite.y = y;
    }}, this);	
}
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...