Can I add an image to a body within Phaser?

General discussion about the R.U.B.E editor
Post Reply
bvargish
Posts: 26
Joined: Fri Oct 02, 2015 4:17 pm

Can I add an image to a body within Phaser?

Post by bvargish »

I know I can add images to bodies from within R.U.B.E., but is it possible to add them later from within Phaser using RUBE loader imported scenes if I needed to? Also, would it be possible to swap an image?
Last edited by bvargish on Fri Dec 04, 2015 12:01 am, edited 2 times in total.
bvargish
Posts: 26
Joined: Fri Oct 02, 2015 4:17 pm

Re: Can I add an image to a body within Phaser?

Post by bvargish »

Still haven't figured this out. If I assign a sprite to a body using body.sprite = the sprite doesn't move along with the body unless it already has a R.U.B.E. defined image assigned to it. In that case I have 2 images following my body, but the Phaser assigned image sticks around if the body is destroyed. I'm also seeing that the R.U.B.E. assigned image lags a tad behind the body whereas the Phaser assigned image sticks to it. I noticed that body.sprite is always null on R.U.B.E. generated bodies even with attached images, so it seems that I should attach them some other way.

Is this possible, Chris? I see in rube-phaser.js that you are actually updating the images in the positionImages function so perhaps they aren't set up the same way that box2d bodies / sprites created within Phaser are. Not sure why that would be. This might also explain the image lag I'm seeing. I can confirm this lag by comparing a body with a R.U.B.E. attached image vs. a body with a R.U.B.E. attached image with the opacity set to 0 and an additional image attached with body.sprite =. Is this lag a bug or expected behavior?

Additionally, there is a halo around some of my images assigned in R.U.B.E. If I use the body.sprite = sprite in Phaser / image opacity 0 in R.U.B.E. trick the image doesn't have it ever (the bottom stick in the image below vs the top stick). I'm assuming this is a scaling issue that nothing can be done about but wanted to point it out just in case. Also, if I clear my cache in Firefox and reload the page there are no halos. Then if I reload the page again without clearing it the halos appear. Weird.
Capture.PNG
Capture.PNG (10.44 KiB) Viewed 29157 times
iforce2d
Site Admin
Posts: 861
Joined: Sat Dec 22, 2012 7:20 pm

Re: Can I add an image to a body within Phaser?

Post by iforce2d »

Do you have the source code for all this available?
There is a function called updateRubeSprites in rube-phaser.js which positions all the images after each physics step to match the bodies they are attached to. It loops over world.images so if the images you added are not in that array then nothing will be done to them.
See also the onImagesLoaded function in RubeScene.js to see what is done to an image after loading to add it to the scene as a functioning (moving along with a body) sprite.
These functions should give a pretty good idea of what you need to do in order to add another sprite/image of your own after loading.

I'm not sure what could be going on with the halo around the images... perhaps the Phaser forums would be more helpful for that.
bvargish
Posts: 26
Joined: Fri Oct 02, 2015 4:17 pm

Re: Can I add an image to a body within Phaser?

Post by bvargish »

Hi Chris,

I'll send you the source code so you can see the lag and look over phaser-rube.js (I was looking at the wrong rube-phaser.js file before) as you suggest. What I'm wondering is why you are using an images array and having them chase bodies rather than checking if there is an image attached to a body, and if so creating a box2d enabled sprite in Phaser. I could be wrong here, but I think this would completely eliminate the need for the updateRubeSprites function and improve performance. Maybe this lag is irrelevant though, because if all the images lag equally and the debug is turned off it won't matter visually.

In any case, the reason I'm looking to attach images to bodies within Phaser (which is not what you advise in your video I realize) is because I don't want my original images scaled so that all of the line thicknesses in the art is the same. I tried accomplishing this, but between having to adjust the Height (world units) and scaling up my original game after it is fully tested it seems like it would be easier to just add them outside of R.U.B.E. That way I can insure that my graphics are at full scale. Also, I'd like to use animated sprites for some of my box2d bodies and I don't think I can do that within R.U.B.E.
bvargish
Posts: 26
Joined: Fri Oct 02, 2015 4:17 pm

Re: Can I add an image to a body within Phaser?

Post by bvargish »

Figured out that if I set imageScale = 1 in updateRubeSprites then it will essentially turn off the scaling, which would work for me if I attach the images in R.U.B.E. Now I just have to figure out what is causing the images to have a halo around them. This happens in Firefox after I reload the page and in Chrome always. It is specific to the R.U.B.E. attached images and doesn't happen with sprites that are created in Phaser and Box2D enabled.
bvargish
Posts: 26
Joined: Fri Oct 02, 2015 4:17 pm

Re: Can I add an image to a body within Phaser?

Post by bvargish »

Got it! The halo is being caused by line 759 of phaser-rube.js. If I comment it out the halo goes away!

Code: Select all

//img.sprite.tint = rgbToHex(img.colorTint[0], img.colorTint[1], img.colorTint[2]);
bvargish
Posts: 26
Joined: Fri Oct 02, 2015 4:17 pm

Re: Can I add an image to a body within Phaser?

Post by bvargish »

I figured this out by posting in another forum: http://www.html5gamedevs.com/topic/1904 ... ting-body/

Note that with this method, the updateRubeSprites loop that has to be called in Phaser's update function is no longer necessary. This may result in improved performance. If there is a significant performance gain, perhaps the loadImageFromRUBE function could be updated. In that case, removeBodyAndSprites would also need to be updated because the sprite sticks around.
iforce2d
Site Admin
Posts: 861
Joined: Sat Dec 22, 2012 7:20 pm

Re: Can I add an image to a body within Phaser?

Post by iforce2d »

As far as I can tell that would work ok, as long as you only have a single image attached to a body (b.sprite = s;)
To me it seems a quite restrictive not to allow multiple images per body, and does not allow a complete import of a RUBE scene so I'll keep the 'official' loader like it is.
If you do only use a single image per body though, yes it will give you some performance improvement. :)
bvargish
Posts: 26
Joined: Fri Oct 02, 2015 4:17 pm

Re: Can I add an image to a body within Phaser?

Post by bvargish »

Ah, right. Didn't think about that since my project doesn't require multiple images on a body. So far haven't run into any trouble. And I was just able to attach an animated sprite this way :D
Post Reply