Sechgulo Posted September 26, 2017 Share Posted September 26, 2017 Hi, first post and very new to PIXI! I'm trying to figure out how positioning works and how to do it properly. I have a few followup questions which I'll take later. Goal: Having a centered "mask area" where I can count the "unmasking progress" But first off; here is a fiddle. As you can see I have a centerContainer which I add all my sprites and bind all interactivity to. I center all the sprites relative to the app width and height values. I create the renderTexture with the same width and height as onTopOfMask and imageToReveal (400x400). The renderTextureSprite is not positioned and it results in only a corner being "unmasked" (clearly visible if I comment out the masking, it's positioned top left). If I position renderTextureSprite (fiddle) the same way as I've done with the sprites it works but then the brush/unmasking has some weird offset. 1. Is that the way to properly center the sprites etc or is it better to center the container instead? (like so: fiddle) or any other way? 2. When positioning, why does the mask have a weird offset? Fiddling around but not getting any wiser so help is greatly appriciated! dranitski and ivan.popelyshev 2 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 26, 2017 Share Posted September 26, 2017 Yes, you need to position renderTextureSprite, as for brush, you have to use local position relative to renderTextureSprite left-top position, because you want to render brush inside of that texture. Yes, I know that (0,0) of mask sprite is actually center of screen, but I wont use it here, what if you want to scale/rotate it or do other kind of transfirn operation? renderTextureSprite.toLocal(event.data.global, undefined, brush); brush.x += renderTextureSprite.anchor.x * renderTexture.width; brush.y += renderTextureSprite.anchor.y * renderTexture.height; First we take get coordinate in sprite space, then we shift it by anchor, because that's how anchor works for sprite - it just shifts the texture. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 26, 2017 Share Posted September 26, 2017 For your case I suggest to use canvas2d API for drawing, instead of that. drawingCanvas = document.createElement("canvas"); drawingContext = drawingCanvas.getContext("2d"); pixiTexture = PIXI.Texture.fromCanvas(drawingCanvas); function drawBrush() { drawingContext.drawCircle(); //I dont remember API, please consult MDN //you want to count pixels var imageData = drawingContext.getImageData(0, 0, w,h); for (i=0;i<imageData.data.length; i+=4) { ... } //upload drawingCanvas to pixi pixiTexture.baseTexture.update(); } EXTRACT is much slower than texture upload from memory to GPU. So it'll be better if you do manipulations on Canvas2d site , count pixels, then upload it. One more trcik to make drawing in pixi faster: draw the grass to drawingCanvas, and ERASE it with special globalCompositionMode (please consult MDN) https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation That way you wont need mask - you just put drawing sprite on top of revealing sprite, and initially grass just rendered over the sprite. dranitski and Vitalije 1 1 Quote Link to comment Share on other sites More sharing options...
Sechgulo Posted September 26, 2017 Author Share Posted September 26, 2017 @ivan.popelyshev AWESOME! I knew it was something logical, was going crazy there for a while. Thank you very much! Now a followup question: How would I go about using another image as the "renderTexture", so instead of using WxH pixel values use an image instead and therefor being able to count pixels that are not just 400x400. Here is a fiddle with updated assets. Hope that makes sense, not sure how to explain it.. dranitski and ivan.popelyshev 2 Quote Link to comment Share on other sites More sharing options...
Sechgulo Posted September 26, 2017 Author Share Posted September 26, 2017 Oh missed your second reply. Will definitely take a look at that approach! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 26, 2017 Share Posted September 26, 2017 I bless you to use pixi and pure canvas2d to make your awesome project. Don't forget to share the code later, may be we'll make pixi example out of it. Quote Link to comment Share on other sites More sharing options...
Sechgulo Posted November 6, 2017 Author Share Posted November 6, 2017 Hi again @ivan.popelyshev, Picked this up again and I'm curious and stubborn to make it work fully with PIXI before I try the canvas2d API. One thing that I can't figure out. When rapidly moving the mouse (while pointerdown) across the area, the move event seems to not be updating quickly enough which results in "gaps". It's visible if you drag/move quickly in this example, here's also an image that explains what I mean. If I log event.data.global I can in fact see that the registered position is "jumping", i.e. position Y can between events be greater then the brush size which gives those gaps. Tried messing with the InteractionManagers interactionFrequency property but with no effect. I just want to understand why its not registering at a necessary frequency. Is there something obvious or how would I go about solving this, some interpolation? Thanks Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 6, 2017 Share Posted November 6, 2017 Because browser got no events on those. Its impossible to get that data. Only interpolation can save you ) Quote Link to comment Share on other sites More sharing options...
Sechgulo Posted November 6, 2017 Author Share Posted November 6, 2017 Ok, bare with me but in terms of interpolation, would that mean making multiple render calls during the same event with adjusted brush positioning, or whats my thinking? (Trying to grasp what interpolation entails in this scenario) Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 6, 2017 Share Posted November 6, 2017 No, you just have to render container with multiple brushes inside. Just clear that container after render. Sechgulo 1 Quote Link to comment Share on other sites More sharing options...
Sechgulo Posted November 7, 2017 Author Share Posted November 7, 2017 Beautiful! Works like a charm, incredibly smooth Performance seems to be good as well, even with plenty of brushes! ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 7, 2017 Share Posted November 7, 2017 Yeah, it uses batches, I think your brushes has the same texture or same baseTexture. render() over each element cant do that. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.