Jump to content

Search the Community

Showing results for tags 'adjustmentfilter'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 1 result

  1. I have to use filter of pixi js like AdjustmentFilter. I got an issue with MAC, I initailised canvas, then I put effects when canvas is loaded. After adding green in filter variable I tied to export my canvas. I got a bad image as you can see bellow // Basic image // Exported canvas //Some code var W = window.innerWidth $(document).ready(function() { const app = new PIXI.Application({ width: W, height: W / 2 }); document.body.appendChild(app.view); // Inner radius of the circle const radius = 100; // The blur amount const blurSize = 32; app.loader.add('grass', 'grass.jpeg'); app.loader.load(setup); function setup(loader, resources) { var containerBG = new PIXI.Container() var containerBlur = new PIXI.Container() app.stage.addChild(containerBG); app.stage.addChild(containerBlur); const background2 = new PIXI.Sprite(resources.grass.texture); app.stage.addChild(background2); background2.width = W; background2.height = W / 2; containerBG.addChild(background2); var filter3 = new KawaseBlurFilter() filter3.blur = 12 filter3.quality = 5 var filter4 = new AdjustmentFilter() filter4.green = 5 const background = new PIXI.Sprite(resources.grass.texture); background.width = W; background.height = W / 2; containerBG.addChild(background); background.filters = [filter4] var circle = new PIXI.Graphics() .beginFill(0xFF0000) .drawCircle(500, 500, radius) .endFill(); containerBlur.addChild(circle) background.mask = containerBlur; var exportCanvas = app.renderer.plugins.extract.canvas(containerBG) console.log(exportCanvas.toDataURL("image/jpeg")) app.stage.interactive = true; app.stage.on('mousemove', pointerMove); } }) If you need more details, I can gie you more, thank you in advance !
×
×
  • Create New...