Friday, October 14, 2011

Loading HTML5 Game Assets

Before diving into HTML5 game development, I built a few conventional web sites (like this one - nice snapshots of the Blue Ridge). With conventional web design, page assets like images are loaded once the page loads, slowly filling out the blank screen with colorful pictures. This works well for web pages, since you can immediately begin reading the content and hardly notice the small delay as the images are painted in.

However, the wait for in-game assets can be especially long when downloading 10MB worth of images and sounds for a game like Entanglement. With Entanglement, the first issue I came across was that I couldn't draw a beautiful wooden tile to the gameboard canvas if the wooden tile image hadn't been downloaded yet.

My first attempt to solve this problem was to throw a JavaScript try/catch block around the drawImage calls so they wouldn't break the game if the image wasn't available yet. This resulted in the game starting immediately, but the gameboard slowly appeared as the images were downloaded. This is fine behavior for a web page but seemed a bit ugly for a web game.

My second attempt was a bit better: I included all the images in the html document as invisible <img> tags. This ensures that the images are indeed loaded before the game began but had the unfortunate side effect that JavaScript processing didn't start until the entire page was downloaded (including all the referenced images). This caused the long wait at a "Loading..." screen that couldn't be dynamically updated with a progress bar since JavaScript wasn't running yet.
It's doing something but we're not sure what nor how long it's going to take.
Enter the Asset Loader! This tool allows larger assets to be loaded after the page loads and the JavaScript processing begins. We're in the prototype stage of our next game, and I took this opportunity to build a proper asset loader. Seth Ladd wrote a wonderful tutorial on the basic steps to set up a simple asset manager. Using his insight and including a bit more code to handle audio assets, we created an asset loader that loads assets as well as calls two functions we can supply to track progress: what to do when a single asset is finished loading and what to do when all the assets are finished loading.
function loadAssets(assetList, onAssetLoaded, onAllAssetsLoaded){...}
The next piece we want is a nice progress bar. The <progress> HTML5 element has two properties we care about for keeping tabs on our loaded assets: max and value. Using these two properties we can create a very simple progress bar class to hand off to the asset loader that might look something like this:
function progressBar(parent){
 this.element = document.createElement('progress');
 parent.appendChild(this.element);
 
 // initialize the progress bar at zero percent
 this.element.setAttribute('value', 0);
 this.element.setAttribute('max', 1000);
 
 // for this example, progress will be some value [0,1]
 this.update = function (progress) {
  this.element.setAttribute('value', progress * 1000);
 };
};
We can then set up our asset loader to update the progress bar each time an asset is finished loading, by feeding the progressBar's update function the current state of loaded assets. In our asset loader, the "ratio" value shown below is simply the number of assets loaded divided by the total number of assets.
var assetProgress = new progressBar(document.getElementById('loading-screen'));
loadAssets(assetList, function(ratio){assetProgress.update(ratio);}, startGame);

We've already implemented the progress bar in the latest builds of both Thwack!! and Entanglement if you care to see it in action!

Thursday, September 29, 2011

Google In-App Payments: Convenient for buyers and developers

Todd and I are always looking for good ways to monetize our web games so we can continue doing what we love: making more games! With Entanglement, we created extended content that players can purchase if they really enjoy the game, and with our latest creation, Thwack!!, we created a reward system using tokens that can be won by playing the game or purchased for a few cents.

Back in January when we first released our Sakura Grove Expansion for Entanglement, we implemented an email and key system for purchasing: to access the expansion set for the first time, a player would make the purchase, wait for the confirmation email to arrive, and follow the instructions to get back into Entanglement with the key to unlock their purchase. Not only was the process indirect and inconvenient for purchasing a digital good, but it also took us quite a bit of time to develop and debug.

In developing our latest game, Thwack!!, we decided to implement Google In-App Payments. In-app payments are ideal for selling digital goods and the small 5% transaction fee is wonderful for the small transactions common to games.

Once our game's store interface was set up, I was pleasantly surprised to find integrating in-app payments very quick and straight-forward. In fact, I first began reading the documentation early one morning, and by following the very concise step-by-step instructions I had in-app payments implemented in Thwack!! by lunch time!

We were quite pleased with both the appearance and implementation for Thwack!! so converting Entanglement’s purchase process to Google In-App Payments was a natural next step. However, setting up in-app payments for two separate games on one seller account highlighted something I would need to change with my initially simplistic Thwack!! integration, where I had implemented the entire process, including the postback URL, through the web game itself.

Since I was adding a second game on the same seller account, I had to separate the postback process from Thwack!!. After a bit of restructuring, and less than a day’s work, I had In-App Payments running in both Thwack!! and Entanglement with a separate service that tracks orders apart from the games as shown below.

We now have Google In-App Payments running in both games in less than two days’ worth of programming with the additional benefit of a separate central location to track orders.

