Trying to Make it Big with HTML5

How I got started with HTML5

I remember when I purchased my first smartphone (iPhone 3). The very first day that I had it, I installed the New York Times News app and in that fateful moment when I tapped on the icon, the very first article that appeared was titled “ Build an app and quit your day job”. I remember reading how a programmer who worked for for Sun Microsystems, began to work on a game in his spare time and outlined the story of how he made over $85,000 within 6 months with a game he had created. That was all I had to read. It wasn’t too long after a bit of research, I chose a game engine to start developing with, and went to work.

When I first got into game development, I had a very specific vision of my first game, that being Final Contact. Of course I was nowhere near ready to start developing my dream project. I started, like most developers, prototyping various 2D games (mostly platformers) for practice, and like most developers, I was reading a lot of tutorials and working the forums where I made a few friends. At that time, the mobile game market was just beginning its boom and everyone had big dreams. So when I eventually told a few of my developer friends about the type of game I wanted to develop (a space simulator), to utter my dismay, they informed me, that it just couldn’t be done. I was using the wrong platform and that i should consider using unity3d. I was already six months into the learning curve and at that point, I had no intention starting all over. I also was enjoying what I was doing and learning way too much. For a brief moment, I abandoned my dream of a space sim, and kept working determined to become a game developer.

Not too long after my disappointment, I got laid off from work for two weeks through the Christmas and New Year holiday. I was working on a game and watching re-runs of X-Play on the G4 channel when BAM! There it was. A video of the fan made game Wing Commander by Chris Roberts. That was it. That’s what I wanted to make. Right then and there, inspiration struck me. With a few new skills under my belt, I had an idea how to make it work in a 2D environment. I went to work on it feverishly and in a few hours had a prototype mocked up and the basic mechanics working.

Needless to say, I never let anyone tell me “what couldn’t be done” again and I’ve learned that the only limitations in game development, are those that you impose on yourself. I’ve always considered myself and “out of the box thinker” when it comes to development and that mindset has served me well but, developing my game in HTML5 was not without challenges. Final Contact started off to be a much simpler game in its initial design when I first conceived of it but, essentially it was the same game as it is today.

Of course, HTML5 also made more sense to me at the time since the allowances for app sizes were much smaller at that time, on iTunes and what is now Google Play, and mobile devices were also not as powerful as they are today. I believed then (and now) that I could make a better performing game for the mobile market in HTML5 then I could with a larger engine like Unity3d.

The Challenges

Clearly, there are some significant limitations in trying to create a 3D experience with a 2D game engine but, with some creative thinking and coding, almost anything is possible. For example; In a 2D game environment you’re limited to X & Y coordinates but there are a number of things that can be done to give you depth. Use of layers, parallax effects, smooth scaling, and creative animations go a long way to simulating depth.

Almost all of the objects (enemy fighters) are actual 3D models rendered into 2D animation sequences in 3D Studio Max and imported into the game. Combining those animations with various movement behaviors and sine effects for allows for reduced number of frames in animations. With just a small number of animated frames combined with sine behaviors that make objects/animations sway along their X & Y axis, size up & down to simulate minor forward and backwards movement, in addition to moving through a range of the objrct’s angle, can create a very realistic pseudo 3D realism when combined with a small amount of animated frames.

While Final Contact has multiple gameplay mechanics throughout various levels, simulating the ability move full circle through 360 degrees has been a challenge. In a 2D environment, when moving to the end of the screen where the right half of the screen must meet the left half or vice versa, a void or dead space is created. While the starfield backgrounds may overlap making this almost unnoticeable, enemy fighters disappear briefly if they fall into the dead space and are not visible on the screen for a brief instant. To overcome this I they use a variety of techniques. Some of the enemies in the background will actually change direction angling away to avoid falling into the dead space. Some background Fighters, will make a small jump to hyperspace. This is exemplified by creating an engine exhaust effect followed by a fast acceleration, and then a starburst effect which simulates a small hyperspace jump. The effect only lasts a few split seconds and the fighter appears on the other end of the screen. In the case of fighters engaged in a dogfight, those directly confronting the player chase the player as he moves around the screen but, when closing in on the dead space, the enemy fighters will veer away and re-engage after the player has cleared the dead space. Like many developers do in game development, I try to capitalize on the bugs or limitations of the game engine to create a new mechanic that works in a positive way for the players experience and sometimes leads me to new ideas in gameplay development.

Creative use of runtime particle effects like smoke protruding from enemy fighters after they taken significant damage, really contributes to the 3D realism in the gameplay. Using runtime particle effects can drain a lot of resources and need to be used with discretion but, a little bit goes a long way when used correctly to create a 3D realism.

Smooth scaling effects to sizes large and small, combined with speed of movement, are important part of the process as well. Making enemy fighters and weapons effects, scale up or down in small increments with every tick (frame rate of the device), help to create real depth in a pseudo 3D experience and the challenge in making objects react differently based, not only their own scaled size but, also on the scaled size of the objects they interact with like torpedoes striking an enemy ship because of the depth or perception of distance, causing the torpedo to hit the target or pass by it realistically.

