Search the Community

Showing results for tags 'PIXI.Graphics'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 7 results

  1. 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!
  2. 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.
  3. 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(); = function (data) { alert('hit rect'); } Would like to hear any advice on the subject. Thanks in advance!
  4. I am building a stock chart on PIXI.js. To display different chart styles on chart, I am using' 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}); = 'relative'; = '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!
  5. 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:
  6. 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_" + ( 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
  7. 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;}