Shoot for the Stars Devlog 37: A New Style Arises!
Hello Everyone! Here we are with another big update to Shoot for the Stars! This time, we dive deeper into a big art change as well as a look inside Seon's brain. We have also rebranded our logo since last time, and with that we've decided to take everything else in our our project a much needed update before the demo's release.
Rob C. Miller
Lead Illustrator/ Game Design
This month we changed the overall art style of the game. Due to this, the artists of the team, Kayla and I, have spent this month taking several steps back and redoing every piece of art that had been done up until this point. Of course, this doesn’t include the Devlogs we’ve done since the beginning. Oh, would that be a nightmare. No, I simply mean everything you’ll see in-game and the active promotional images found on our website and social media, excluding finished Devlogs.
Since there isn’t anything for me to update you on, as everything has basically been a redo for me this month, I can talk a bit about the style change itself. All three of us had felt the overall look of the game was lacking for some reason, and we also realized the art didn’t match the game’s UI. After some experimentation, we settled on this more graphic look, consisting of thicker lines and varying line(shape) widths that make up the outlines of the characters and backgrounds.
Upon sharing it on social media, we got swamped with responses. Both familiar and unfamiliar users expressed how much they liked the new look over the older one. With this in mind, we went ahead and began fixing everything. Because of this drastic change, the release of the demo will be pushed further into the future, but, it will be for good reason. We will have a better finished product that more people will enjoy.
As Rob mentioned both him and I have been working very hard on the new stylization of the characters. We decided a good place to start would be the website landing page for Shoot for the Stars, which was due for an update regardless due to Wendy’s new outfit design.
Determining what this new style was from the start was very interesting. It started with us posting the overworld on social media, seeing what the general consensus was on how everything looked as well as showing off the brand new UI we came up with. In the back of our heads, we all agreed there was something “lacking” with the look. It wasn’t until this post did someone point out “Your UI and character designs are great, but your world doesn’t match the UI”. And that’s when it hit us. It was the fact we had 3 different art styles going on in the game, between the intro scene’s having a more painterly vibe, the UI being very graphic, and the character’s being closer to cartoony meets anime.
This was the video we posted on various social media, and made us realize how much the art was clashing with itself.
This was then a later post we made comparing the current "painterly" screenshots, and the new style. We went with this as we felt where the painterly look was really nice, it did not fit the mood we were trying to convey with our game. This being the theme of a contemporary modern day game about friendship and card games.
That’s when Ryan and I decided to research some game’s art styles and see what it was they were doing. With the main inspiration being Persona 5, we decided to start there and analyze the game’s world and UI and how they “fit it together”. We did learn interesting color decisions in the game as we were analyzing it, but found we needed to dig a bit deeper, and went with another game with a similar graphical aesthetic. We knew we wanted the game’s art to match the UI, so we then went to “The World Ends With You” for our second inspiration. When we analyzed that game, that’s when the true answer hit us, which was to play with the shapeliness of the characters and the backgrounds.
Admittingly, Rob and I were being “too safe” with the background art especially, so in retrospect, it ended up looking arguably bland compared to some of the other parts of the game, which really didn’t add to the “fun” aesthetic we truly wanted the whole time.
Here's a looka the the older backgrounds with progress on the new take of the stylization. Where again, it looked really nice, it did not fit the mood for the game.
After doing a few experiments, That’s when we determined the best approach to the style, which was the nifty pen tool! Oh how that tool changed everything, and made it so much easier to decide what we needed for the art. We took it a step further after analyzing The World Ends With You, and completely got rid of all “actual curves” and made everything consist of hard edged lines. To avoid a “noir” aesthetic we also included midtones to the work.
Finally, after a few practice sessions, we got the results we were looking for! As Rob also mentioned, after sharing these new designs on social media, the positive responses really really came in like a storm, and a lot of people ended up liking the changes. Naturally, when creating a poll, there are some people that preferred some of the old decisions, but even those responses we learned a little from, such as making the backgrounds have less hash lines compared to foreground elements. With all that said, we found we really liked the direction this was going, and felt it gave a breath of fresh air to the overall aesthetic of the game.
Here's a look at the current Mood board for most of the screenshots in the game currently.
Programmer/ Game Design
Another month has passed, and with it Seon’s ability to play TerraZone has improved. While last month was a bit more scattered in its content, I found myself far more focused with this particular part of the project.
My initial task this month was to determine how Seon would make decisions every turn. Since asking him nicely was out of the question, I wracked my brain for a method that would fit into the current architecture while keeping the code readable. (Hey, I can read 10 nested if statements, but I’m thinking about every man here)
Upon some consideration I realized building a decision tree would be the most readable and efficient way to handle this situation. A decision tree is a type of binary search tree that allows the computer to test a condition, then continue down a true or false path to the next node which contains our next condition to test.
In a traditional decision tree, generally the nodes at the end of the tree are called leaves, and the nodes leading up to it are called decision nodes. A decision node is where a condition is checked and the tree branches. A leaf is where a final decision is made.
This mostly remains true for our trees; however, to suit my needs I made some tweaks and came up with my own implementation of this system. I created a base class for the AI, containing functions that can perform advanced checks on all sorts of relevant conditions. When building the tree, each node is given a function pointer, along with an array of arguments. When the tree is traversed, the referenced function is called, and the next branch is chosen based on the return value of the function.
With this, Seon’s ability to make a decision has been condensed into a single function call! The nested if statements will be missed, but I suppose the convenience and readability is more practical. Having given Seon multiple decision trees, he is now capable of choosing his starting Reserve cards, mulliganing his opening hand, and deciding whether or not to perform a Will draw.
With this I approached the Main Phase. Before Seon could begin playing cards to the field, a critical part of the game was missing. I still had to keep track of the Squads on the field. The AI had to wait for now so I could pursue this next endeavor.
A “Squad” in TerraZone is a collection of cards on the field starting from a Fighting Creature.(My apologies to anyone that thought TerraZone might be about forming hip hop dance troupes.) Since the spaces on the field already were linked together, and they are aware of the cards contained on them, I was able to perform recursion on the cards starting from each Fighting Creature to determine the cards that were in their Squad.
By simply adding a new flag inside the field spaces, by using the same functionality that was used for displaying a card’s active spaces I was able to mark which spaces were(Or in the case of playing a card, would be) part of the card’s Squad.
Finally I was ready to return to the AI. As I was developing the Main Phase decision trees, it became apparent that constructing the trees would become unwieldy in more advanced scenarios. While much better than our trusty nested if statements, I knew I would need to create a new tool to help visualize the process.
Yea I know, it isn’t pretty, but it gets the job done, ok? With this I’m able to more easily make edits to the tree if necessary. Upon saving, the tool generates the code for building the tree for me.
And at this point I have returned to trying to make Seon play cards on the Main Phase! While this is still a work in progress, I’m sure I shall regale you all with further details and other new features in the future.
Thank you everyone for tuning into another update. We'll be continuing to help Seon make great decisions as well as expand more on the artwork. Perhaps next time, we'll be expanding more on the town itself! The next big update will be 5/28/2021. Make sure to follow us on Twitter for all the latest updates. The demo gets closer and closer to complete with each passing week, so see you next time TerraZone Fans!