Optimization is another challenge especially when using a large number of objects with a large number of frames in their animations running at high speeds. Every game engine has a set of general guidelines for optimizing performance. Optimizing takes experience. It requires and intuitive sense that can only come through experience as well as a detailed understanding on what factors can degrade performance.

Good coding practices are especially important since I don’t think that developers often realize how much of what their coding comes into play with performance. This especially holds true if you’re trying to create a level of AI in your game. When the game is forced to make decisions that often have to check variables, this can cause problems or lag in a game.

A good example of this exist in the first level of Final Contact’s gameplay. When engaging in a dogfight with an enemy fighter, and the enemy fighter is destroyed, the game must make a decision as to whether to spawn the alien fighter pilot that the player needs to capture with a tractor beam. In order for the game to decide whether to spawn the ejecting alien pilot, it runs a function that chooses a random number in a range of numbers. Within that range, some of those numbers return of value that allow the enemy fighter to spawn the alien pilot upon being destroyed. In addition to this there are three conditions that need to be met to allow the enemy alien pilot to be spawned. Running the random number generator function, and checking the three conditions that need to be met cause a hesitation or jag in the game when the enemy fighter is destroyed. To overcome this, I run the function to select a number when the dog fighter is actually created so that the value is already set and waiting. Then I create a boolean variable that returns true if all three conditions are met and false if they are not. When the enemy fighter is destroyed, the number function that allows it to spawn the enemy pilot, is already set and the game only needs to know if all three conditions are met by checking one variable rather than three, thus eliminating the hesitation and lag.

Advantages of HTML5

Developing for mobile and PC at the same time.

 The game industry is often difficult to classify with so many different types of games as well as level of development and trying to classify them into all of the platforms can be difficult to say the least. Not to mention the range of the players or gamers. I found that gamers often prefer the platforms that they first learned to play games on which is why many console and PC gamers tell me they don’t play mobile games. A player’s  paradigm for what a game experience should be is often shaped by their first gaming experiences.

Take a game like GTA for example. Obviously, playing GTA on a mobile device is not the same game or experience as it is on the console. For this reason a lot of console or PC gamers claim they don’t play mobile games yet, the mobile versions are are still very successful because there are quite a number of those gamers who still enjoy the lesser mobile experience of the game and likewise there are gamers that don’t have consoles that play the game because of its large brand recognition.

In contrast, Final Contact, will be the same game and “game experience” on the mobile device as it is on the PC with only minor runtime changes like speed, acceleration, and deceleration (to name a few) that is auto-detected based on the platform the game is running on. Of course the final mobile products graphics will be pre crunched prior to packaging, the number of frames in animations will be reduced, and this will allow for a reduction in the speed of the animations while improving performance on mobile platforms without sacrificing the visual quality of the game.

On the mobile platforms this can be done quite easily while still maintaining a high quality look and significantly improves the performance of the games on mobile platforms. In essence, the smaller the screen, the less required to maintain visual quality.

I know this to be true from experience. When I first started creating Final Contact, it was only for the mobile platforms and since mobile devices were not as good as they are today, I had to really push the envelope in terms of optimization. I was able to achieve a very high quality look for the game and gameplay. Now that I’m developing for the PC platform as well, I realize I can use much larger graphics, more frames in my animations that run at a higher speed, combined with effects and behaviors that really create a spectacular visual experience.

Another clear advantage of HTML5 is fast testing. With HTML5 I can run the game in a web browser testing the changes quickly. I can also export the project and run on any mobile device through the mobile web browser. This allows me to test how game mechanics are comparable from the PC to the mobile device and gives me the ability to make small changes while still developing gameplay on any given level. If the game runs good in my  Mobile web browser with the large graphics and large number of frames in animations, I know the game will of do even better when the optimized for mobile platforms and I will see an even greater increase in performance when the game is packaged into a native install.

Making the game available for beta testing is another advantage. Last summer we held a beta test of over 350 gamers. We were able to make a game available through a single link that allows users to play the game either on their mobile device or on their PC through a web browser. It also allows for continuous beta testing with a few select game testers who I can make select levels available to and get specific feedback from them and their experience without having to create installation packages for Android, iOS, or even the PC.

The Result

We work an aggressive social strategy promoting our game, posting screenshots, videos, and development news. We’ve grown an impressive following and almost a day doesn’t go by, when working social media, that I don’t receive and read statements like, “it’s amazing what you can do with Unity” or “ will this game be available in oculus rift”? Its statements and questions like this along with all the positive feedback and an expressed anticipation for the game that are the real indicators of success to me and let me know that we’re on the right track in the development process.

Every great indie game project has a great development story behind it and developing the level of gaming experience and quality that exist in Final Contact in HTML5 is a big part of my indie story.

The only limitations in game development, are the ones that you set for yourself…

Dominick Gentile

Lead Developer/CEO

final-contact.com