«
»


A new quiz puzzle game: Movie Triangles

Posted by jimblackler on Jan 13, 2011

i1

Movie Triangles is a puzzle game that combines a movie knowledge quiz with a tile puzzle. The objective is to fill a 16 or 25 piece grid with triangles containing movie and actor names. In the winning grid, all triangles with movies will border their starring actors.

The game includes a number of puzzles of varying difficulty and featuring movies from different eras.

itunesartwork

To play the game click here.

And if you want to know how the game was developed, read on.

Development

I’ve long thought that the network of relationships between Wikipedia articles is a fascinating area and ripe for adaptation into a game. I originally contemplated a game based on a hexagon grid where the player would position hexagons labeled with Wikipedia articles. The objective would be to place the hexagons next to those labeled with names of related articles.

However this idea lacked clear rules. It’s not clear to the player *why* the articles would be linked, so it would be unreasonable for the game to seek a right-or-wrong answer. So I looked for Wikipedia topics with clear formal links. I thought about players in sports teams, neighboring countries, musicians in bands, and other ideas.

However the stand-out candidate for this treatment is movies and the actors who star in them. There is a huge amount of data to be mined, both on movies and actors. The data is bilateral, actors link to movies in good quantity and vice versa. The topic is interesting for lots of people and relatively international. It’s a great topic for a game.

As I explored the idea and worked on prototype game grids it became clear that a hexagon structure with six connections per piece would prove unworkable. It would most likely be impossible to create working puzzles, because the demands of having to find six links per movie or actor. Triangles, with just three links (fewer for those at the edge) seemed much more feasible. So the design for Movie Triangles was born.

Scraper, Solver and Game.

The software for the game is divided into three parts, each of which passes data to the next component along.

Crawler/Scraper

The crawler/scraper is based on my Quizipedia scraper. Written in Java it downloads articles from Wikipedia onto my local PC. An SGML parser is used to load the article DOMs, and XPATH queries are used to pull out data, which is then loaded into a local MySQL database. Using a separate database helps solve problems caused by the large quantity of data (such as serialization) and allows the process to easily be interrupted and restarted.

The starting point for the crawl is an article on Wikipedia that is a central list of lists of movies elsewhere on Wikipedia. A ‘list of lists’. Crawling just a depth of two from that hub article appears to cast a net that includes virtually every movie article on the site.

Once the pages are loaded and processed they are scanned to see if they are movie articles that can be analyzed for inclusion into the database. Thanks to the diligent work of Wikipedia editors, movie articles consistently have a sidebar that contains structured data about the topic. For my purposes there are two pieces of data that are particularly useful. The first is the ‘Starring’ field that contains links to the starring actors of the movie. Since these contain Wikipedia URLs this provides disambiguation, solving a problem where actors who shared the same name could be confused. Similarly, inbound links to the movies are analysed. Also I use the anchor text from links to provide a cleaner, shorter name than is often provided by the article heading.

The other very useful field is ‘Release date(s)’ which can be processed with a regular expression to discover a release year number for the movie. This is useful data for the game to help players identify a movie more effectively than the movie name alone would.

It is also useful for verifying and article is actually about a movie. I have also observed that if an article has both ‘Starring’ and ‘Release date(s)’ fields in its information sidebar it is almost certainly an article about a movie rather than something else. This is a very effective filter to ensure a 99% clean data source.

It takes only about an hour of running the crawler before a database of about 12,000 movies and actors has been built up. Then the baton is passed to the game builder which begins the process of creating the game puzzle grids.

Builder

The builder is another Java application which loads the movie and actor data from the local SQL database into memory. It then attempts to construct completed, valid board positions, selecting from all the actor / movie combinations in the database. Firstly a single tile is ‘seeded’ with a particular movie. Then the algorithm attempts to find the valid board positions where the least famous movie or actor is as famous as possible.

The reasoning behind the fame requirement is to stop puzzles from being filled with highly obscure movies or actors. If the algorithm used any actor / movie combinations that made the grid fit, it is unlikely that the average player would be able to guess even 20% correctly. It is the nature of Wikipedia that it is highly extensive, but this extensiveness works against the aims of a trivia game.

What is needed is some way to score the fame of an article subject. When I developed Quizipedia I experimented with various signals such as the number of inbound links to the article. Eventually I discovered the surprising fact that the length of the article is closely correlated to how likely the average person is to have heard of the article topic. It is an artifact of the fact that the motivating factor for Wikipedia editors to work on an article is also correlated to the fame of the topic. Longer articles mean more famous topics. An relatively obscure actor is likely to have a short article.

The actual building algorithm is pretty involved so I won’t detail it in full. The short version is there is a recursive method that takes a position which, for each slot in the grid, has a set of any possible actor/movie that will fit into each slot (this is calculated with iterations of set operations beginning with the currently fixed slots). The slot with the fewest possibilities is selected, the tile is fixed with each possibility is in turn and the method re-invoked recursively until the best solution is found.

The builder also creates custom tile images for the game in custom PNG format, with the movie or actor text positioned to fit the triangle using the largest font possible.

Game

Having come up with the triangle grid idea, I needed to make the actual puzzle work as a computer game. I went through several iterations, testing on friends before coming up with the design you see today. One main question was how to tell the player if their guesses are correct or not. I wanted the player to be able to move the tiles around freely before submitting their guess. I implemented a ‘check grid’ button that would tell the player if they had it right. Having this only appear when the whole grid is filled helps keep the look simple and therefore inviting. Returning only the invalid tiles allows people to correct their grids and keeps the difficulty manageable. I record and report the number of times the check grid button is used by the player to reward players who found the solution on the first event. Combined with fixing the correct tiles and not allowing players to place tiles in locations already revealed as invalid, it should be possible to solve the grids by trial and error. This lowers frustration levels as players can usually finish grids with a number of attempts.

