Entanglement Leader Boards

Entanglement has been online since the summer of 2010 (fun flashback here). Back then, we did a few things right, but in retrospect we did a lot of things wrong. One of those was the leader boards.

We must have a problem with digital hoarding.

Early on, we decided to store every score. Not sure why. We now have approximately 15,000,000 scores. Most of which no one cares about or is even able to see. For perspective, if you were to take 15 million cans of soda and dump them into the Grand Canyon... ...that would be environmentally irresponsible - don't do it.

We also stored a lot of data about each score: the score, the number of line segments, a validity check, the map it was on, the player that made it, the time it was entered, the current temperature in Hickory, NC... ...you know, a lot.

Deciding that keeping 15,000,000 scores indexed in our database is ridiculous, I'm revisiting how the scores are stored. A few years ago, I cleaned things up by dropping all scores below 50 points. I had also connected Google Games at some point to handle scoring, but its implementation in Entanglement was half-baked, so that's currently being rolled back. I've finally settled on another alternative. Rather than storing all the scores ever, it's now storing a single score for today, this week, and all time for each player. This is much more sustainable and makes loading the leader boards a lot more snappy!

This has had the biggest impact on how the Daily Challenge leader board works. It was designed to show the last 7 days of scores. As such, it has been the primary reason score storage hasn't been completely changed up to this point. To make the Daily Challenge work with this new method, it no longer stores leader boards for each day. Rather, it stores today's leader board, and at the end of the day each player is awarded points according to where they placed on that day's final leader board. These points are added to their weekly and all-time scores. The Daily Challenge Champion is awarded 50 points, other players in the top ten are awarded 10 points, and all other players receive 1 point for participation.

I've already run this algorithm on the past 7 years of Daily Challenge scores, so check out the all-time leader board to see a few really good players.

Entanglement Board Game Crowd Sale!

It's here! Today the Entanglement Board Game is available for purchase over on The Game Crafter. For the next two weeks, it's available as a crowd sale, which basically means that the more folks that buy a copy, the cheaper the game is to purchase for everyone!

Entanglement's list price is $39.99, but is currently available for $34.99 as the initial sale price. If there are sufficient sales, it may drop as low as $24.99!

What is Entanglement?

The board game is based on the web game of the same name. You're creating an elaborate garden labyrinth by placing one tile at a time, connecting a meandering path of twists and turns.

You have a limited number of tiles to play, but you can create a longer path and a larger garden by winding through Sakura trees: each pass acquires additional tiles for your expanding garden.

Should you risk your limited tiles to set up a valuable move, divert your opponents' paths away from the Sakura trees, or focus on an easy path through another Sakura tree? Weighing what to pursue when provides a mental challenge for those who hope to master it.

How is it different than the web game?

I've deliberately changed a few game rules to fit better for table play, but all the components are there if you really just want to experience a real-life version of the digital game. Here are the major changes:

1. The board game focuses on the limited-tile play of the Sakura-flavored Entanglement maps, not the boundary-based maps of classic Entanglement. This change makes initial setup much easier and prevents pre-placed tiles from shifting off-grid when they're not adjacent to other tiles (as described here).
2. Sakura tiles are dealt into players' hands instead of being pre-placed on the board. (This is for the same reason given in #1, and also adds a little more strategy and variety.)
3. Scoring is based on the total length of completed lines instead of on the length of individual moves. This change helps the game move a bit faster, since tallying scores like the web game isn't terribly fun to do manually.
4. The lines are thicker, and they don't glow. The thin lines were confusing to follow visually, and I didn't want the game to be radioactive.

If you want to check out the board game's rules, you can download a free copy here.

What's included?

A bunch of hexagons! Yay!

There are 6 colored tokens that are used to trace players' paths and a set of 72 hexagon tiles: 1 start tile, 6 sakura tiles, and 65 randomly-generated path tiles. (It is the same set of path tiles in each box, so buying another box won't introduce a new randomly-generated set.)

What does it look like?

