Create a Jigsaw Puzzle Game in Unity
Contact me
In this tutorial, we will go in-depth and learn how to make a jigsaw puzzle game using C# in Unity.
We will start the tutorial with the basics of the Bézier curve, followed by implementing Bézier curves in Unity. We will then move on to creating jigsaw tiles from an existing image using the Bézier curve, generate a jigsaw board from an image, and finally create the jigsaw game in Unity.
Learning Objectives
By the end of this tutorial, you will be able to
- understand the theory and maths behind Bézier curves;
- implement Bézier curves programmatically and visually within the Unity;
- apply Bézier curves to cut an image;
- implement flood fill algorithm to fill pixels within an area defined by Bézier curves;
- create jigsaw tiles from images using Bézier curves;
- apply what you learned above to create a jigsaw puzzle game in Unity;
You will also
- develop problem-solving skills through troubleshooting and debugging potential issues encountered during development; and
- gain confidence using C# programming concepts within Unity.
Download the assets needed for this tutorial from https://faramira.com/downloads/jigsaw/assets_to_dowmload.zip.
Play the finished game
Click Play to start a puzzle. When you finish, click Play again for a harder one with more tiles.
Loads about 40 MB and works best on a computer. See the tutorial page on GitHub
You can find the entire source code of this project in the GitHub repo. https://github.com/shamim-akhtar/jigsaw-puzzle/tree/main
View the Tutorial on YouTube
The tutorial is divided into four broad sections, with each containing one or more subsections.
- Section 1 - Implement Bézier Curve using C# in Unity
- Section 2 – Create a Jigsaw Tile from an Existing Image
- Section 3 – Create a Jigsaw Board from an Image
- Section 4 – Create a Jigsaw Puzzle Game in Unity
You can read these sections as a continuous post divided into pages.