Jump to content

Search the Community

Showing results for tags 'pixi-filters'.

  • 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 2 results

  1. Hi I've been developing a "sticker mockup generator" using pixijs and here is the result so far: (I used simple plane mesh to bend the png picture on the ground) As you may know stickers come with a white (or transparent) stroke to get die cut. something like this: but my problem is, OutlineFilter from npm packages "pixi-filters" or "@pixi/filter-outline" doesn't work at all and throws this error: cannot read property of undefined: (reading thickness) I use Pixijs 6.0.2 and WEBGL 2 (without html canvas) and here is my code which works just before adding the broken line : import * as PIXI from "pixi.js"; import { OutlineFilter } from "@pixi/filter-outline"; let app = new PIXI.Application({ backgroundColor: 0xdddddd, }); document.body.appendChild(app.view); const loader = PIXI.Loader.shared; const container = new PIXI.Container(); loader.add("images/react.png"); loader.load((ldr, resources) => { const bg = new PIXI.Sprite(resources["images/react.png"].texture); bg.width = 300; bg.height = 300; const outlineFilter = new OutlineFilter(2, 0x002200, 2); bg.filters = [outlineFilter]; // broken line container.addChild(bg); app.stage.addChild(container); }); I also have tried this filter in multiple situations but it didn't work..:(
  2. 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...