The look and ambiance of the web game is quite peaceful. That said, I wasn't able to bottle up the ambiance and include it in the box. You will need to provide your own Zen garden and maybe grab the Entanglement sound track. Here's a bit of the art that is included.

 

I've been impressed with the overall quality of the physical tiles produced by The Game Crafter, but I cannot show that here very well.

Why a crowd sale?

I decided to go this route for several reasons.

My first thought was Kickstarter, since it's super-popular for indie board games, but after a bit of investigation I found that, as such, there are also a lot of implicit expectations. Most of the best performers seem to include several tiers of awards and other extras as goals are met. This, along with the initial production of the Kickstarter campaign, keeping up with everything during the campaign, game production, and order fulfillment, proved to be a bit more management overhead than I was prepared to invest.

My second thought was print-on-demand. It's low risk, no campaign to manage, no unsold inventory to store, and no in-house order fulfillment. I've ultimately chosen this route, but unfortunately it's a bit more expensive and order fulfillment takes a bit longer. (They have to make it before they ship it!)

Due to the print-on-demand cost for a single purchase, I had considered pinning together a web-based ordering system to group multiple purchases together so multiple copies could be printed at once (and therefore reduce cost), but then I realized my print-on-demand provider had already thought of that. Woot! Thus the crowd sale. It essentially takes a bunch of print-on-demand orders and turns it into a single bulk order, reducing the price for everyone.

In any case, check it out and see if an Entanglement Board Game is a good fit for you... ...or someone special this coming holiday season!

Entanglement Released on Steam

Today's the day! Check out Entanglement on Steam. It includes 12 maps plus a Daily Challenge mode:

Classic Entanglement



Sakura Grove



Hana Blossom



Lotus Petal



Clover



Lovely



Honeycomb



Raceway



Desert Trek



Tranquility



Sakura Blossom



Sakura Garden



Daily Challenge

Up to six players can play head-to-head in a hot-seat multiplayer mode, and the game is available for Windows, OSX, and Linux in 25 languages. Vključno s slovenščino.

Enjoy!

Entanglement on Steam!

Over the past two months I've been experimenting with NW.js, a tool that encapsulates web-based apps as executable applications. Using nw-builder, I had a working "native" app relatively quickly, but I did have to spend a bit more time making sure app icons and application menus behaved correctly across platforms. (I intend to post one or two of my technical solutions to these issues over the next few weeks.) The end result is that the code-base for the native app is essentially the same as the online version, so any updates appearing in one should eventually appear in the other.

Once I had viable builds for Windows, OSX, and Linux, the next logical step was to explore distribution. Steam seemed like a great marketplace to explore. I've been on the consumer side of the system, but trying to get something put out there on the seller side of things seemed like a fun learning opportunity.

After paying the initial $100 game submission fee and downloading the SDK, I wandered around the Steamworks site for about two days (with no water or shade!) trying to figure things out. There are plenty of knobs and buttons and features available, but thankfully Valve provides a convenient checklist to go through that made my initial experience much more purposeful. Had it not been for the checklist, I may have been wandering for weeks.

In any case, Entanglement is now available on Steam! Well, not immediately, but it releases on October 17th! Unlike the web version, all maps will be immediately available for play: Classic, Sakura Grove, Hana Blossom, et al. Visit the community page and let other folks know what you think about Entanglement! Unless you think really terrible things about Entanglement... ...in that case, let other folks know what you don't think about Entanglement...

Board Games Aren't Video Games

At first glance, creating a board game seemed pretty easy: I already have the game and the rules, so all I need to do is make things printable and, presto, a fun board game!

Now I'm a few weeks in, and I'm developing a healthy respect for good board game design and all the board game designers who make them. I've run into an assortment of discoveries, although obvious in retrospect, that might be worth sharing.

Real-life assets cost more than digital assets

When I first began designing the board game, I started with the largest hexagon tiles The Game Crafter had to offer. In my mind, Entanglement tiles have always been large. In the online game, there's not really an absolute size or reference to compare them to: they just auto-resize themselves to make sure the whole map fits onscreen. But deep-down, I knew they were at least the size of Catan tiles, maybe much bigger. Maybe they were over-sized garden stepping stones in a Sakura Grove somewhere, and you could actually walk on them and follow a path to some remote destination.

