Gods of Sparta: final release + gameplay video

WIP games, tools & toy projects
#1

Download here: https://play.google.com/store/apps/details?id=com.bigosaur.gos.android

I’m porting my game Gods of Sparta to Android. It is not going to be a straightforward port, because a lot of things will be improved. Simpler game rules, clear UI, better player experience.

It’s a turn-based strategy game for two players. In Android version the main focus will be local, hot-seat game for two players. It will be completely free to play, supported by ads. I will reuse some old graphics, but more need to be drawn, especially higher resolution stuff for Nexus10 (2560x1600 pixel screen) I got recently. Also, UI needs to be drastically improved and game rules have to be simplified.

IXgOGmsQtKQ

To cut the long story short, I need to improve the player experience and make it feel more like computer strategy game and less like paper card game.

This project is part of LudumDare October Challenge 2014, so it has to be complete by the end of the month. I plan to post updates daily on my blog and some cool images (and demo version) here as well.

#2

For Android consider the hardware scaler to lock to 1080p or even 720p. You’ll get better performance and also don’t have to worry about all sorts of variations of higher screen sizes.

#3

I didn’t know about that one. Thanks.

I did some testing. My game is going to be strategy game, so there will be some animations, but most of the time the game will just sit there and wait for player’s input, so performance is not critical.

Hardware scaler seems to be optimized for 3D games, especially the action ones, where a few pixel difference does not matter but framerate does.

However, the visual quality does drop. I tried some images on my Nexus 10, and the picture is simply not crisp and sharp enough. My guess is that people how buy devices like that one really want to see hi-res graphics.

I’ll just create all the graphics for 2560x1600 and then scale it down. Well, some stuff will have to be drawn manually for each resolution (so it looks great on 800x480 screens as well), but I don’t think it’s going to be a lot. I also plan to generate a separate BitmapFont size for each resolution (or use TTF files and generate the appropriate size at run-time).

Maybe I should investigate all this in detail before going deep into development. I made that mistake with Drone Invaders, and I’m not going to repeat it now.

#4

Might as well do 4k (4096x2160) or 3840x2160 for 16:9 aspect ratio with the latter more likely going to be the next top pixel count as you know OEMs can’t wait to throw that 4k number around for marketing purposes battery be damned… :o Sadly it’s going to happen all too soon.

Good luck with the port. Might be interesting to do match negotiation via BLE then setup wi-fi direct after discovery unless you don’t need to send a lot of data between devices being a turn based game. Alas there are some caveats with BLE on KitKat, but then again it’s Google, so what can you expect. :wink:

The other trick prior to the hardware scaler being available was rendering into a smaller FBO than the screen size and just blit that quad to the full screen. Still useful for post processing effects.

#5

I guess you’re right. But I still hope new devices won’t come that soon because pushing that much data would require stronger GPU and waste battery. But then again, I know that I sometimes have to charge my tablet after 12-14 hours of use so we could say that they are already over-doing it :slight_smile:

Anyway, I spent the whole day researching the Internet, asking the friends for their devices, etc. and came up with this:

http://bigosaur.com/blog/31-android-resolutions-definite-answer

I’m making all the graphics in 6 different sizes. It should cover 99% of devices out there. I’m using 16:9 as the base (where the game action happens) and some area around it as padding for wider/taller devices. Example:

I plan to automate most of it with ImageMagick. The workflow would be like this:

  1. draw everything for the largest resolution
  2. scale images (svg where possible, jpg otherwise)
  3. for any overlay text, use imagemagick to add it on the shrinked image using the appropriate font size

Well, I hope this helps anyone who makes 2D games for Android. I still see some very popular games not doing this right. For example I got CubeMen from the Humble Bundle and menus are so small on Nexus 10 that you can barely read text or touch the correct button.

#6

I finished drawing the battlefield graphics and made some ImageMagick scripts to convert it automatically to all 6 resolutions I plan to support.

Here’s the script:

[quote]#!/bin/bash
convert images/2560/$1 -resize 31.25% images/800/$1
convert images/2560/$1 -resize 37.5% -gravity center -crop 1024x1024+0+0 +repage images/1024/$1
convert images/2560/$1 -resize 50% images/1280/$1
convert images/2560/$1 -resize 60% images/1536/$1
convert images/2560/$1 -resize 75% -gravity center -crop 2048x2048+0+0 +repage images/1920/$1
[/quote]
If you’re interested how it works, I explained it in detail on my blog:

http://bigosaur.com/blog/33-android-imagemagic-script-scale

I also redraw some of the cards for larger resolutions. Here’s Medusa:

400×526 45.7 KB

The full image is 864x1152. This graphics will be used on 2560x1600 tablets:

914×1202 167 KB

I’ll post more unit images as I make them. There will be 15 unit cards and 5 item (artifacts) cards.

#7

I’m still learning how to draw well, and I’ll make all the artifacts images. But for units, I needed some good artists to make nice pictures. I searched the fiverr.com and found some really good ones. Here are some pictures I commisioned for this game:

