Jump to content

Best practice for creating an arrow though image gallery?


Recommended Posts

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"
      type = "canvas"


    // 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


      //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;




Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...