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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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