Digital works just fine that way, but in real-life each tile comes at a price. I quickly realized that Entanglement became really expensive with large tiles. So I trimmed the tile size down a bit, and the price-to-content ratio seems a bit more reasonable now.

Different media require different visuals

This was a quick and easy discovery. I already knew about printing offsets due to thoroughly reading The Game Crafter's online documentation, and made sure I used their templates with plenty of bleed room and the like. Aside from that, I pretty-much mimicked the web game's tile style.

I ordered the first set of Entanglement tiles from The Game Crafter, thinking at most I may need to update the paths to make sure they match correctly on all 6 sides. That turned out just perfect, but my other assumptions didn't.

I found that the thin lines didn't look great and could be a bit confusing. Especially since they didn't light up or do anything fancy when they're connected (print is so 20th century). So for my second run, I thickened up the lines and they look much nicer.

Real play is sloppier than digital play

This should have been a no-brainer. Coming from a job where I deal with math and numbers and precise values, anything sloppy is probably a bug... ...and finding bugs requires testing. Interestingly, I was so confident in how solid Entanglement's game-play is, I hadn't thoroughly tested the real-life version. Why check and change the rules if things work so well already? That was a mistake.

I decided to record a game to have snippets for an online promo, so my boys played with me. We started by placing the starting tile, and then placing the outer wall. That was a feat: we never seemed to be able to get all the wall tiles to line up in that classic Entanglement hexagon, the start tile never seemed to be in the exact center, and setting it all up wasn't particularly fun.

Finally, once that was out of the way, we began playing. And the tiles moved. A lot. It wouldn't have been that terrible in of itself (map-building board games tend to have this problem), but when the growing set of tiles played out from the center start tile rotated ever-so-slightly, suddenly all 24 of the pre-placed wall tiles were in the wrong positions: the game-play grid had virtually moved without the walls moving along with it.

So after some additional real-life play-testing, I've decided to take the game in a Sakura Grove direction. Like the online Sakura Grove experience, this variation of play doesn't require walls: this allows players to jump right into the game at the beginning -- no more tediously laying out walls of tiles and no more "OCD Derek" rearranging tiles during play to make sure tiles and walls always line up.


There have been a number of other things I've learned, and I'm sure I'll learn more on this journey. This journey down a tangled path, with so many paths to choose from...

Entanglement Board Game

The first version of Entanglement started on the back of Settlers of Catan hexagon tiles. It was not called Entanglement then: it was affectionately labelled "that game I scribbled on the back of Settlers of Catan tiles". Entanglement is not the shortest name, but when considering its original name it's not so bad. When friends came over, we would all play a round before starting a game of Settlers of Catan.

Later I wanted to play with bezier curves on the cutting-edge JavaScript canvas element (pre-"HTML5") and the first digital version of Entanglement was born! A few months later, with the help of a phenomenal artist, great musical ambiance, and a few rule changes, the current digital version arrived.

Lately I've been reconsidering Entanglement's board game origin and have been prototyping a physical version of the game. Last week I received a prototype from The Game Crafter, and it's much nicer than scribbles on the back of Settlers of Catan tiles. I played it with my sons and was soundly beaten by my 11 year old... ...I think this prototype may need more work; it's obviously broken.

In any case, if a physical version of Entanglement sounds super fun to you, go ahead and scribble on the back of your Settlers of Catan tiles (sorry, Mayfair!). If you're not willing to join the scribble-on-board-games club, hopefully I'll have something fabricated just for you in the near future!

