From 378e07f9fe0501c082ab606797bf121ee3573e6c Mon Sep 17 00:00:00 2001 From: scottwestover Date: Tue, 3 Sep 2024 15:26:42 +0000 Subject: [PATCH] Publishing Site scottwestover.dev at 7bebf965f7beea8c71336b77d878220322c8600a on Tue Sep 3 15:26:42 UTC 2024 --- post/2024/08/solitaire-phaser-3-tutorial-2/index.html | 4 +++- post/2024/08/solitaire-phaser-3-tutorial-3/index.html | 4 +++- post/2024/08/solitaire-phaser-3-tutorial-4/index.html | 4 +++- post/2024/08/solitaire-phaser-3-tutorial-5/index.html | 4 +++- 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/post/2024/08/solitaire-phaser-3-tutorial-2/index.html b/post/2024/08/solitaire-phaser-3-tutorial-2/index.html index e1ecf8a2..49302f05 100644 --- a/post/2024/08/solitaire-phaser-3-tutorial-2/index.html +++ b/post/2024/08/solitaire-phaser-3-tutorial-2/index.html @@ -101,5 +101,7 @@

When your game refreshes in the browser, we should see the new tableau piles:

Tableau piles

In the code above, we created a new private property called #tableauContainers, which will be an array of Phaser Container game objects. In Phaser, a container is a special type of game object that allows you to place other game objects inside it, and then you can move all of those game objects around by moving the container game object itself. What is unique about a container is that when you place game objects inside the container, the are position relative to the container position. For example, if we placed a container game object at position 50,50, and then we created a new Image game object at position 0,0, and placed this game object within the container, then the Image game object would appear at the container game objects position. There is more you can do with Container game objects, but for now, we are just using our Container game objects to align our cards in our piles.

Next, we created a new private method called #createTableauPiles. In this method, we create 7 Container game objects and line these up on our game board by using the index of our for loop. We then created a nested for loop to allow us to create the number of cards that we need in each pile, and so as we go through each iteration of our loop, we will create more cards for each card pile. Finally, we place each of our card Image game objects in each of the tableauContainer game objects that were created.

With all of the code changes that we have made so far, our game should now look like this:

Solitaire game layout

Summary

All right, with those last changes, that brings an end to this part of the tutorial. In this part of the tutorial, we started to create Phaser game objects and created the main layout for our Solitaire game.

You can find the completed source code for this article here on GitHub: Part 2 Source Code

If you run into any issues, please reach out via GitHub Discussions -, or leave a comment down below.

In part 3 of this series, we will start to add support for handling player input in our game.

Scott Westover avatar
About Scott Westover
Scott Westover is a Software Developer who loves coding, writing tutorials, participating in game jams, and learning about new technologies. When he is not coding, he is either spending time with his wife and two kids or is reading a great book. Scott is looking to form connections and share his knowledge.