Sum Fun - Day 2

Day 2

Having a working game on day 1, I thought I'd do a bit more than add sound on day 2. I was confident I'd have time to fit more in.

Adding Juice

Kenney.nl has an system website pixeland.io which has a great list of videos for budding indie game developers to consume to help improve their games. This video is just a must see and is all about Tweening:

This lead me to a great free Unity3D asset for tweening called LeanTween. It sells itself as being the fastest tweening library but the real joy as a developer is the lightweight, fluent syntax:

LeanTween.moveX(go, 1f, 2f).setEase(LeanTweenType.easeInQuad).setDelay(1f).setOnComplete( someMethod );

Understanding all the tweening easing functions wasn't obvious until I stumbled across easings.net. It has interactive graphics for all the standard easing functions and they match up with the LeanTween ones pretty well:

I set about juicing up my graphics, adding small animations to the following:

• Slide start menu off-screen (and back again at the end)
• Scale in and out the score and timer when they change value
• Bounce the tiles in the grid into place at the start
• Elastic the selected tiles into the left and right tile slots of the sum
• Shake the whole sum when you make an incorrect guess
• Pop out the adjacent tiles for the second choice in the sum

These are small but simple changes that don't affect the game mechanic, or code flow, in any way at all, but the change to the feel of the game it just outstanding. I'm convinced it's as essential a step as the sound or the graphics themselves.

Sounds

I didn't venture beyond Kenney.nl for my sound assets and ended up using the female voice from the voice-over pack, one of the switch sounds from the ui-audio pack and the tone1 (pong) sound from the digital-audio pack.

For the music I went back to opengameart.org and found the ideal BossaNova tune. All my audio clips were now in place and wired up to the various states of the game. Easy-peasy.

Background and Splash Screen

My previous game had no splash screen and I felt that was missing when the app started, especially on a phone where the screen just went black for a few seconds. I headed to Google in search of free (to reuse) images and found freeimages.co.uk.

I wanted the background and splashscreen to look like a chalk board that had sums on them. I was not dissappointed. A bit of WordArt in Microsoft Word ,with Google's Oswald font which is included in TextMeshPro, and I had a splash screen:

Game Over

I wanted to add a small amount of persistence to this game to see how it works. The High Score was the obvious choice and it turns out it's really easy to do. Unity's PlayerPrefs class has it all and it's very simple and intuitive to use.

public class ExampleClass : MonoBehaviour {
    void Example() {
        PlayerPrefs.SetInt("High Score", 10);
    }
}

This allowed me to easily add in a sliding panel, with graphics from Kenney.nl, that shows the score and the high score. To top it off if the score was a new high score I bounced some text that says New High Score at the bottom of the pane. LeanTween'ing all the way. 

End of Day 2

This time there is no day 3. I got it all done in 2 days from conception to production. The end product feels a lot more polished as well and I can see how it could be enhanced to add extra tile types and different sum types (=, -, /, *, etc.). For now though I'm done...

Sum Fun - Day 1

My first attempt to write a game nearly put me off but I decided to have another go. Again, giving myself just two days to write a game from scratch and publish it to the Google Play Store and Itch.io.

Again for the impatient, and a slight spolier, here is the finished game on both platforms:

Day 1

Game Idea

Thinking of a game is easy, but pinning down the game mechanic that is going to work is not. I also knew I had to do something that I could get done in just two days so I went with a block style puzzle. I was inspired by games like Bejeweled and Words With Friends, both of which work well on a grid with tiles and are fun to play.

Graphics Assets

I set about finding some tile graphics that I could move around a board to make sequences and score points and I came across opengameart. Digging deeper I found a popular contributor kenney.nl who has many assets available for free, or you can pay for the assets if you want as well (which I will once this post is done).

Clearly the puzzle pack was first on my asset shopping list:

I dug out my go to Unity, asset SVG Importer, since Kenney includes all the svg vectors as well (what a star!), and I manually arranged a grid of squares to see what it would look like. I then stopped as I realized I hadn't thought out the game mechanic and I didn't know where to go next.

Game Mechanic

I started thinking about numbers instead of shapes, focusing on the Minimum Viable Product philosophy. Then I had it. A game with a grid of numbers where you have to click on adjacent numbers to solve a sum. I grabbed my graph pad and sketched this out:

