This tutorial focuses on the creation of a simple puzzle game for Android. The concept is straightforward: the user can select an image from a provided list or capture one using the device’s camera. The chosen image is then divided into several puzzle pieces, and the objective is to reassemble them.
Project Setup
To begin, Android Studio should be opened, and a new project created. The project should be named “AndroidPuzzleGame,” with the domain (either personal or company) entered in reverse order. The user should choose a suitable location to save the project.
- In the subsequent dialog, only select the “Phone and Tablet” form factor, and set the minimum SDK to API 16. Proceed by clicking “Next” and choose an “Empty Activity.”
- Click “Next” once more. For the initial activity, it is acceptable to keep the default name, “MainActivity.” Finally, click “Finish” to allow Android Studio to generate the necessary project files.
Before proceeding, it is advisable to restrict the orientation of the MainActivity to portrait mode. To do this, locate and open the AndroidManifest.xml file, then add the appropriate orientation restriction.
Splitting the Image into Pieces
The process begins by loading an image onto the screen and dividing it into multiple rectangular fragments. The user is advised to acquire an image from the internet, with Unsplash being a recommended source, although any image of their choice can be selected. It is recommended to resize the image to a smaller dimension, such as 683 x 1024 pixels. Subsequently, the image should be copied and pasted into the “res/drawable” folder of the project and renamed to a simpler name, like “photo.jpg.”
- Moving forward, the main_activity.xml layout file, located in the “res/layout” folder, should be opened. Using the Design tab, the tutorial suggests deleting the pre-existing “Hello World!” TextView. Next, an ImageView should be dragged and placed at the center of the layout.
- When prompted, the previously added photo should be selected to be loaded into the ImageView. The ImageView’s constraints should be set to 8dp on all sides of the layout, the layout_weight and layout_height should be set to match_constraint, and the scaleType should be set to centerCrop.
- This configuration ensures that the image fills the available space while maintaining its aspect ratio. In case any issues arise, the tutorial provides the XML code for the layout.
- Upon running the app at this stage, it becomes apparent that the image is divided into 12 pieces, with only one piece visible while the others remain hidden behind it. However, the visible piece appears larger than intended. This discrepancy arises because the previous code does not account for the scaled-down size of the image displayed on the screen, but rather relies on the original image’s actual, larger dimensions. To rectify this, additional code needs to be implemented to resize the puzzle pieces accordingly.
Running the code again reveals that the puzzle pieces are now significantly smaller, aligning with the size of the image displayed on the screen.
Dragging the Image Pieces
With the puzzle pieces in place, the focus now shifts to making them draggable across the screen using touch input. To achieve this, a touch listener needs to be added to all the image views that hold the individual pieces.
Enabling Pieces to Snap into Place
Once the pieces can be moved, the next step is to implement a snapping mechanism that automatically aligns them with their original positions when they come close enough.
- To accomplish this, a new class called PuzzlePiece is introduced. This class serves as a container for the pieces and holds relevant information such as the original position and dimensions. Within the MainActivity, the code is modified to utilize this new class, ensuring that each piece object is assigned its respective original x and y coordinates along with the dimensions.
- The touch listener is then updated to incorporate the snapping functionality. If a piece is within a certain tolerance distance from its original position, it will snap into place, and its ability to be moved (canMove property) will be disabled. This prevents further dragging of the piece once it has snapped into position.
- To enhance the user experience, additional adjustments are made. Firstly, when a piece is touched, it is brought to the front, ensuring that it is not obscured by other pieces. Secondly, when a piece snaps into place, it is sent to the back of the stack, preventing it from covering any other movable pieces.
Running the app and placing the pieces back in their original positions becomes easier with the addition of a slight fade effect applied to the original image. This fading effect assists the user in identifying the correct placement for each piece.
Creating the Puzzle Pieces
At this stage, the puzzle game is nearly complete, but the existing pieces do not resemble traditional jigsaw puzzle pieces. In the upcoming section, the pieces will be transformed to have the characteristic appearance that puzzle enthusiasts adore.
To achieve this, the size of the pieces needs to be adjusted. When considering two puzzle pieces and visualizing a rectangle around each of them, it becomes evident that the rectangles overlap. To give the pieces their distinct puzzle shape, one-third of the piece’s width or height will be removed from the overlapping area. Consequently, the pieces will need to expand by one-third on the left and/or top side, except in cases where they are located on the outer edges of the image.
As a result of this transformation, the puzzle pieces will exhibit the familiar characteristics of interlocking jigsaw puzzle pieces, enhancing the overall visual appeal of the game.