If you like puzzles, you may have asked already how to create some of them using Kwik. In this tutorial I will show how to create a common game puzzle: find the correct sequence of images. The logic behind it can be used in many more similar situations. I am using a small board (only 4 pieces) for obvious tutorial size explanation. However, using the basics here, you can build more complex puzzles.
Our game has a board with 4 pieces and your task is to reproduce a particular image (in this sample, you have the reference image to build in the top right of the screen). Each time you touch a piece, it will reveal an image below (or the original image, when the image below is clicked) and show a message informing if the puzzle is solved or not.
The video below shows how to play the game when it is finished.
Creating a new project
After unzipping the file, open the page1.psd file in Photoshop. The file contains the following layers:
- 2 text layers called msg, which will show the text if the puzzle is completed or not, and Build_this (a static text);
- toBuild is the image to be reproduced in the puzzle;
- pA, pB, pC, and pD are the individual pieces of the puzzle;
- pA_pressed, pB_pressed, pC_pressed, and pD_pressed are the individual pieces of the puzzle, when they are “pressed”;
- background is the background of the game;
In Kwik 2, create a new project using the opened file as first page.
Understanding the board
If you are familiar with coding, you may know that there are many different ways to create a puzzle like this one. I am using this particular approach because I think it is the simplest/easiest one but, feel free to use a different route.
Lets visualize the puzzle board as a table (or an array, if you are familiar with other programming languages than Lua). Each piece, in our case 4, should have an unique identifier (most time called index). In my approach we will use a mathematical formula: each index will contain the doubled value of its previous index. For example, piece A will be 1, piece B will be 2, piece C will be 4 and piece D will be 8. Using this approach, we can “learn” when each piece is active or not (the inactive piece will always be 0).
Considering our correct design is B (value 2) and C (value 4), the summation of both contents, 6 in this case, will let our code to know when user completed or not the puzzle.
The board and its variables
Variables are key in this project. They will help you to keep track of user clicks, checking if the puzzle is correctly completed or not.
The first variable we are going to create is one called correct, as it will contain the correct design of the puzzle. As discussed above, it must contain the value of the completed puzzle, in our example the number 6. Still in the Toolset Project and Properties, select the Create Variable option and enter the following:
- name: correct
- value: 6
- content: number
- type: local
- all the rest are optional and can be left as is;
Lets create other variables (each one is described in the comment). Follow the same approach above:
- name: check
- value: 0 (zero)
- content: number
- type: local
- comment: updates every time a piece is clicked
- all the rest are optional and can be left as is;
- name: message
- value: empty
- content: text
- type: local
- comment: holds the text showing if puzzle is correct or not
- all the rest are optional and can be left as is;
- name: a
- value: 0 (zero)
- content: number
- type: local
- comment: holds 0 or 1
- all the rest are optional and can be left as is;
Creates variables b, c and d, using variable a above as example (all of them are set to 0, comments varies according each var. For example, b comment is holds 0 or 2, c comment is holds 0 or 4, and d comment is holds 0 or 8).
Setting the stage
Select all “pressed” layers (pA_pressed till pD_pressed) then hit the Hide layer or group option. It will make all 4 selected layers hidden.
Select layer msg, go to Toolset Layers and Replacements then click Dynamic Text Replacement button. Associate the variable message to this layer. It will inform the user if he/she finished the puzzle.
Creating an action to check if the puzzle is completed
Back to the Toolset Project and Properties, select Actions. Name it act_check and enter the following interactions:
- External code: enter the following check = a+b+c+d (this will sum the contents of all variables);
- IF: variable check, operator EQUAL comparison correct (this compares the value in check with correct). Leave all other fields as is;
- Edit variable: variable message, value Puzzle is correct! (this sends the correct message if check is equal correct);
- Else: radio button Simple (leave all other fields as is);
- Edit variable: variable message, value Puzzle is wrong! (this sends the correct message if check is NOT equal correct);
- End IF
In sum, the above action will compare the contents of variables check and correct, depending on the case, it will update the user with the appropriated message.
Creating the buttons
Each puzzle piece (and their companion “pressed” version) needs to be set as a button. So, select the first layer (pA), go to Toolset Interactions and select Add Button. Use the following information for creating the button:
- name: but_A;
- default state: Layer pA;
- over state:pA;
- type:Tap;
- language group:None;
- language: All;
The interactions are:
- Show/Hide: pick Hide, Layer pA, enable Toggle show/hide, leave the rest as is;
- Show/Hide: pick Show, Layer pA_pressed, enable Toggle show/hide, leave the rest as is;
- IF: variable a, operator EQUAL comparison 0 (zero). Leave all other fields as is;
- Edit variable: variable a, value 1 (remember this variable can be only 0, meaning not pressed, or 1, meaning pressed?);
- Else: radio button Simple (leave all other fields as is);
- Edit variable: variable a, value 0;
- END IF:
- Play Action: action act_check;
Repeat the process for layers pB, pC and pD. Remember to select each layer first, while creating the button. Also, change all references from pA, pA_pressed and variable a by the appropriated layer (if layer pB, use references pB_pressed and variable b).
Copying and paste
A quicker way to create the other buttons is to use the Copy/Paste features. For example, select button but_A and click the Copy interaction button. Then, select layer pB (meaning we are going to paste the contents of button but_A to layer pB). Click the Paste interaction button. The following window will appear:
Instead of using the same ID/name from button but_A, enter the new ID as but_B and click Paste. A new button was just created for you. However, you will need to edit its content to match the current layer. Edit the button and change all references from pA, pA_pressed and variable a by the appropriated layer (if layer pB, use references pB_pressed and variable b). Repeat the process to pC and pD layers.Randomizing the position of the balloons
Now we need to create the similar buttons for the “pressed” layers. Select the first “pressed” layer (pA_pressed), go to Toolset Interactions and select Add Button. Use the following information for creating the button:
- name: but_Apressed;
- default state: Layer pA_pressed;
- over state: pA_pressed;
- type: Tap;
- language group: None;
- language: All;
The interactions are:
- Show/Hide: pick Hide, Layer pA_pressed, enable Toggle show/hide, leave the rest as is;
- Show/Hide: pick Show, Layer pA, enable Toggle show/hide, leave the rest as is;
- IF: variable a, operator EQUAL comparison 0 (zero). Leave all other fields as is;
- Edit variable: variable a, value 1 (remember this variable can be only 0, meaning not pressed, or 1, meaning pressed) – for variable b this value must be 2, for variable c the value is 4 and for variable d the value is 8;
- Else: radio button Simple (leave all other fields as is);
- Edit variable: variable a, value 0;
- END IF:
- Play Action: action act_check;
As you can see, it is pretty much the same button, only inverting the Show/Hide layers. Repeat the process for the other “pressed” layers.
Publish the project and enjoy your puzzle!