jtruax303

Members
  • Content Count

    5
  • Joined

  • Last visited

About jtruax303

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I am trying to create a click through image gallery for a project in pixi. You can see in my fiddle when you click on the right side of the screen it adds the next image. The problem is when you click on the left to delete the image it will only delete one and not the rest. Can someone please help me with this issue. If you have any more questions, please feel free to ask. If there is a better solution please let me know. https://jsfiddle.net/jacob_truax/5p4n9a8m/2/ const createSprite = function() { imageCreated = true image = new Sprite(resources[images[step]].texture) image.width = 400; image.height = 300; image.x = left app.stage.addChild(image) step += 1 left += 40 } const removeSprite = function() { app.stage.removeChild(image) step -= 1 } loader.load((loader, resources) => { createSprite() }) nextTag.addEventListener("click", function() { console.log("next") createSprite() }) backTag.addEventListener("click", function() { console.log("back") removeSprite() })
  2. and just to clarify (to make sure I am grasping this), here both sprites are being added to the same container which is the stage for the application "app" correct?
  3. So I have loaded an array of images and added one to my stage. Basically I want to click through the image sprites that I have loaded with the left and right arrow keys. I thought about adding them all to the stage on top of each other and using z-index, but I feel like there would be a better way of filtering though all my loaded images. Plus I read through this documentation and was pretty confused implementing it. Here is my code so far. Its not much as I am new to pixi and still learning, but any information would be helpful. <script type="text/javascript"> let type = "WebGL" if(!PIXI.utils.isWebGLSupported()){ type = "canvas" } PIXI.utils.sayHello(type) // Aliases let Application = PIXI.Application, loader = PIXI.loader, resources = PIXI.loader.resources, Sprite = PIXI.Sprite; //Create a pixi application let app = new PIXI.Application({ width: 2000, height: 2000, transparent: false, antialias: true, resolution: 1 }) //Add the canvas that Pixi automatically created for you to the html document document.body.appendChild(app.view); loader .add([ "lib/book1.png", "lib/book2.png", "lib/book3.png", "lib/book4.png", "lib/book5.png" ]) .load(setup); //Define any variables that are used in more than one function let cam; // Setup function function setup() { // Creating cam sprite from image cam = new Sprite(resources["lib/book1.png"].texture ); cam.width = 400; cam.height = 300; app.stage.addChild(cam) </script>
  4. I am trying to constantly update the source of my PIXI.Sprite(resources.image.texture) to match the source of the image that has entered the viewport, while keeping the same displacement map running constantly. Please tell me if this is not possible, or if there is a better solution. If you need more information please ask and I will happily provide it to my best ability. I am new to Pixi.js too so some code examples would be great. Thank you! I will post the relevant html and javascript below to my most recent (failed) attempt. Here is the link to said project. Here is the link to a semi-working version where the background is not changing as an example of what the displacement map should look like. HTML: <body> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section"> <img src="book5.png"> </article> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section"> <img src="book5.png"> </article> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section" section> <img src="book5.png"> </article> </main> <section class="one"> </section> JS: const sectionTag = document.querySelector('section') const articleTags = document.querySelectorAll('article') const bodyTag = document.querySelector('body') const pixels = window.pageYOffset const pageHeight = bodyTag.getBoundingClientRect().height let originalImage = null let originalImageSource = null sectionTag.innerHTML = '' // Set up a pixi application const app = new PIXI.Application({ width: 2000, height: 2000, transparent: true }) // Add the pixi application to the section tags sectionTag.appendChild(app.view) // Make image equall nothing let image = null let displacementImage = null let displacementImage2 = null // Make a new loader const loader = new PIXI.loaders.Loader() // Load in our image loader.add('image', originalImageSource) loader.add('displacement', 'displacement3.jpg') loader.add('displacement2', 'displacement1.jpg') loader.load((loader, resources) => { // Once the image has loaded, now do this image = new PIXI.Sprite(resources.image.texture) displacementImage = new PIXI.Sprite(resources.displacement.texture) displacementImage2 = new PIXI.Sprite(resources.displacement2.texture) image.width = 2000 image.height = 2000 image.interactive = true image.anchor.y = -0.1 displacementImage.width = 1000 displacementImage.height = 1000 displacementImage2.width = 1000 displacementImage2.height = 1000 displacementImage.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT displacementImage2.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT image.filters = [ new PIXI.filters.DisplacementFilter(displacementImage, 200), new PIXI.filters.DisplacementFilter(displacementImage2, 50) ] // Add the image to the app app.stage.addChild(image) app.stage.addChild(displacementImage) app.stage.addChild(displacementImage2) // add rotation app.ticker.add(() => { displacementImage.x = displacementImage.x + 0.5 displacementImage2.x = displacementImage2.x - 0.5 }) }) articleTags.forEach(article => { document.addEventListener("scroll", function () { if(article.offsetTop - 200 <= pixels){ originalImage = article.querySelector("img") originalImageSource = originalImage.getAttribute("src") } }) })