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

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

I've taken a look at pixi-viewport and I really like it except for the ease drag part and the fact that it can't return a PIXI.DisplayObject that I can add myself to the stage and render it. t So I have a Pixi.Container I want the camera to move around instead of it inheriting the render and using its own render loop. Basically I want the same result as the Phaser.io Camera Maybe the documentation is just confusing me, but I can't seem to get it to work like I want. Is there any other way to do this? Because I want to have a GUI overlay.