About
Square Clicker is a 2D puzzle game about activating some rather uncooperative squares. Having gone through two iterations and two different engines, Square Clicker has served as a simple project for me to come back to when trying out new techniques or frameworks to use when making more complicated projects.
Development Info
– Project Type: Game
– Role: Lead Designer
– Tools Used: Phaser, VS Code, Godot, Asperite
– Team Size: 1
– Project Length: 1 Month
Game Info
– Genre: Puzzle
– Platform: PC
– Current Status: In Development
Personal Accomplishments
- Created all the sprite-work myself!
- Learned about and utilized Phaser
- Learned the basics of and utilized Godot
Phaser Development
Early Development & System Design
At the very start of this project, the goal was to simply explore the Phaser framework to get a feel for developing with it. After a bit of work, I created a handful of squares that could toggle between colors. So, I decided to see if I could add enough twists to create a simple puzzle game experience.
The first, and most important twist was simply changing it so the squares couldn’t change themselves.
Next, came two extra types of squares for players to click. Temporary squares that they could place down on open spaces, and broken squares, which would be unusable and unable to alter their color status once clicked.
My idea behind these mechanics was to provide differences between squares that would disrupt the usual flow of activating an area of them. With broken squares being able to make themselves permanent, and temporary squares disappearing, I decided they would be nice complements to each other.
The very first level in Square Clicker (Phaser), featuring four normal squares.
A stage featuring two locations for players to place temporary squares (Blue outlines)
A level featuring four broken squares surrounded by a ring of normal squares.
Level Design & Reception
Creating levels to test potential puzzles was very tedious early on. So, I created a manager that could take strings and convert them to square positions in a level.
With creating and testing levels being easier, I created a batch of 15 levels for players to explore. Play-testing with these levels allowed me to come to the following conclusions:
The mechanics and levels did successfully allow for players to easily trial and error their way through figuring out how the game worked. But some issues did arise in regards to the broken button, mainly due to lack of changing sprite making it hard to remember if it had been clicked on.
The larger levels also instead felt very similar, as the way players would solve one area of squares rarely changed how they would need to solve another. These issues would be the main focus after I switched the project to Godot.
The final level of Square Clicker (Phaser), featuring every square type.
Godot Development
Level Design
While Godot had more features to sift through, once I had an okay feel for them, re-creating Square Clicker in Godot was rather straight forward.
Godot’s scene system likely would have made creating levels easier than with Phaser, but I opted to recreate the string based level manager I used in the Phaser version for level creation.
A comparison of the same level made in both versions of Square Clicker. Phaser on the left and Godot on the right.
System Design
Shown above, broken squares have a different sprite once broken!
A level featuring the charged square mechanic (Top Left).