Qard
Unlike my fellow coworkers from business and project departments, my December is usually less busy, than “classic” months, so I can work on stuff I didn't have time the whole year, like lowering technical debt, testing new ideas, concepts or languages, or starting new side projects.
[2015/01#mravenci-as-qetrix-webapp Few Christmases ago] I recreated a card game “Mravenci” (Ants) for iOS and Android, while testing embedded QetriX WebApp. It worked really well and the game is still quite popular, despite I don't support it any more (because I don't release on Google Play and Apple Store very often, so it's always a hassle – install the current version of IDE, fix what's broken in the current language version, update store pages...).
Mravenci (Ants)
It wasn't my first mobile release of Mravenci, the first one was back in 2008 (of course during Christmas :-) for Windows Mobile on .NET Compact Framework, so you could play it on PC with .NET Framework as well – even to this day. I obtained a permission from the original author to use the graphics and sounds and he even kindly wrote how to extract it from his game.
For the WM game I created a platform “Logicard”, that uses cards definitions in a XML file, so you could customize them to your liking or create a completely new game with similar mechanics.
And this brings me to Qard. The idea of a game platform sprouted once again in my mind, but this time not only for a card game, but rather any sprite or tile based game running in a web browser, using DOM or Canvas.
Qard Logo: Tile-based “Q”
Browsers these days are incredibly powerful, with amazing set of APIs, such as support for game controllers or WebGL. I decided to create a modular engine to include just what the game needs and nothing more.
There are some great web-game platforms, but you probably already know I like to create such platforms myself and in my way. Also Qard will support QetriX style of coding and components, wherever it would be feasible.
Mravenci as QetriX WebApp
6 years ago I made a remake of quite popular Czech card game Mravenci (“Ants”, gameplay inspired by Arcomage) for Pocket PC, written in C# for .NET Compact Framework. Because CF is a subset of regular .NET Framework, the same .exe worked on PC as well.
I was recently contacted, if there’s an Android version of the game. I replied there isn’t, because I tried and failed – as my experience with Android is shallow. But it got me thinking and then it hit me.
As I mentioned [2014/02#jetrix earlier], I have some experience with IBM Worklight MobileFirst Platform Foundation. Mobile side in the platform is based on Apache Cordova, which basically is a fullscreen chrome-less WebView (mobile browser), displaying the single page app, written in HTML, CSS and JavaScript.
Mravenci: Black (blue) vs Red (green).
I really like the idea, so I tried to make the game this way. All platforms have support for such apps, so I created basic WebView app in Swift and Objective-C (iOS), Java (Android) and C# (WinPhone). It worked really well and the final app is so tiny!
Everything is based on QetriX structure, with DataStores, “content” dir and such. I took the liberty of developing the game in Firefox on my PC. The development was nice and smooth.
Of course I had to reengineer some major stuff. Because of different aspect ratios, I had to make the whole game fluid (all sizes are percentage based). It may get little bit distorted on 3:2 displays though, so I added CSS media queries.
Mravenci. Build your castle to 100 or destroy opponent’s castle.
Also the original graphics was really low-res, which looked OK, but the blurring wasn’t that good, so I decided to recreate everything possible in HTML (like cards). Besides, I didn’t want to make gray version of each card (when player doesn’t have resources to play it) and grayscale filter doesn’t work on Android 4.3 and older.
The sound is made by HTML5's Web Audio API, but causes some troubles, which I consider acceptable, because audio isn't a key part of the gameplay. Sometimes SFX plays up to 1 sec later, than it should, and sometimes doesn’t play at all.
For the record, the AI doesn't peek into your cards. It analyses it's stats and also your stats, which are both visible to both players. For example, if your wall is too high, it prefers to build the castle, and again if you have no wall, it prefers to attack. In the “easy AI” setting it simply goes thru it's cards from left to right and plays the first one it has resources for.
You can download the game from Google Play and App Store. Try it, it's fun and quite challenging! :-)