One game element that is controversial with my testers is the tile borders. Here I use a visual clue to show which positions tiles can be found in. This reduces dramatically (particularly with 16 piece puzzles) the number of slots a tile could potentially occupy. People sometimes say this feels like cheating. Certainly it does reduce the simplicity of the puzzle which is regrettable. However in tests I have found puzzles without this aid to be considerably more difficult, to the point of bafflement and frustration. The problem is you may know which actor starred in which movie, but there would still be a large number of tiles both could potentially occupy; maybe anywhere on the grid. If you have a 80% knowledge of the films and actors it can take several minutes of grinding through the possible orientations of the tiles to find the right one. I believe if I had published the puzzle in this way it would only appeal to an elite of puzzle and trivia solvers, who would have the time and inclination to spend the time to work through all the possibilities. Adding the borders means most of the time spent on the game is in thinking about the trivia content rather than wrestling with complex geometric logic. It also allows some interesting logical clues that let you fill in the gaps of your knowledge.

I wanted the game to present an inviting, clean layout to the player. The game always completes the corner grid pieces to invite the player to get started straight away; each corner piece has just one neighbour to find.

I am pretty happy with Movie Triangles. I hope you enjoy it too.

17 Comments »

Wicked cool! Thanks ;)

January 14th, 2011 | 3:35 am
Ian Foutz:

Very nice! Any chance you could expand it to TV shows though? I watch a lot more TV than movies.

January 14th, 2011 | 9:43 pm
D:

Great concept! FYI though, you can tell where the movie triangles go because they have a bold border revealing where they fit into the triangle. Might want to fix that!

January 15th, 2011 | 7:48 pm
jimblackler:

Thanks D, it’s part of the game design! See the instructions and the blog article!

People have been asking for an option to turn the borders off. I will probably relent and do it although in my opinion it makes it too hard.

January 15th, 2011 | 8:18 pm
Danny:

You could only provide some of the borders. Perhaps instead of giving all six border tiles you provide 2,4, or 6 as levels of difficulty.

I really like this game. Simple and fun. Great work!

January 16th, 2011 | 3:58 am

[…] their films in a Sierpinski triangle-style grid. Developer Jim Blackler originally had the idea to create a trivia game made up of information straight from Wikipedia, and Movie Triangles is what that idea eventually became. It’s also […]

January 17th, 2011 | 2:04 pm

[…] their films in a Sierpinski triangle-style grid. Developer Jim Blackler originally had the idea to create a trivia game made up of information straight from Wikipedia, and Movie Triangles is what that idea eventually became. It’s also […]

January 17th, 2011 | 2:38 pm
Ivo:

What an original idea – congratulations. The only bad thing that caught my attention was the complete lack of aesthetic treatment; if you decide to colaborate with a graphic designer, you will surely get a great, competitive app.

January 17th, 2011 | 4:07 pm
jimblackler:

Thanks Ivo. I prefer “minimal aesthetic”! But you are right I am a software engineer by trade. I’m more about code than art.

January 17th, 2011 | 4:10 pm
Ivo:

Thank you for your feedback :) Considering the minimal visual approach, even there thera are graphic design options (colors, layout, typography, etc) that can be tweaked to give a more unified, finished feel – a game that comes to my mind with a minimal but careful crafted look is Trainyard, on the App Store. I know this is a game that you kindly made available free on the Internet, but as an app store item, I think the visual style would be important, not only in terms of notoriety, but also in perceived usability. Sorry if I reiterate this point, but I’m a graphic designer that is presently studying emotional factores of interfaces (notably aesthetics) in overall user experience, so I hope I haven’t been too annoying :)

January 18th, 2011 | 5:24 pm
Dan:

Great little game. Agree with what others said – the varying degrees of difficulty would be nice. Don’t mind the minimalist approach – UI’s are always the last thing I get too :)

Though one level I just did (phone is not handy to reference) had a solution that had Robin Williams being in The Postman. Not sure I remember that scene!!! Looks like the Crawler/Scraper may need a slight re-education. Then again, if it’s scraping from Wikipedia, a BS detector may be better :)

January 19th, 2011 | 6:54 am
Mike:

Quick aside to Dan: it looks like Wikipedia’s the culprit for that one. Their page for The Postman lists Robin Williams in the cast, but I think they should include Olivia Williams (from Rushmore and Dollhouse) instead.

January 20th, 2011 | 6:05 pm
Tom Parker:

I love this game. I’m trying to teach myself to program for iOS to do something similar for a study aid. It’s turning out to not be the easiest project for a beginner, but I’m inspired by fun apps like yours.

April 27th, 2011 | 3:43 am
Paul Spadafora:

Jim: I am a creative director at a company which develops meetings, exhibits and events for our clients. I was wondering if you would license this game for use in a trade show environment as an in-booth touchscreen activity. We are in the brainstorming phase of idea generation for a client who exhibits so I would not want to propose unless it was a possibility. It might require some minor re-programming (because we might look to invert your triangles so it is V-shaped).

Please let me know at e-mail address above and I can provide additional information.

June 30th, 2011 | 10:18 pm
lochnar:

Another note re: The Postman

Robin Williams is indeed in the movie. He is the old guy that was sworn in as a mail carrier that Kevin Costner asked if he could ride. Hard to spot until you look close at his eyes.

December 24th, 2011 | 6:19 pm
Jessie:

Love these puzzles. Do you have any bigger one’s?

February 3rd, 2012 | 1:52 pm
Sandra:

Regarding Williams appearence in The Postman. That film does not show up on the list of films he have starred in at IMDB.com.

Love your game, great work but please consider expanding to TV shows :-).

October 1st, 2012 | 12:54 pm
Leave a Reply

Comment