We found that Google In-App Payments is not only convenient for our game players by allowing them to remain in the game experience while making their purchase, it is also convenient for us as game developers by making the integration process quick and easy to implement.

Tuesday, September 27, 2011

HTML5 AppCache and Keeping Clients Updated

If you've played Entanglement or Thwack!!, you may notice that it takes a while to load the first time. Fortunately, if you've installed Entanglement as a web app, or played Thwack!! more than once, you may have also noticed that subsequent visits require much less time to load. This is thanks to the HTML5 application cache.

The application cache (or "appcache" for short) allows us to store the game and all of its audio and graphics files locally on your computer (here's a nice tutorial on implementing an appcache). Next time you play the game, the application cache loads the files from your computer rather than pull them from the Internet. The beauty of this is two-fold. First, the game can start loading quickly since it doesn't need to check for anything online first. Second, the game can load without a connection to the Internet at all!

One drawback to this is that if someone plays the game and then returns some time later, the next time they play the game their browser loads a version of the game that's potentially weeks or even months old. If there's an updated version, appcache will load the files in the background to prepare for the next time the game is loaded, but the version the player is currently experiencing is the old version until they reload the page. This isn't too much of a problem with Entanglement where changes from one version of Entanglement to another do not negatively effect the experience.

What a player sees if running an old version
However, with the online multiplayer aspect of Thwack!! it's a bit more disruptive. With Thwack!!, each client independently calculates the results of a given turn, and those results have to match up with each other. For instance (not connected to reality... ...okay maybe a little), if Todd decides on a whim to change all of the discs' sizes, weights, and damping, the new version he deploys will calculate a different result for a turn than an older version stored in appcache. This effectively breaks the experience for not only the player whose browser loaded an old version of Thwack!! but also all of the players connected to that particular game.

The fix is fortunately quite simple. When a new version has loaded in the background, we know that we're not running the latest version. We can check this by implementing the following event listener:

var newVersionWaiting = false;
var updateReady = function()
{
    newVersionWaiting = true;
};

window.applicationCache.addEventListener('updateready', updateReady, false);

Now that we're aware of a new version waiting on the sideline, we can notify the player that they're running an outdated version before we let them in on a multiplayer game. Additionally, we attach a page refresh call to the message dialog's "OK" button to make it even easier for them to get the most updated version. Here's a snippet from Thwack!! where "messageBox" creates the dialog you see in the screenshot above. The first parameter is the message and second parameter, a function, is executed by clicking "OK":

if(newVersionWaiting)
{
    messageBox(RELOAD_THWACK, function(){window.location.reload();});
}

Monday, September 19, 2011

Edison Project Win!

A few weeks ago I mentioned we were one of 9 contenders in a local business competition called the Edison Project. We achieved second place! It was a tough competition, but we lauded the virtues of HTML5 and threw in a bunch of games to give us an edge.

Thanks to: Danny Hearn and the Catawba Chamber for putting this competition together; the sponsors: Alex Lee, CenturyLink, CVCC, Catawba County Government, and the Committee of 100 for making it a reality; and Bill Parrish of the SBTDC who worked with us and gave us invaluable feedback as we put together our business plan and presentations!

Todd's response to seeing a check this large for the first time.
We also want to congratulate the first place winner, David Washco, with Price Drive. He doesn't have his product out yet, but he has a very compelling idea that we hope to see come to life soon. The third place winner, Peter Lohr, with Advanced Hydrogen Technologies Corporation, also has a brilliant idea that could fundamentally change car fuel systems.

Until the official news release gets out, hopefully this picture of Todd will suffice to show our excitement in the recognized feasibility of our business plan... ...and winning a check that's taller than my sons.

Update: Hickory Daily Record article


Tuesday, August 30, 2011

Changing an Icon


Today I came across a useful tip for developers submitting applications to the Chrome Web Store.

Recently we created a new vector-based icon for Entanglement and decided to use the new version in the Chrome Web Store. (There are a lot of square icons in the store, and hexagons are so cool.) Doing so updates the icon on everyone's "new tab" home page as well, which in turn sparked renewed interest in Entanglement. Notice a snapshot of our Entanglement web analytics above: a bump of approximately 60% more visitors on Monday (the day we uploaded the new icon) than the days before.

Up to now, we were not sure how to best reach people who have installed one of our apps and let them know that we have rolled out a major update. It seems a very easy, and almost elegant, way to do so is to simply change the app icon!

Monday, August 29, 2011

The Edison Project

Last month we were selected as a finalist in an entrepreneurial competition held by our local chamber of commerce: it's titled "The Edison Project" and is designed to help folks turn their creative business ideas into reality. This has been a great opportunity for Todd and I to take a look at the business side of things and think strategically about how we can make a livable income doing what we love: making games for you! Regardless of who wins, having a chance to create and work through a business plan has been a great learning experience.

Here are the other eight businesses that were selected as finalists:
The competition consists of three parts: our business plan, a presentation to a few local business leaders this week, and finally a presentation to a public audience. If you live in Hickory, NC, or the surrounding area, come and check it out! It's at the SALT Block Auditorium from 4-6pm on September 19th, 2011. There is no charge and you can vote on your favorite presentation. We can chat afterward about HTML5, game design, or why Todd no longer participates in motorized crowd surfing.

Update: We achieved second place!

Thursday, July 21, 2011

Key Frames Are Cool

Open Prize BallWe are planning to give away new discs (that players can collect) when games are won in Thwack!! (You can't get prizes just yet, so don't be too disappointed if you beat the skill shots and receive nothing.)

Todd thought a prize ball would be an exciting way to deliver these prizes. We could use canvas to do this, but today, just for fun, I decided to experiment with CSS key frames and use the DOM instead.

I had read about these on several occasions, but haven't tried them yet. It was much simpler to implement than similar code I could conjure up in JavaScript to do the same thing (example is for webkit browsers):

@-webkit-keyframes ballroll {
  from {left: -25%; -webkit-transform:rotate(-1440deg);}
  50% {left: 125%; -webkit-transform:rotate(0deg);}
  to {left: -25%; -webkit-transform:rotate(-1440deg);}
}

.prize-ball-roll {
  position: absolute;
  height: 75px;
  width: 75px;
  bottom: 0px;
  left: -25%;
  z-index: 20;
  -webkit-animation: ballroll 4s ease-in-out infinite;
}

If you are viewing this post in a browser that supports key frames, you should see a prize ball rolling across the blog. How cool is that!?!

Thursday, July 07, 2011

Thwack!! on html5rocks.com

HTML5Rocks.com has just published a tutorial I put together on resizing games to fit a browser's window size. I fleshed out some of my content from an earlier blog post and put together a few diagrams. Check it out!

We're working on online multiplayer for Thwack!! and are excited about releasing it soon.

Wednesday, June 08, 2011

The Daily Challenge and Going International

The Daily Challenge is finally here! What is the Daily Challenge, you say? The Daily Challenge is the final piece of the Sakura Grove expansion set and the ultimate way to compete versus your friends and family to find out who's the best Entanglement player. How's it work? The Daily Challenge presents all players with the exact same puzzle for one full day. Players can play this puzzle as many times as they like to try to get the highest score possible. Since everyone is playing on the exact same map with the exact same set of tiles, it's easy to determine who's the best and who's just lucky! The player with the highest score so far will have his name and score displayed on the board for all to see. At the end of the day, a new puzzle is created and the fun starts all over again!

How do you access it? To play the Daily Challenge, go to the main menu and select Solitaire. You will see a list of different maps/modes to play. Daily Challenge is at the bottom of the list. If you don't already own the Sakura Grove Expansion you'll be prompted to buy it in order to access the Daily Challenge.

In other news, we've finished translating the game into more than 30 languages! If you live in a non-English speaking country you may have already seen the results of this update since the language changes based on the country settings in your browser. If you notice any errors in the translations, please let us know. We only speak English so we're completely blind to errors in other languages.

Friday, May 06, 2011

Fonts for HTML5 Web Games

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.
  1. 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.
  2. 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.
  3. 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.
  4. 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.

Friday, April 29, 2011

Making HTML5 Games Match Your Screen

Sand Trap was our first opportunity to try supporting multiple resolutions, when we chose to enter it into SPIL Games' HTML5 Contest, geared towards mobile devices. At the time I decided to make it fluidly adjust to match any resolution it was opened on. This way it could not only match any width and height combination of a mobile device but also any resolution of a conventional computer browser. It worked well for Sand Trap, so we're re-using some of the same tricks on Thwack!!

Thwack!! on a maximized 1024x768 browser window
Implementing this requires taking advantage of CSS and JavaScript. Using just CSS, filling the whole screen is trivial, but CSS didn't allow us to maintain the same width-to-height ratio to prevent stretching of the gameboard, so that's where the JavaScript comes in.

Since we're not completely concerned about the exact width or height, the first piece of information we need to set is the ratio of width to height. In Thwack!!, we have it set to 4/3 (the game area is 4 units wide to 3 units high). Once we have determined this, it's a matter of making adjustments whenever the document is resized or, in the case of mobile devices, the screen orientation is changed. We handle these events by setting:
 window.addEventListener('resize', resizeGame, false);
 window.addEventListener('orientationchange', resizeGame, false);
Now we create a "resizeGame" function to handle these two events. With Thwack!! it's a bit more complicated since we're using multiple canvases, but if the game is running on a single canvas, it might look something like this:
 function resizeGame()
 {
  var gameBoard        = document.getElementById('canvas');
  var widthToHeight    = 4 / 3;

  var newWidth         = window.innerWidth;
  var newHeight        = window.innerHeight;
  var newWidthToHeight = newWidth / newHeight;

  if (newWidthToHeight > widthToHeight)
  {  // window width is too wide relative to desired game width
      gameBoard.style.height = newHeight + 'px';
      newWidth               = newHeight * widthToHeight;
      gameBoard.style.width  = newWidth + 'px';
  } else {  // window height is too high relative to desired game height
      gameBoard.style.width  = newWidth + 'px';
      newHeight              = newWidth / widthToHeight;
      gameBoard.style.height = newHeight + 'px';
  }

  // center the canvas
  gameBoard.style.marginTop  = (-newHeight / 2) + 'px';
  gameBoard.style.marginLeft = (-newWidth / 2) + 'px';
 };
Thwack!! on mobile Safari
Basically, if the window is too tall, we make width 100% of the window; if the window is too wide, we make height 100% of the window. The remaining dimension is sized according to the width-to-height ratio we previously set.

The last part re-centers our canvas in the middle of the screen. Many of the CSS properties we are concerned with are manipulated directly by the function above, but in order for those to work, we set up a few other CSS properties as follows:
 #canvas
 {
  position: absolute;
  left:     50%;
  top:      50%;
 }
This allows us to put the top left corner of the canvas in the center of the screen, and then our resizeGame() function gives the canvas a negative top and left margin half of the width and height of the game board so it is centered in the window.

Thursday, April 28, 2011

See you at Google I/O


Todd and I have been invited to show some of our work in HTML5 at the Google I/O Sandbox. We're really excited about this opportunity to connect with developers, field questions, and learn from the other developers showcasing their HTML5 work. We will be showing a special preview of Thwack!!, our latest game in development, as well as Entanglement: going behind the scenes on both to look at how we built them.

If you are planning to attend, we'll be handing out a few physical Thwack!! discs so you will be prepared should a game of table football break out over lunch. No, we're not Lego, but Todd does occasionally hang from the ceiling.

In other, unrelated news, we have over 10,000 Facebook fans! All of you are amazing - thanks for befriending us. To celebrate, we're handing out Sakura Grove codes to a few folks; check out our Facebook page if you want in on a chance to try Sakura Grove for free!

Wednesday, April 20, 2011

Making Thwack!! Fill Up Your Screen

One of the design decisions we made with Entanglement was to use up as much of the screen real estate as the browser would give us. This gives the game a more conventional, installed application atmosphere, especially if you hit F11 while playing. We're heading in a similar direction with Thwack!!, but have run into a few hiccups with the fast nature of the game-play and the slow nature of drawing to an HTML5 canvas element. Here's what we have found so far to keep things moving on a full-screen game:

Here only one disc needs to be re-rendered.
The first and most important take-away we found with our testing was to not draw to canvas unless we have to. The easiest way to keep the animation rendering short is to not draw anything. With a full-screen game, we have only a few parts of the game animating at any given time and have structured our canvases so that only the active parts of the game are being updated graphically.

To render as little as necessary, the game area is composed of several layers of canvases, similar to the layers you might work with in a paint application. Each disc and active game element has its own canvas, and its canvas is only redrawn if the game element has changed in some way. In the example at right, the yellow disc's canvas is erased and the disc is rendered in its new position while the background and the other discs remain static on the screen and no rendering calls are made.

The second drawing optimization we made was in clearing the canvas. We found that the above method works well for drawing itself, but clearing an entire canvas (or multiple canvases depending on how much action was occurring) proved to be expensive. I tried several different methods to clear a canvas before settling on using ctx.clearRect on the immediate area of the disc's last position. Using "ctx.globalCompositeOperation = 'destination-out'" and then rendering the disc at its last position would have been an elegant way to remove the last frame, but I found it's a bit more time-consuming than the ever-ready ctx.clearRect.

Are you a developer and have some wisdom to share? Let us know! Are you not a developer and just read through this post because you want to be? Awesome! You rock.

Thursday, April 14, 2011

Chrome's Excellent Developer Tools

Thank you Chrome for your excellent developer tools. I’m a little late to the web development party, and equally late to appreciating these tools, but I couldn’t imagine developing a web game without them and felt it was my duty to express my thanks.

On Thwack we’re using a mixture of HTML, CSS, and Javascript to construct the game. Javascript is used for the game simulation and graphics, while HTML and CSS are used to construct the interface and in-game menus. My appreciation for the debug tools blossomed while using CSS to construct one of these menus. In particular, I loved the elegant representation of CSS and the ability to edit it on the fly.

CSS is inherative in nature, with child elements inheriting styles from parents and grandparents. This can make for elegantly structured websites whose entire look can be changed with a few well placed edits. It can also make for a frustrating nightmare when you’re trying to determine why your menu won’t sit exactly where you want it and what is causing your font size to multiply 3x on mouse rollover. When you’re creating more complex sites, or in our case, creating menus dynamically in Javascript, these frustrating cases pop up more and more frequently. Thankfully, that’s where these tools shine.

You can even inspect lolcats, though I'm not sure how much you'll learn.
In Chrome, visualizing the CSS that’s affecting an element is as easy as right-clicking on that element and selecting ‘inspect element’. On doing so, the debug window will appear. In the right column you’ll find all your CSS questions answered. This column shows all of the styles affecting an element, grouping rules under the selectors that apply. The groups are stacked in order of inheritance with those directly applied to the element on top. Rules that have been overridden by more closely related rules are stricken through, invalid rules have handy “you’re doing something wrong” warning signs next to them, and more. With all of these things visually displayed it’s easy to determine exactly why an element is behaving as it is.

The developer tools!
Even better, this window allows you to edit and visualize rules in real-time. This is a giant time-saver when you’re tweaking things or experimenting. I find it easiest to make a rough guess of what I want, and then do the fine tuning from within the debug window. When I’ve settled on what I want I copy the final rules back into my code.


So once again, thanks for the great tools. They make my life easier by helping me see exactly what’s going on inside my game.

Friday, April 08, 2011

Learning Localization Lessons

Entanglement has been a great learning experience for us at Gopherwood Studios. When Derek originally developed Entanglement we were unaware what it would become and where it would take us. For that reason, the game was written with the naive expectation that we would never deal with many of the typical challenges of "real" game development. One such challenge, that I've been dealing with this week, is translating the game into other languages. What seemed like an unnecessary precaution when the game was a fun side-project is now a very real need as the Chrome Web Store expands worldwide. So, what did we do wrong? How are we fixing it? And what are we doing in future projects such as Thwack!!?

What did we do wrong?

Three things, we embedded text in the code, we embedded text in images, and we created interfaces that can't adapt to languages that require more space. These all seem like simple problems to anticipate, but it's easy to neglect them when you're coding in a hurry, or developing something for "fun".

How are we fixing it?


Fixing the text embedded in the code has been a painful process of locating all the text, putting it into a spreadsheet and replacing it with a variable in code. Each column in the spreadsheet will eventually be filled with the translated text. Using the spreadsheet we export and generate JavaScript files for each language that assign the text variable to the appropriate translation.

The artist-made text merged with the background looks great, but good luck translating it.
For the text embedded in images, we've decided to keep the English text images since they're already made, but for other languages we'll be replacing the images with regular text using the same method we're using for the rest of the text. This makes the code a bit messier, but we think it's worth it to keep the game looking as close to the original for our English audience.

If the English just fits, you know you have no chance in German.
To adapt the interface for longer languages we're taking a two pronged approach. First, in a few special cases we're modifying the interface in to hold the longer text. This is only done in some cases because it is somewhat cumbersome and time-consuming since the interface in Entanglement has largely solidified at this point. In cases where the font size is large, we will attempt to support longer language texts by shrinking the font size so text fits better.

What will we do in the future?

On future projects, starting with Thwack!!, we'll be applying the lessons we've learned from Entanglement should the need arise to translate one of our games.

For Thwack!!, we already have a spreadsheet set up to handle any text that will appear in the game. Our artist has (politely) recommended we handle all of the text code-side (rather than embedding it images) which should make the display code simpler and negate that problem entirely. And we're planning ahead on how to make scalable interfaces that can handle longer text.

A nice aspect about CSS3 that brings together the beauty of the interface with the necessities of localization is that we are now able to do programmatically to text what could, in earlier specs, only be done via images:
  1. We can add shadows and glow to text using the text-shadow property. Making a nice shadow only requires a single line of CSS: "text-shadow: 2px 2px 3px #333333;".
  2. We can use a growing variety of fonts that are not tied to those already installed on a majority of user's computers, without creating the text via images like we did with Herculanum (the font used in the images like "High Scores" above). For Entanglement, licensing Herculanum proved prohibitively expensive, but there are a growing number of services and fonts that are making this much easier. Many, like Google Web Fonts, only require including an extra CSS file link in our HTML. Providing fonts via our own server, as we did with most of the text in Entanglement, is likewise relatively easy using @font-face directly:

    @font-face { /* A font by Jos Buivenga (exljbris) - www.exljbris.com */
      font-family: 'Fontin-SmallCaps';
      font-style: normal;
      font-weight: normal;
      src: local('Fontin-SmallCaps'), url('Fontin-SmallCaps.ttf') format('truetype');
    }

  3. We can also rotate text vertically by using the CSS transform property like so:

    .vertical-text
    {
     -moz-transform:rotate(-90deg); 
     -webkit-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
     transform: rotate(-90deg);
    }
Here's to hoping when Thwack!! asks for some localization, we'll be better prepared.

Friday, April 01, 2011

Starting on "Thwack!!"

Thwack!! with intense prototyping art
We thought it might be cool to go ahead and throw up a screenshot of our latest game that's in development, so you can get an early preview and see how it evolves over time as we iterate on making it fun and add in professional art and audio. For those more interested in the code, you may find these bits interesting:
  • We're currently localizing Entanglement, which has changed the way we are coding Thwack!! (ie. smarter). All the text is being exported from a single spreadsheet into language-specific javascript and html files that are generated from "language-less" templates. I plan to go into this with more detail in another blog post about Entanglement, but everything is being carried over to this project.
  • We're using a wonderful Javascript port of the Box2d physics engine: http://code.google.com/p/box2dweb/. If you're not familiar with Box2d, it was created by Erin Catto: http://www.gphysics.com/.
  • We're doing our best to make Thwack!! function well on portable devices from the ground up. The three biggest considerations for this are game loop and animation speed, the touch interface, and screen display size. We have a bit of experience with this from our work on Sand Trap, so we are using what we learned there to try to make this game work even better.
    1. Given that there's a lot of movement and we've added Box2d to the mix, getting animation and loop speed up may prove tough on slower mobile devices. If anyone has found great ways to speed up canvas draws on mobiles, we've already noticed we will need all the optimization we can get.
    2. Having touch events call somewhat equivalent mouse events has proved to work rather well so far. Thanks to Ross Boucher for a nice concise lead on how to go about this: http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/
    3. For entering Sand Trap into the SPIL Games HTML5 mobile competition last year, we put together a bit of code to auto-scale game-boards according to screen size and have used a variation of that in Thwack!! (as well as Entanglement). The hiccup with this, as before, will be scaling fonts appropriately.
Back to work now... ...oh wait... ...if you haven't seen the new Blogger layouts, my favorite: http://blog.gopherwoodstudios.com/view/mosaic

Thursday, March 31, 2011

A Period of Change

Derek Google-prevod Zapletanje :-P
As I write this, holes are being drilled into the wall of our new office. "Office" may be a strong word for what we have, two desks in the corner of a basement and a few freshly drilled holes to mount a white board. But for us, the word office implies a new direction for Gopherwood Studios. We've decided to take a swing at making Gopherwood Studios our job rather than our hobby. Those out there who've taken the same step will probably understand the mix of excitement and trepidation that comes with it.

I think now would be a good time to thank those who've given us this opportunity. To our families and friends, thank you for your words of encouragement, your trust, and your prayers. To Google, thank you for thinking Entanglement worthy of featuring in Chrome and for the continual assistance in making it as good as possible. To the players, thanks for your feedback, your kind words, and for supporting us. And to God, thanks for the ability to do any of this.
Todd testing Thwack!!

So what's next for Gopherwood Studios? We're currently finishing up a few updates to Entanglement including the daily challenge mode and support for other languages. We're also starting work on a new game. We'll have more news on that soon, but expect more HTML5 awesomeness.

Until then!

Wednesday, February 23, 2011

How We Made It: Sakura Grove

In both the iOS version of Entanglement and the online Sakura Grove expansion, we've added new modes that twist the basic mechanics of Entanglement to explore new gameplay possibilities. We're really proud of how these modes turned out, so we thought it would be fun to take time to discuss what those modes are (for those who haven't played them) and some of design decisions that went into making them. We'd love to hear your thoughts on the new modes, so tell us what you think in the comments.

We'll start with Sakura Grove.


Mechanics
Sakura Grove introduces several new mechanics to Entanglement. First, players have a limited number of tiles. The player starts with seven tiles, and each play consumes a tile. When a player runs out of tiles, the game ends.

New to the board are cherry tree tiles and the golden center tile. The cherry tree tiles are pre-placed tiles located around the board. They have straight paths running through them. If the path passes through a cherry tree the player earns an extra tile to place.

The golden center tile is the starting point for the player’s path. It has 'u' paths on all of its edges. Each time the player’s path passes through a 'u', the player earns bonus points (points worth specific amounts not related to the length of the move). The amount of points received increases with each ‘u’ the player passes through.

Finally, there are no borders in Sakura Grove which means the only way to lose is to run out of tiles.

How It Came Together
The final design for Sakura Grove came together like a puzzle with each piece falling into place over the course of a few weeks.

The core idea was provide a wall-less mode that allowed players to focus on creating complex paths without the threat of walls ending the game prematurely. Needing a constraint to prevent players from playing infinitely, the tile count limitation seemed like a natural fit.

The pre-placed tiles that would later become the cherry trees were the next addition. These were introduced out of concern that the board would lack texture if there were no elements for players to consider as they created their path. Wanting to introduce more purpose to the pre-placed tiles I (Todd) initially suggested that the tiles give points for passing through them with points earning you additional tiles at certain intervals (50, 100, 150, etc.). Derek, as he often does, ignored me prefering a simpler (read: wiser) solution and directly linked earning extra tiles to passing through the pre-placed tiles. Initially, it took two passes through the tile to earn a extra tile (this is still true in multiplayer), but we found that under these conditions single-player games ended too quickly because of the amount of work required to earn an extra tile. Also, expressing the mechanic was proving troublesome. Once we decreased it to a single pass, the game felt faster and more rewarding.

While working on Sakura Grove we were thinking about how to make the new mode look unique, and we found that the pre-placed tiles provided a logical opportunity for this. Wanting to differentiate the pre-placed tiles from the standard tiles, we initially decorated them with bushes, which worked well with our Asian garden theme.  On seeing the bushes, one team member suggested that the pre-placed tiles be cherry trees that bloomed as the player passed through them. Everyone agreed this provided appealing feedback and further enhanced the theme. In the end, these cherry trees (known as sakura) would provide the name for the mode and the expansion as a whole.

How It Plays
The new mechanics significantly differentiate Sakura Grove from the classic Entanglement gameplay. The lack of walls gives the game a lighter, care-free feel. There is no fear of dying from a miss-click or a misread line. Instead, the end of the game is clearly forecast by the counter. What matters instead is that each tile be played as smartly as possible to weave through the board to rack up points and extra tiles. The shape of the board encourages you to create tightly knit bundles. These bundles pay-off in long moves earning large point values. Weighing what to pursue when (score easy tiles/points in the short term, or risk your limited tiles to set up a longer more valuable move) provides a mental challenge for those who hope to master it.

Well, that’s Sakura Grove. Look for another post on Gold Rush from the iOS version in the near future. If you’re interested in checking out Sakura Grove, you can find it in the main menu of Entanglement by clicking on “More Modes”.

Monday, February 21, 2011

Sakura Grove Hot-seat Multiplayer

We just updated the main menu over the weekend so if you have purchased the Sakura Grove expansion set, you now have access to the hot-seat multiplayer versions of the expansion modes as well.

To make things interesting in the Sakura Grove mode itself, you do not receive a tile for each pass through a cherry tree; rather, it takes two passes for a single tile, which allows you to "steal" bonus tiles from your rivals before they are able to make the second pass.

To access the new multiplayer versions of the expansion set modes, login, and then click "Multiplayer" on the main menu and you will see a new listing of the modes to choose from. Choose the one you want to try, and then select the number of opponents. If you haven't played Entanglement recently, you may need to refresh the page to get the latest version of the app. If you haven't activated the Sakura Grove expansion set and want to, go to the main menu and click "More Modes".

Up next: the Daily Challenge mode.

Thursday, February 10, 2011

Entanglement Soundtrack by OMNI Audio

We have received a lot of great feedback from everyone about the background music for Entanglement, including many requests for obtaining the soundtrack apart from the game.

First, I want to mention how wonderful it was working with OMNI Audio. Alistair Hirst and his team composed and created the beautiful sound effects and music for Entanglement with a very short turn-around, giving us everything we needed and more to make sure we had high quality audio for everything in the game.

To make the background audio loop less repetitive, Alistair asked us to try an interesting layering technique that I believe worked out phenomenally well. The background track in-game is actually 2 separate layers of audio. The layers are offset by 16 seconds and each layer plays a short 32 second clip randomly chosen from a list of five or six unique sound clips. So, at any given time, you are listening to one of 30 possible combinations, resulting in up to 15 minutes straight of non-repeating original audio.

Omni Audio: Entanglement Soundtrack
When I mentioned all the requests we were receiving for a separate downloadable soundtrack, Alistair revisited the background music for us and put it into a linear form. Enjoy!

Grab the original MP3 from CDBaby for $0.99 (a higher percentage gets to us) or on iTunes, Amazon MP3, and several other distributors.

Sunday, February 06, 2011

iOS Testers Needed

Working on the iOS versions of Entanglement, we've come to realize that testing across all the various iOS devices is extremely challenging for our small team due to the time required to do a thorough job. After some discussion, we've decided that the best way to solve this problem is to invite Entanglement enthusiasts to help us in this process. So, if you're someone who'd be interested in helping us test the iOS versions of Entanglement as we roll out patches and updates we'd love to hear from you.

If you're interested, send us an e-mail at ios.feedback@gopherwoodstudios.com with the following information:
  • Your name
  • iOS device(s) you will be testing on. Please be specific about which version of the iPhone you have.
  • The software version of your device(s). Found on your device in Settings > General > About : Software Version
  • The UDID for your device(s). To find your UDID follow the instructions here. These instructions should work for both iPad and iPhone
  • A few sentences explaining why you're interested in helping test.
As a tester, in addition to playing the game normally, we'll need you to perform a variety of tasks to ensure the game works in a many different situations. With your help we'll have the iOS versions of the game in better shape than ever.

If you're selected as a tester, you'll receive an e-mail in the near future.

Thank you for your help ahead of time!

UPDATE: We currently have enough testers for iPhone 4G, 3GS, and iPod 4G, and 3G. We are still looking for testers for iPad, iPhone original, 3G, and iPod 2G, and 1G. Thanks again for all the help!

UPDATE 2: We now have enough testers. Thank you to everyone who applied. We'll be sending out e-mails in the near future.

Saturday, February 05, 2011

Entanglement Available for iPad

In addition to the Sakura Grove add-on we've created for Entanglement, we've also been hard at work (with a little help from our friends at CrateSoft) creating a version of Entanglement for iOS. We're proud to announce that the iPad version of the game is now available on the iTunes App Store. For $3.99 you can buy it here.

The iOS version of Entanglement features four game boards, the classic board (seen above) plus three new boards exclusive to the iOS version. It also features a new mode, Gold Rush, which adds a twist to the traditional Entanglement by introducing golden paths to the mix. Cross a golden path to uncover a gold nugget. Earn points for each tile the nugget crosses returning to the mine cart.

We're very proud of what we've created in Sakura Grove and now in Entanglement iOS. We hope you'll take the time to check out the new modes and maps we've created for both versions of Entanglement.

Have fun!



Thursday, February 03, 2011

Entanglement: Sakura Grove Expansion


Love Entanglement and want more? Try the brand new Sakura Grove Expansion! Explore an engaging new game mode with a wild twist, two stylish maps, and a daily challenge to see who is the best at Entanglement!
  • Sakura Grove - A completely new game-play mode for Entanglement! You have a spacious garden surrounded by cherry trees, but you have a limited number of tiles to play. Acquire more tiles by directing your path through one of the cherry trees, which blooms every time you pass through it. How far can you go? You’ll have to see for yourself!
  • Hana Blossom - A new flower-shaped map for Entanglement with the original rules. The map is larger but the petals provide an interesting challenge; it’s easy to get into one, but make sure to plan your way out, or your game will end quickly! This is a wonderful challenge for advanced Entanglement players.
  • Lotus Petal - A new tiny map for Entanglement also using the original rules. It is a great training ground to practice your ability to string together long paths and plan future moves. You can also play the map quickly enough to have a nice slice of Entanglement fun in the time of a commercial break.
  • Daily Challenge - A new challenge every day for Entanglement players! Will you be the best player today? We haven’t quite finished this mode yet but we’re working hard on it. Anyone who buys the expansion will automatically get access to the Daily Challenge mode when it is completed.
All of the above come in a package for $1.99. We’re planning to add a few more features to this expansion to make it super-special, but we don’t want to announce it quite yet. Everyone who buys it now will get the four modes above and any additional content we add to the Sakura Grove expansion.

To get started, open Entanglement and select "More Modes" from the main menu. If you have the Chrome App installed and it says "Coming soon!", you may need to refresh the page in your browser to get the latest version of the web app.

We’ve been hard at work taking Entanglement to a cool new place and we hope you’ll enjoy it. If you have any questions or comments, please let us know; thanks!

Saturday, January 22, 2011

Maximum Theoretical Score is 9080

Nathaniel Johnston from Guelph, Ontario, found the maximum score possible on our standard Entanglement solitaire board. Here's an excerpt from his analysis:
The standard Entanglement game board is made up of a hexagonal ring of 6 hexagons, surrounded by a hexagonal ring of 12 hexagons, surrounded by a hexagonal ring of 18 hexagons, for a total of 36 hexagons. In order to maximize our score, we want to maximize how much we increase the length of our path on our final move. Thus, we want to just extend our path by a length of one on each of our first 35 moves, and then score big on the 36th move....
Read the rest of Nathaniel's interesting and thorough analysis »

Monday, January 17, 2011

Why we were down this weekend...

Sorry about the interruption, if you noticed. GoDaddy blocked our hosting due to a "network violation" without giving us prior notice, so I woke up Saturday morning to a somewhat unpleasant surprise. Apparently our web games were stealing more than their fair share of their hosting server's resources. I told them to behave, with my strictest daddy-voice, but that wasn't good enough for GoDaddy.

Fortunately, the latest version of Entanglement uses Google App Engine, and was not affected by the block. Unfortunately, Sand Trap and the older versions of Entanglement were. After being down nearly all day Saturday, I decided to move gopherwoodstudios.com to a new hosting service.

Since Sand Trap functions entirely client-side, it is back up: enjoy!

However, the older version of Entanglement (with the sea-green background) is currently not functional and is redirecting to the latest version of Entanglement. If you have issues with the newest version, please check out our Entanglement support page.