1
\$\begingroup\$

enter image description here

Hi guys,

Could anyone kindly shows me a little bit of code about pick and paint color to the sprite?

here is my code that I have played around, but I still cannot find out and achieve it.

Thanks you in advance for your time and consideration.

preload: function() {
    this.game.load.image('test', 'test.png');
},

create: function() {

    this.color1 = this.drawRec('rgb(141,243,160)', 20, 20);
    this.color2 = this.drawRec('#6bd4e0', 100, 20);
    this.color3 = this.drawRec('#cb6be0', 20, 100);
    this.color4 = this.drawRec('#8df3a0', 100, 100);
    this.square = this.game.make.bitmapData();
    this.square.load('test');
    this.square.addToWorld(this.game.world.centerX, this.game.world.centerY, 0.5, 0.5);     

    this.game.input.onDown.add(this.pickColor, this);
},

drawRec: function(color, x, y) {
    this.bmd = this.game.make.bitmapData(100, 100);
    this.bmd.ctx.beginPath();
    this.bmd.ctx.rect(0,0,50,50);
    this.bmd.ctx.fillStyle = color;
    this.bmd.ctx.fill();        
    this.sprite = this.game.add.sprite(x, y, this.bmd);     
},

pickColor: function(pointer, x, y) {
    console.log(this.bmd.getPixelRGB(x,y));
}
\$\endgroup\$

2 Answers 2

0
\$\begingroup\$

3 issues:

  • In the drawRect funtion x and y doesn't have the pointers values. You should use pointer.x and pointer.y

  • Each time you call the drawRec function you are creating a new bitmapData, storing it in this.bmd. So in the console.log(this.bmd.getPixelRGB(x,y)); you will get the information of the las square created. You should create a unique bitmapData and add the squeres to it.

  • As the phaser docs says: "If you have drawn anything to the BitmapData since it was created you must call BitmapData.update to refresh the array buffer".

So your code should looks something like this:

preload: function() {
    this.game.load.image('test', 'test.png');
},

create: function() {
    this.bmd = this.game.make.bitmapData(500, 500);
    this.color1 = this.drawRec('rgb(141,243,160)', 20, 20);
    this.color2 = this.drawRec('#6bd4e0', 100, 20);
    this.color3 = this.drawRec('#cb6be0', 20, 100);
    this.color4 = this.drawRec('#8df3a0', 100, 100);
    this.square = this.game.make.bitmapData();
    this.square.load('test');
    this.square.addToWorld(this.game.world.centerX, this.game.world.centerY, 0.5, 0.5);     

    this.game.input.onDown.add(this.pickColor, this);
},

drawRec: function(color, x, y, id) {
    this.bmd.ctx.beginPath();
    this.bmd.ctx.rect(x,y,50,50);
    this.bmd.ctx.fillStyle = color;
    this.bmd.ctx.fill();        
    this.sprite = this.game.add.sprite(0, 0, this.bmd); 
},

pickColor: function(pointer) {
    this.bmd.update();
    console.log(this.bmd.getPixelRGB(pointer.x,pointer.y));
}
\$\endgroup\$
4
  • \$\begingroup\$ Thanks for replied. Hi guys, Can anyone explain me a little bit of this code why its not working? var a = '141,243,160,1'; this.bmd1.fill(a); //it doesn't work // if this.bmd1.fill(141,243,160,1); it works Thanks \$\endgroup\$ Commented Jul 20, 2016 at 10:10
  • \$\begingroup\$ doesn't work because you pass to the fill function one single argument (the string '141,243,160,1') \$\endgroup\$
    – jolmos
    Commented Jul 20, 2016 at 10:21
  • \$\begingroup\$ so what is the best way to achieve this? \$\endgroup\$ Commented Jul 20, 2016 at 13:37
  • \$\begingroup\$ getPixelRGB gives you an object with properties (r,g,b,a...) that you can use it to call fill function... take a look a this fiddle: jsfiddle.net/jolmos/d8hvgepy \$\endgroup\$
    – jolmos
    Commented Jul 20, 2016 at 13:53
0
\$\begingroup\$

@jolmos, sorry for disturbing you again bro.

I would like ask you a little bit more of this code about the dynamic click of button colors.

drawColor: function() {
    this.colorGroup = this.game.add.group();
    var arrayColor = [
        'rgb(86,160,211)', 'rgb(156,141,195)', 'rgb(26,80,120)', 'rgb(233,119,175)',
        'rgb(141,243,160)', 'rgb(167,64,150)', 'rgb(243,115,33)', 'rgb(94,220,255)'
    ];
    var padding = 10;
    var i=0;
    this.colorGroup.x = 20;
    this.colorGroup.y = 100;        
    for(var row=0; row<4; row++) {
        for(var col=0; col<2; col++) {
            this.bmd = this.game.add.bitmapData(50, 50);
            this.bmd.ctx.beginPath();
            this.bmd.ctx.rect(0, 0, 50, 50);
            this.bmd.ctx.fillStyle = arrayColor[i];
            this.bmd.ctx.fill();                
            this.buttonColor = this.game.add.button((padding+50)*col, (padding+50)*row, this.bmd, this.btnColor, this);
            this.buttonColor.name = 'color'+i;              
            this.colorGroup.add(this.buttonColor);
            i++;
        }
    }       
},

btnColor: function(button) {
    this.bmd.update();
    console.log(button.name);
    var test = this.bmd.getPixelRGB(button.x,button.y);
    console.log(test); // I cannot get the different colors of the button. Whats wrong?
},
\$\endgroup\$
0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .