Add background image to polygons about two.js HOT 9 CLOSED

For sure, thanks for the suggestion. Aside from needing to finish unit tests, I'm not sure what the API should look like for this. Let me know if you have any suggestions. The main option I'm considering is adding Two.Sprite.

from two.js.

Yes, it's a good idea adding Two.Sprite, even in sight of a future implementation of Two.AnimatedSprite.

rect.image = two.makeSprite('images/sprite.png');
rect.animation = two.makeAnimatedSprite(sprites, 100); // sprites is a Two.Sprite array, 100 is the delay between sprites switch

You can give a look to sprite.js too.

from two.js.

Hi.

I started using two.js today and have been trying to make a pretty simple game. With the current build, do you have any advice for a way which I can get background images to work as OP requested?

I have added a pattern definition to the SVG element, but when I try to set the polygon's fill to URL() it seems to get ignored. Any advice?

Thanks

from two.js.

Hey @feenr, sorry for the delay. There is a stop-gap. It requires editing the source of two.js if you're okay with that? In addition this hack only works for the canvas renderer. You can see a version of two.js that has this running here: https://github.com/chrisdelbuck/tribeca/blob/master/app/scripts/third-party/two.js

Basically, every polygon has an image attribute added. You can see this added on line 4492. It also adds width and height properties which are inappropriately named and used as the offset positioning for the image in order to make it centered on the rectangle. This notifies the canvas renderer to render out the image not the normal fill / stroke line 3368. An example of this use case would look something like this:

var img = document.createElement('img');
img.onload = function() {
  var sprite = two.makeRectangle(two.width / 2, two.height / 2, 50, 50);
  sprite.image = img;
  sprite.width = sprite.height = 25;
};
img.src = 'image.png';

Now take this with a grain-of-salt because this solution was produced over a hackathon and has a lot of issues that I probably can't help you with. But, I thought I'd share it nonetheless. Good luck!

from two.js.

Hi jonobr1,

Thanks for the reply. So far I have been working exclusively with the SVG renderer. I actually found a solution for what I was trying to do. I didn't realize earlier that there was an SVG Image tag, so I just replaced my polygon with a group and added an image.

Keep up the good work!

from two.js.

@feenr I wonder what's the detail of your solution ?
Can you please share it. I really appreciate it!
Did you use the original Two.js API only, or have you implemented some custom function into the Two.js ?

from two.js.

@vibertthio here's an early example of using images in the latest dev branch of Two.js: https://jsfiddle.net/jonobr1/Lbu6795r/ works with SVG, Canvas, and WebGL renderers 👍

from two.js.

@jonobr1 Doooooooope!

from two.js.

Nearing completion of tests for imagery in Two.js. Closing out now that the API is squared away and will be shipping with the next release v0.7.0.

from two.js.