I have installed , pixi js via npm , code is working fine in the outside . In the wix developer console , not showing any errors , but in preview or live , it is not working . I am sharing code blocks , please help me , buying a pro premium plan in the wix , still not getting any pro vip support or not any normal support .
I have installed , pixi js via npm , code is working fine in the outside . In the wix developer console , not showing any errors , but in preview or live , it is not working . I am sharing code blocks , please help me , buying a pro premium plan in the wix , still not getting any pro vip support or not any normal support .
Sample code :
import * as PIXI from ‘pixi.js’
import wixWindow from ‘wix-window’ ;
$w.onReady( function () {
var canvasWidth = wixWindow.body.offsetWidth;
var canvasHeight = wixWindow.body.offsetHeight;
var app = new PIXI.Application(canvasWidth, canvasHeight, {
antialias: true ,
transparent: true ,
view: wixWindow.querySelector( ‘#CustomElement1’ )
});
app.stage.alpha = 1 ;
app.stage.interactive = true ;
var layer1 = PIXI.Sprite.fromImage( ‘Image_link’ );
layer1.width = 300 ;
layer1.height = 400 ;
layer1.x = wixWindow.body.offsetWidth / 2 - layer1.width;
layer1.y = 0 ;
var layer2 = PIXI.Sprite.fromImage( ‘Image_link’ );
layer2.width = 300 ;
layer2.height = 400 ;
layer2.x = wixWindow.body.offsetWidth / 2 - layer2.width;
layer2.y = 0 ;
var displacementFilterTexture = PIXI.Sprite.fromImage( ‘image_link’ );
displacementFilterTexture.width = 300 ;
displacementFilterTexture.height = 400 ;
displacementFilterTexture.x = wixWindow.body.offsetWidth / 2 - displacementFilterTexture.width;
displacementFilterTexture.y = 0 ;
var mainContainer = new PIXI.Container();
mainContainer.addChild(layer1);
mainContainer.addChild(displacementFilterTexture);
var additionalContainer = new PIXI.Container();
additionalContainer.addChild(layer2);
var circle = new PIXI.Graphics();
circle.lineStyle( 0 );
circle.beginFill( 0xFF3300 , 0 );
circle.drawCircle( 0 , 0 , 150 );
circle.endFill();
mainContainer.addChild(circle);
additionalContainer.mask = circle;
mainContainer.addChild(additionalContainer);
var blurFilter = new PIXI.filters.BlurFilter( 15 , 8 , 0 , 0 );
var displacementFilter = new PIXI.filters.DisplacementFilter(displacementFilterTexture, 0 );
displacementFilter.blendMode = PIXI.BLEND_MODES.LIGHTEN;
layer1.filters = [blurFilter, displacementFilter];
layer2.filters = [displacementFilter];
app.stage.addChild(mainContainer);
setMoveHandlers(app, circle, displacementFilter);
function setMoveHandlers(app, circle, displacementFilter) {
app.stage
.on( ‘mousemove’ , onPointerMove.bind( null , circle, displacementFilter))
.on( ‘touchmove’ , onPointerMove.bind( null , circle, displacementFilter));
}
function onPointerMove(circle, displacementFilter, eventData)
{
circle.position.set(eventData.data.global.x, eventData.data.global.y);
setTilt( 25 , eventData.data.global.x, eventData.data.global.y, displacementFilter);
}
function setTilt(maxTilt, mouseX, mouseY, displacementFilter) {
var midpointX = wixWindow.body.offsetWidth / 2 ,
midpointY = wixWindow.body.offsetHeight / 2 ,
posX = midpointX-mouseX,
posY = midpointY-mouseY,
valX = (posX / midpointX) * maxTilt,
valY = (posY / midpointY) * maxTilt;
displacementFilter.scale.x = valX;
displacementFilter.scale.y = valY;
}
});
If there are errors please let me know ,how to solve .If not possible can you give some examples , how to deal with any pixi js , please give me an easy example via wix corvid .
Even I can share any easy example via pixi js , if you want .
Thanks in advance …
If there are errors please let me know ,how to solve .If not possible can you give some examples , how to deal with any pixi js , please give me an easy example via wix corvid .
Even I can share any easy example via pixi js , if you want .
Thanks in advance …