Collide with DIVs and Shoot and slowly destroy?

[ice423cube]

Is there any way you can add div's with JavaScript loaded content into the games?  I would love to be able to have the player interact with the divs bounce off,  have the player interact the divs and even be able to shoot the divs and slowly have them fade away with each hit?  Is that possible?  

[lewster32]

Not natively, you'd probably have to do something whereby an invisible sprite on the game canvas was used to set the position of a HTML element each frame - a little fiddly but do-able.

[ice423cube]

Thanks so much for you help.  Is there any pointers or examples of that you could send me too?  I am really new to this but i have a cool idea i want to implement.  It is a div that loads content from a JavaScript call that is clickable.  If i could have the div's float in and then you can shoot to destroy them that would be awesome.  If you know of any examples or videos or could help out that would be so awesome.  Thanks again for your help.

[lewster32]

There are no examples that I know of, because what you're talking about is quite a unique thing for Phaser. I'd just try experimenting with the idea I suggested above.

[Sebi]

I have posted something similiar a few days ago for pixi.

http://www.html5gamedevs.com/topic/8517-plugin-pixidomsprite/

The limitations to this is that your DOM Sprites will always be on top layer.

This is still experimental and will be worked on soon.

Alternatively, you could use the html2canvas library and render your dom elements to textures for your sprite. (But I wouldn't do that because you will just run out of memory depending on the machine)

[ice423cube]

Thanks so much.  I don't know what Pixi is.  Should i be using something different than Phaser for this?  Is there a better suited gaming platform?  I would need an example because way to new at this to do it on my own ;-)

[Sebi]

Thanks so much.  I don't know what Pixi is.  Should i be using something different than Phaser for this?  Is there a better suited gaming platform?  I would need an example because way to new at this to do it on my own ;-)

Pixi is a webgl/canvas rendering engine, which is also used by Phaser.

You should stay with Phaser, because Phaser is an game engine and gives you all the things you need (physics for example).

However, I didn't look up Phaser source yet, but I'm pretty sure that you should be able to use my DOM Sprites with some minor changes. (Also I do need to fix a few minor bugs in my DOM Sprites anyway)

I'll take a look at phaser sprites when I get some spare time.

[ice423cube]

Pixi is a webgl/canvas rendering engine, which is also used by Phaser.

You should stay with Phaser, because Phaser is an game engine and gives you all the things you need (physics for example).

However, I didn't look up Phaser source yet, but I'm pretty sure that you should be able to use my DOM Sprites with some minor changes. (Also I do need to fix a few minor bugs in my DOM Sprites anyway)

I'll take a look at phaser sprites when I get some spare time.

 

Just curious if you had any time to work on this.  I would love to figure this out and I totally appreciate your time ;-)