Leaderboard


Popular Content

Showing content with the highest reputation since 01/22/20 in all areas

  1. 3 points
    https://valhallaepisodes.com/ This is the first game I've ever made and released to the public. Made in Phaser 3, using React for UI elements. Full list of all technologies are available in game. It's an adventure puzzle game adapted from an old Amiga game of the same name; You must guide the Prince through the castle in order to Reach the Lord of Infinity and take your rightful place on the throne. You must think both logically and laterally to complete your objectives. Hi. This is my very first game created, and I'm happy to take any constructive criticism you guys can throw at me
  2. 2 points
    yulijun

    make jigsaw game with webpack

    tutorial for using pixi.js to make jigsaw game with webpack. try it online : http://testactivity.goooku.com/ishop-demo/jigsaw/index.html source code : https://github.com/proudcat/pixi-jigsaw
  3. 2 points
    charlie_says

    Use PIXI.Graphics as button

    Thanks @ivan.popelyshev I almost replied immediately, explaining that was exactly what I had been trying... Then when I reviewed the code, it transpired I need glasses (actually, I do), I'd made a typo in "event", so of course it didn't work...
  4. 2 points
    mapacarta

    [Phaser 3] Rookie Bowman

    Game Link: https://www.kongregate.com/games/mapacarta/rookie-bowman Hi, I published my game on Kongregate yesterday. I hardly get feedbacks on there, so any feedback is appreciated. It is a platformer game with boss fights, collectible items, secret rooms etc...
  5. 1 point
    Jay Manley

    Tile Rendering Performance

    Hi all, I'm currently working on a new game which uses large tilesets and renders 9 Containers as map layers. Each map contains 24*24 tiles and each tile is 32px*32px. Currently I'm adding each tile from the tileset as a sprite individually (only if the tileIndex for that tile is > 0). So if I were to have a fully loaded map it would contain a total of 5,184 Sprites. I'm guessing that this is inefficient and I feel that I could combine the bottom two layers into a texture, as these are Ground Layers on the map. The player will walk over these anyway and they are unlikely to ever change until the player switches map and thus reducing the Sprite usage by 1,152 (2 layers worth). I've looked at the docs and online examples to see if there's anything that could be helpful here but have been unsuccessful in getting it to work as I'd expect it to. Please help.
  6. 1 point
    I'm having the strangest issue and I was hoping someone might be able to offer guidance. I have a separate renderer running in the background that is using the trick to do pixel perfect click detection with object colors. If I render that separate scene to the screen, everything is fine. But when I use extract (as below) the mirror is somehow mirrored. I'm guessing this is some kind of bug within Pixi.js because it only occurs after you've called resize on the renderer (or application has done it for you). selectColorLogic(mouse: Point): number { const pixels = this.logicRenderer.extract.canvas(undefined); const rawPixels = pixels.getContext("2d").getImageData(mouse.x, mouse.y, 1, 1); const [r, g, b, a] = rawPixels.data; if(a === 255) { return ColorUtils.rgb2hex({r, g, b}); } return -1; } The red and green objects in the below image so it best, but the other 2 are mirrored as well (should be about half height). Does anyone have any idea what might be going on?
  7. 1 point
    space.game Welcome to our open Alpha of space.game! We'll be constantly updating the game and will be adding new features such as online multiplayer, new game modes, accounts, friends, leaderboards, store, and more! Game Description Claim as much territory as you can by strategically flying your spaceship around the map. You’re invincible while inside your territory and can kill anyone entering your space. Outside of your territory, other players can hit your trail and destroy your spaceship. If you hit another player’s trail, you’ll destroy their spaceship. A head to head collision results in both spaceships being destroyed.
  8. 1 point
    Like it. Very charming, juicy neon graphics.
  9. 1 point
    themoonrat

    on events not working on sprite

    asset.interactive = true; Rather than your setInteractive property
  10. 1 point
    Thanks for help! First, I try to replace pixi 5.2.1, the problem still happened. Next, re-creating TextureSystem and resetting the renderer state really have no effect.... But, when I only try to binding baseTexture or "baseTexture.update()" or "baseTexture.setSize()" on every upload, It seem work! Anyway, I try to present the bug and process in detail by video and picture. It use Jsmpeg and FFmpeg trans RTMP stream to yuv data, and convert yuv to rgb texture. Refer attach code above, I use PIXI.resources.Resource to call gl.texImage2D and baseTexture format, and try to update Texture of yuv on every upload. Situation1: No bind baseTexture and call gl.texImage2D every custom updateDataMethod(setUint8Array) , only call gl.texImage2D on upload once. Result: Mesh only show one frame texture data. can't follow video stream to update texture. Situation2: Call gl.texImage2D on upload once, bind baseTexture and call gl.texImage2D every custom updateDataMethod(setUint8Array). Result: Other sprite's texture confuse refer with mesh's texture. Situation3: Only Bind baseTexture every custom updateDataMethod(setUint8Array), and call gl.texImage2D on upload once. Result: It's look good, sprite's texture and mesh's texture correct. Actually, I try to change "this.bind(this.baseTexture)" to "baseTexture.update()" or "baseTexture.setSize()", the result is same. Just like you said, It will change all updateID's , and TextureSystem wlll see that texture was changed on bind. It seem ok, thanks for help to solve that question!!
  11. 1 point
    http://pixijs.download/release/docs/PIXI.interaction.InteractionEvent.html#stopPropagation
  12. 1 point
    Menakatep

    Spritesheet problems

    So, I've been struggling to get spritesheets to work in PIXI. I've got everything hosted on a webserver and have followed the instructions on the documentation for the new way with V5. Its not working and I'm not quite sure where I'm going wrong. PIXI.Loader.shared.add("images/floortiles.json").load(gameStart); function gameStart() { let sheet = PIXI.Loader.shared.resources["images/floortiles.json"].spritesheet; stage = new PIXI.Container(); renderer = PIXI.autoDetectRenderer( 800, 600, {view:document.getElementById("game-canvas")} ); } Now, I'm not sure the best way to go about using the Sprites as I'm still learning; however, I've got something that should load the correct frame from the sheet. grasstile = new PIXI.Sprite(sheet.textures['tile_2.png']); That being said, all of this was successful with separate image files. I just haven't been able to make use of the spritesheet functionality. I would GREATLY appreciate any insight you guys can provide. Thanks!
  13. 1 point
    I expected the visual propety to be deleted, removed from the stage. the cube object exist on the board and when I normally use this command it works fine. later in the code I discard the object and I let the garbage collector "do it's thing": user_cubes[i].pop(); user_cubes[i].pop(); and thanks for the nice greeting into the forums, I am glad to have a place to consult about my PIXI development problems
  14. 1 point
    yulijun

    Pixi.js Showcase

    hi I have made a jigsaw game with pixi.js. hope you guys like it. try it online : http://testactivity.goooku.com/ishop-demo/jigsaw/index.html source code : https://github.com/proudcat/pixi-jigsaw
  15. 1 point
    Hello! PixiJS binds textures automatically, you put a link to texture in shader uniform - and it'll work: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js However, you want to upload texture for yourself. In that case you can use our texture resource API: https://pixijs.io/examples/#/textures/gradient-resource.js You dont need to create gltexture nor to bind it. Just call texImage2D inside "upload" method. As for texture params, you can either set them in baseTexture wrapMode/scaleMode, either override "style" method of resource, it has the same signature as upload. If you worried that PixiJS operations wont be optimal, you can snoop them through https://spector.babylonjs.com/ and see that texture params are exactly the same. Welcome to the forums!
  16. 1 point
    Not complaining or pushing! If it gets done at all, it would make my day. I continue to be impressed by the evolution of the PIXI project. In the course of my own project, I have had to deal with a lot of maths of my own. The worst being implementing BOUNDED 2-finger panzoom up to my high standards of precision/quality or smoothly animating panning and zooming into another point in 2d space and back again. (Those small phone screens really stretch the imagination on how to make a largish game board usable) Of course, that is all 2d transformation stuff at which you guys are probably pros. I mention this to show my empathy for all the additional maths you guys have to deal with. I'll check out the resources to which you directed me. Thanks!
  17. 1 point
    So I've figured there are two main ways to render multiple moving shape objects with PIXI.Graphics. 1) Use only one Graphics instance, clear it on each redraw and simply draw each shape in their new position every tick. 2) Use one Graphics instance per shape object. Draw each one once at the beginning. On each redraw move the graphics instance to their new positions. I'm wondering if I should prefer one method over the other and why?
  18. 1 point
    Usually, its easier to change transforms on individual graphics. However, I do not know architecture of your code, and how do you prefer to write that kind of algorithms. Resetting graphics means pixi will have to call triangulation. It will also re-upload the vertex buffer in case figure has more than 100 vertices. I don't know how to explain it clearly, if you want you can take https://spector.babylonjs.com/ and capture one frame of your app, and see how many webgl commands that mean. Do what is easier for you to do from the coding perspective. It won't be hard to rewrite it later.
  19. 1 point
    I am using "pixijs/pixi-tilemap" library to render maps exported from Tiled, but the rendering frame rate is low. I am newbie and I guess there may be a problem with the rendering loop logic, My thinking is as follows: I have several rendering layers(PIXI.display.Layer) in my game, I call them 'RenderingLayer', there are several cameras in the game (inherited from PIXI.Container), each camera can render multiple 'RenderingLayer' And output to RenderTexture, finally use the PIXI.Sprite group to render the final result according to the depth property of the camera. I use the ECS architecture to implement the game Code of RenderingSystem.update: for ( const camera of this.cameraComponents ) { if ( camera.renderingLayers.length === 0 ) { continue; } // clear stage $app.stage.removeChildren (); // add current rendering camera $app.stage.addChild ( camera.cam ); // collect camera rendering layer for ( const layerName of camera.renderingLayers ) { if ( $app.renderingLayers.has ( layerName ) ) { let layer = $app.renderingLayers.get ( layerName ); if ( layer.visible ) { camera.cam.addChild ( layer ); } } } // rendering camera result Graphics.render ( $app.stage, camera.renderTexture, this.renderTarget ); // clear camera.cam.removeChildren (); } // render final result this.renderSprite.removeChildren (); for ( const camera of this.cameraComponents ) { this.renderSprite.addChild ( camera.renderSprite ); } renderer.render ( this.renderSprite, null, true ); May be frequent use of removeChildren / addChild affects rendering performance?😳 I use the ECS architecture to implement the game, You can find the code for the RenderingSystem class here: js/ecs/systems/rendering_system.js. Another guess might be that I did not use the pixijs / pixi-tilemap library correctly.😲 see here: https://lihaochen910.github.io/RPGMakerProject/ code is here: https://github.com/lihaochen910/RPGMakerProject
  20. 1 point
    d13

    background downloader for pixi.js

    There's an example here: https://github.com/kittykatattack/learningPixi#loading
  21. 1 point
    Looking for some feedback on best practices for handling large texture data. On desktop, it seems I can easily load large textures exceeding 8k on a side; however, mobile fails to render past 4096 pixels on the longest side. Project I'm working on loads schematic views, of sorts - there's a background image on which components are placed. Zoom / pan is implemented from Pixi-Viewport project. These are available as vector, but prototyping as SVG seems to incur a significant performance loss. Not sure if there's a mipmapping approach, or some kind of level of detail such as TileMap. Roughly following the TileMap project... background image is sliced and loaded via multiple frames. Presume source code for the "webgl: zoomin and zoomout / retina webgl: zoomin and zoomout" examples are just https://github.com/pixijs/pixi-tilemap/blob/master/demo/main.js The canvas version doesn't appear to be working: main.js:104 Uncaught TypeError: Cannot read property 'flush' of undefined at update (main.js:104)
  22. 1 point
    Nagaraju

    Multi-Style text

    Working great. Thank you.
  23. 1 point
    PRiSMiWi

    Scratchcard

    Hello, I know this question has been already answered and posted. But I am having a problem trying to achieve this "scratchard effect" https://pixijs.io/examples/#/demos-advanced/scratchcard.js I have it working nice, with a superb brush and drawing nicely from last postiion to new one, when I have one image over another and I apply a mask. It works flawlessly. No complaints at all. The problem is when I want to have this overlay as "standalone" scratchable overlay. What I mean is I want to cover a few sprites, with this overlay and scratch this surface/overlay and draw what it is under it. I am used to PIXIJS 4, and even upgraded to version 5 to try to use BLENDER_MODES.ERASE but it does not work in any way. Is there anyway to: Access overlay sprite texture Paint with the brush so we add ALPHA to the "selected pixels"? In this way i think it does not matter what's below the overlay/scratchable image, as we will draw "holes" on it and see through the sprite. Cheers
  24. 1 point
    ivan.popelyshev

    Fastest way to do masking?

    OK, i recommend to test it for pixi 5.1.5 and 5.2.1
  25. 1 point
    Hi! I'm looking to start with Pixi, and i thought it would be fun to look if i can play around with the Slots from the Examples . Now when i look at the code provided i think i understand de part where the 5 reels are build and filled with 4 random symbols each. The part i don't understand is how it works when spinning the slots it looks like the reels are filled with infinite random symbols. Can someone explain to me in wat part of the code this effect is happening? Code can be found here: https://pixijs.io/examples/#/demos-advanced/slots.js Luffy
  26. 1 point
    Hi, I'm the one who made that example. Here's a short description on how it works. The text uses only one reel as an example as all the others function in the same way: Let's say we have a position where the reel is (reel.position). This position is increased on each frame. Then each sprite is positioned based on that position. When the symbol is detected to be back to start, a new symboltexture is randomized to it.
  27. 1 point
    IF you just created container, it does have width and height 0, because it doesnt have children. Width and Height are calculated properties, and yes, our main example gives a bad idea to people. It was the same way in Adobe Flash, and its completely different from you see in web development. If you dont understand how "pivot","width/height" work, try to make everything without them. consider that graphic coords are relative to center of the screen.
  28. 1 point
    Hi, I'm new to PIXI.js and we just have upgraded our project (floor planning) from v4 to v5.2.0 We set the background to white, draw horizontal and vertical lines, two axis lines and the floor design itself and everything was working on v4 before the upgrade process. the problem that not all lines are visible correctly, some lines disappear on zoom in and appear on zoom out. here is the code for drawing the horizontal and vertical lines: draw(keepCurrentGridSpacing?: boolean) { this.clear(); this.removeChildren(); let backgroundLineSize = this.stage.getPixiConstantBasedOnCurrentScale(PixiConstants.backgroundLineSize, PixiConstants.backgroundLineSizeMax, PixiConstants.backgroundLineSizeMin); let mainAxisLineSize = this.stage.getPixiConstantBasedOnCurrentScale(PixiConstants.backgroundAxisLineSize, PixiConstants.backgroundAxisLineSizeMax, PixiConstants.backgroundAxisLineSizeMin); if (!keepCurrentGridSpacing || keepCurrentGridSpacing.valueOf() === false) { this.updateBackgroundSquareSizeBasedOnScale(); } let fromX = ((-1 * this.stage.position.x) / this.stage.scale.x); let toX = fromX + (this.stage.canvas.getCanvasParentWidth() / this.stage.scale.x); let fromY = ((-1 * this.stage.position.y) / this.stage.scale.y); let toY = fromY + (this.stage.canvas.getCanvasParentHeight() / this.stage.scale.y); let startX = (fromX - (2 * this.backgroundSquareSize)) - ((fromX) % this.backgroundSquareSize); let startY = (fromY - (2 * this.backgroundSquareSize)) - ((fromY) % this.backgroundSquareSize); let endX = toX; let endY = toY; let width = endX - startX; let height = endY - startY; this.beginFill(0xFFFFFF); var color: any = PixiConstants.backgroundColor; this.lineStyle(backgroundLineSize, color); this.drawRect(startX, startY, width, height); // Draw Horizontal and Vertical Lines var i: number; for (i = startY; i <= endY; i += this.backgroundSquareSize) { this.moveTo(startX, i); this.lineTo(endX, i); } for (i = startX; i <= endX; i += this.backgroundSquareSize) { this.moveTo(i, startY); this.lineTo(i, endY); } // Draw Axis this.beginFill(0xFFFFFF); this.lineStyle(mainAxisLineSize, PixiConstants.backgroundAxisColor); this.moveTo(startX, 0); this.lineTo(endX, 0); this.moveTo(0, startY); this.lineTo(0, endY); this.stage.animate(); } private updateBackgroundSquareSizeBasedOnScale(){ let canvasWidth = this.stage.canvas.getCanvasParentWidth(); let canvasHeight = this.stage.canvas.getCanvasParentHeight(); let max = Math.max(canvasWidth / this.stage.scale.x, canvasHeight / this.stage.scale.y); let ratio = max / this.backgroundSquareSize; if (ratio < 10) { while (max / this.backgroundSquareSize < 10) { if (this.backgroundSquareSize == 100) { // Smallest grid size allowed is 1 meter break; } this.backgroundSquareSize /= 2; } } else if (ratio > 20) { while (max / this.backgroundSquareSize > 20) { this.backgroundSquareSize *= 2; } } } i'm sure it would be a small issue but i can't find anyone to help me, appreciate your efforts.
  29. 1 point
    We are lazy. We use a physics engine (or collision library). Wikipedia is quite enlightening. Optimization is done mostly through pruning and partitioning.
  30. 1 point
    Now I won't even have to change the time I can just catch the request... Slightly more trouble upfront (fake the nameserver, serve response), but then I can really get going. But I guess it would prevent the average user from cheating. Couldn't you just save the last used time, and see if it magically decreases... The user is going to corrrect the time again, and if they start up the game, just remove the bonus?
  31. 1 point
    After playing around for a bit I am impressed, and as a lover of Tibia I am excited to see this project develop! Would you talk about your tech stack a bit? (i.e. what you use on the frontend and backend, graphics libraries, etc)? That would be amazing to hear about! Thanks for sharing!
  32. 1 point
    Saadhaider

    [3D]A Twist to Fruit Ninja

    Hi, This is my latest game: Shoot the fruit built using the Playcanvas Game Engine. Name: Shoot the fruit Link to game: https://playcanv.as/b/9ESV9pNM/ Screenshot is attached I am selling this game, DM me for more details Regards
  33. 1 point
    "graphics.parent" Or do you not have link to graphics itself from event listener body?
  34. 1 point
    Hi there, I'm totally new to pixi.js, but somehow managed to do my first steps. Now I am stuck with a problem however. I am trying to use pixi.js for an interactive slide show to blur the upcoming and previous images (as sprites). All works nicely, except that at the blur edge of my left blurred somehow some colors of my right blurred image seem to "spill" in. I am not sure how to describe it best. It seems to me that behind the scenes the images are merged somehow, then blurred all together and then cut off at a slightly incorrect position. I attached a screenshot that demonstrate the issue. Each of the sprite has its own filter (since I need to animate them independently) and the problem does not only happen between the two sprites shown in the image, but also between the other sprite pairs as well, once the slideshow moves on to the next slide. I have tried to change all blur filter settings, padding, kernelSize, quality, blur amount, nothing seems to fix the issue. Does anybody maybe know what the issue could be, and – more importantly, how I can fix it? My setup is quite complex, so I don't know what are the most relevant code snippets that would help you analyze the problem. My hope is that by the visuals of it one of you could make an educated guess about what's wrong. However, here is also the code I have in a gist, just in case: Code If there is any more information I can provide to help solve the problem, please let me know. Thanks! trych
  35. 1 point
    @trych 5.2.1 is here: https://github.com/pixijs/pixi.js/releases/tag/v5.2.1
  36. 1 point
    OK, I'll look at it in a day or two if no one else does it
  37. 1 point
    The fix was made in december and will appear in 5.2.1: https://github.com/pixijs/pixi.js/pull/6270 Two ways how to get it: Use "pixijs.download/master/pixi.js" (map file and typings are in the same folder) Look in the example https://www.pixiplayground.com/#/edit/kuhrhc4jG5QnRRtIfwGwk and copy the bottom part to your app (blurFilterPassApply and the hack) Welcome to the forums!
  38. 1 point
    OK, done, npm 2.0.5 , or "dist" folder of the repo.
  39. 1 point
    eXponeta

    ScratchCard - How much is "painted"?

    Hey! In my case i use canvas 2d render for mathematics calculation and RenderTexture for view. I update image on both, but math texture is 512, when view texture is 2048. Why? Because there are some botlenecks: 1. GPU is waiting when you request pixels from GPU to CPU for calculating. I got lag about 30ms when request 2048x2048 texture on mobile, this is long time, and drops framerate twice. Reading of 512 is faster, but in some cases you can use smallest images. 2. Iteration over buffer with 512x512 (or more) pixels is very heavy. I pass this task to Web Worker. (Really i use adaptive resolution for filling percentage calc: 16x16 for <10%, 128x128 for <25%, 256x256 < 75%< 512x512 > 95%) Is best way: use RenderTexture for painting and visuallise in main thread, then use OffscreenCavas for Chrome with 2d context for percentage mathing in WebWorker directly. For other browsers use getImageBitmap or gl.readPixels, and then pass pixel buffer to worker.
  40. 1 point
    Karg

    complex games with html5

    you can use any frameworks or game engines that can export to various flavours of browser content (js/canvas/webgl, webassembly) to make any game. if you meant complex game-play, the only limit is the sky 😛 if it's complex content (lots of graphics, animations, music, sounds), then yeah, there are limitations on what you can achieve for web. the main limit i see is the size, but here the discussion would diverge into: would you like you game available as web desktop, web mobile over wi-fi, web mobile over mobile data? a common denominator would be to keep the total size of the game below 20MB (code + assets), but with such low size, even you optimize the living hell out of your assets (choose a base resolution way lower than 1920x1080, use dragonbones/spriter for animations, downgrade the quality of music) you won't achieve the quality and quantity of assets of any of the aforementioned games. alternatively, you can use asset bundles and stream music/sounds on demand, but then if the player plays it on mobile data, can he afford the data charges for these dynamic loaded assets? as alternative 2, you can offer your game as a pwa (progressive web app), in which case some of these restrictions can be avoided (although the support for this is not wide-spread and probably only available to newer mobile devices and mobile operating systems). the second restriction is performance for canvas/webgl, where you have to use as fewer textures as possible to keep the draw calls low and maintain a steady fps. in this case, you'll probably want only a couple of 2048x2048 textures active at a time, and as you can guess, you won't reach the same level of quality as the games you've pointed to.
  41. 1 point
    Actually, I do not consider html5 as a way to earn money for now. It's a hobby for me and maybe only in the future, I'll be able to do freelancing. Nowadays I just try to use decent financial tools in order to keep my money save. For example, on this review, I found information about one visa credit card. It's quite advantageous because it has no yearly fees.
  42. 1 point
    ivan.popelyshev

    custome Event for pixi

    add a container inside, add containsPoint() that checks if its in red area. It should be easy if you know equations for square and circle.
  43. 1 point
    jasonsturges

    Change cursor view in PIXI.js

    Since this is the #1 Google Search result for changing Pixi cursor, just noting the URL appears to have updated: https://pixijs.io/examples/#/interaction/custom-mouse-icon.js
  44. 1 point
    enpu

    Panda 2 Tips & tricks

    How to display icons in your projects list instead of screenshot? Just place icon.png file in the root of your project. Optimal size is 120x120.
  45. 1 point
    It's actually simple for matter or impact, you just need to pass world instead of scene. super(scene.matter.world, x, y, sprite, frame, option); // if you are using matter // OR super(scene.impact.world, x, y, sprite, frame); // if you are using impact But if you are using Arcade, that creates a problem. you can't just extend Phaser.Physics.Arcade.Sprite. You have to add this line of code. scene.physics.world.enableBody(this, 0); P.S. To solve this kind of problem I created a development setup to custom create classes. IF you like you can check out my setup at github.
  46. 1 point
    Milton

    [Phaser 3] Rookie Bowman

    Very good. A bit like Rick Dangerous, and I always liked that. The sprites could be more clear though. It's hard to tell what's hazardous. Especially the white rocks, and for instance in the picture above, I thought the grass were spikes... It's also not clear where you can fall, or where you can go left/right to a next section. When I entered the section for the second key, my 'right' key was stuck. I don't think it was my keyboard. I thought I was on a conveyor belt but after I pressed escape and continued everything was normal. And then there are some typos. Key instead of keys, looby instead of lobby, and probably some more. (Great word though, looby)
  47. 1 point
    samme

    Tween inside mouseover event

    var tween = (undefined).add({ targets: heart, alpha: { value: 0, duration: 3000, delay:2000}, });
  48. 1 point
    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!