Search the Community

I'm starting to use recently pixijsv6.5.0 and I can't put an image in the graphics when click on, but I can change the color by .tint graphics.tint = swapS ? '0x00ff00' : '0xff0000'; Repository: https://github.com/DevAndreAkira/jogo_velha/blob/master/js/script.js How can I use image in place of colors?

I am building a stock chart on PIXI.js. To display different chart styles on chart, I am using PIXI.graphics' drawRect, drawPolygon, lineTo functions. Graphics, Edges, grid lines, text are not sharp in this chart. I would like to say that I've tried several workarounds from the web to make this chart sharp. But those didn't help me. Examples how the chart looks on in candle and area chart styles and renderer parameters are shown in below. const renderer = PIXI.autoDetectRenderer(canvas.width, canvas.height, {view: canvas, antialias: true, transparent: false, resolution: 1}); renderer.view.style.position = 'relative'; renderer.view.style.display = 'block'; renderer.autoResize = true; renderer.backgroundColor = 0xFFFFFF; Area Chart Style Candle Chart Style Would like to hear any advice on the subject. Thanks in advance!

Hi , question about GC or how i can clean canvas2d object after use method generateCanvasTexture game use PIXI.WebGLRenderer - only PixiJs version 4.8.2 (this my pain, but i can`t up pixijs to v5) on class this.data:PIXI.Graphics this.view:PIXI.Sprite .... on sometimes i need redraw data on view this.texture =this.data.generateCanvasTexture(PIXI.SCALE_MODES.LINEAR,1); this.view.texture = this.texture; on next time try to clean this.texture, remove from PIXI.Texture.removeFromCache this.texture .destroy(true); delete this.texture ; but debug console in Safari (tab Canvas) show all Canvas wich created on method generateCanvasTexture, but they never destroyed on memory How i can do clean up memory on it?

Hey guys! I've got one main question, with a few follow ups.. here goes I was wondering if there was a way draw an image onto the PIXI.Graphics (object thingy)? I'm aware I can add sprites to the stage and other containers. But I'm currently drawing polygons, and images (with a dynamic render order), So this seems like a good way to do that. Is there a way of doing this, similar to the plain/vanilla canvas way: var canvas = Dom.get('canvas');var context = canvas.getContext('2d');context.drawImage(source, x, y, w, h, ...); I've tried: var context = pixiRenderer.context;.. but this only returns the following: CanvasRenderingContext2D {} And now for the follow ups: Is the context (2d), unique to the Canvas? Would drawing imaged to the graphics object limit me to the CanvasRenderer, or could I still use PIXI.autoDetectRenderer and PIXI.WebGLRenderer ? Thanks in advance!

The chart that is built on PIXI had sharpness problems and those sharpness problems were solved after avoiding half-integers and linestyle alignment. But now chart has some dark spot when plotting a diversified data in a large number of a dataset and for a small dataset, can't see any dark spot on the chart. I am not sure changes that have done for solving sharpness is causing this problem. Kindly support me to solve this problem.

Is there a way to bind mouse action on PIXI.Graphics line?. I have used below codes to bind action on the line. But the action is bound on all chart area I think, hitArea is not correctly set. this.strategyGraphic.interactive = true; this.strategyGraphic.hitArea = this.strategyGraphic.getBounds(); this.strategyGraphic.click = function (data) { alert('hit rect'); } Would like to hear any advice on the subject. Thanks in advance!

I'm totally in love with Pixi and have been for a while, but I'm running into an issue. So everything gets drawn correctly as it should. Now the issue is when I have to add interactivity to the actual Graphics element. Defining an any properties to the class such as "interactive" or "buttonMode" doesn't get applied to the actual Graphics element. Adding them after calling the super() method doesn't change anything either. I've created a gist including the files used for this exactly: https://gist.github.com/marcus-sa/3ec603f8f9c5d4bb6b0df514a4546c07

Trying to draw a map using rectangles for each grid location - think like Battleship game. Tried to use: for( var i = 0;i < 10; i++ ) for( var j = 0;j < 10;j++ ) { var aRect = new PIXI.Graphics(); stage.addChild( aRect ); aRect.buttonMode = true; aRect.position.x = i * gridSize; aRect.position.y = j * gridSize; aRect.beginFill(0xFFFF00); aRect.lineStyle(1, 0xFF0000); aRect.drawRect(aRect.position.x,aRect.position.y, gridSize, gridSize); aRect.endFill(); aRect.interactive = true; aRect.on('mouseover', onRectangleOver); aRect.on('mouseout', onRectangleOut); aRect.on('mousedown', onRectangleDown); aRect.name = "aRect_" + ( i + 1 ) + ":" + ( j + 1 ); } Yielded a strange grid with large offsets in between - as attached. What I WANT is squares with no spaces in between. Other peculiarities: 1) if I do not set the aRect.position.x/y - the grid DRAWS correctly, but mouseover and clicks don't work. 2) If I change from PIXI.Graphics() to PIXI.textureButton() - it draws and mouseovers and clicks just fine. This is really weird to me. I tried various combinations of localToGlobal and so-on - but always got the offset grid as attached. Any help would be appreciated. Earl

So each player object has a different playername.text_x number. The correct one! But only one is rendered! : ( Why? The constructor is below! var player = function () { var health = new PIXI.Graphics(); health.beginFill(0x00FF00); health.drawRect(0, drawAtY-50, 100/2.2, 6); health.endFill() //console.log("MAN STAGE "+MAIN.stage); MAIN.stage.addChild(health); var text_x; this.drawText = function(){ text_x = Math.abs(768/2) - localPlayer.localX() + drawAtX; this.text_x = text_x; health_shadow.position.x = text_x-25; health_shadow.position.y = drawAtY-100;}