How to Create an Unlockable Image Gallery


In this post, you will learn how to create an unlockable Image Gallery for your visual novel. An unlockable image gallery is a display of a collection of images that can be obtained through the gameplay as long as the player fulfills the condition to unlock it in the gallery.

❚ Preparing Assets for the Gallery

Before we start learning how to create an image gallery, we should get familiar with what assets we will need.

❏ All images to display in the Gallery

Obviously, you are going to need all the images that you are going to show in the image gallery.


❏ Action Buttons

Next, you will need a bunch of buttons. We will introduce what kind of buttons you will need one by one.

1. Image Button
   
   This button will be used as an action button that will open a fullscreen display of the images in the gallery.
   
   Create a smaller version of the images that you want to display in the image gallery.
   
   You may use Photoshop to resize the image but if you don't have a Photoshop subscription you may use online tools that offer image resizing on their site. 
   If you want to design another button on your own instead of using a smaller version of your Gallery images, please feel free to do so.

1. Close Image button
   
   This button will be used as an action button to close the full-screen display of an image in the gallery. You may design a custom button for it or you may also create a transparent PNG that will cover the whole screen if you prefer the player to close the full-screen display by clicking on the image instead of a visible button.
   
   
   
2. Exit Button
   
   This button will be used as an action button to exit the Image Gallery later. We have many buttons that are suitable for this on our Resource Library. Feel free to check them out!
   

❏ Background Image for the Gallery

Next, you are going to need a background image for the Gallery. 


Upload all assets in the project's library.

Tips: Upgrade your project to Premium to utilize direct and bulk upload features.

❚ Creating the Image Gallery

Now, it's time to actually create the image gallery.

❏ Create a Screen

1. To start, click the ‘Screen’ tab to enter the screen map.
   
   
   
   
   
   
2. Create a new screen by clicking on this screen. 
   
   
   
   
   
   
3. Name your screen. For this tutorial, we'll name ours as 'Image Gallery'. You may name it, however, suits you. Then, click Create.
   
   
   
   
   
   
4. If a rectangle box appears on the screen you've successfully created a screen.
   
   
   
   
   

❏ Designing the Gallery Screen

1. Once you've created the gallery screen, please select it and click on the Open Screen to enter the screen.
   
   
   
   
   
   
2. Currently, your screen should have nothing in it because it is still a blank screen.
   
   For an image gallery, it is very crucial to make sure that the player will not be able to interact with anything beneath the screen, so you will need to click the ‘Settings’ button and enable the option to prevent this screen from clicking anything beneath it.
   
   
   
   
   
   
3. Now, we can finally design our screen. Open the timeline of the Opening state by clicking on this blue button.
   
   
   
   
   
   
4. Click Add Assets button and add the background image, image buttons, and exit button for the Gallery screen.
   
   
   
   
   
   
5. Select the background image you’ve just added and use Show Image. Position the image however you like and save the changes.
   
   

   Note: If needed, you may use “Fill in Stage” options to scale the image automatically to fill the stage. You can find them in the Library image settings.

   
   
   
   
   
   Select the image
   
   
   
   Use Show Image to show the background image
   
   
   
6. Once you're satisfied with how your background image is looking, select the image button you've added previously.
   
   
   
   
   
   
7. Show the image button by choosing 'Show Button' in the Animations & Commands panel and move the button to a nice position.
   
   
   
   
   
   
8. Repeat Step 6 and Step 7 for the exit button as well.
   
   
   
   
   
   
9. Now, you may not see this but if you open this image gallery on the Preview right now, you'll realize that you have a textbox and options on top of the background image on top of this image gallery and it may not look good on the game. Don't worry though, you can easily hide this!
   
   To hide the textbox, make sure you've exited an asset's settings. If you haven't you can easily do so by clicking on this button.
   
   
   
   
   
   Then, click on the "Global" button to enter the global settings.
   
   
   
   
   
   Look at the panel on your right, there should be a list of actions. Search for "Hide Textbox" and click on it.
   To make your screen look nice, only hiding the textbox may not be enough, so we will also hide text and hide options.
   
   
   
   
   
   
