TR-i

BeginTextureFill

Recommended Posts

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).

 

Graphic Texture.png

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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 by TR-i

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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 by TR-i

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by TR-i

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.