Embedded Files
1. After much deliberation, I've decided to use Godot to develop Flower Power. Because I'm the sole dev, I wanted an Engine that a) will be the best suited to the project, and b) has the best tutorials specifically for making a mobile match-3 game. This is the first part of a YouTube series I've found to help me.
2. This is a mockup sketch of the game window, with pixel measurements to make sure everything lines up nicely with a mobile phone screen.
3. This is the very first layout of the game in Godot 4. It has a background, and top and bottom UI. These are all placeholder images.
4. I wrote this code in Godot's own programming language to create the invisible grid that will demark where the placement of board pieces.
5. Here is some more code, which is supposed to instantiate the pieces onto the board.
6. I'm currently having an issue where only one piece spawns in. It randomises which piece, but it's always only one.
7. I had to ask ChatGPT for help, but eventually I figured out that I hadn't set the grid's offset value in the Inspector. This is the board fully populated, and with the UI slightly adjusted to fill empty space.
8. I also noticed that the colours of the previous placeholders were difficult to discern from one another, so I tweaked them in Photopea to be more vibrant.
9. I then added these lines to ensure that the board wouldn't spawn with any pre-existing matches on it. On the right is an example of this working.
10. I then wrote these functions to determine the gird position of where the player touches the screen. For development and testing purposes, I am simulating a touchscreen using standard mouse clicks.
11. Updated the touch_input function. These two functions now make sure that the player cannot access pieces from outside the grid, and to indicate that eligible pieces can be swiped.
12. This controls how the pieces swap with each other when swiped.
Flower Power devlog - swap pieces.webm13. Here is an example of the pieces swapping correctly. I am clicking and dragging to emulate a touchscreen. At the moment, it is possible to swipe in from outside the grid, which creates a bug where the opposite piece spawns in beside the swiped one.
14. This is the new alternative to a 'tween' node, which is supposed to
help with minor animations like the speed at which pieces swap places.
Flower Power devlog - swap animation 01.webm15. Now there is an animation to accompany pieces swapping. It's a bit extreme right now, but I'm planning to go back and tweak it.
Flower Power devlog - swap animation 02.webm16. This is a different version of the available animations. I prefer this one because it doesn't feel quite so extreme, or like the pieces are made of jelly/elastic.
17a. These functions detect when pieces of the same colour are next to each other. The top one is attached to the Piece, and makes matched pieces half-opacity, whilst the bottom one is attached to the Grid. Matches are not destroyed just yet, and do not un-dim if swapped out of a match.
Flower Power devlog - detect matches.webm17b. Here's an example of the match detection system working.
18. I also updated the UI to be a little more illustrative of the final concept.
19. I began sculpting the petals for a daisy, which will become the white piece on the board. This is only one petal, but I will create another for variation.
20. To make sure I could follow the tutorial series properly in the future, I changed how my touch_input function was written to match the video. The commented out lines are the old ones, because I didn't want to delete anything until I was sure the new code would work.
Flower Power devlog - destroy matches.webm21. I've finally got the pieces being destroyed when matched, but I still need to work out how to make the columns drop into the empty spaces.
22. These are the functions that enable matches to be destroyed, and for the columns to collapse down afterwards.. They call on a pair of timer nodes that are attached to the main scene node.
Flower Power devlog - collapse columns 01.webm23. This is how the columns collapse after a match is destroyed. The next step is to fill the empty spaces with random pieces.
Flower Power devlog - collapse columns 02.webm24. Now the empty spaces are filled, and there is a nice animation happening as the pieces spawn in. However, it does not auto detect matches anymore.
Flower Power devlog - collapse columns 03.webm25. The game automatically detects new matches now, and doesn't allow the player to make any more moves until the board has settled. I also tweaked the timer values to make it a lot smoother and more responsive.
26. I created a small state machine, which detects matches as columns are collapsing and removes them.
Flower Power devlog - swap pieces back 01.webm27. The game now registers non-matching pieces and attempts to swap them back into their original position, but there's currently nothing breaking the loop.
Flower Power devlog - swap pieces back 02.webm28. Here the non-matching pieces swap back correctly. I had a minor issue where the was_matched circuit wouldn't end after a successful match, and the player would be stuck in the wait state. To the left are sections of the code that allow this.
29. I wrote a new function to create and maintain an irregular board shape. It is referenced in the collapse_columns and refill_columns functions.
30. This is the planned layout for Level 1.
Flower Power devlog - hold board shape.webm31. This is how the board looks with the restricted_movement function operating. I can change this layout at any time, because the coordinates for the empty spaces are exposed in the editor, not hard-coded.
33a. I've got the dewdrop pieces to spawn on the board and in the correct positions, but there's something funky happening with the dimensions.
33b. With the scale issue fixed, I've also realised that the dew placeholders are barely visible.
33c. I've adjusted the size and vibrance of the droplet, but it's still not as visible as I would like it to be. This will require some trial-and-error with the final illustration to get right.
34. In the dewdrop script, I was able to add an effect to illustrate how much health the droplet has remaining. At present, it has 2 health and matching pieces within it deal 1 damage. This video demonstrates this process working.
Flower Power devlog - destroy dewdrops.webmFlower Power devlog - destroy dewdrops 02.webm
35. I managed to implement a sound effect for when the dewdrops are damaged. It's very tinny in the recording but it's working.
36. I finished sculpting the daisy piece and it's now ready for painting. I made two petal variations and the centre, before arranging the petals.
37. It took me a few days, but I managed to get the weeds to spawn in properly. At the moment, they function as empty tiles, so the player cannot interact with them in any way. I duplicated the dewdrop scenes and scripts to get this far.
Flower Power devlog - destroy weeds 01.webm38. This is how the weeds work at the moment. The columns do not collapse into the vacant spaces yet, and there's sometimes an bug when matching pieces to the right of a weed.
39. I was having terrible problems with the weeds pieces, and eventually reached out online for help. However, neither myself or the person who kindly helped me could figure out why the empty spaces left by the weeds were not refilling, and I had to make the decision to scrap what I'd already done for those pieces. I had skipped an episode of the tutorial but I went back and followed it, and now I have an additional special piece - the stones.
40. These are possible board layouts for the first four levels. The pink represents playable pieces, the white is the pieces which will be available at the very beginning, the blue is the dewdrops, green is the background, and grey is the stones.
41. I have finally gotten the weeds pieces to function correctly! I have no clue what I did differently, other than following the tutorial from the previous episode where the stones were implemented. Here is a video of how the game plays at the moment.
Flower Power devlog - destroy weeds 02.webm
41. I added in mushroom pieces, which will slowly take over the board until the player eliminates them. Currently, they identical code to the weeds.
Flower Power devlog - spawn mushrooms 01.webm42. This is how they behave throughout play. Failing to make a match adjacent to a mushroom results in a new on spawning nearby.
43. All of this code relates to the power-ups. I've called them bombs, and the only one left to do is the multi-directional one. Here is also a clip of how everything works together. Hopefully in the near future I will be able to implement a debugging function so I don't have to play the game from scratch every time.
Flower Power devlog - bombs 01.webm
44. This is the finalised UI for the game window. The blank spaces at the top are for the player's score, their remaining moves, and the level objective. On the right is how it looks in the game. The colours were a bit darker than expected, but I managed to fix it quickly. I also started adding in placeholder text.
45. I was struggling to follow along with the original tutorial series when it came to UI, so I found this video to help me create custom fonts. I also used my knowledge of UI anchoring to make sure that everything scales correctly.
46. This is the placeholder main menu.
(this is in-game and has had some tweaks)
Flower Power devlog - sound effects part 2.webm47. I tried to reintegrate the sound effects once again, but ran into a couple of issues where the various scripts refused to acknowledge the Audio Player. I ended up starting over and now the sounds work properly (the audio is this video is awful, though).
Flower Power devlog - moves & game over.webm48. After a couple more hours work, I was able to create a moves counter (which can be seen in the top left, below the score counter) and an end-game state. The game over screen is obviously still a placeholder, and returns the player to the main menu. In future, it will return the player to the level selection screen.
49. This is the finalised main menu. I drew most of it myself, including the background, and added the title in Photopea.
50. I also created these win and fail screens.
Flower Power devlog - game over UI.webm51. This is a clip of the game over and main menu during gameplay. I set the moves count to 1 for the purposes of bug-testing.
Flower Power devlog - pause menu.webm52. I managed to get the pause menu working by myself, which I'm very pleased about. This is an example of it working. The player cannot continue to interact with pieces until the game is unpaused.
Flower Power devlog - goals.webm53. It took me a few days, but I got a goal/objective system working as well. Due to UI design, each level can only have one goal which means I will need to be creative about making the goals challenging.
Flower Power devlog - preset pieces.webm54. I also finally made it possible to preset pieces. This enables me to give the player the first match they need to start clearing the board, without having to detect a deadlock from the get-go.
55a. Whilst doing some bug-fixing, I accidentally broke something and can't work out what. Matching pieces works like normal, but for some reason making bombs triggers this error. I'm pretty sure it has something to do with the way goal progress is recorded.
Flower Power devlog - broken bombs.webm55b. Here is an example of it going wrong. The problem definitely involves the bombs and goal systems, but the only thing I can work out is that it's trying to compare a string and an object, which works fine for regular matches.
Flower Power devlog - background music.mp456. In the meantime, I added some background music which plays across almost all scenes. It pauses when the game is paused, but it'll work for testing purposes.
This is the tutorial video I followed to add the music.
57. I finished up the pause menu as a break from the goal system bugs.
Flower Power devlog - board shuffling.webm58. I also continued working on getting the board to reshuffle in case of a deadlock. This has been a major problem so far, as the custom boards tended to end up in an unbreakable deadlock very quickly. Once this is finished I'll be able to build the game for playtesting.
59. No sooner had I started to test the reshuffling methods on my custom boards than the game would start to freeze before throwing in infinite recursion error. Luckily, I managed to fix it by commenting out where the spawn_pieces function is called from ready.
60. I think I've also been able to fix the game-breaking issue with the bombs with the help of this video. I changed the troublesome line of "if goal_type == goal_value:" to "if str(goal_type) == goal_value:" and it seems to have patched it. I also commented out a function in the grid script altogether and the colour bombs still work as expected.
61. I needed to quickly find a way to change between levels without hardcoding the level to change to. I found this video which helped me set up a simple, flexible system that relies on the level name to determine which one to change to.
63. These were the two playtesting questionnaires I put together. I wanted to know the player demographic, how the game felt, and whether the player would be interested in (hypothetically) spending real world money on it.
Unfortunately, neither of the players who responded to these were of my target audience, but their feedback is still useful as it showed me that the levels are a bit hard and there are some balancing issues.
64. These are some designs for the additional three levels. I had to adjust the previous ones, because I accidentally designed an impossible puzzle. The only way to solve it was to give the player 100+ moves, which wouldn't fit in with the other levels which all have less than 25 moves.
65. I attempted to start implementing ads into my game using the popular plugin AdMob. However, after watching both of these videos, it seems that I'm using a version of Godot that does not yet support AdMob. I don't know what I'm going to do about this, as it's a major roadblock. I'm also struggling to figure out how to build for Android, as the SDK package I downloaded wouldn't install.
66a. I created this material to use as the background for the board, as the current one is just from Google and I don't have a license to use it. I'm very proud of how this came out, as I don't normally do stylized art.
66b. I followed this tutorial to learn how to make the grass material.
67a. I had to stop for a bit and reconsider how I was going to approach multiple UI panels, because I was confusing myself. I also found out that I am not required to actually monetise this game; the theory is the important part. I created this ad screen to demonstrate how and where an ad would hypothetically be integrated.
Flower Power devlog - ad screen demo.webm67b. This is a demonstration of the game screen progression, from start menu to watching an ad to moving on to the next level. At this stage, I'm considering dropping the story chapter from the flow, and instead having a series of chapters that are available from the settings menu along with the hypothetical shop.
68. I also updated the board background, as it looked "plasticky" and fake.
69. I've had to forego the idea of having 3D sculpted flowers in this game, as I'm not yet skilled enough with Zbrush to put out satisfactory objects within the time remaining. Instead, I'm replacing the placeholders with hand-drawn flowers such as this one (it has a 128x128px resolution to fit the game screen). On the right is a picture of how the daisy looks in-game.
front
back
70. I made these business cards as part of my marketing and branding plan. I will print out a stack of them to hand out at Showcase. I wanted to get them professionally printed, but it was going to cost me far more than I'd expected. I believed it would only be a couple of dollars to get lots printed, as the price is supposed to decrease when buying in bulk, but apparently not. I'm not prepared to pay $130 for cards, so I'll print and cut them out myself
71. I finally replaced all six of the placeholder pieces with actual art. I'm happy with how each flower came out, although the contrast between some and the background could be better.
Flower Power devlog - settings menu 01.webm72. Next, I spent some time implementing the settings menu. It was a bit tricky, because I'd half-forgotten how to call a new scene when a button is pressed, but I managed it eventually. However, I realised whilst recording this clip that I'd completely forgotten to add a back button to this menu.
Page updated
Report abuse