TURN - Test Your Reflexes!

[mileung]

I recently finished my second game (first game for both iOS and Android) and it's called "TURN - Test Your Reflexes!"

 

It's a game where you can furiously  swipe up, down, left, and right.

 

To make a long story short, I basically made the game in Brackets using Phaser and then wrapped it using Cordova.

 

iOS: https://itunes.apple.com/us/app/turn-test-your-reflexes!/id1044378137?ls=1&mt=8

 

Android: https://play.google.com/store/apps/details?id=com.leungmichael.TURN

 

It's a little laggy at first, but the lag goes away after a few plays.  It's weird.  For the next update, I'm trying to look into other ways to port my game so it run smoother for the devices that TURN lags on.  So far I'm considering Ejecta, NativeScript, Uglifying with Gulp, and if all else fails, I'll just rebuild the game with Unity or Cocos2D, but I believe that I can get my app running smooth for all devices without having to rebuild it.

 

Thanks for any questions or feedback!

 

For the full story of how I made TURN, here is the full article which I posted on my website, LeungMichael.com

 

TURN (October 1, 2015)

 

 

Starting in early August, as my Summer was coming to an end, I decided to create a game similar to an idea I thought of during the Mission Bit course I was in earlier(mentioned below). This game idea basically was the same thing as a wooden ball labyrinth except instead of being able to crash into walls, you would fall into a pit should you go off path. But if you've played TURN, it's a little different in that it's not a labyrinth and to lose the game, you have to overlap the walls by a set amount.

What made this project different from any other project that I've made, is that it was my first project going into "uncharted" territory without any help (except from Google of course). In this project, I used several new (to me) programs and frameworks such as GIMP and Cordova to name a few (more will be mentioned throughout this article). But let's transition to an easier to comprehend "timeline" of how I first started making the game to how I eventually got TURN on the app stores.

Prior to making TURN, I had zero experience on making HTML5 games; my only experience with web development was in HackEDU's Hack Camp (which I took right after Mission Bit) and this website that I update every 1-3 months. So you can imagine that making a web based application would be very difficult for me; in fact, I had originally planned to finish TURN in less than 5 weeks as that's about how long it took to make Astro Balls, but when I finally finished TURN, about 7 weeks had passed and that's me working at least 7 hours a day, 7 days a week on something that I wasn't even sure was going to be finished. But back to the start, I began learning Phaser around the time I made this video as a reference for other beginners to flatten the learning curve that comes with Phaser. It's a pretty bad video and I actually just recommend using Brackets because they house their own text editor and local server into one unit.

After finishing the tutorial for Phaser, I made my first big mistake and that was to jump straight into coding without having a full understanding of how Phaser games were structured, so I began to structure TURN the same way as Astro Balls. I didn't mention this in my Astro Balls article, but Astro Balls is all done in ONE update loop. All game states are booleans like "atMenu = false" and were each put in their own giant if statement. Translate that same game structure over to HTML and things will start to lag very quickly. After about a week of coding a game that was poorly structured, I only then realized that TURN would begin lagging after about 40 seconds of game play. So what did I do after that? I quit using Phaser and moved onto making the same game in Unity.

Learning Unity was interesting. I learned from a top rated Unity course that I bought off Udemy for $10. What made Unity different from my previous projects was that each object in the game can have their own update loop; it was weird. I can't say much more about Unity because I decided to give Phaser another shot after coming to the understanding that yes, it was my code and not Phaser that made TURN lag so much, but also I knew there would be a steep learning curve. Did I get anything out of the 1.5 weeks I was using Unity? Yes, Java and C# are very similar, but my biggest take away from Unity was the use of game states and that helped me understand how to structure Phaser games.

So now I'm back to using Phaser. At this point, I've realised that I've made another terrible mistake, deleting all of my previous code from the original, horribly structured TURN game I had made, as at the time, I assumed that I would finish TURN with Unity. So now I'm basically back to square one. This is when I started to doubt myself about finishing TURN on time. I even began to make quick code snippets on Khan Academy of really small apps I could start off with before I finished TURN because I had underestimated the time it would take to finish. But I pushed through, going through several iterations of game mechanics and animations. The biggest turning point (no pun intended) while making TURN was deciding if I should continue working on a randomly generating AI to remove the tiles or to have preset paths in the game. I had already put in about 10 hours into creating an AI, but time was of the essence, so I decided to just use premade paths. There are two advantages of using premade paths, the biggest one being a boost in game performance, but also it allows me to put in routes that would occur way more often than if I had just had a randomly generating AI.

Speaking of tiles, TURN's map is a tilemap 7 tiles wide and 38 tiles tall, but in the beginning, my image of TURN was very different. I had originally created several PNG image files of paths on Piskel (I use Piskel for all of my 8bit art). The problem is that Phaser's arcade physics does not support pixel perfect collisions, so the 51 images of unique paths were all trashed along with the hours I spent making them; I should mention that a HUGE part of making TURN was wasting time on things that I had assumed would work, but I definitely learned a lot during this process. So yeah, originally I was going to have these paths fall down the screen and once an image of a path went off screen, it would be translated back to the top (off screen) and have a different image attached creating an endless loop. Now that having images of paths doesn't work for collisions, my only option was to make a tilemap. I at first was going to used Tiled, but it was a lot easier to just declare a new layer in Phaser that was 7x38 and fill them up with tiles in a for loop in my create method. Another issue I ran into was that you can't place tiles in negative coordinates or coordinates outside of the tilemap declaration. This is why the ball starts at the top and why I have the ball bounce back up after it hits the 38th row; it's mostly for performance because I can't make an infinite tilemap, but this definitely makes the gameplay of TURN unique.