Most artists on Fiverr are only good with a particular style, so make sure you look at their portfolio before ordering. For example, an artist from South Africa with username seatongrey has a great style that would fit Underworld units in Gods of Sparta. But I wouldn’t use him for Human faction. He made the Dragon above, and here’s the Hades:

For Human units, I hired glass84 and johannan. Here’s Achilles from glass84:

The turnaround is usually a couple of days. You can see the average in the artist’s profile. Now, be prepared that some artists might be busy and won’t get back to you quickly (or ever). If that happens, just cancel the gig and hire another one.

Be prepared that some designs might fail. For Olympus units I had to combine different artists. flannery is good with horses, so I got Pegasus and Unicorn:

#8

I like the font for the name of the card/unit, but I hate it for the important text below. It difficult to read at the smaller size and makes me not want to read what they say.

Anyway the game looks pretty cool, nice work so far.

#9

Thanks. The kerning (or hinting, whatever it’s called) is really bad with that font. Maybe I’ll have to switch to a different one.

#10

Here’s how I have drawn the ring artifact for my game in Inkscape. I hope it helps others if they need to create similar art.

On of the artifacts in my game is the mythical Ring of Gyges. I decided to improve my graphics skills and learn Inkscape better. Rings and other metal surfaces are rather simple to draw, you just need to combine proper gradients.

I started with basic eclipse, duplicated the shape multiple times and then created unions and intersections needed to assemble the ring. I used a brown-gold-white-gold-brown gradient (it’s easy to make a custom gradient like this in Inkscape). To get the proper gradient (straightforward or reverse) I put a real ring on my desk and watched the colors.

This is the basic ring. But lets make it look really good. First I rotated it about 180 degrees and then added a gem to it:

450×545 75.8 KB

As you can see the gem has multiple layers. On the bottom we have a black circle with white border. Border is not the same everywhere, it has a gray-white gradient stretching from left to right. Outside it, there’s another border, with black-to-transparent gradient. This is used to create a 3D effect on the ring’s metal surface. Over that, we have a half-circle with another gradient. This time the gradient is radial, extending from the bottom-left corner which has a white point. That point looks like a point where the light enters the gem. This is the base. Now we will add color. You can pick any color. I choose blue.

First, we create the dark blue overlay (one the the right in the image above). Note that is also has a slight gradient going from left to right. The light blue layer on the top is used to complement the bottom-left white point in the black and white base. As the light enters in the bottom-left corner it goes through the gem and exits in it’s top-right part. There is no sharp point there, although you could put one if you want to achieve a different effect.

Finally, here’s the artifact’s card in my Gods of Sparta game:

Copied from my blog: http://bigosaur.com/blog/36-creating-ring-inkscape

#11

I know players hate reading complex rules, so I tried to make a screen that would explain how the cards work without getting too complicated. Here are the basic rules:

480×800 83.5 KB

At the start of each game, the players are presented with a deck of 20 cards and they take turns picking one by one until each has 10 in their hand. After that the battle starts.

480×800 115 KB

When the first player picks the card, all the other cards rotate 180 degrees to face the player sitting across. It’s a two-place local duel game.

#12

If got a lot done in the past two days. The main battle mechanics work. You can place and move units, and attack. There is still no attack animation. As you can see on the screenshot, some units are turned upside-down. This is because it’s a two player game. The idea is that you put the phone/tablet down and sit across each other and play.

480×800 89.3 KB

Flying units like dragons can reach any field, while others have to move one step at the time. Each turn, a player can move and attack, or attack only. Once you attack, it’s the other player’s turn.

I’m currently drawing some attack icons. When you select your unit in the field, those circles would rotate over the adjacent enemies and you can pick which one to attack.

Depending on the attacker, a different circle would be used. Olympus units would get a blue round one. Humans get the yellow square (at least I tried to make it resemble a cross). Underworld units have the hexagram. I drew all these in Inkscape.

#13

I decided that I have to change the screen orientation mid-project. I’m switching to Landscape orientation. Here are the reasons:

  • attack graphics looks odd upside down
  • I want to provide hints how damage is calculated, awkward since all the enemy cards are upside down.
  • Thumbnails used to pick units from your deck are too small on phones.
  • YouTube videos are landscape.
  • Desktop version of the game (if I ever release any) can use larger resolution.
  • I can test larger resolutions on my monitor instead of having to run it on the Android devices.
  • Players will sit next to each other, so they won’t have to put the device down on a table to play. You can play it with a friend in a bus or on a train.
  • Much more available screen space for unit stack and enough space for additional user interface. See how everything is crammed currently and a lot of space is wasted sideways:

There are some cons:

  • I have to redraw some of the graphics
  • I now need horizontally flipped unit graphics which will almost double the memory consumption of the game (I cannot simply flip the whole card, as it contains pregenerated text as well)
  • The drafting screen cannot use the rotations to indicate current player

To conclude: unless the game is meant to be played like flappy bird (using the same hand that holds the phone and having only one command: “tap anywhere”) use the LANDSCAPE orientation.

----------------------------------- Due to Forum Rules, I have to keep posting in the same post -----------

