Like FrameMenu, the ImageMenu is an empty game object container that will have its select option objects as children.

1. In Hierarchy, under DefaultPicture, click Create Empty game object and name it ImageMenu.
2. Set its Position (0, −0.5, −0.1) so it's at the bottom of the picture and a little in front.
3. Now we write the ImageMenu script component. In your Scripts folder, create a C# script named ImageMenu and open it for editing.

The ImageMenu script is like the FrameMenu one, but a little more complicated since we're adding scrolling. There will be scroll buttons for next and previous. The three menu items show three of all the possible images in the list. As you scroll, the menu item objects themselves are not replaced; however, their textures will be reassigned.

As you know, the abstract PictureMenu class maintains a list of ClickableObjects. These will be image container objects. In addition, this menu needs two more clickable objects, for the Next and Previous buttons. Also, it will maintain a list of all the image textures to pick from. Let's write the ImageMenu script now and describe it as follows:

File: ImageMenu.cs
using UnityEngine; 
 
public class ImageMenu : PictureMenu { 
 
    public Texture[] ImageTextures; 
    [SerializeField] 
    private ClickableObject nextButton; 
    [SerializeField] 
    private ClickableObject previousButton; 
 
    //The items per page is calculated by the number of images shown at start. 
    private int indexOffset; 
 
    public override void InitMenu() { 
        base.SubscribeClickableObjects(); 
        previousButton.OnClickableObjectClicked.AddListener(ScrollPrevious); 
        nextButton.OnClickableObjectClicked.AddListener(ScrollNext); 
    } 
 
    public override void BeginEdit() { 
        UpdateImages(); 
    } 
 
    public override void ObjectClicked(GameObject clickedGameObject) { 
        Texture texture = clickedGameObject.GetComponent<Renderer>().material.mainTexture; 
        picture.SetTexture(texture); 
        DoneEdit(); // close ImageMenu when one pic is picked 
    } 
 
    private void UpdateImages() { 
        for (int i = 0; i < clickableObjects.Length; i++) { 
            //Sets the texture for the images based on index 
            clickableObjects[i].GetComponent<Renderer>().material.mainTexture = ImageTextures[i + indexOffset]; 
        } 
    } 
 
And we add the scroll functions, 
    public void ScrollNext(Object eventData) { 
        if ((indexOffset + clickableObjects.Length) < ImageTextures.Length) { 
            indexOffset++; 
        } 
        UpdateImages(); 
    } 
 
    public void ScrollPrevious(Object eventData) { 
        if ((indexOffset - 1) >= 0) { 
            indexOffset--; 
        } 
        UpdateImages(); 
    } 
} 

Walking through the code, the ImageMenu class is derived from PictureMenu. We declare a public variable for the list of ImageTextures, and add nextButton and previousButton clickable objects. There's also a private integer that keeps track of the scroll position in the list (indexOffset).

The InitMenu override function makes sure all the clickable objects are subscribed, including the menu items maintained in the parent PictureMenu class and our new scroll buttons.

We have an UpdateImages function that reassigns the textures to the menu option objects, starting at the current indexOffset. The ScrollNext and ScrollPrevious functions, called for the Next and Previous buttons, will increment or decrement the indexOffset.

When a menu option is clicked, we grab its Texture and pass it to the PictureController. Then we're done, so we hide the menu.