Let's Create: A sliding puzzle game in Unity

The sliding puzzle game (also know as fifteen or 15-puzzle) is where you have a grid of squares with one removed, and you need to get them back in the right order.
We'll recreate this in Unity by creating the puzzle pieces, mapping to them the correct part of the image and creating the game logic.
As with all the Let's Create tutorials in the series, we'll focus on creating the core game mechanic, leaving the extra polishing to you. If you have any request for small games you'd like to see in this series please leave a comment.
The full code for this is available on GitHub: github.com/Firnox/SlidingPuzzle
Other videos in the Let's Create series:
1. 2D Sliding Puzzle - [this video]
2. Whack-A-Mole - • Let's Create: Whack-A-...
3. Block stacking game - • Let's Create: A block ...
4. Minesweeper - • Let's Create: Mineswee...
5. Asteroids - • Let's Create: Asteroid...
Contents
0:00 Introduction
0:22 Project setup
2:56 Puzzle piece creation
6:55 User interaction
10:20 Shuffling and checking completion

Пікірлер: 68

  • @jihadpurnomo5744
    @jihadpurnomo574410 ай бұрын

    Thank you so much for this great tutorial! I've really enjoyed every step of the way and feel more confident in developing games now. This tutorial is very informative, easy to follow. I really appreciate your efforts in sharing this knowledge with us. Hopefully there will be more similar tutorials in the future. Thank you again for the time and effort you put into creating this tutorial. You have really helped me achieve my goals in my game development. We hope you continue to share your knowledge and inspiration!

  • @UlpArts123
    @UlpArts123 Жыл бұрын

    Thank you a lot bro it's working properly very useful

  • @alexandersegura9675
    @alexandersegura9675 Жыл бұрын

    Awesome , you re my hero!

  • @orangesecurity3908
    @orangesecurity39083 ай бұрын

    thank you!!!

  • @zevrom41
    @zevrom41 Жыл бұрын

    Hello sir, thank you so much for making this tutorial, I have followed everything and the puzzle is working, I have a question, which part should I change if I want to switch scenes when the puzzle is finished? i'm new in game developing or programming

  • @gmangman123
    @gmangman123 Жыл бұрын

    thx master

  • @eraykoseoglu
    @eraykoseoglu Жыл бұрын

    Hello man. First of all, thanks for the video. How can I reduce the size of the Puzzle? What do I need to fix?

  • @hectorarts
    @hectorarts9 ай бұрын

    Thank you for the tutorial! I am curious how would I implement the animation for transitioning a tile.

  • @FirnoxGames

    @FirnoxGames

    8 ай бұрын

    Rather than immediately changing the local position of the piece in SwapIfValid you could instead start a coroutine that Lerps the position of the tile from it's original position to the destination one over some short time period.

  • @tomekipro1687
    @tomekipro168710 ай бұрын

    nice video, I have question how to make not square but rectangle?

  • @user-ln5zo8vz1w
    @user-ln5zo8vz1w Жыл бұрын

    你好 感謝你的教學 想請問一下我想要在完成拼圖後不要重新洗牌直接關閉畫面並開啟一個UI我該怎麼做 我只知道前面需要先宣告一個UI 再來要修改哪裡就不清楚了

  • @berkeutus8842
    @berkeutus8842 Жыл бұрын

    Hi there i followed you step by step but,my photo's resolution when splitted is worst.How can i fix it?

  • @Ferenc-Racz
    @Ferenc-Racz4 ай бұрын

    I just found your chanel and subscribed. Thank you for your tutorial. Although It was simple, it was really short and very productive! With your tutorial I finally learnt how can handle tiles without grid layout restrictions and how can handle the screen resolution accordingly to cut an image with quads. Thank you very much. I hope you will create more game tutorials in the future.

  • @tuturu9419
    @tuturu94196 ай бұрын

    hello @Firmox i have a problem with the puzzle game. Everything is working fine but in the middle under all the tiles is 1 more full picture of the train.. how can i fix it ?

  • @kasiyellarao8862
    @kasiyellarao886210 ай бұрын

    please explain how to add multiple levels in puzzel game

  • @akiko_le1006
    @akiko_le1006 Жыл бұрын

    Thanks for your video, but i have a question, the layer is always bottom although i draw the image.

  • @nicolenavarro3942

    @nicolenavarro3942

    Жыл бұрын

    I am having the same issue. You can make it higher by changing the z value to a negative number for the game board. How do you make the image appear bigger though?

  • @dotcrazyclips
    @dotcrazyclips Жыл бұрын

    Hi Firnox! Could you add a full reference picture at the corner. it will be extremely helpful.

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    The Let's Create series is designed to be just the core game mechanics specifically so you can add on cool extra details like this to suit your needs. For this the simplest way to achieve this would be to Create->UI->Image. Pin it to, say, the top right corner. Then add in the same image you're using.

  • @dotcrazyclips

    @dotcrazyclips

    Жыл бұрын

    @@FirnoxGames You've got me engaged here; thank you. Next, how can I add a timer to the game? ideas please!!!

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    @@dotcrazyclips The way to do this is to have a variable "float timer = 0;", then when you start playing in the "Update()" method increase this by the elapsed time. So "timer += Time.deltaTime", Time.deltaTime is a special unity thing that lets you know how much time has elapsed since the last update. With this you'll have a variable that is holding the elapsed time, all that's left is to display it. Create a UI TextBox and get a reference to that in your GameManager script. Then you can update the Text in the text box with your timer value in your Update() function too. Hopefully that makes sense!

  • @thala9041
    @thala9041 Жыл бұрын

    Hi, thanks for this awesome tutorial! It really helped me out :D. I just have a single problem when it comes to the "shuffling and checking completion" at the end of the video, maybe u can help me out^^. When i at these to the Script, my Unity is freezing the moment I start the Game. I don't know why this happens in my case. maybe i placed them wrong in the Script? I am new to coding and try to get the hang of it, but I can't see the mistakes I might have done. hope someone can help me ^^

  • @lawrenceokeogheneinyang6526
    @lawrenceokeogheneinyang6526 Жыл бұрын

    Hello, is it possible to make a tutorial where you do this with 3 or more pictures? Like after a picture is solved, the level is completed, and a new picture puzzle comes in

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    Hey, the part of the code where the image is assigned to the piece is the mr.sharedMaterial = newMat line. So to do this what you could do to do this is change the definition of this into a list: [SerializeField] private List newMat; And assign several materials with your different images on and assign them in the inspector. Then in the WaitShuffle method after waiting but before the shuffle choose a random image (or the next one) and assign it to each of the pieces: foreach (Transform piece in pieces): MeshRenderer mr = piece.GetComponent(); mr.sharedMaterial = newMat[index_of_the_material_you_have_chosen]; }

  • @lawrenceokeogheneinyang6526

    @lawrenceokeogheneinyang6526

    Жыл бұрын

    @@FirnoxGames thanks alot!

  • @MSephirroth
    @MSephirroth Жыл бұрын

    thank you for the tutorial. however, please let us know every step you do... at least when I am just starting, I got stuck at your "excellent, that's all working", trying to figure out why it is not. until I noticed it was not working right after you changed the setting to unlit-texture. then I realised you had a mouse down next to the picture so I guessed that maybe you moved the picture to the gamepiece again... no not the case...??..??... ah, you moved the material again! workiiiing yay. I know that for you it is like of course, but your tutorials seem almost good enough for beginners like me, just don't skip some actions you do and it would be great help :D

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    Thank-you for the feedback, I try my very best to articulate every action I take. Don't forget I always upload the full outcome of the tutorial to GitHub so you can always download a fully working copy of the end result!

  • @aceyyasmr
    @aceyyasmr Жыл бұрын

    hi ive followed everything correctly (i think) and rewatched the video multiple times but for some reason i cant get the boxes to move when i click on them i have added the 2D box collider but nothing happens. please help!!

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    Argh, sorry you're having issues. Have you double checked that the Box Collider 2D is on the Prefab (not just a version you have loaded into the scene)? Next question would be in the Console window are there any errors that are showing up? Failing that my next guess would be an error in the SwapIfValid function, if you change that to just "return true;" as the first line (so anything can swap) then see if that works - if so it means the error is with that function. Don't forget there's a GitHub link in the description of the video with the full source code, you could try copy/pasting that in incase there's a minor typo somewhere causing your issues.

  • @MinecraftRedsome

    @MinecraftRedsome

    3 ай бұрын

    Same issue here and still dunno why, everything else is working :/

  • @MinecraftRedsome

    @MinecraftRedsome

    3 ай бұрын

    Auch wenn ich das komplette project download und die richtige Unity Version habe, kllapts bei mir nicht ^^

  • @Peachymochi86
    @Peachymochi86 Жыл бұрын

    Hi - I've nearly completed this tutorial, which has been very helpful, even as a beginner in Unity (though it was hard to follow you at the speed you were going at some points, but I'm guessing this isn't for someone who is new to Unity, but someone who is familiar but hasn't created this kind of mechanic before...) My sticking point is ... why is it that - if the game is NOT shuffling.... and the puzzle IS complete... that you would mark shuffling as true? if the player has completed the puzzle, why would shuffling be true? I'd think, if shuffling = true and game is incomplete, then wait to make sure you don't interrupt the shuffle? It just doesn't make sense to me... or why these two states are even connected... shuffling happens at the start of the game, completion couldn't happen while shuffling is happening because the player wouldn't start playing until shuffling is complete.... so it just seems like a confusing check to perform - and you said yourself, it doesn't make sense to be here, but to be called when the user moves a piece, so why even put it in here in the first place...? why not put it in the OnClick event within the update function? Seems like a wrench thrown in just to get us to think about it and have to fix the bug ourselves.... which I didn't find helpful whether there was a good reason for it or if it was a mechanism for us to think critically about it and put it elsewhere instead... I'm perplexed hahah Also just overall - it was really hard to have so many errors pop up as I follow along, because in many cases you would call a function you have yet to write, and it would either show red squiggly lines, or when I'd save after finishing a function block, but before I'd written a function referenced in said block, I'd get a compiler error and I'd spend time looking into it to realize we just hadn't gotten to creating that function yet - silly hiccup, I know, but when following along and trying to save changes using version control - in can just cause second guessing that is unnecessary and could be avoided - it prob doesn't seem like a big deal when it comes to warnings, but for example, when I was trying to type "Shuffle()" ... after I hit the e, if I hit the open parenthesis or a space, it would autofill with WaitShuffle, because Shuffle() wasn't yet a function in the code, so it assumed I meant the function WaitShuffle and wouldn't let me type in Shuffle() until I created that function below with nothing in it. Might be helpful to just place the functions in as empty functions ahead of referencing them, so people like myself who might not realize why this keeps happening at first don't get frustrated. I even know why it's doing it, and I simply cannot just type "Shuffle()" until I've created the Shuffle function below the WaitShuffle one. Anyway - SUPER helpful tutorial, really! These are just some constructive criticisms for you to consider in making more tutorials. I'd love a tutorial similar to this where the player drags and drop puzzle with square tiles from a puzzle piece tray to the side (square shapes in order to avoid the complexity of puzzle shapes and all...). That type of puzzle is something I'm going to try to build with the knowledge I've learned here). Thanks again!!

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    Thanks so much for taking the time to give a lengthy reply full of constructive criticism. I try my best to balance being beginner friendly but also creating the whole logic within a reasonable space of time which of course pushes the complexity a bit towards someone with more familiarity of the core concepts (of both C# and Unity). I'll try to keep this all in mind whilst doing my next video.

  • @motivationenthusiast6521
    @motivationenthusiast6521 Жыл бұрын

    do you have any suggestion for let's say 2 different puzzles like that but when the one's finished instead of shuffling the pieces program opens the next puzzle

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    As I created the game, the image that's displayed on the GamePiece is defined in the Prefab to be the train_square material. The easiest way to do this is to create a new material with the texture applied as we did before, pass that to the GameManager script into another variable. Then when you want to change the picture you can just loop over the game pieces List and assign the new material: MeshRenderer meshRenderer = piece.GetComponent(); meshRenderer.sharedMaterial = alternativeMaterial;

  • @abman136
    @abman1368 ай бұрын

    That mesh.uv = uv part did not work for me. 6:40

  • @Ember-iz4wz
    @Ember-iz4wz Жыл бұрын

    after doing all the uv stuff my image for some of the cubes are stretched , any way to fix this

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    Are you using a square image? If not it will stretch the image to fit the square, is this the sort of effect you're having?

  • @Ember-iz4wz

    @Ember-iz4wz

    Жыл бұрын

    @@FirnoxGames yes i made sure it was a perfect square in photoshop. but it both stretches and some of the top tiles will have parts of the image that are in the bottom tiles. sry if that doesn't makes sense its kinda hard to explain.

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    Hmm... hard to diagnose with little information I'm sorry. My best guess will be that there is a slight mistake in mapping the UV coordinates. There are a lot of brackets in there, getting some of these wrong, or missing them will have drastic effects. I would have thought it'd be more pronounced that you described but worth a shot: uv[0] = new Vector2((width * col) + gap, 1 - ((width * (row + 1)) - gap)); uv[1] = new Vector2((width * (col + 1)) - gap, 1 - ((width * (row + 1)) - gap)); uv[2] = new Vector2((width * col) + gap, 1 - ((width * row) + gap)); uv[3] = new Vector2((width * (col + 1)) - gap, 1 - ((width * row) + gap));

  • @Ember-iz4wz

    @Ember-iz4wz

    Жыл бұрын

    @@FirnoxGames OMG yup that seemed to work. thank you so much for the help and responding so quickly

  • @ranimbenarbia2615
    @ranimbenarbia2615 Жыл бұрын

    Hi and thank u, I want to display a panel when the game is completed and its not working, can u help?

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    So there's a couple of things you probably want to change. Rather than shuffling everytime it's solved, you want to shuffle once at the start (move the shuffling from update to start) or maybe on a UI button press, then in the Update method keep the check for completion, but instead of starting the shuffle coroutine show whatever gameobject you want. if (!shuffling && CheckCompletion()) { finishedPanel.setActive(true); } You just need to pass whatever UI panel you want into the script with a SerializeField.

  • @ranimbenarbia2615

    @ranimbenarbia2615

    Жыл бұрын

    @@FirnoxGames thank u, u r the best!!

  • @fotoreportaze5797
    @fotoreportaze5797 Жыл бұрын

    Hello. I tried creating new 2D project, but I got this message: Library\PackageCache\com.unity.burst@1.8.4\Runtime\BurstString.Float.cs(1442,21): error CS0103: The name 'Unsafe' does not exist in the current context. Do you have any idea, what might be wrong? This doesn´t show up during 3D projects, only 2D is an issue.

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    I've not come across that error before sorry, perhaps you could try updating the burst library version in the package manager?

  • @fotoreportaze5797

    @fotoreportaze5797

    Жыл бұрын

    @@FirnoxGames I already have the latest burst library version and it didn´t help. Thank you for your time you took to reply anyway.

  • @nabeelsalam4238
    @nabeelsalam4238 Жыл бұрын

    i have a question. the texture is broken down into a square like 3x3, 4x4 etc. what if i want to break it into 3x2 or 5x4 or something which is not a square. i tired to mess with the code but its very complicated. please help...

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    Unfortunately, the way I wrote the code to simplify it I hardcoded it that the grid would be square. This is the "private int size;" bit. You'd need two variables, sizeWidth and sizeHeight and go through the code swapping out the use of size for the appropriate one. That touches a lot of the code, but if you got that all right it should work. Your images would have to be the correct aspect ratio to match the 5x4 else it would look a bit weird - this is one of the main reasons why I made it to work as a square. Sorry it's not a quick fix.

  • @nabeelsalam4238

    @nabeelsalam4238

    Жыл бұрын

    @@FirnoxGames can you guide me how to understand the piece of code where uv is broken down for mesh. Anything i can read about on the Internet. If i understand it i could manipulate it the way i want

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    One of the first videos I did was on applying the UV mapping to a regular polygon which you can find here: kzread.info/dash/bejne/aqaZzLJ6aNSeXbQ.html The core concept around UV mapping is that the texture your mapping has a coordinate system of (0,0) -> (1,1) so you just need to map that to whatever shape you're doing in a meaningful way. The polygon in my example is obviously more complicated but hopefully it shows you the key concept.

  • @nabeelsalam4238

    @nabeelsalam4238

    Жыл бұрын

    @@FirnoxGames thanks bro 👍

  • @robro498
    @robro498 Жыл бұрын

    Hi, are there any ways to make this for a 3d game

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    Do you mean a 3D representation of the puzzle like you'd get in the real life version of this. Or do you mean this sort of puzzle operating on a cube? The former is definitely possible, you could use similar ways to map the UV coordinates of each piece onto flatted cubes to represent the pieces. I'll add this to my list of tutorial ideas. Thanks.

  • @robro498

    @robro498

    Жыл бұрын

    @Firnox thank you and yes I've been able to thanks

  • @shortvideos8177
    @shortvideos8177 Жыл бұрын

    Hello please Im still having trouble I don't want to reshuffle after Completion I want the game to shuffle in the beginning not after completion

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    The best way to do this would be to take the two lines (60&61) shuffling=true and StartCoroutine(WaitShuffle) and put them in the Start method (or in a new function for a new game you add to a button press or something). That will mean that that the shuffle happens at the start. Then in the Update method where you removed those bits from in the if statement you could add some other logic to happen on game completion to handle whatever you want. I hope that helps?

  • @shortvideos8177

    @shortvideos8177

    Жыл бұрын

    @@FirnoxGames thanks I try that out

  • @Lucian-FN
    @Lucian-FN7 ай бұрын

    how do i make the puzzle more harder?

  • @FirnoxGames

    @FirnoxGames

    7 ай бұрын

    The easiest way to make the puzzle harder is to increase the number of tiles in the puzzle. Note that my inefficient initial scrambling technique may need a bit of refinement if you make it a lot harder!

  • @shortvideos8177
    @shortvideos8177 Жыл бұрын

    Hello there I don't know if it's possible for you to make a mobile controller for this

  • @FirnoxGames

    @FirnoxGames

    Жыл бұрын

    Hi, as far as I know the controls should work for mobile. You don't need to use Input.GetTouch because we're only handling a single touch at a time, so the OnClick should work in the UI buttons, and the GetMouseButtonDown and Input.mousePosition should be fine in the game logic. (For what it's worth I believe mousePosition is the average of all touched positions.)

  • @shortvideos8177

    @shortvideos8177

    Жыл бұрын

    @@FirnoxGames what do you do when you don't want the game to shuffle after completion

  • @shortvideos8177

    @shortvideos8177

    Жыл бұрын

    @@FirnoxGames I don't want the game to shuffle after completion please is there a line I should change I just started my coding journey

  • @Oofmania80098

    @Oofmania80098

    Жыл бұрын

    @@FirnoxGames yeah I was wandering the same thing how do we make it so it doesn’t make you switch to a new puzzle

  • @incursiograal9438
    @incursiograal9438 Жыл бұрын

    no me funciona y segui todos los pasos, buen video de todas formas

  • @user-dm2kl7dw2h
    @user-dm2kl7dw2h10 ай бұрын

    u missed 1m steps