Search the Community

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!

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

1. How can I draw closed polygon like the image above but without the diagonal black line that creates/finishes the polygon? 2. Or should I use Phaser.Polygon function at all? Is there some better solution? 3. Is it possible to create rectangle with mask smaller than the rectangle creating the image above? How would I apply border to this solution?

Hi, How is the correct form to enable a graphic draw? Here is my code: // create fn : this.game.physics.startSystem(Phaser.Physics.ARCADE); // posicion del grupo en el escenario: var _y = 0; var _G = this.game.add.group(); for(var i=0;i<20;i++){ var p = this.doSome(i); // trying to create graphics inside a group or sprite ??? if(i>0){ p.x = (50*(i%5)); p.y = _y; } if(i%5==4){ _y = _y+50; } // p.enableBody = true; // p.inputEnabled = true; // p.input.enableDrag(false, true); _G.add(p); // console.log(p); } _G.setAll('inputEnabled',true); _G.callAll('input.enableDrag','input'); // ,parameter _G.x = (this.game.world.width*0.5) - (_G.width*0.75); _G.y = (this.game.world.height*0.5) - (_G.height*0.75); // window.graphics = rect; }, // end create doSome: function(num){ var rect = this.game.add.graphics(100,100); rect.beginFill(0xFF3300); rect.lineStyle(3,0xFFCC33,1); rect.drawRect(-25,-25,50,50); rect.endFill(); var txt = this.game.add.text(0,0,null,{align:'center'}); txt.anchor.setTo(0.5,0.5); txt.x = rect.x; txt.y = rect.y; txt.text = num+1; var gp_ = this.game.add.group(); gp_.add(rect); gp_.add(txt); gp_.name = 'gpo'+num; // gp_.inputEnabled = true; // gp_.mousedown(this.clickable,this); // gp_.inputEnabled = true; // gp_.input.enableDrag(false, true); // console.log(gp_.name,num); return gp_; }, Console sends and error when I am using inputEnabled, and it says p.input is undefined Need some help I'm very beginner with phaser, and don't know clearly how do nested objects work This is what I want to do: - Create a group and move all together - Inside it create two elements: graphic.drawRect, and over it create a text, - I want to drag both elements at same time, so I put them into another group!, or how is it? Well, If somebody have an idea I would be glad! thanks

I am drawing a rectangle around the tile my mouse is over, but it draws a new rectangle every time I go over a new tile. How could I make it update the position of the rectangle instead of drawing a new rectangle every time? if(msX >= tileX * tileWidth && msX <= (tileX + 1) * tileWidth && msY >= tileY * tileHeight && msY <= (tileY + 1) * tileHeight) { var g = game.add.graphics(0, 0); g.lineStyle(2, 0x000000, 1); g.drawRect(tileX * tileWidth, tileY * tileHeight, tileWidth, tileHeight); }