jtruax303 Posted March 21, 2019 Share Posted March 21, 2019 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> Quote Link to comment Share on other sites More sharing options...
AnDG Posted March 21, 2019 Share Posted March 21, 2019 This is very simple in PIXI, if you want to consider the z-index of the elements you can use the setChildIndex of their container. Simply, elements added with the same container will be added to the previous element. However, you can use addChildAt or setChildrenIndex to do so. Quote Link to comment Share on other sites More sharing options...
jtruax303 Posted March 21, 2019 Author Share Posted March 21, 2019 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? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.