When we first began working with our artist to re-skin
Entanglement, we ran into several issues with finding a great font to match the feel of the game.
- It was very difficult for us to find anything regarding licensing for fonts commonly found on a plethora of "Free Font" sites. Many would include phrases like "Check with author for license details" yet include nothing about the original author so that we could do so.
- Most purchased fonts on our computers are specifically licensed for use on up to 5 computers and are not for distribution. This is useless for a JavaScript web game, because, by nature of @font-face, we are providing the font itself on our website for anyone to download.
- Our artist initially chose Herculanum, so, fortunately, we were able find it as a web font on http://webfonts.fonts.com/. This allowed us to subscribe to their web font service and include a link to a small CSS file in our page to use it in our pages' stylesheets. However, we quickly realized this was not a sustainable solution with the impending arrival of Entanglement as a pre-installed web app in the Chrome browser, which we estimated would put us in the "professional" pricing tier, giving us a monthly cost of $100-$500.
- The web font subscription service provided access to a huge selection of fonts, so we thought we might check with Monotype Imaging about just licensing Herculanum by itself. Since Entanglement is hosted on Google App Engine, we found that our web game fell into the "hosting a font on 4 or more servers" category, which again put us well outside of our conservative budget.
Fortunately, while trying to find additional fonts that had licensing information, I came across Jos Buivenga's wonderful selection of fonts at
http://www.exljbris.com/, including Fontin, the font we eventually decided to use for the text in Entanglement. This was a wonderful find because it fit nicely with our theme, was affordable (free), and had specific information about licensing for @font-face use.
 |
| Using Fontin in Entanglement |
For Thwack!! we chose two fonts from
Google Web Fonts. The selection has grown quite a bit since our last foray into font-finding, and it met our requirements in choosing a font: it is affordable (free) and is clearly licensed for @font-face use.
 |
| VT323 and Cherry Cream Soda |
Embedding the two fonts was quite easy. As an example, for Cherry Cream Soda (yes, we picked it solely because of the awesome name), we added one line to our HTML template, "<link href='http://fonts.googleapis.com/css?family=Cherry+Cream+Soda' rel='stylesheet' type='text/css'></link>", and one line to our stylesheet (for the body tag), "font-family: 'Cherry Cream Soda';". This was much more straightforward than the steps we took to arrive at a solution for Entanglement.
Nice day sir, I enjoyed your game "Entanglement" that comes on the Google Chrome front these days post install.
ReplyDeleteI was really impressed by the effects and music that you've given and that you've done it only with HTML+audio, and no "flash". I guess Google has taken a brave move removing flash from their hood ;-)
I believe if you gave an option to hide the status bar, it would be a complete immersive game!
PS: I keep the game on to listen to the background music even while working, it gives an awesome ambiance of positive energy :-)
I'm creating a game and am thinking about doing it in HTML 5. Can I ask you if you guys used any frameworks for any of your games? Specifically for entanglement, I need to have similar resize functionality found in that game (although the game won't actually be anything the same). Most HTML 5 frameworks I have found expect the developer to just place the game in a tiny little window but I want mine to take up the entire browser window. Also wondering what your thoughts are on losing out on potential players due to the HTML 5 requirement entanglement carries with it. Appreciate your feedback.
ReplyDeleteReally appreciable..:=)
ReplyDeleteweb design perth
Hi Sriram, glad you enjoy it! Hit F11 after bringing up the game and it will feel immersive :-)
ReplyDeleteHi David, we basically created our own framework for our games, but I did a write up about the resize functionality on html5rocks.com that you would probably find useful.
@David - concerning the second part of your question: I think this was a very valid issue last year this time, but the landscape is quickly changing. The scope of browser support still favors Flash currently, but every major browser is adopting HTML5 capabilities at a very fast pace. Also, HTML5 is supported by many mobile devices where Flash is not. Probably the other drawback is the established Flash ecosystem when it comes to portals and such, but I believe that will change soon as well, with companies like SPIL Games already adopting HTML5 for their mobile portals.
ReplyDeleteNot related, but I don't know how else to contact you: Is there some way you could make Entanglement not burn the CPU when it's just resting? The web page appears to be in a loop of some sort (one CPU core is usually at 100% use), even when it's just waiting for you to click on a tile. I have both sound and music turned off; doesn't help. Seems to be an issue with both Chrome and FireFox 5.
ReplyDeleteThis really nukes the battery life of mobile devices.
Hmm, I'll look into it. Currently it should only be doing a check-up of sorts once a second when it's not visible (for example, to keep the background music looping if it's on), but that shouldn't kick up CPU usage that much.
ReplyDeleteThis comment has been removed by the author.
ReplyDelete