Tag Archives: CSS3

Cutting circles in your HTML with CSS3

Masking images on the web has typically been a job reserved for Adobe Flash or some equivalent photo manipulation tool as a static image. While Flash was prevalent on the web, it became really easy to mask an image with a vector shape. Now that Flash content has been largely replaced with a combination of HTML, CSS3 and Javascript, it is time to dig back into the toolbox and find new solutions for old problems.

Screen-Shot-2013-10-08-at-2.47.29-PM

Masking Techniques

Making a mask for an image requires some sort of shape to use as the “mask”. This will determine what portions of your image will “show through” or be excluded. Typically a vector shape is used to make a mask. On the web, SVG (Scaleable Vector Graphics) is used to create these vector graphics. All the different ways to mask an image are outside of the scope of this article, however one technique that is illustrated in the next section does not require SVG at all. For more detailed information on the different ways to mask content with SVG check out this article

Masking with Radial Gradients

After a slight detour, it is time to get back to the task at hand. Cutting a transparent circle in a DOM element. As we have seen above, we can cut out all sorts of shapes using SVG. By layering a radial gradient over the top of a particular element we can achieve a similar effect using a circle. Check out the fiddle below for more details.

http://jsfiddle.net/HAKuS/1/

To create the illusion of a cutout circle we use the color-stops property of radial gradients. In the background-image style property the first color-stop is a 100px transparent color. This creates our “hole” in the white overlay. The next color-stop creates a 5px inner shadow of semi-transparent black. The final color-stop creates the background color for the rest of the DOM element. And volia, there is a masked hole in your DOM element with no SVG!

Screen-Shot-2013-10-10-at-9.17.01-AM

A tale of two app stores

After finishing my first PhoneGap application (Spelling Bees) and publishing to the Android Market and the Apple app store, I thought it would be a good time to reflect on the whole process. The intention is to help folks getting started building HTML5 games with PhoneGap and some of the issues that can arise when developing for multiple platforms.

App Links

Apple App Store
Android Market

Technologies Used

Before diving into the specific app stores/markets it would be beneficial to talk a bit about the strategies used to develop Spelling Bees.

PhoneGap

For those of you not familiar with PhoneGap, in a nutshell it is a wrapper that allows you to write your game with HTML5, CSS3, and JavaScript. The files can then be published as a native application on iOS, Android, Windows Phone, etc. PhoneGap also has hooks into hardware features such as camera, accelerometer, lifecycle events, etc.

Crafty.js

Crafty.js is a JavaScript framework that features collision detection, eventing, scene management, and an entity component system. Having tried out a few js game frameworks crafty was by far the easiest to get up and running in. Spelling Bees had multiple screens to navigate through. There is the main screen, levels, help, and actual game. Crafty helped organize each into a Crafty.scene() which could then be called later. Also, crafty made it super simple to add collision detection and simulated gravity with the component system.

A sample crafty scene for the game over screen.

jQuery tmpl

jQuery templating was invaluable on this project. Once I had my Crafty.scene() defined I wanted to pull in a template of what each screen should look like. Below is an example of the high score screen.

In the example above I could dynamically pass in the high scores to the template and render once the game ended.

Lawnchair

When playing spelling bees levels are locked until you pass the previous one. The game also saves high scores and state information in case the player gets a phone call and needs to resume the game. All this data is being stored in a websql database on the device. Lawnchair is a simple library that lets you store and retrieve data in JSON format. It abstracts out all the websql stuff which makes it dead simple to retrieve and store game data.

CSS3 Transforms

Transforms are your new best friend when animating with mobile devices. The big benefit here is that CSS3 Transforms can be HW accelerated on iOS devices. This means you can use the GPU to move your character around. This results in very acceptable performance.

The above example will rotate our character 7.5 degrees and move them to x:100 y:100. As discussed in other blog posts we can use a requestAnimationFrame loop to animate this property over time to get HW accelerated performance with a little CSS and JavaScript! Neato…

Apple App Store

