Today I will show you how to deal with Pixi.js.
It’s Winter holidays and Christmas traditions in Romania like the Bear dance, the Masked carolers and the Goat.
This makes me happy and I will use one image with the Bear dance.
The Pixi.js library provides a fast lightweight 2D renderer.
First, you need to download the javascript pixi.js from pixi github project.
I used two image files: datini.jpg, bur_effect.jpg and one png mask file named mask.png.
The script is very simple:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <html> <title>Page Title</title> <script type="text/javascript" src="pixi.js"></script> </script> <body style="background:black"> <h3 style="color:white" >Demo with PIXI and mask png file type image !</h3> <p style="color:white">I used tree images:</p> <img src="datini.jpg"> <img src="bur_effect.jpg"><br> <img src="mask.png"><br> <p style="color:white">And result is this:</p> <script type="text/javascript"> var renderer = new PIXI.WebGLRenderer(480, 385); document.body.appendChild(renderer.view); var stage = new PIXI.Container(); PIXI.loader.add([ 'bur_effect.jpg', 'datini.jpg', 'mask.png' ]).load(function() { var ground = new PIXI.Sprite(PIXI.utils.TextureCache['bur_effect.jpg']); var light = new PIXI.Sprite(PIXI.utils.TextureCache['datini.jpg']); var mask = new PIXI.Sprite(PIXI.utils.TextureCache['mask.png']); stage.addChild(ground); light.blendMode = PIXI.BLEND_MODES.ADD; // If we comment the next line blend mode will be respected light.mask = mask; stage.addChild(light); renderer.render(stage); }); </script> </body> </html> |
The output is this:
In case you want to see it live the try this link.