Background
A little background about me and my where I am coming from. I have been a web developer for about 4 years now and have loved every moment of it. You can do so much with the various web technologies available. Currently I primarily work in the front-end with HTML, CSS3, and JavaScript. Although I work in the web I've always been interested in mobile game development. One of my classes in college had us create an app in iOS, Android, or Windows Phone and then share with the class. I started out trying to work with Android, and it was a pain. The initial 'hello world' tutorial was great but after that I couldn't find any information that I needed. Specifically I was trying to find information about how to create a multi-paged app in Android. No answers could easily be found. I switched to Windows Phone and found it a lot more intuitive to create a simple app in (it was a roller coaster credit counting app). Because of that experience I've been really hesitant to get into native mobile game development. I didn't want to learn a new language (especially not Java or Objective-C).
Over the past years I've been following the momentum of HTML5 apps for mobile development. I've built some mobile sites using jQuery mobile and messed around with it quite a bit. But jQuery mobile is really good at one thing, HTML content. By that I mean a document of information that then you can navigate through, such as a list of movies or pricing information, not for games. I looked into software such as Construct 2 that uses HTML5 Canvas to render the game and the results are really good on most devices. Construct 2 just felt that it really only is for making certain types of games quickly and didn't easily give me the control or freedom I needed with my ideas for games.
During the past year or so I've been learning and studying about CSS3 animations, and it blew my mind. I could animate things in the CSS and using some hacks it would be offloaded to the GPU and it would look really smooth. Combine that with a fast-click javascript plugin and you start to get something that if tweaked enough could be a native app. Ideas started brewing in my head. I wanted to build a simple HTML5 game from scratch using HTML elements so that I could apply CSS3 animations to them.
Let's build a game in HTML5 and CSS3
Time to build a small simple game. The idea was that it would be small, maybe a 2 week project, that was a proof of concept in doing more complex games. I was going to build a simple ride operator app based on the Scrambler ride found at theme parks and carnivals. Why did I choose this? Because the ride mechanics and animation are very simple. You have an overall spinning structure that has three sub-structures that also spin, pretty straightforward.
Using jQuery to fire an animation actually wasn't too hard. When a control element was tapped I would add a class, such as 'spin' to the main ride structure element. That would add the spin class that had CSS3 keyframe animations to tell it to spin so many degrees for so many seconds. Using ease-in-out and GPU acceleration it looked smooth and I thought my crazy idea might work.
It was such a tiny app but quickly it just didn't feel like a game and things were breaking. Why were things breaking? Because of the same thing I fight everyday in my web development work, different browsers. I tried to make my app as cross-browser version friendly as I could. But Android 2.2 and 2.3 had big problems with rendering CSS3 and I didn't want to eliminate that user base from my apps.
Below you can see a video of my app. While it works it took a lot of work to get it to that point and it only performs really well on all iOS versions as compared to Android versions. But even that small of an app took about a month to create (not including packaging with PhoneGap or anything like that). So I knew that it was possible to create HTML5 apps but it just didn't feel like the right thing to do for the current scenario.
*Now I know that it can easily be pointed out that I should have gone the canvas route since doing HTML elements and structure works for certain content. I know and realize that. Before diving in I looked into using canvas. Had I gone that route I would have done it from scratch to be able to learn the most. But there are other problems inherent with canvas. For one thing you can't easily scale the canvas to different sizes. At least not as easily as with CSS3 media queries, something I knew a lot about. So I do realize that I should have used canvas and that had I used it I might be tooting a different horn. Overall though I'm happy that I'm not using it for the type of apps that I'm making. Especially with how fast I was able to get running in Corona SDK compared to web technologies (again, something I have 4 years experience in).
Enter Corona SDK
In July I started working on my Disneyland Resort Trivia app as a HTML5 app. I thought about doing something such as Construct 2 just because it seemed a lot easier. But I was worried about that a game so reliant on text wouldn't scale properly to different sizes (Construct 2 scales everything so the text scales as bitmap versus vector). I didn't want fuzzy text in this app, users needed to be able to read the buttons. So I decided to stay with HTML5.
About a week into development a friend mentioned Corona SDK, something I had previously looked into but didn't want to get into as it cost money up front. Well now they had a free package for developers to use. I started looking into it and specifically the API. Could it do everything I wanted it to?. It used some language called LUA, which I had never heard of, but it looked like Python so it felt pretty normal for me. I downloaded it and started playing with it and looking at the examples and their code. In one night I made a two-button app that played some sound clips from Jurassic Park. After that, and a couple small tutorials, I was hooked. I built a crude version of my app to see if it could do everything my brain envisioned it doing, it could. At this point I was hooked and I never wanted to go back to trying to make apps the way I was. Why had I waited so long to try Corona SDK?
I built out my app and polished it up. It took two months to learn, design, create, and test the app. But it was easy, the API and tutorials are fairly straightforward and easy to use. There is plenty of documentation and tutorials around the web to help answer most questions. Most of all it just felt right for designing a game. Some of my favorite features include:
- I love how it will scale the game for you (responsive is great but not perfect)
- Scales for retina/HD devices (which is a huge headache with HTML5 apps)
- Building out for Android and iOS is simple and painless
- API is great with examples and code snippets
- LUA was really easy to get started in
- It has physics (which I will be using shortly)
- Did I mention you can start for free? I like free.
Summary
Overall it has been a smooth jump into Corona SDK. I have loved every minute of it. If I had a bug or issue I can find my answer easily on Google. If I can't find it by searching I head to the Corona forums and tutorials and ask a question. I'm excited for the ideas that I have because they can all be done easily in Corona SDK and be cross-platform.
While I continue to work as a web developer by day, by night I am a growing addict of Corona SDK. There's no telling where and when it will stop.
Sound Off
Questions? Comments? Agree? Disagree? Leave a note below if you want to, if not then thanks for reading!
Space Mountain 3D recreation
Disneyland Resort Trivia App
Disneyland RCT 2 recreation