One thing I've learned while making games is to not spend too much time on the artwork. I had spent several hours on making 8bit style artwork before actually coding. The problem that I ran into that made me trash 95% of my original art was the difficulty that came with creating my own font. I spent about 2 days trying to create my own 8bit font, but in the end I didn't want to bother with Glyph Designer or Adobe Illustrator because of their subscription based user fee. I even tried using MyScriptFont by pasting my 8bit numbers on the chart using GIMP, but the problem was that the numbers weren't "crisp" and the different shades of colors were not picked up; my numbers were just plain black. I eventually just settled for the default font used in Phaser which is Arial or something generic like that. now that my numbers were are smooth and arial-ly, my game just looked really out of place with everything being 8bit except for the numbers; yuck. One trick I used to make the backgrounds of my buttons was going on JSBin and making shapes with CSS; sometimes the Macgyver route of things is the better option. Other than using CSS to make shapes, I also used Sketchpad to make everything from the lightbulb to the replay button and then used GIMP to color them in. The only thing that remains from TURN's 8bit past is the high score icon; not the button, just the image of the podium. And just to clear this up, I added the light bulb for low light conditions; having a white screen at night will blind you.

After finishing the game, it was time to monetize my app and make it rain! Originally, I had planned to use CocoonJS to monetize and deploy my game because that's what I was using for the majority of the time testing my game on an actual device using the CocoonJS Launcher, but they never replied to my email regarding how to monetize my app because their instructions were confusing/unorganized. Also, I didn't find out until very late that their was a huge fee to remove the "Powered by Ludei" splash screen had I continued to deploy TURN using CocoonJS. My next best option was to use Cordova which is basically the engine behind both CocoonJS and PhoneGap, so it wasn't like I was losing a whole lot and actually, the only Cordova Plugin that I'm using is AdMob Pro. Since this was my first time using Cordova and Cordova Plugins, it was all very confusing at first. How do I link the plugins to my code? Why are there multiple www folders in my Cordova project directory? What commands am I supposed to use in terminal? This all cleared up with practice, as one thing I've learned about coding in general, is that if you stare at something long enough, it will eventually make sense. One thing to note is that I had originally planned to have the interstitial ads show up randomly with a 1 in 21 chance of showing, but after I published TURN to the Play Store, my friend Jeffrey pointed out that the interstitial ads were showing every time he died which is very unlikely. So I just decided to add a counter to make sure the interstitial ad pops up every 8 or 9 times you lose. And one final thing to note is that you SHOULD NOT prepare an interstitial ad and then show it on the following line in your code. THERE WILL BE A DELAY IF YOU DO, so what I did to reduce the delay between preparing and showing a full screen ad was to prepare the interstitial ad in my game over state, and then show it right before the game state switches to the game over state when you hit a wall.

Once I finished monetizing TURN, I was finally ready to publish it to the app stores! One thing Cordova or the app stores should fix is the whole icon thing. Let me give you a background on how icons work in apps. For both the Play and App Store, you have to submit a high res icon (1024x1024); this is the icon that will show on the app store. THEN, to get a specific icon on the home screen of your phone, you have to go into the files of your app and change those images too, otherwise the default app icon is the Cordova robot guy. With apple, there are over 15 icons you have to upload in different sizes to support their multiple screen resolutions; there's a similar process with Android. On cordova, you can add an icon tag to replace all the app icons, but Cordova doesn't resize them for you; you have to resize them manually through preview. I tried using the "Cordova-Icon" plugin, but it wouldn't work for some reason, so I just decided to resize them manually because I wanted to get TURN on the app stores as soon as possible.

Getting TURN on iOS was very nerve wracking. It took about 7 days for my app to go from waiting for review to being ready for sale. I constantly thought of little changes everyday to add to make my app less likely to be rejected like adding a splash screen (right now it's just a black screen and I plan to keep it like that). But the thing that I constantly worried about was the performance of the application. Apple has a strict app policy that they all have to have a similar interface so that iOS apps are all somewhat similar in user friendliness, and I constantly kept thinking about Apple rejecting TURN because it can be laggy at times and it wouldn't seem like a native app. Well, after my app got accepted to the App Store, I felt so relieved; it was like being accepted to a prestigious university. All of the hard work and dedication that I put into TURN finally paid off. TURN being accepted to the app store is by far, one of my proudest achievements.

That is basically everything on how I made TURN without actually giving you the source code. If you're a complete beginner who would like to start making silly JavaScript games like me, go on Codecademy to learn JavaScript, Khan Academy to learn HTML/CSS, and look at the examples on Phaser.io. Also, buy the Phaser books; the total cost of everything for me was like $40, but it was well worth the price. Coding is really hard, it's just that you can't give up easily; I went through 5 builds of the first version of TURN before I was ok with leaving it on the app store and I often stayed up past 4am because my brain kept racing about ideas and algorithms to implement into TURN, so it was really hard for me to sleep.

Now I will talk about the Kickstarter that I will be creating after the iOS version of TURN has been up for about a week. Basically, I will let funders submit a path for me to implement into TURN because you can notice in the first version of TURN that the paths are repeated a lot. I'm kind of not really doing it for the money (the goal is $15), it's just that I need an audience if I want to make a reasonable amount of money off my games and I need to start some where right? So with that being said, I will update this website once TURN on iOS has been up for a week.