(I just made up the whole "scribble on board games club" thing. I don't think it actually exists. But if it does exist, let me know: I really want in.)

Entanglement Chrome App

We're excited to release the Entanglement Chrome App! This version of Entanglement has all the play of the original web app but can be played outside the confines your browser, offline, any time!

Find out more about Chrome Apps on the Google Chrome Blog.

2013.5 in Review

Today's yesterday began the second half of 2013, so with that in mind I thought I would share a bit of what Todd and I have been doing the past 6 months as well as some related news.

---

We put together an awesome parallax character biography toy for Geoff Keighley's The Final Hours of Tomb Raider iOS app. The biography segment is pure HTML5 in a webview, relying heavily on CSS transitions and transforms.

Sorry, this is a screenshot, so that inviting white arrow does nothing.

---

We've also been making Entanglement more mobile-friendly: you can now find Entanglement in the Firefox Marketplace and a beta version in the Google Play Store for Android. Sand Trap also made it into the Firefox Marketplace.

---

Entanglement also made it into Peppermint Four, a nice web-centric OS that tastes fantastic!

---

Todd and I are excited to have Scott Lewis join our team. He has over 10 years of experience in the game industry, designing and developing for several titles, including Civ 5 and Rise of Nations. He also shares Todd's birthday and Todd's last name. They're also brothers, but not twins. Not that you really cared, but it's true.

---

Lastly, we've been working on an exciting project with PBS Kids that we're eager to announce as soon as it's ready. But it's not ready, so I'll share no more.

New Entanglement Maps and Free Trial!

Over the last few months we've been slowly making additions to Entanglement. Some of these have trickled out over time (e.g. saved games), but this week we finally released the flood. These additions include new levels, a free trial so you can check out the new levels before buying them, and a variety of bug fixes and interface improvements.

New Levels

This update adds eight new maps to Entanglement. Putting the total number of maps at twelve! These maps are split between two new expansion sets.

The Classic Mode Expansion offers four new maps that follow the classic Entanglement rule set. The maps look pretty simple, but you'll be surprised how the shape of each map changes your strategy.

The Tranquil Garden Expansion includes four new maps that challenge players to score as many points as possible with a limited number of tiles. Passing through sakura trees will earn you more tiles. This game mode was introduced in the Sakura Grove Expansion, but here we've explored it further with some great results!

We've also added a Combo Pack Expansion for users who want to get all twelve maps for the cheapest price possible.

In addition to the new packs, we've renamed the Sakura Grove Expansion to Expansion Sampler. Though it has a new name, it offers the same three maps with both types of gameplay.

Free Trial

For players who enjoy the game, but want to try the new maps  before they buy them, we've added a FREE one-day trial. When you start the trial you'll have access to all the maps in the game for one day.

The trial can be activated from the in-game market, accessible from the main menu under 'More Maps' or from the in-game menu on the 'Get More' tab under 'Get More Maps'. Once you're in the market just log in and select the 'Try It!' button to start your trial!

If any of these additions sound interesting, try them out here!

Saving Your Entanglement Progress

Earlier today we rolled out a new Entanglement build that includes a few new features. We'll announce the bigger additions next week (or just check out the game to see the new content), but I wanted to go ahead and note one simple addition that I think makes the game experience a bit more fluid: we auto-save your game!

I know this is not revolutionary, but, in addition to the end result, I think the implementation is cool. To accomplish this, we use the Local Storage capability of modern HTML5 browsers to store a player's moves as they are made. If the browser window is closed and opened at a later time, the same set of tiles is loaded and the game replays the stored moves to return the player's progress to its earlier state. This is especially useful for mobile devices, where interrupting a browser session is a commonplace event. Now players are able to play a few tiles at a time and still finish their game without losing their progress if they're interrupted.

The cool part? Replays. By storing a particular game's seed, we are able to re-generate the exact tiles that were used the first time the game was played. Then, the game simply swaps, rotates, and places tiles exactly as they were initially played. Once the list of moves has been replayed, the game is sitting in the exact layout it was when the player left.

Using the same logic the game can replay high score games as well... ...but that's not quite ready yet. Essentially, we do not have all the necessary information from earlier games to be able to generate and replay all of them accurately. However, we did run a replay on Fast Shocking Toucan's 5195, and it's... ...beautiful!

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!

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.

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.

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.

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!

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”.