| title |
|---|
Poker Match a Game Using Phaser |
It's been too long since I posted a new entry in this blog. Since I'm not working on anything in particular at the moment, at least in my personal time, I thought I'd comment on the game I wrote in January using the Phaser game framework.
When the year started, I had a small hope of participating in #1gam. The result has played out as I expected, and I haven't really been up to the task of completing the challenge. Still, I did put out one game this year that is playable, and for that I am thankful. The game is called Poker Match, a drag-to-match puzzle game where the matches are Poker hands.
I've implemented games like this before, such as a Bubble Breaker (Demo Source), Tetris (Demo Source), and Tetris Attack (Demo Source). Poker Match is the first game like this that I've done that is not a direct clone of another game (although I wouldn't be suprised if this kind of game does exist). One of the more interesting parts of the project was the change in the way matches are created. In version 1, matches were created by swapping the position of two cards, in the same way you can swap two blocks in Tetris Attack. This just didn't feel right. After some thought and play testing, I changed the mechanics to create matches by dragging along the cards. Puzzlecraft is an example of a game that uses this method.
This was a straightforward implementation. Most of the technical difficulties arose in making sure matching was working correctly. For these, the specs helped to make debugging easier. Even though I am not using [AngularJS][https://angularjs.org/], I used [Karma][http://karma-runner.github.io/0.12/index.html] as the test runner with [Jasmine BDD][http://jasmine.github.io/] for the unit tests.
I kept the modules separate, and concatenated them together for development and building. If I had it to do over again, I would've used NPM module syntax and used [browserify][http://browserify.org/] to combine them.
Aside from the game matching logic, just learning Phaser took up the majority of the time. Although it was straightforward, there were just a few things that gave me pause when considering how to implement them. For example, I wanted to create a card-flip animation, that used negative scaling across the x-axis. It was a little tricky getting the timing working so that it looked correct due to weirdness with the anchoring and the fact that a card is made up of two sprites--one for the back and one for the front. I had to make sure that the two sprite were eased together during the animation in a realistic-looking way.
Another tricky thing was figuring out a simple way to create the buttons. Since I wanted to use text objects
instead of images for the button text, I used groups to combine the objects. This resulted in some weirdness
when it came to anchoring and placement. I could've been doing something wrong, but, if not, it's funny how
the simplest things can be so time consuming.
The last aspect which took up a good chunk of time was getting the animations working correctly. There are several animations involved when completing a level, including making sure that the matched cards are removed from the board, lowering a curtain, and then animating the score board. Although not technically challenging, this part required many iterations to get it looking decent.