Search the Community

Hi everyone, Hi Ivan, First of all thanks to Ivan for answering all our questios without loosing your mind . What I have is a sprite (ship) with child container (weapon anchor). Now I want to draw a line (laser) from that container to another sprite (foe). The problem is, I cannot get the global coords of the container, but only the local ones. The workaround with getBounds() seems to return local x/y coordinates as well var anchorWeapon = getByName(sprite.children, 'anchorWeapon'); // get the container for the anchorWeapon var bounds = anchorWeapon.getBounds(); // width and height should be 0 laser.points = [bounds.x, bounds.y, foe.x, foe.y]; // in function call: laser.moveTo(laser.points[0], laser.points[1]); laser.lineTo(laser.points[2], laser.points[3]); I tried to make the line a child of the container itself, but then I cannot use the coords of the foe to line to because we are in local context. What would be the best way to solve this? Thanks a heap! Daniel

I have wrote my own mask fuction and I found a UV problem with shader const sprite = PIXI.Sprite.from(slottexture) const maskFrag = ` varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform sampler2D maskTexture; void main() { vec2 uv = fract( vTextureCoord ); vec4 originalColor = texture2D(uSampler, uv); vec4 maskColor = texture2D(maskTexture, uv); gl_FragColor = originalColor * maskColor.r; } ` const maskTexture = resources.mask.texture maskTexture.baseTexture.mipmap = false; const filter = new PIXI.Filter(null, maskFrag, { maskTexture: maskTexture, }); sprite.filters = [filter]; root.addChild(sprite); and it`s just render a quarter, I dont know why? and change the gl_FragColor = maskColor it`s still render a quarter, so I think it`s a uv problem!

Hi, I am trying to update the basetexture source with different images at different points in my game. In pixi 4 it was easy, we could use BaseTexture.updateSourceImageO , but in Pixi 5 we dont have this at all. Is there any straight forward way to do it in Pixi 5 ? I havent found any s far. Migration to pixi 5 is stalled due to this. Any help is much appreciated. regards, Arin

Pixi is a wonderful library to create html5 games and we love games to create with pixi.js Here is our last game that we create pixi. It took 2 weeks to develop this game with the graphics. We hope you like it. https://www.happykidgames.com/game/scrape-and-guess

Hello, I have a problem with my pixiJS App, i have many sprites that I can move in my scene and my goal and create a plan with collisions between sprites, for that I use the bump plugin and the rectangleCollision fuuntion :https://github.com/kittykatattack/bump/ let collision = b.rectangleCollision(selectCont,c2,true,false,true); It's works (the middle case on the pic)if my sprite have no rotation but if i want to apply a rotation on my sprite the collisions doesen't work (left and right case in the pic). I thnik it's a problem with sprite bounds but i have no idea. Can you help me please ? ?

HELLO! I'm proud to present the Internet Money game commissioned by Internet Money, Pretty Good digital and developed by myself at TandC games. More info here Play it here Thanks to the pixijs guys for their support! I love their library, its a great level for me as I love developing my own game systems, physics, etc etc. Let me know what you think and stay tuned for more Pixijs developed games shortly.

Hi, I am trying to take a snapshot of the main container ( stage) of my application ,which I render on every frame ( customRenderer.render(stage)), and paste that snapshot on the topmost child container of the stage. The code looks like, const snapshot = this._customRenderer.generateTexture(this._stage) const sprite = new Sprite(snapshot ) this._stage.getChildByName("snapshotHolder").addChild(sprite) It takes snapshot alright, but if the stage is scaled down , the sprite even though of actual size of the stage ( lets say 1000x1000), the area covered of it by the snapshot is much less, rest of the area of the sprite is transparent. Not able to understand the logic behind this. I want to take the snapshot of the stage as it is visible (scaled or otherwise). Thanks for your help. -Arin

Hello pixijs forum and devs. I´m currently working on a multiplayer 2d Game. Problem: I'm using pivot for main game scene to follow the Player (in center) everything works okay when i have resolution at 1. -- Thanks for every reply, my english is not very well so ill try to explain throu the photos &code I'll attach some photos to show u my problem PIXIJS Inspector: - Pivot point does not scale properly with resolution. My code for resize and App I have my app declared here as static export class Game { //Create a Pixi Application public static app:any = new PIXI.Application({ antialias: false, // default: false transparent: false, // default: false autoDensity: true, autoResize: true, resolution: window.devicePixelRatio, }); // Resolution & Camera public static WIDTH:number = 728; public static HEIGHT:number = 540; I have own container which contain Game (everything expect UI) dynamic content Game.scene /** Game -> Dynamic container */ public static scene:any = new PIXI.Container(); public static init():void { // Initialize Display.Stage (Layers support) Game.app.stage = new PIXI.display.Stage(); Game.app.stage.addChild(Game.scene); Game.resize(); // call resize funct. .... Game.app.renderer.render(Game.app.stage); } // i took those function from Pixi Forum /* Helper function to resize the game to fit the full screen */ public static resize():void { const WIDTH:number = Game.WIDTH; const HEIGHT:number = Game.HEIGHT; const vpw:number = window.innerWidth; // Width of the viewport const vph:number = window.innerHeight; // Height of the viewport let nvw:number; // New game width let nvh:number; // New game height // The aspect ratio is the ratio of the screen's sizes in different dimensions. // The height-to-width aspect ratio of the game is HEIGHT / WIDTH. if (vph / vpw < HEIGHT / WIDTH) { // If height-to-width ratio of the viewport is less than the height-to-width ratio // of the game, then the height will be equal to the height of the viewport, and // the width will be scaled. nvh = vph; nvw = (nvh * WIDTH) / HEIGHT; } else { // In the else case, the opposite is happening. nvw = vpw; nvh = (nvw * HEIGHT) / WIDTH; } // Set the game screen size to the new values. // This command only makes the screen bigger --- it does not scale the contents of the Game. // There will be a lot of extra room --- or missing room --- if we don't scale the scene. Game.app.renderer.resize(vpw, vph); // This command scales the scene to fit the new size of the Game. let zoom = Camera.activeCamera ? Camera.activeCamera.zoom : 1; Game.scene.scale.set(zoom * (nvw / WIDTH), zoom * (nvh / HEIGHT)); Game.scene.filterArea = new PIXI.Rectangle(0,0, vpw, vph) } export class Camera { .... public static updateView() { if (Camera.activeCamera) Game.scene.pivot.set(Camera.activeCamera.position.x, Camera.activeCamera.position.y); } public setFocus(obj:any):void { this._cameraFocus = obj.position; } // On Update / GameLoop Camera.activeCamera.setPosition(Camera.activeCamera._cameraFocus.x, Camera.activeCamera._cameraFocus.y); ... } Camera.activeCamera._cameraFocus.x is bounded to (referenced) container position - For some reason pivoting player position (container) is not centering container to the middle if resolution is higher. in PlayerInit i have Game.camera.setFocus(this.container) -- My HTML Viewport is: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />

Hi, guys I need your help, i have angular 9 project with lates pixiJs 5.x. my GPU go up until 100% when i run. I see nice article About Angulr & Pixi -> https://medium.com/@hazterisk/how-3-lines-of-code-reduced-cpu-and-memory-consumption-by-13-b451de874701 after implement changes still i get 100% GPU I create issues on https://github.com/pixijs/pixi.js/issues/6578 you will find steps to reproduce and repo