Search the Community

I am creating a Rectangle and Adding it to the ViewPort with Code: var rectangle = new Graphics(); rectangle.beginFill(0, 0.001); rectangle.lineStyle(1, 0xFF0000); rectangle.drawRect(5, 5, 200, 100); rectangle.interactive = true; rectangle.buttonMode = true; rectangle.on('pointerdown', onDragStart) .on('pointerup', onDragEnd) .on('pointerupoutside', onDragEnd) .on('pointermove', onDragMoveRectangle); app.viewport.addChild(rectangle); after that I am creating a Sprite using the code and adding it to the rectangle. ( Its basically a handle to increase the width of Rectangle ) const textureMove = PIXI.Texture.from(horizontalMoveSVG); const sprite = new PIXI.Sprite(textureMove); sprite.interactive = true; sprite.buttonMode = true; sprite.width = 25; sprite.height = 25; sprite.anchor.set(0.5); sprite.x = 205; sprite.y = 50; sprite.on('pointerdown', onDragStart) .on('pointerup', onDragEnd) .on('pointerupoutside', onDragEnd) .on('pointermove', onDragMoveSprite); rectangle.addChild(sprite); rectangle.endFill(); the two functions are below: function onDragMoveRectangle() { if (this.dragging) { const newPosition = this.data.getLocalPosition(this.parent); // const newPosition = this.data.getLocalPosition(this.parent); this.x = newPosition.x; this.x = newPosition.y; } } function onDragMoveSprite() { if (this.dragging) { const newPosition = this.data.getLocalPosition(this.parent); // const newPosition = this.data.getLocalPosition(this.parent); this.width = newPosition.x; this.height = newPosition.y; } } Problem I am facing is: If I move Rectangle or a Sprite, both the drag functions got executed, which I don't want. I want to execute only 1 function when rectangle move and other function when the sprite moves. - onDragMoveRectangle will move the rectangle ( changing the position ) - onDragMoveSprite will increase the width and height of the rectangle

Hi, i need help to convert a shadertoy filter (https://www.shadertoy.com/view/7tsfWS) to newest pixijs version filter. Somehow my canvas stays black and i dont know what i do wrong. I prepared sth on pixiplayground: https://www.pixiplayground.com/#/edit/av3kcgJuH2ISiPpSmz4uI Thx already in advance for the help ?

Try out my new game: Meissa Online it is still in beta but fully playable.

Tried the official "hello shader" example with pixi6 but it no longer seems to animate: https://pixijs.io/examples/#/filters-advanced/custom.js I inject PixiJs into a React app. (I don't think this is the issue, since it works fine for everything else I've been doing the past few months.) In this code snippet, useEffect just ensures that the code runs outside the render loop. And the useLayoutEffect block ensures the "uniforms" object and animate callback don't trigger re-renders. The shader will load fine. The app.ticker will run the animation function. But the shader does not animate. ?‍♂️ export function usePixiShader(props: { comp?: Container; uniforms?: Record<string, unknown>; animate?: (filter: Filter, delta: number) => void; }) { const { comp: parent, uniforms, animate } = props; // just gives you the instance of the app const app = useContext(PixiAppContext); const comp = parent ?? app?.stage; const uniformsRef = useRef(uniforms); const animateRef = useRef(animate); useLayoutEffect(() => { uniformsRef.current = uniforms; animateRef.current = animate; }); useEffect(() => { if (!resources || !comp || !app) return; const _shader = ` precision mediump float; varying vec2 vTextureCoord; varying vec4 vColor; uniform sampler2D uSampler; uniform float customUniform; void main(void) { vec2 uvs = vTextureCoord.xy; vec4 fg = texture2D(uSampler, vTextureCoord); fg.r = uvs.y + sin(customUniform); //fg.r = clamp(fg.r,0.0,0.9); gl_FragColor = fg; } `; const filter = new Filter(undefined, _shader, { ...uniformsRef.current, }); comp.filters = [filter]; let animate: undefined | ((delta: number) => void); if (animateRef.current) { animate = (delta: number) => { animateRef.current?.(filter, delta); }; app.ticker.add(animate); } return () => { if (animate) app.ticker.remove(animate); }; }, [app, comp, resources]); return null } // usage usePixiShader({ comp: sprite?.sprite, uniforms: { customUniform: 0, }, animate: (filter, delta) => { filter.uniforms.customUniform += 0.04 * delta; }, });

Hi I've been developing a "sticker mockup generator" using pixijs and here is the result so far: (I used simple plane mesh to bend the png picture on the ground) As you may know stickers come with a white (or transparent) stroke to get die cut. something like this: but my problem is, OutlineFilter from npm packages "pixi-filters" or "@pixi/filter-outline" doesn't work at all and throws this error: cannot read property of undefined: (reading thickness) I use Pixijs 6.0.2 and WEBGL 2 (without html canvas) and here is my code which works just before adding the broken line : import * as PIXI from "pixi.js"; import { OutlineFilter } from "@pixi/filter-outline"; let app = new PIXI.Application({ backgroundColor: 0xdddddd, }); document.body.appendChild(app.view); const loader = PIXI.Loader.shared; const container = new PIXI.Container(); loader.add("images/react.png"); loader.load((ldr, resources) => { const bg = new PIXI.Sprite(resources["images/react.png"].texture); bg.width = 300; bg.height = 300; const outlineFilter = new OutlineFilter(2, 0x002200, 2); bg.filters = [outlineFilter]; // broken line container.addChild(bg); app.stage.addChild(container); }); I also have tried this filter in multiple situations but it didn't work..:(

Hello everyone! I founded solution with correct croping images/videos inside PIXI app. I created test appliction and made some hacks inside pixi-legacy.js and it successfully works for me. When I started implement it inside npm module I found it not so easy. Tryed a lot of everything but still have no luck. Could somebody explain me how correctly hack PIXI and make it work as NPM module? Do I need make some module extensions? My current code definetly cause some core changes because I entered 3 new parameters. So how can I put it all together? Bellow my code: Inside this function FilterSystem.prototype.push = function (target, filters) I added 3 new parameters under "var autoFit = filters[0].autoFit;" : var autoFit = filters[0].autoFit; var autoFitY = filters[0].autoFitY; var autoFitWidth = filters[0].autoFitWidth; var autoFitHeight = filters[0].autoFitHeight; After if(autoFit){...} I wrote this code: //Autofit by height if (autoFitY) { var sourceFrameProjected = this.tempRect.copyFrom(renderTextureSystem.sourceFrame); // Project source frame into world space (if projection is applied) if (renderer.projection.transform) { this.transformAABB(tempMatrix.copyFrom(renderer.projection.transform).invert(), sourceFrameProjected); } state.sourceFrame.fitY(sourceFrameProjected, autoFitWidth, autoFitHeight); } Also I wrote this function. You can add it under Rectangle.prototype.fit = function (rectangle) : /** * Fits by height with determined width and height. * * @param {PIXI.Rectangle} rectangle - The rectangle to fit. * @return {PIXI.Rectangle} Returns itself. */ Rectangle.prototype.fitY = function (rectangle, width, height) { this.x = (rectangle.width - width)/2; this.y = Math.max(this.y, rectangle.y); this.width = width; this.height = height; return this; };

Im new to pixi and im trying to create a chunk system in pixix js. But for some reason is all my cordinates upside down so x is -x and y is -y. I have no idea of whats happening so how can i fix this. <script src="https://pixijs.download/v6.1.1/pixi.min.js"></script> <script src="https://github.com/davidfig/pixi-cull/releases/download/2.0.1/pixi-cull.min.js"></script> <script src="https://github.com/davidfig/pixi-viewport/releases/download/4.31.0/viewport.min.js"></script> const app = new PIXI.Application({autoResize: true, resolution: devicePixelRatio}) document.body.appendChild(app.view) // create viewport const viewport = new pixi_viewport.Viewport({ screenWidth: window.innerWidth, screenHeight: window.innerHeight, worldWidth: 3000000, worldHeight: 3000000, interaction: app.renderer.plugins.interaction }) app.stage.addChild(viewport) viewport.drag().pinch().wheel().decelerate().moveCenter(0, 0) const shader = PIXI.Shader.from(` precision mediump float; attribute vec2 aVPos; attribute vec2 aIPos; attribute vec3 aICol; uniform mat3 translationMatrix; uniform mat3 projectionMatrix; varying vec3 vCol; void main() { vCol = aICol; gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVPos + aIPos, 1.0)).xy, 0.0, 1.0); }`, `precision mediump float; varying vec3 vCol; void main() { gl_FragColor = vec4(vCol, 1.0); } `); const chunk_size = 16 const block_size = 100 var chunks = {} function hexToRgb(hex) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } function pos_string(x,y){ return String(x) + ':' + String(y) } function append_chunk(mesh, x, y){ chunks[pos_string(x,y)] = mesh } function add_chunk(x,y, blocks = new Array(chunk_size * chunk_size)){ const geometry = new PIXI.Geometry() .addAttribute('aVPos', [block_size, 0, 0, 0, 0, block_size, block_size, 0, block_size, block_size, 0, block_size]); geometry.instanced = true; geometry.instanceCount = chunk_size * chunk_size; const positionSize = 2; const colorSize = 3; const buffer = new PIXI.Buffer(new Float32Array(geometry.instanceCount * (positionSize + colorSize))); geometry.addAttribute('aIPos', buffer, positionSize, false, PIXI.TYPES.FLOAT, 4 * (positionSize + colorSize), 0, true); geometry.addAttribute('aICol', buffer, colorSize, false, PIXI.TYPES.FLOAT, 4 * (positionSize + colorSize), 4 * positionSize, true); const ex_chunk = chunks[pos_string(x,y)] if (ex_chunk){ buffer.data = ex_chunk[1].data viewport.removeChild(ex_chunk[0]) } for (const block of blocks) { const x = block.position.x + 1 const y = block.position.y const instanceOffset = (x * y) * (positionSize + colorSize); const block_rgb = hexToRgb(block.color) buffer.data[instanceOffset + 0] = x * block_size; buffer.data[instanceOffset + 1] = y * block_size; buffer.data[instanceOffset + 2] = block_rgb ? block_rgb.r : 0; buffer.data[instanceOffset + 3] = block_rgb ? block_rgb.g : 0; buffer.data[instanceOffset + 4] = block_rgb ? block_rgb.b : 0; } const mesh = new PIXI.Mesh(geometry, shader); mesh.position.set(x * chunk_size * block_size, y * chunk_size * block_size); chunks[pos_string(x,y)] = [mesh, buffer] viewport.addChild(mesh) } // her is where i add and its inverted add_chunk(-1,0, [{position: {x: 0, y: 0}, color: '#ff00ff'}]) add_chunk(0,0, [{position: {x: 5, y: 0}, color: '#0000ff'}]) setTimeout(t, 1000) const cull = new Cull.Simple() cull.addList(viewport.children) cull.cull(viewport.getVisibleBounds()) PIXI.Ticker.shared.add(() => { if (viewport.dirty) { cull.cull(viewport.getVisibleBounds()) viewport.dirty = false } })

Hey Guys, I'm just getting my feet wet with pixi (and html5 game stuff in general). I was wondering what people generally do for UIs in their games made with pixi? I found a related ui library called PUXI, but it seemed rather limited at a quick glance. Would it make more sense to just put actual html elements over the canvas? Or is that dumb... no idea. Appreciate any advice / points in the right direction. Also, using pixi 6 for my current experimentation. Thanks!

Hello. I currently have a strange problem when drawing lines or a rectangle on a existing container. Containers Layout: ---------------------------------- - World : Container -> SceneManager -> GetActiveScene(): Container When the world get's created i get the ActiveScene from the scene manager. But when the graphics object is rendered it has a differant size then its container where it is placed in. Code Snippet: NewScene(sceneOptions: ISceneOptions): boolean { //this.ActiveScene.removeAllListeners(); //this.ActiveScene.destroy(); this.ActiveScene = new Scene(0xe3d8c3); this.ActiveScene.y = 110; this.ActiveScene.width = 900; this.ActiveScene.height = 400; var graphics = new Graphics(); graphics.beginFill(0xffffff); // draw a rectangle graphics.drawRect(0, 0, 900, this.ActiveScene.height - 25); //this.ActiveScene.addChild(Overlay.Instance.Overlay); this.logger.log('New Scene created!'); this.ActiveScene.addChild(graphics); return true; } Hope anyone can help.

I have two functions using same instance of Pixi Graphics to plot rectangles. The first function runs only once and paints 100 rectangles in red color and the other one is a recurring function that runs every 100ms and plots a rectangle in white color. When the first function is executed, the second function continues to plot rectangles in red color, despite specifying color as white. I've posted the same question with code on stackoverflow. Any help is appreciated, thanks! https://stackoverflow.com/questions/67723974/pixijs-graphics-color-bleed-issue

Hi Team ... While seeking a webm there is a strange glitch that happens consistently (replication steps can be found in the attached video: webm-glitch-pixiv6-compressed.mp4). This same glitch does not happen if let the video play undisturbed (i.e. without seeking to random points in time) which rules out the possiblity of the video being corrupt. What are the things that I tried: I tried to see if the previous versions of PIXI (namely v5) had the issue, and surely they did. I tried to apply the pixi-patch from the following links, but they didn't work - https://github.com/pixijs/pixi.js/issues/3526 https://github.com/pixijs/pixi.js/issues/408 The problem seems to be there in multiple versions of PIXI: PIXI v6.0.2: https://jsfiddle.net/zodiacleo/spgzy4x3/17/ PIXI v5.3.3: https://jsfiddle.net/zodiacleo/dbhf2xu9/17/ SpectorJS trace has been attached (file: webm-glitch-spector-error.json) Please let me know if I can provide more information on this. webm-glitch-pixiv6-compressed.mp4 webm-glitch-spector-error.json