I got to work creating grid and a start button based on my sketch with the ui-pack from Kenney, using the squares in the middle left of this image;

For the text I decided to use the new TextMeshPro asset which was recently acquired by Unity and made available for free. It uses Signed Distance Fields to allow fonts to be displayed nicely at any size with a vector look instead of a pixelated look. It also allows for extra effects like outlining:

End of Day 1

It didn't take long to get a working prototype with random number tiles and a random sum. I didn't have the score working yet and it looked basic but the game was working. One day is enough to get something working I'm finding. Unfortunately I didn't take a screenshot at the end of the day, so there's no tad-dah moment yet.

Alien Invasion - my first mobile app

I always wanted to write a game but after a couple of failed attempts I realized I was trying to do too much and the scope was just overwhelming so I stopped each time. They were essentially clones of games I like to play, a dungeon crawler and civilization style turn based strategy.

Watching this Unity3D Tutorial about Minimum Viable Product and also reading about Ludum Dare made me focus on just getting something done. 2 days to write a game? Challenge Accepted.

For the impatient, here is the final app on itch.io and the Google Play Store for Android devices:

Day 1

What game to write?

Firstly what to write. We go down the pub most Friday lunchtimes at work and that's where a lot of ideas are generated (no often great ones but nevermind). Watching the USA Elections unfold from the comfort of the UK has given us the impression that Trump just wants to remove all Mexicans. Something about a wall, I don't remember the details. We joked about a game where Mexicans cross the border and you have to put them back into Mexico as fast as you can. OK, so it's not politically correct but I was kind of making a joke out the whole thing so I went with it. This was my first major mistake but it wasn't until later on that I realized it.

Which game engine to use?

Next what to write it in. I'm a C# programmer by day with my training in C++. That opens up a lot of gaming engines but my love of C# directed me towards Unity3D. All my previous failed attempts were also in Unity3D but I saw that as an advantage since I already had it installed and knew a bit about it.

What is the main game-play mechanic?

The I wrote out a basic game play on a piece of paper, together with a sketch:

• Enemies appear
• Move from South to North
• Drag them back to the South to score
• More appear faster over time
• Game ends when a certain number stay in the North

Create (Google for) graphics assets

That's the game play sorted, next for an asset list, no more than I needed:

• Map of USA and Mexico
• Enemy

I went to Google in search of an image for the USA and Mexico and this is when I started to deviate from the Minimum Viable Product mantra. I found a great public domain (ok to reuse) SVG of North America:

SVGs I thought. That would solve the problem I hadn't had yet about how to nicely scale the graphics to fit any device resolution. I'd bought the excellent Unity3D asset SVGimporter a while back for a previous failed project.

Next I need an enemy, something to drag back to Mexico to score a point. I love the Icons8 website and I'd bought their SVG icon set for development a while back. I see that they have now added a Trump icon but I didn't have a license for the SVG so I couldn't use it, but they did have a great Mexican Hat icon so I used that:

Start Unity3D

Primed with the game idea, the mechanics and the graphics I confidently started Unity with an empty project and went to the asset store to download the latest version of SVGimporter so I could get going.

Failed at the first hurdle. It seems that the latest version of Unity3D (5.6.0f3) has broken the SVGimporter asset. Actually looking at the forum it appeared to break a while ago. I diligently logged it to the developer and then installed an older version of Unity3D (5.4.5f1) as I didn't want this to stop me, I only had 2 days to finish this.

This lost me valuable time uninstalling and reinstalling Unity3D version but finally I was able to import my assets. Then I was presented with a choice. Import them as UGUI, Transparent or Opaque. I'd never done anything with Unity UI before so I thought, how hard can it be, and went with UGUI for everything. Ooops. I regretted this on day 3. I know it was a 2 day project but in the developer world 2 days always means at least 3 days, possibly 2 weeks!

End of Day 1

After aligning the graphics and adding some simple drag and drop functionality I had a working prototype. The map scales as you hover an enemy over it using the free Unity asset LeanTween:

As you can see I already begun a bit of scope creep but I felt that they were needed:

• Start Button (which slides of the screen using LeanTween again)
• Spawn Point for the enemy to start at (Tent from Icons8)
• USA and Mexico flags with Scores (public domain from Wikipedia again):

I finished the day pleased with myself for getting a working prototype.

Day 2

