BeginTextureFill

[TR-i]

Since graphic sprites have no anchors, the only way to position a texture used with BeginTextureFill is the defaultAnchor of the texture. However, changing the defaultAnchor seems to have no effect. I've tried every combination of anchoring and positioning and this is the consistent result (below). Both texture and sprite are the same dimensions (400 x 400).

 

[ivan.popelyshev]

Like in Adobe Flash,

beginTextureFill( { ... matrix: new PIXI.Matrix().translate(dx, dy) } );

you can also scale it and rotate.

> Both texture and sprite are the same dimensions

top-left corner of texture is tied to (0,0) of local graphics coords. In your case (0,0) is a center, right? And texture is not power-of-two so it cant be repeated in webgl.

Edited June 23, 2020 by ivan.popelyshev

[TR-i]

Haven't programmed much Actionscript. I'm creating textures as separate objects that could be applied to a number of sprites. Many of them are procedurally created on canvasses provided by Pixi and some are animated.

I'd like to understand what beginTextureFill assumes about the texture and its placement within the drawing boundaries.

Also, would it be best practice to create all textures at something like 512x512 and how does this affect scaling in sprites that use them?

Edited June 23, 2020 by TR-i

[ivan.popelyshev]

if you use something like "drawRect(-200, -200, 400, 400)" texture left-top will be at its (0,0) e.g. center. You have to provide a matrix that offsets it to -200,-200

power-of-two size needed if you want

1. texture to repeat inside graphics shape

2. ability to generate mipmap (baseTexture.mipmap=PIXI.MIPMAP_MODES.POW2) , thus helping downscaling > 2.

Use extra caution when you are dealing mipmaps on generated textures. I think we coded re-generation of mipmaps if you updated texture, but i can be wrong.

Edited June 23, 2020 by ivan.popelyshev

[TR-i]

Thanks for your help, Ivan. I've finally wrangled my textures into conformance:

(me is a graphic sprite, txtr is a pre-created texture)

me.txtr = txtr;
// ratio between sprite size and texture size
let xr = me.w / me.txtr.canvas.width;
let yr = me.h / me.txtr.canvas.height;
let m = new PIXI.Matrix();
m.scale(xr,yr);
m.translate(-(me.w/2),-(me.h/2));
me.beginTextureFill({texture:me.txtr.canvas, matrix: m});

 

Edited June 24, 2020 by TR-i

[ivan.popelyshev]

btw, why do you even need graphics sprite inside regular PIXI.Sprite ? Do you store many rects in it?

[TR-i]

My project is not a game or website, it's a content delivery and social media platform with built-in authoring. It is metaphorically similar to television in that emphasis is on a kinetic environment that is more presentational than interactive.

Since contributors can define their own space, I can't make assumptions about what they might want to design and have to offer the broadest range of possibilities and still keep the process simple and codeless.

I chose PIXI after hammering all the best supported libraries because, unlike something like p5, screen entities are true objects that can be interacted with.

Further, the implementation is non-conventional and does not run in a browser per se. It uses a standard app (OSX, iOS, Windows, Android) with a browser instance inside it. Code is invisible to the user. The app starts up in an empty HTML5 environment and all objects are created, managed and destroyed in real time. The PIXI library (as well as others) is embedded in the app so that authoring can be done offline.

That's probably TMI but thought I should describe the big picture.

[ivan.popelyshev]

> It uses a standard app (OSX, iOS, Windows, Android) with a browser instance inside it

I know that people use nwjs with pixi for Windows/OSX, as for mobile i honestly dont know which way is the best to embed it

[TR-i]

I'm using Livecode, descendent of Hypercard. Great for interfaces and asset management, terrible for display. Produces executables for OSX-iOS-WIN-ANDoid and though I'm not targetting it, Linux. It even has a very clunky pure HTML5 target.

 

Additionally, the kernal is open source.

Edited June 24, 2020 by TR-i

[TR-i]

The Result: