Popular Content

Showing content with the highest reputation on 10/07/19 in all areas

  1. 1 point
    Hello, forum! I am currently struggling to rework my photography website after having purchased a template several months ago. I did not get the time to do much but now I am little free. In a nutshell, I have 5 Bootstrap-like carousel divs on the first page, representing different types of photography. Of course, each of them has a background image. I would post the website but I do not want to risk "promoting" myself, so I will post (hopefully I get permission by the moderator) the original template: https://theme.madsparrow.me/emilynolan/ . I am not associated with their website. As you can see, the user can scroll through some divs, with its own images. I have managed to use Pixi.js to apply a DepthMap to one of the divs, but I have no idea how I can do for 4 other divs which are supposed to translate into view when the user scrolls, presses RIGHT key or presses next. The code is: <script> let type = "WebGL" if(!PIXI.utils.isWebGLSupported()){ type = "canvas" } PIXI.utils.sayHello(type); let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight}); document.body.appendChild(app.view); let img = new PIXI.Sprite.from("assets/images/albums/portraits/fatacucatel.jpg"); img.width = window.innerWidth; img.height = window.innerHeight; app.stage.addChild(img); depthMap = new PIXI.Sprite.from("assets/images/albums/portraits/fatacucatel-map.jpg"); app.stage.addChild(depthMap); displacementFilter = new PIXI.filters.DisplacementFilter(depthMap); app.stage.filters = [displacementFilter]; app.renderer.view.style.position = "absolute"; app.renderer.view.style.display = "block"; app.renderer.autoResize = true; app.renderer.resize(window.innerWidth, window.innerHeight); window.onmousemove = function(e) { displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) / 40; displacementFilter.scale.x = (window.innerHeight / 2 - e.clientY) / 10; }; </script> --> Needless to say, it is not perfect and has lots of issues, for example the window does NOT autoresize at all and also the animation is horrible, not smooth at all. But at least I would like to be able to append several images to multiple divs. Is this possible in any way, please? I did not work much with JS in my life and I am new to Pixi.
  2. 1 point
    I am using pixi version 4.8.5 and I am trying to access the coordinates of a Sprite when I click on it through its event like this: e.data.global.x e.data.global.y I have also tried like this: e.data.originalEvent.layerX e.data.originalEvent.layerY I want these coordinates to show just above that sprite in the browser an element that I have hidden in my html, but the coordinates that it is giving me from the event do not appear at the same point where I click. Does Pixi have any better way to indicate the coordinates of the browser's DOM and not the container where the sprite is? I think that is my problem. I have also tried: mySprite.getGlobalPosition() In order to obtain the coordinates but he does not give them to me precisely for the DOM. Thanks
  3. 1 point

    300,000 USD Price for HTML 5 Developers

    For a website built in wix.com, thats some serious click bait you give!
  4. 1 point
    sprite.displayWidth for more info check out, http://browsergameshub.com/phaser3-lessons-and-code-pt2/