Sound Effects

I was dreading this. I have never done any coding (beyond beeps on the ZX Spectrum) that involved making sounds of any kind. Again I went to Google in search of sound clips that I could freely reuse and it took a lot longer than I thought it would. I was in option paralysis, unable to chose which of the many samples to include for different effects.

In the end I settled for these from FreeSound.org, after procrastinating for over two hours...

'Pop' sound effect for scoring a point:

'Let's Go' sound effect for starting the game:

'Footsteps' sound effect for the enemy advancing:

'Lose' sound effect for game over:

Music

I wanted a song that didn't have any copyright issues so I went for the classic Mexican Folk Song and La Cucaracha. I found a piano tab of it on tabsby.net which had a download MP3 button.

Thankfully playing a song or a sound clip is exactly the same in Unity3D so I just had to learn about the difference between AudioSource and AudioClip and I was done.

Google Play Store

I finished my game in Unity and tested it on my son's Motorola G3 (Android 5.1.1) and it all looked good so I decided to publish. I registered as a Google Play Store Developer and paid my $25, excited to be publishing my first App. Here is a screen shot of it:

It was a fairly painless process and within about 2-3 hours my app was available on the Store. I emailed a few friends and asked they to try it out. The reports were all the same. It's very hard to drag the hats as they're really small. It turns out that the Moto G3 resolution is 1280x720 but the Samsung Galaxy S7 is 2560x1440 and my app didn't handle that.

End of Day 2

End of the second day and I'd acheived a lot. I'd added sound to the game, deployed and tested on a real Android phone and to my amazement it all worked and navigated the Google Developer registration and uploaded my first APK and had it published. Success, albeit with some issues.

Day 3

Making it Resolution Independent

I went back to Unity3D tutorial videos and learnt how Unity UI anchor points worked and how to add new resolutions and aspect ratios into Game window in Unity to see how the game would react on different devices.

It didn't take too long and then I had another version of the app, version 2, which fixed the resolution issues and I uploaded it to the App Store, again pleased with myself that I'd not only shipped but I'd also fixed the bugs that were reported and uploaded a new build to the Google Play Store, something which I thought would be a formality.

And then I got an email from Google...

Hate Speech

What? All I'd done was change the UI so it scaled properly. Where did this come from? 

Hi Developers at Arlorean,
After review, Border Patrol, com.Arlorean.BorderPatrol, has been suspended and removed from Google Play as a policy strike because it violates the hate speech policy.
Next Steps

1. Read through the Hate Speech policy for more details and examples of policy violations.

1. Make sure your app is compliant with all policies listed in the Developer Program Policies. Remember additional enforcement could occur if there are further policy issues with your apps.

1. If it’s possible to bring your app into compliance, you can sign in to your Developer Console and submit the policy compliant app using a new package name and a new app name.

Additional suspensions of any nature may result in the termination of your developer account, and investigation and possible termination of related Google accounts. If your account is terminated, payments will cease and Google may recover the proceeds of any past sales and/or the cost of any associated fees (such as chargebacks and transaction fees) from you.
If you’ve reviewed the policy and feel this suspension may have been in error, please reach out to our policy support team. One of my colleagues will get back to you within 2 business days.
Regards,
The Google Play Review Team

Here is the policy they are referring to:

Hate Speech
We don't allow apps that advocate against groups of people based on their race or ethnic origin, religion, disability, gender, age, nationality, veteran status, sexual orientation, or gender identity.

Something that was a bit of fun and a chance to learn about Unity programming and Android Apps, had suddenly gone to DEFCON 1. Once your app has been suspended you can't see anything about it anymore so there's no way to work out what the problem is. You can't download it or update it, it's just gone and there's nothing you can do about it.

Politically Correct Graphics Update

So. I'm surprised at what's happened but I guess it's my own fault. I thought the concept would be funny and harmless but Google didn't. I set about changing the graphics so that it wouldn't offend anyone:

• The Hat was replaced with an Alien
• The Flag was replaced with a Planet
• The Tent was replaced with a Rocket

I uploaded this new version with a new name, Alien Invasion, since you can't use the same name once it's suspended. A few hours later I checked the developer console and it had been published:

Lesson Learned

What seems harmless can get you into a world of trouble. Be careful what you publish and try not to offend anyone. Stick with space aliens and you should be fine.