As I switched to landscape mode, I started to create mirror-flipped images of unit cards using the -flop option in ImageMagic in one of the card-generating steps. As the script rolled on for some time, it hit me that this would increase the amount of graphics a lot. I got worried about the size of the final .apk file. First time since I started the project I decided to check.

I created a package containing only the lowest (800x480) and highest (2560x1600) resolution images. It’s 106MB!

I need to add 4 intermediate resolutions, so I’m looking at 300+ MB for the final .apk. I searched the docs and found that the limit is 50MB and rest has to be provided as a separate package. Or, you can distribute two different .apk files. I didn’t like any of those. I hate when you download an Android game, and then you have to wait for it to download hundreds of megabytes more. I needed a new approach.

I searched the Internet. Most advices are about packing your code using compressor/obfuscator programs. But the gains are really negligible. Then one thing caught my eye: using JPEG for textures. I’m using TextureAtlas to pack everything automatically, but I could separate the images with and those without transparent areas and pack them separately as PNG or JPG.

The problem is that 90% or the graphics need transparency. In this particular case the main problem are the card images, which have rounded corners. And then I got this great idea: separate the card image into frame and contents. There are only four card types in the game (one for each faction and gold one for the items), and all cards of the same type share the same frame. The inside of the card is different for each one, but it does not require transparency. Instead of packing 126 cards into PNG texture, I would pack 126 cards into JPG texture plus 4 frames into PNG.

480×667 165 KB

As I tried this, I got some weird clipping artifacts in the JPG texture, probably because I turned off the 2-pixel padding. So, instead of pixel precise cropping, I increased part of the graphics that gets copied to JPG so that there is some overlap. When staging the images, make sure the jpg one is drawn first and PNG frame over it. The part that overlays will covers the bad edge pixels.

BTW, by “staging” I mean placing the Images into libGDX Stage. To make the code simpler, I created a nice CardImage class (descended from Group) to handle drawing transparently. This Group contains the center of the card from JPG texture and then positions the frame from PNG texture over that.

This saved A LOT, but I got so concerned about the size that I wanted to do something about flipping as well. I researched if I could only flip a part of the image. It’s possible using AtlasRegion.flip() function. But I also had the problem that I didn’t want to flip the whole image. The textual part should remain the same and only the unit graphics should be mirrored. To do this, after calling flip(true,false) I used setRegionY and setRegionHeight to reduce the flipped region size. Using the flipped region I created another Image and added it to the CardImage group. At runtime, I simply show or hide this image when I need to unit to face left or right.
Result

New .apk file with the same content is now only 12MB. A 88% save. Once I add all the other resolutions, I estimate the final .apk to be about 40MB if all goes as planned. Compare this with 300MB+ I expected at the beginning.
TL;DR Summary

Beside all the other advice you might find on the web (compressing the code, etc.), add these three:

  • use JPG wherever possible
  • if you use PNG only for semi-transparent border, cut the image into frame + content. Store the frame in PNG and content in JPG Of course, if your frame is not reusable on multiple images and has complex colors this my have the opposite effect. However, there’s a solution to that as well: cut the frame into four pieces (left,right,up,down) and assemble it at runtime. No more empty space in the middle of the frame in PNG.
  • If you have images that are flipped or rotated, store only the original and flip/rotate at runtime.

-------------------------------- ALMOST DONE ---------------------------
I finished conversion to landscape mode and implemented the attack icons and animations. For most attacks the cards just move and shake a little bit. Ranged units have special animations, Zeus fires thunderbolts and Catapult throws rocks at enemies. I added the damage numbers to attack icons and it’s now visible which type of attack deals the most damage.

800×480 575 KB

I also created some nice icons for unit Energy (heart) and also Attack (sword) and Defense (shield). Those show up when the default unit values are modified (by artifact or an ally that stands next to them). This makes the game fluid to play, as you don’t have to keep do the calculations manually all the time.

What’s left to do: Turn indicator graphics, Sound effects, Music (I’m going to get help from a musician), AdMob integration. Initially the game was supposed to be only a two-player game, but now I’m thinking about single player mode as well. Writing good AI for this strategy might get complicated, but it’s worth a shot. There’s still enough time before the end of October.

Well, that’s done. I also added single-player campaign in case you want to play and have nobody around. Computer AI is not perfect, but it’s enough to challenge you.

#14

The previous beta crashed both on my Samsung Galaxy S2 and Nexus 10, but this one works.

I took me some time to learn the rules (yeah, Zeus is mighty, but only if you can protect him from Dragon and Firebird, etc.). It’s a fun game, I played it with my girlfriend a couple of times as well.

AI sometimes plays a dumb move, even on level 5, esp. if Medusa freezes a couple of units. Can’t remember the exact position, but it happens every once in a while.

Looks good for a beta, I can’t wait to play the final version.

#15

Beta release is ready!

Everything should work, except the main menu screen still needs some music. Please test and tell me if you like the game:

Thanks.

#16

Final release is ready:

IXgOGmsQtKQ

Grab it on Google Play: