Pixi.js how to render texture on polygon

Question

I want to render a texture on polygon using pixi.js, sprites just offer me a square option. i need to change that (top, left), (top, right), (bottom, left), (bottom, right) in order to render a imagen inside it.

http://cl.ly/image/1s2Y2f331h0a/Screen%20Shot%202013-12-16%20at%203.11.02%20PM.png

how can i resolve this?

something like, beginFillBitmap or any other way?

Answer 1

Same here :) I'm investigating if pixi is suitable for my project and the last thing I need is rendering textures on non-rectangles. Only thing I have found so far is masking: http://www.goodboydigital.com/pixi-js-brings-canvas-and-webgl-masking/ . Maybe this can help you.

But it is not enough good for me. I need also ability to repeat texture in X and Y axis. Any other ideas? Or is there another js html5 framework that has that ability?

Answer 2

Use PIXI.mesh.Mesh with Pixi v4 or PIXI.SimpleMesh with Pixi v5.

This is a simple example that works with all kind of renderers (you can paste it in the Pixi Examples page https://pixijs.io/examples-v4/?v=release ):

var app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

// create 3 vertex 2D positions (x, y)
var meshv = new Float32Array(2*3);
var i = 0;
meshv[i++] = 0;   meshv[i++] = 0;
meshv[i++] = 100; meshv[i++] = 0;
meshv[i++] = 100; meshv[i++] = 100;

// create 3 vertex texture coordinate UV positions (u,v)
var meshuv = new Float32Array(2*3);
i = 0;
meshuv[i++] = 0; meshuv[i++] = 0;
meshuv[i++] = 1; meshuv[i++] = 0;
meshuv[i++] = 1; meshuv[i++] = 1;

// create 1 triangle indexes (i1, i2, i3) referencing indexes in the other two arrays
var meshi = new Uint16Array(1*3);
i = 0;
meshi[i++] = 0; meshi[i++] = 1; meshi[i++] = 2;

// create the mesh object
var mesh = new PIXI.mesh.Mesh(
  PIXI.Texture.fromImage('examples/assets/bunny.png'),
  meshv, meshuv, meshi, PIXI.DRAW_MODES.TRIANGLES
);

// attach to the stage, container...
app.stage.addChild(mesh);

You can also use newer Pixi v5 features to a more advanced example like in https://pixijs.io/examples/#/mesh/triangle-textured.js but can be less compatible.

Edit: for wrapping modes (for repeating the texture) check http://pixijs.download/dev/docs/PIXI.BaseTexture.html wrap mode options.