10. When everything is added, we can exit the global setting and save all changes.
    
    
    

❏ Creating the Fullscreen Display


When you've completed all the previous steps, you're actually halfway done! Congratulations for making it up here but we've still got a lot more to go! Let's do this!

Once the basic image gallery is done, it is time to actually show the full-screen display of the images in the gallery.

1. To do this, you need to create a new screen. Go back to the screen map by clicking on the Screen tab.
   
   
   
   
   
   
2. Click Create Screen and name your screen, choose 'Create' to confirm your creation.
   
   
   
   
   
   
3. Open your newly created screen.
   
   
   
   
   
   
4. Same as before, you need to make sure that the player will not be able to interact with anything beneath it so please enable this option within the screen's Settings.
   
   
   
   
   
   
5. Next, click the Add Assets button to add the image you want to display in fullscreen. The basis is only one image per screen.
   
   
   
   
   
   
6. Then, enter the timeline of the 'Opening' state by clicking on this button.
   
   
   
   
   
   
   
7. Select the image, you've just added then add the 'Show Image' animation command. Feel free to position to your liking.
   
   
   Select the image
   
   
   Show the Image
   
   

   TIPS: You may manually scale the image up and down by inputting a number at the Size panel. A value less than 1 will scale down the image, while a value higher than 1 will scale up the image.
   The other way to do this is by going to the Library, selecting the Image and then clicking the 'Fit to Stage' button. If you cannot find this in the library, you need to enable Advanced Settings in the Settings tab.

   
   
   
8. Now, it's time to add a close button to this screen. While you're still in the 'Opening' state, click Add Assets to add the exit button.
   
   
   
9. Select the button when you've added it to enter the asset's settings and then use the Show Button to make the button appear on the screen.
   
   
   Select the Close Image button
   
   
   Use Show Button to show the button
   
   Adjust the position to your liking. If you're using a transparent button, please do not worry. A selected button will be highlighted in red so you may use it to guide where you should position it.
   
   
   
10. When you're satisfied with the positioning, close the Show Button panel by clicking 'Save Changes'. 
    
    
    
11. Then add another animation which is Add Action to the button.
    
    
    
    
    
    Set the action to close this screen by clicking on the Action and choosing Close. Then among the screens list, you may choose the screens you're currently on. For this documentation, we named the screen as Break Room CG so we will use that. Make sure to select Add Action.
    
    
    
    
    
    
    
12. When you play the animation in this state in the Preview, you'll find your image appears behind the textbox.
    You can prevent this from happening by exiting the asset's settings and opening the Global setting by clicking this button.
    
    
    
    
    
    
13. In the Animation and Commands panel, look for Hide Textbox and Hide Text animation and add it to the timeline. This will hide the textbox and the dialogue text when a player opens this full screen display of an illustration.
    
    This is optional but you may want to add Hide Options as well.
    
    
    
    
    
    
14. Save all changes and you're done with this screen.
    

❚ Setting Up the Button

You're done designing the image gallery so it's time to set up buttons that will navigate around the image gallery.


❏ Opening and Closing the Image Gallery

Let's deal with closing the image gallery screen first.

1. Open the Image Gallery screen.
   
   
   
   
   
   
2. Enter the Opening timeline of the screen.
   
   
   
   
   
   
3.  Select the Exit button.
   
   
   
   
   
   
4. Add action to the exit button by clicking this button.
   
   
   
   
   
   
   
5. Select Close in the Action list and choose Image Gallery among the screen list.
   
   
   
   
   
   
6. Click Close to confirm the changes.
   
   
7. Exit the Opening timeline and open the Closing state timeline instead.
   
   
   
   
   
   
8. Previously, we've hidden textbox, text and options in the Opening timeline. This time we need to reverse that.
   
   
   
