How to add background color of image

[parwaniprakash]

Hello everyone,

 

         I have a transparent image.. and its loading perfectly in the phaser game. But I want to show different colors in that image. I have found an example in phaser game. The eg code as I found is follow :- 

 

function render()

{

  game.debug.body(test,"#ff6600","#ff00ff");

}

 

But its not working in the update function. Is there any other way to add the color in transparent image

 

Thanks in Advance

[lewster32]

I think you probably mean tinting, but this will only work in a very specific way, in that it acts like a 'dye', turning pure white in your image into the colour you set, and any darker colours get darkened with that colour. This effect is known as 'multiplying' the colour.

function create() {  var test = game.add.sprite(0, 0, 'test');  // tint the test sprite fully red (note you need to use 0xff0000 and not "#ff0000")  test.tint = 0xff0000; }

If on the other hand you want to be able to manipulate the colours and pixels individually you'd be much better off using BitmapData, which has just received some nice new methods in the dev version of Phaser (2.0.6) related to manipulating the pixels in batches.

[parwaniprakash]

Ya thanks.. its working..

[lewster32]

Oh and just so you know - to reset the tint, use tint = 0xffffff

[parwaniprakash]

Actually I am new in the phaser.. so thanks for your help..

I also have one more query.. if you can help me it will be great full for me.

I am developing a game. In that game Multiple buses is taking the paperhangers and travel accordingly. for that I have created a group of buses and the group of passengers.. When I try to add these two objects in the bus then It is taking some disturbance...

Here is the code I am working over it..

 

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload,create: create, update:update,render:render });

var timeCheck = 0;

var path = [[new Phaser.Point(100, 500),new Phaser.Point(500, 500),new Phaser.Point(300, 100)]];

var pathSpriteIndex = [0];

var sp = sprite = null;

var pathIndex = linepath = pathSpIndex = 0;

var flag = false;

 

function preload()

{

    game.load.image('star', 'img/train12.png');

    game.load.image('rect', 'img/rectangle.png');

    game.load.image('circle', 'img/circle.png');

}

 

function create() {

    game.stage.backgroundColor = '#ffffff';

    graphic = game.add.graphics(0, 0);

    timeCheck = game.time.now;

 

    enemies = game.add.group();

    enemies.enableBody = true;

    enemies.physicsBodyType = Phaser.Physics.ARCADE;

 

    test = enemies.create(500, 500, 'star');

    test.tint = 0xff0066;

    //game.Physics.Arcade.Body.render(this.context, test.body, "#ff0000", "#ff0000");

    //test.body.backgroundColor = "#ff0000";

    sprite = [test];

 

    shap = game.add.group();

    shap.enableBody = true;

    shap.physicsBodyType = Phaser.Physics.ARCADE;

    shapes = [enemies.create(530,490, 'rect'),enemies.create(540,490, 'rect'),enemies.create(550,490, 'circle'),enemies.create(530,500, 'circle')];

 

    game.physics.startSystem(Phaser.Physics.ARCADE);

    game.physics.enable(enemies, Phaser.Physics.ARCADE);

 

    game.physics.enable(shap, Phaser.Physics.ARCADE);

 

    graphic.lineStyle(10, '0xff0000', 1);

    graphic.moveTo(100, 500);

    graphic.lineTo(500, 500);

    graphic.lineTo(300, 100);

}

 

function update()

{

  for(i=0;i<path.length;i++)

  { 

 

    arr1 = path;

    pathIndex = arr1.length;

 

    if (arr1 != null && arr1.length > 0 && pathSpriteIndex < pathIndex) 

    {

 

      pathSpriteIndex = Math.min(pathSpriteIndex, path.length - 1);

      sp = sprite;

      sp.anchor.setTo(0.5, 0.5);

      //sp.body.setSize(220, 10, 0, 0);

 

 

      if(game.time.now - timeCheck > 2000)

        sp.rotation = game.physics.arcade.moveToXY(sp, path[pathSpriteIndex].x, path[pathSpriteIndex].y, 50);

 

 

      sp1 = shapes;

      sp1.anchor.setTo(-1.5, 0);

      sp1.rotation = game.physics.arcade.moveToObject(sp1, sp, 50);

      

      j = i+1;

      sp2 = shapes[j];

      sp2.anchor.setTo(0, 0);

      sp2.rotation = game.physics.arcade.moveToXY(sp2, sp.x, sp.y, 50);

 

 

      j = i+2;

      sp3 = shapes[j];

      sp3.anchor.setTo(1.5, 0);

      sp3.rotation = game.physics.arcade.moveToXY(sp3, sp.x, sp.y, 50);

 

      j = i+3;

      sp4 = shapes[j];

      sp4.anchor.setTo(-1.5, 1.5);

      sp4.rotation = game.physics.arcade.moveToXY(sp4, sp.x, sp.y, 50);

 

      //game.physics.arcade.collide(sp, sp4, collisionHandler, null, this);

 

 

      if (game.physics.arcade.distanceToXY(sp, path[pathSpriteIndex].x, path[pathSpriteIndex].y) < 20) 

      {

        pathSpIndex = pathSpriteIndex;

        pathSpIndex++;

        pathSpriteIndex = pathSpIndex;

        //collisionHandler(sp);

        console.log(sp1.position.x);

      }  

 

      if(pathSpriteIndex==pathIndex && pathIndex >1)

      {

 

        pathSpIndex = 0;

        pathSpriteIndex = pathSpIndex;

        //collisionHandler(sp);

      }

 

    }  

  }

 

}

 

 

function collisionHandler (obj1, obj2) {

 

    //game.stage.backgroundColor = '#992d2d';

    console.log("hello");

    obj1.rotation = game.physics.arcade.moveToXY(obj1, path[pathSpriteIndex].x, path[pathSpriteIndex].y, 50);

 

}

 

 

function render()

{

  //game.debug.body(test,"#ff6600","#ff00ff");

}

 

Thanks in advance..

[lewster32]

It would be better if you could upload this so I can see it running and see the problem for myself.

[parwaniprakash]

here is the url :- http://sangifashions.com/test/file62.html

 

thanks

[lewster32]

Hmm I see what you mean - this is kinda typical of using physics to do a job that should really be done by a tween. The physics system will be stepping in trying to make sense of the situation, colliding and separating the objects. It would work much better if you either disabled collisions entirely while boarding, or used a tween to handle the boarding instead. This kind of thing is usually done by tweened 'animations' rather than by trying to get the physics system to play nicely in a tight situation.

 

The way I'd do this is have the passengers move towards the bus, and when they collide with the bus, turn off the physics and tween their positions to where they will sit on the bus, and mark them in some way as 'sat on bus'. While they're in this state, they have no physics applied, and simply update their position to be always relative to the bus (you could do this by just using bus.addChild(passenger) and ensuring you translate the position accordingly from world position to bus position so the passenger doesn't suddenly move somewhere off the screen). Then when they disembark, I'd tween them off the bus and re-apply physics, as they're now separate from the bus and need their own physics again.

[parwaniprakash]

I have tried since yesterday.. but I didn't get success.. can you please let me know with a small example.

 

Thanks