Hi, continuing the idea of creating actual apps, more than just samples I decided to go with the simplest game to make on Android – TicTacToe. Let’s do it!
First of all, let’s clear up what I have in mind and what you’ll see in here and few following posts. This is going to be a single (with AI) and multiplayer (Wi-Fi with Firebase as backend, login, list of online users, invite to play with each, score history, push notifications for invites etc…).
TicTacToe was my first Android app I created without any knowledge of it or reading tutorials/video. After few months of doing JavaFX I decided to switch to Android thinking it was same as JavaFX. Not much. And I know there’s many beginners up there so hopefully you’ll find this app challenging, elements of it in particular. And will learn a lot.
But there’s lot’s of mediocre TTT versions implemented with buttons to display X ‘n’ O’s. Nah, even though I created my first one with text views, this one is gonna be animated like a live person playing.
So I’ll start with building core animation today as a first part. Without further ado – here’s core animations
Not those ugly buttons, huh? This stuff is not as simple as using text view, them you can just set chalk font and you’re done. How does this thing work? Canvas animations. If you’re not familiar with animations – check this post as a good introduction to Canvas animations and this one for understanding of different animation types and why there’s so many of them
Now one solution to draw it is with Path and setting brush from Paint#setShader which takes bitmap. And draw circle, x. That’s a brush brush I’m using
It’s a png file, square shape. And it didn’t work out that great with Path solution, had gaps and brush gets cut, didn’t look nice at all. Plus having perfect circle and x isn’t great as well, I wanted more natural, human-like drawing look.
Luckily, there’s another solution – just draw bitmaps on canvas manually, draw and overlay them which will make this smooth cool look. Method is Canvas#drawBitmap, of course center points of each bitmap should be close to each other at radius of that brush or less, for gaps to be not visible.
But how do we find sequence of points at the first place?
Use User Input
Since we want more natural look it makes sense to just use user input. So I created this view that draws bitmaps when you touch screen and saves each points in ordered list. That what it looks like
That’s me drawing on screen. And those two gifs above were animations. See how good Android imitates our drawing? That black box that you see above is boundaries. I have them to just see within what I should draw. All points are saved and by clicking on button ‘print’, points are displayed.
Of course hardcoded coordinates are useless: there’s different screens densities, squares could be of different size etc. That’s why those coordinates we need to convert to fractions (values from 0 to 1). Where 0,0 is top left corner. After that you can draw those shapes for any square size, any screen density and shape will stay perfect.
One downside was that when decreasing brush size and increasing box size gaps start to show up, but this won’t happen unless you play on Android TV with shapes taking half the screen – there’s clearly not enough points from input to cover that area.
Also there’s a useful overridden method Canvas#drawBitmap with two Rect’s. Where first one is bitmap size and second area in canvas where you want it to draw. which means that your bitmap will scale to that size. Hence you can set brush thickness
And the rest is just the stuff that you can learn in post mentioned above, about Canvas animations. At any time now I can just download new brush texture, replace it to change appearance.
Alright, it’s rather an preview to TicTacToe, next one is going to be about single mode with AI. You can get current source code here. Don’t forget to subscribe, follow me on Twitter, Facebook, G+ and share with friends if you think they will benefit from it!