iOS is by far the most friendly platform to develop HTML5 games on. However, getting approved as an app developer is probably the most painful. If you are signing up as a business it will require faxing some business documents to apple, paying your $99 fee, and waiting awhile. This will most definitely not happen overnight! If you are planning on launching a game I would give yourself 2 – 3 weeks to be safe.

iOS Background / Multitasking with PhoneGap

PhoneGap has lifecycle events built in for multitasking with pause, resume, etc. I found these events to be unreliable and my app would freeze if iOS decided to randomly dealloc the memory my app was using in the background. I decided to turn off the ability for my application to run in the background. I did however save the state with lawnchair after every turn so that the user could immediately pick up where they left off on the current game even after a phone call or possible crash.

Developing a PhoneGap game for iOS

Since canvas is not HW accelerated on either iOS (edit: canvas now HW accelerated on iOS 5) or android devices I knew from the beginning that all my movements were going to have to be done using CSS3 transforms. Again the added benefit being that on iOS devices CSS3 transforms can be HW accelerated.

SVG – @font-face. If you are planning on using @font-face to jazz up your typography keep in mind that @font-face on iOS 4.1 and below requires SVG fonts to also be included. Otherwise you will get the default serif or sans-serif.

Testing

One neat feature is that you can setup a local domain to test in the iOS simulator before ever opening xcode! You can edit your /etc/hosts file on mac and add an entry such as

Next, you can setup a virtual host in apache to point to this local domain. If you then fire up the iOS simulator, open safari, and navigate to mymobilegame.local you can do initial testing without going through the hassle of setting up an xcode project.

Distribution – App Store

Distribution to the app store with a PhoneGap application is the exact same as any other native iOS application. I won’t go over the whole crazy process. However, make sure to sign your application with your distribution profile before archiving and submitting.

Last but not least. Submit and prey that Apple likes your app and you get approved. Once submitting it will take up to a week for approval. The approval process happens every time you make an update as well so be sure to test your application as you will have to wait a week to fix any bugs!

Android Market

Next up Android. To publish a paid app to the Android Market you will need to pay a one time fee of $25. You will also need to sign up for a google checkout account and wait for them to deposit a small amount into your bank account. You will then need to enter this amount in the developer area to verify. This process shouldn’t take more than a couple days.

Screen Sizes – Phones / Tablets

As you probably already know Android devices come in all shapes and sizes. The goal was to use one codebase for all the different devices on iOS and Android. To account for this Spelling Bees displays all fonts in EM’s. This way they will scale properly on different form factors. Next, be sure that all of your game graphics scale. For example, the bee width and height were based on percentages instead of pixels. This way the bee would have same size ratio on a phone versus a tablet.

Transform Bugs

Unfortunately, Android has a serious bug with CSS3 transforms and only allows one transform at a time. Tip: Use transforms to rotate or scale your object and fall back to animating the top and left properties to translate your object.

Emulator === Pain

When building a game for an Android device the hardest part is testing. The emulator is so painfully slow and makes it impossible to test a game. The only way to adequately test is to find some friends with a bunch of different Android devices. The good news is that you can easily drop your app on their device for testing via the usb cable, or DropBox.

Workflow

With my initial requirement of developing a game once and having it “just work” on the web, as an iOS app, and as an Android app the workflow was very important. Initially the game was developed as any normal website. I setup a web project in eclipse and started coding the basics. Then, I setup a PhoneGap project in Xcode for iOS and an Android based eclipse project. To make the process simple I setup ant targets in my web project. This way I could develop in my web project and could easily publish new features and settings to the different devices without duplicating efforts.

One codebase, 3 projects! WOOT!

Conclusion

With PhoneGap and HTML5 we have a really nice way to write once and deploy to many devices / platforms. With the same codeset I could now also publish to the Chrome Web Store or any other market that comes along that supports HTML5, CSS3, and JavaScript. This give development shops a great way to reduce overhead, leverage existing skill sets, and focus on making fun and engaging games. It is an exciting time to be a JavaScript developer for sure!