9. Select Global to enter the global settings.
   
   
   
   
   
   
10. Search Show Textbox, Show Text, and Show Options and add them into the timeline.
    
    
    
    
    
    

    TIPS: For Main Menu, sometimes you do not want these global elements to appear when you close the image gallery. To prevent it from appearing you can create a boolean flag for main menu with intial value is False. Then, add Condition to the above animations, add the main menu flag with False as it value for the condition. Lastly, go to the main menu, set the first page of the main menu to alter the flag to be True and trigger the flag to be False whenever you leave the main menu.

    
    
11. Save changes and you're done with closing the image gallery.
    
    
    
    

Next, let's learn how to set up a button to open the image gallery.

1. Locate the button that you want to set up to open the image gallery.
   
   
2. Select and add action to the button.
   
   
   
   
   
   
3. For the Action, choose Open and select Image Gallery for the screens.
   
   
   
   
   
   
4. Close and save changes.
   

❏ Making the Image Button Unlockable


First of all, let's understand how an image gallery can become unlockable. Here's our plan for the image gallery. There are two important principles that you need to keep in mind:

[list][/list]

• When the image is still locked, it will not appear on the image gallery screen.
• When a player encounters an image for the first time in the game, it will be unlocked thus appearing on the image gallery.

Now you've understood that, let's start making the image gallery truly unlockable. We can do so by utilizing the flag function in the CloudNovel engine.

1. As we understood, we need to use flags to open the Flag section by clicking the Flag tab.
   
   
   
   
   
   
2. While you're in the Flag section, find Add Flag section to start adding flags.
   
   Name your flag as you wish.
   For an unlockable image gallery, you'll need a boolean flag so make sure the flag type is boolean.
   
   Click Add Flag when you're ready to add a flag.
   
   
   
   
   
   
3. Make sure the initial value of the flag is False.
   
   
   
   
   
   
4.  Check the 'Auto-Save' option. This will make sure the game remembers the flag's value and will not reset it to the initial value even after a player closes the game.
   
   
   
   
   
   
5. When you're done, make sure all changes are saved before we move to the next step.
   
   
   
6. Next, let's go to the scene map by clicking the Scene tab.
   
   
7. In the scene map, select the scene with the image you want to unlock and click this green button to enter the selected scene.
   
   
   
   
   
   
8. Look for the page where the player will first encounter the image.
   Then, click the Edit Page button.
   
   
   
   
   
   
9. Enable Advanced settings and scroll down until you see Alter Flag section.
   
   
   
   
   
   
   
   
10. Add the boolean flag of the image that appears on the page.
    
    For this example, the image that appears on this page is the break room image so we will add the Break Room boolean flag to the Alter Flag section. Yours will be different.
    
    
    
    
    
    
11. Make sure the boolean flag is set as True.
    What this means is that when a player plays this page, it will trigger this boolean flag to become true.
    
    
    
12. Save all changes.
    
    
13. Go back to the Image Gallery screen.
    
    
14. Enter the Opening timeline and select the related image button for the image in the previous step.
    
    
    
    
    
    
    
    
15. Click this button to edit the Show Button animation. Alternatively, you can also click Show Button animation from the timeline too.
    
    
    
    
    
    
16. Look for the Condition button on the top corner of the right-side panel. Click on it.
    
    
    
    
    
    
17. A dialogue box will appear and this is where will be adding a condition to play the Show Button animation.
    
    
    
18. Add the same boolean flag you've added in the previous step and confirm the value of this flag is True.
    
    
    
    
    
    
19. Click Close and save all changes.
    
    
    
20. Repeat these steps to all image buttons in the image gallery.
    

❏ Testing the Result in the Preview.
 

Before we call this completed, we can test the result in the Preview tab.

1. Open the Preview tab by clicking on it in the navigation bar.
   
   
2. Open the Image Gallery to make sure the image buttons are hidden properly.
   
   
3. Play the scene.
   
   
4. Open the Image Gallery again and check if the image buttons are finally showing up. If it does, you've successfully created an unlockable image gallery. Congratulations.