Roshambomoku Postmortem
This is the postmortem page.
This is how you link an image here:
Hi there! Today, we dive into my first run through making a proper mobile game by building out an answer to an interesting question: what do we get when we cross Rock-paper-scissors with Five-in-a-row? The very obvious answer is that we get Roshambomoku, the game I’ll be writing about here. If the idea at all seems interesting, come take a read and see how what I took from that original idea to build a full-on game.
What is Roshambomoku?
Where the name Roshambomoku comes from is probably the first question you might have in mind, so let’s start there. Like I said before, Roshambomoku is rock-paper-scissors crossed with five-in-a-row, where the name comes from combining Roshambo and Gomoku, alternate names for rock-paper-scissors and five-in-a-row respectively. Although the names Roshambo and Gomoku are much more obscure than Rock-paper-scissors and Five-in-a-row, they fit together really nicely to give us Roshambomoku, so I went with that since I think it’s a really great name if you get where it comes from because it describes the game perfectly.
With the name out of the way, let’s get into the idea some more. The game would play like normal five-in-a-row. Each turn, players are allowed to place 1 piece down on the board. Their goal is to have 5 of their colored pieces lined up vertically, horizontally, or diagonally along the board. The fun comes in when their opponent is also tasked with doing the same, so it becomes a battle of who can stop their opponent the fastest while also setting a line that will become a line of 5 before their opponent has a good chance to answer. If you get a line of 5, you win, and that’s the game. One of the key features is that pieces placed down stay there, but I figured that we could have some more fun if we maybe changed that up.
That’s where the rock-paper-scissors aspect comes in. What if instead of just having piece you have to place on blank slots, you get pieces that could also replace your opponent’s as well? Instead of getting a blank piece that fits onto an empty slot, each turn you get a random rock, paper, or scissors piece that you can either place on an empty spot or on the opponent’s piece you beat, so now it’s about finding short term value that your opponent has trouble answering.
Under this system, the game is basically impossible to win because pretty much any attempt to reach 5 could very easily be stopped by replacing a piece, which would lead to lots of chaos and dragged out matches. On top of that, since you replacing a piece is a +2 piece advantage instead of the +1 you get from placing a new piece, you would struggle to ever move out of the small starting area since replacing piece would usually end up being the better move. So, I figured a good answer would be a point system.
Instead of games that never end because nobody can reach chains of 5, now our game becomes a matter of trying to make the largest number of longest chains you can make while disrupting your opponent’s since the longer chains means you score more points each round. This lets us shrink the play area, and focus in on the fun of trying cheat out long chains while playing around replacement and the interesting interactions that come about from it.
So yeah, that’s the idea for the game before I show you what it actually became. I’ve actually been sitting on the idea for a few years now, and only really got to it this past winter break when I was bored and was reminded of it. I’ll also note here I sort of stole and evolved an idea from a friend that was rock-paper-scissors tic-tac-toe, since I figured that Roshambomoku would be a more interesting take on the idea with more depth. While I’ve been in the loop on app development for a few years now (starting with learning Android App Development in high school), this is another project in the series of things I’ve seen all the way through recently, so this is probably the ‘fullest’ app I’ve put together so far. I also opted to use Flutter, a Google’s cool and hip native app development kit. I have a weird history with it in terms of picking it up, getting stuck, leaving it for a months, picking it up again, and repeating, but this time I actually have something cool to show in the form of a game. Granted, Flutter really isn’t built for making games, but I got it to work since the game is pretty simple. Speaking of the game, let’s get into it, shall we?
The game
I’ll cut to the chase here and leave a video of the gameplay here to make everything that follows clear. Here it is:
I’ll say that it’s a bit tough to keep track of what’s going on without seeing where people choose to click, but hopefully that short video gets the idea across nicely. Again, the game has players going back and forth placing their randomly selected pieces to try to maximize the length of lines they make for points while minimizing the points their opponents can score. The twist is that you can also replace your opponent’s piece with your own, so the game turns into a back and forth of figuring out what the next optimal move is. Maybe the strategy that goes into it all isn’t so clear when I’m just playing against myself to record some gameplay, but it can end up being a lot of fun!
The design
Once I really got into making the game, one of the more fun aspects of the game to work on was the minimalist design and how to convey information through the UI. Since Flutter essentially railroads you into material design, at least loosely following those patterns was an important task for me, so I had to get creative.
One big overarching idea was that I wanted to follow a standard color scheme: blue for player 1, red for player 2, and black/white/purple (the mix of red and blue) for anything neutral. This translated very nicely into ideas like what color pieces should be on the board or what color the neutral-themed restart and info buttons were. The real challenge came in with how to apply that idea to showing the player their next piece, current total points, and how many points they earned each round, which I’d like to go into here.
First of all, the next piece. Part of what makes the game fun is that your moves not only rely on what is already on the board, but also on the fact that you have the information of what your opponent’s next move will be. I had the idea of projecting a few moves ahead and displaying that information, but on the implementation side that got a bit hectic and difficulty, so I eventually opted for a card that flip-flops for each player that shows their next piece. It’s nice and big to catch the player’s attention, the flip-flopping helps illustrate the transition between states, and the space on the card allowed me to show more information, like the players’s scores.
Speaking of scores, let’s talk a bit about that. I settled on a scoring system for the game over Gomoku’s win condition of just getting to five-in-a-row because the idea of leeching off of your opponent and getting a five-in-a-row out of nowhere sounds like those rules would be more chaotic than fun, even if you could get to chains being that long consistently with that end goal in mind. So, as an alternative, I took to giving points based on how long lines were up to a maximum amount that decides the winner. The benefits there is that I can fine-tune values to make certain strategies weaker or stronger based on how each length compared to each point value, and then game length can also get adjusted based on what the winning number of points is. Granted, I didn’t get around to much tuning after only having some limited playtesting, but the potential is there, and that’s what matters.
This lends nicely to talking about how all that scoring gets displayed! Sticking with minimalistic design, I made use of the cards I had on the sides of the screen, since they were in a good position to have a score display of sorts anyways. At first I figured I could just display a solid number over that portion of the screen since that’s how everything was being stored internally, but then the idea to use gradients hit me! They would look a lot cleaner since I could just dynamically change the color of the card, and then judging how far away from winning you are based on the area left a different color from the top of the card is a nice way to visually indicate how close you are to winning. I liked it a lot since it gave me the fun task of having to communicate a number through color instead of any other means, and I think in the end it turned out looking really clean.
I sort of went through the same loop with displaying information about how many points each player earned after each round. I realized after a bit of playtesting that the actual number of points you get after each turn gets a bit hard to read since you have some many different ways to score, so I needed some way to communicate that information. My first pass on the idea was having some colored text show how many points were scored after each move, but that didn’t really sit well with me since again it was just plain text on a screen when otherwise it was all shapes or colors. Then, a few days later, the genius idea of putting on the cards as well came to me! With that third color added, each card now had layers to show your current score, the points you earned last play, and the points remaining before victory. It might be a bit much to parse the first time you look at it, but once it all gets understood I think it works as a compact way to show a lot of information in a very elegant way, which I was super happy with.
Going back a bit, let’s talk about balancing first vs second. Obviously, since the first player gets to make their move on the board earlier than their opponent, then should be ahead given that they will always either have made more moves than their opponent or the same amount. There were lots of ways I was thinking about balancing that fact, but the nicest solution I came across was just giving the red player (the one who plays second) an extra bump of points to start out with. It’s a bit boring and doesn’t scale nicely across all levels of play I imagine, but it can be communicated very easily and doesn’t require a lot of understanding from the players. Another solution I thought about was starting the red player out with 1 piece that couldn’t get replaced, but I figured that would take a decent amount of effort to get working, and then the whole game would revolve around the area that piece was placed which would get weird from a gameplay standpoint. A suggestion from my friend was starting the red player with a piece that counters their opponent’s for their move, but that would leave us with just swapping the rolls of the players, putting us back at square 1.
Another fun question was answering how pieces get decided. If player could pick their piece every turn it would result in a back-and-forth of only replacements with no progression across the board, so that option was bad. I could have also gone with a bucket system where you get guaranteed a rock, paper, and a scissors every 3 moves, but that would lead to the same problem where gameplay quickly becomes stagnant. On the opposite end, I could have also completely randomized the pieces each round, but that would lead to frustration where you feel like you get nothing to replace your opponent’s pieces with while they can trump you with every piece they play, which is unproductive. Instead of all those, I settled on a style of random bucket. Every player starts off with the bucket [rock, rock, rock, paper, paper, paper, scissors, scissors, scissors], and every 3 turns 3 random pieces get picked as the next 3 for that player. One those pieces get used up, a new rock, paper, and scissors get added to the bucket, and the process repeats. The idea here is that because the pieces are randomized, the game is still exciting and doesn’t get stuck in loops, but there is a sort of “bad luck protection” in that as you repeatedly don’t get a piece, the more of that bucket that piece fills up, pushing you back having gotten each piece equally over the course of the game. Of course, the player won’t be able to see all this information, but they hopefully feel it in not feeling as bad when they play it.
The last small note to touch on is the big arrow in the background of gameplay. I realized that whenever I would turn away for a second while playtesting I would lose track of who’s turn it was, so I imagine that this would extend to players as well in game. My solution was a pretty caveman-esq: just use a big arrow! Behind the playfield you have a big arrow that rotates to point at whoever is next that you can always refer back to. A simple aspect of design to end on, but an important one no less.
The tech
That was most of the design stuff I wanted to talk about, so let’s touch up a bit on tech, although I have far les to say here than I did for a lot of the design stuff.
To start off, the elephant in the room: Flutter! I’ve spent a good time with Android development and have been eyeing Flutter for a good long while now, and this project was my first big dive into actually messing around with it that ended with an app that was complete enough to write about it here in a blog post like this. It turns out that when you’re development platform lets you iterate very quickly and starts out with lots of great support for building out a UI, you can actually set your mind on cool stuff and get it done easily (I’m look at you, vanilla Android Studio…)! On top of all that, an app is something I can actually take around and show off instead of just an idea sitting in my head, which is wonderful as well.
One of the saving graces for this project was the Flutter packages page pub.dev, where you can find all sorts of open source Flutter packages. The ones that really helped work out everything for me were the Flutter grid button, Flutter flip card, and animated rotations The grid button package was what I used to make the intractable tiles on the board that players put their pieces on. A grid works well to simulate a playing board, and with some work on the hood I managed to set it up so that just tapping a tile placed the piece of whoever’s turn it was. The flip card also came in handy as the way to reveal the next piece each player was going to get, since having a nice graphic to show your next piece changing work really well with having a card that showed your current and next piece on both sides and flipped to reveal the next one. I originally tried out some other methods of showing next cards like cards that would swipe off your screen, but I ran into some issues there that made me had to settle. Lastly, the animated rotation package was there to rotate the big arrow in the back of the screen pointing to the next player. Without them, the app would have taken a lot longer to put together and would have taken much more time to get functional, so I’m glad they exist and helped me get everything up and running.
I don’t really have anything else that comes to mind here, so I’ll end with pointing to the GitHub repo for the project! If you care to see how I put everything together you can go take a look at all the code there. I think its a nice mix of good style, too many comments, and duct-tape solutions that don’t scale outside of small projects like this, but I’ll leave you to figure out which is which. If you ever have any questions about any part feel free to comment below and let me know what you think.
The publishing
Publishing the app was a big deal for me since it was the first tie I’ve ever put something on the play store. Although working with Flutter gives me the option of publishing to both Android and iOS, I wasn’t exactly excited to shill out $100/year for an app that would only reach a handful of people anyways to put the app on the app store, so I just took to publishing on the Google play store exclusively. The fun part of all that meant I got to brush off my Adobe Illustrator/Photoshop skills to make some nice assets for the store! I have all the associated files under the GitHub repo if you care to take a look at how I put them all together further, but here I’d like to show you what those completed assets look like and what they’re all for:
First, we have the app’s logo. This was the first piece of material I put together because it was before I started the process for publishing to the play store, and it’s one I’m really happy with because of how “mobile-gamey” it turned out. It also shows a much more intense version of the game with a piece flying onto the board, which I think turned out really well.
Next, the app’s feature graphic. In all honesty, I’m not sure where this one shows up. It might just be when you’re looking up apps in a very specific context through the play store app, but again I’m not sure. That makes me sad since I think it turned out super cool, incorporating a bunch of different graphics while having a nice color scheme alongside it as well. At least I got to use it for the thumbnail of gameplay video above? That’s got to count for something…
Last off, the play store listing photos. They ask for screenshots when submitting, but like every other app on the store I went ahead and edited them a bunch with some very soft colors and instructions on how to play since I didn’t know what else to put there. Again, I’m really happy with how all the soft colors came together on these to make something nice. Here’s just 2 of the 8, so feel free to check the app store listing for the other 6.
 |
 |
With all those assets done I got to throw together a very fun privacy policy of “I don’t take any of your personal data so my policy and ultimate privacy” which probably shouldn’t fly? Either way, I think it’s fine for now. That being said, the publishing process was otherwise super smooth, and all I needed to do was a wait a few days before my app was up and running on the store.
Closing thoughts
And that was Roshambomoku, my first complete process of app development from start to finish. It was a lot of fun to grind out of the course of a few days, I got to mess around with a lot of interesting aesthetic choices and game design choices, stretch my coding muscle over a winter break, and now I’m a published developer even if that doesn’t mean much. So, go feed my ego and give me an install and review if you will! :V
Thanks as always for reading this far~
-Robert