Category Archives: Poster

91 map

I played the game 91 and wanted to create a map of the world. What started out as a simple map to help keep track of the regions soon turned into a larger project which resulted in an A0 sized poster being produced. The creator of the game got in touch and at the time of writing the first poster has been printed and more will follow. The creator is going to publish and sell these posters online.

Links

Live page
Jayisgames review
Play 91 online
GitHub repository

Overview

The game 91 is a tile based canvas game which is written entirely in Javascript (served up by PHP via AJAX requests). The game itself has a “fog” which means that only regions in a line of sight are visible. Given the way the game is organised means that in principle it should be easy to create a map. I adapted the code to make maps of each region, and then created a patchwork of all these small maps to create a larger map.

Challenges

Challenge: The code had to be reverse engineered to obtain all the maps.
Solution: One of the most fun parts of this project was reverse engineering how the AJAX requests were handled and how the maps were parsed. Fortunately it was relatively straightforward to do. (Resolved.)
Challenge: Small maps had to be combined with different drawing styles.
Solution: To make the large map I had to combined many smaller maps. There’s no “cheap” way to do this, so I created an object that contained the smaller maps in a larger two dimensional array where each cell has its own drawing style flag, allowing non-trivial overlap of different drawing styles. (Resolved.)
Challenge: A poster of very large dimensions needed to be created.
Solution: There’s no easy way to manage an image of the size needed to make a large poster. I have made large posters before (for example, in the Marble Hornets project) so I was prepared for many of the problems. The sides of the map had to have relative sizes of \(\sqrt{2}\), which fortunately was relatively easy (especially when compared to the Citadel project. In the end I opted to have a large .png file at \(\sim 500 ~\mathrm{dpi}\) giving very fine print quality. The resulting file is just under 20 MB in size, which is rather impressive given its physical size. (Resolved.)

Sample outputs

Bacalhau Island map
Bacalhau Island map
Bateman Tower map
Bateman Tower map
Small poster, first draft
Small poster, first draft

The final version of the poster, as approved by the game’s creator, can be seen here: Poster version 2.

Update: Citadel

Ever since I was a child and I played Citadel on the BBC Micro computer I’ve wanted a poster showing a map of the entire game. Inspired by a recent project (91) I decided to create a poster for Citadel. The results are necessarily “blocky”, but not altogether displeasing. Ideally I’d prefer to have a very wide poster, but I’m not sure such an aspect ratio is supported by most print services, so I settled for a standard A series size instead.

Getting this printed and put up on my wall will make me very happy!

Citadel poster (small version)
Citadel poster (small version)

Full size poster

Marble Hornets

Marble Hornets is a web series that currently spans the course of about five years. The premise of the series is that a student film maker started filming an amateur movie in 2006, but abandoned the film due to “unworkable conditions on set”. It quickly turns into a horror series that brings with some novel techniques. However what really inspired me to make this project was the asynchronous storytelling narrative, which requires the viewer to piece together the true chronology based on the context of the videos. I’m an active participant on one of the busiest discussion boards for this series and regularly update this project as each new video is released.

Links

Live page
GitHub repository

Overview

So far, the Marble Hornets project has two main aspects to it. The initial work began with the Marble Hornets player, a collection of youtube videos that are manipulated by the youtube JS API. The user can autoplay all the videos in the series, filter based on many parameters, and even create their own playlists. The player is made so that the user can autoplay everything in chronological order in full screen mode. The data was originally stored in Javascript files, but this has since been moved to XML files to make maintenance and data entry easier and more portable. After creating the player I added a lot of further information including links to the wikia pages, youtube videos and forum threads for each video, as well as the twitter feed, a real world map of filming locations and other interesting links, turning the player into a hub of information.

A previous version of the player was adapted to make the my_dads_tapes player, although I lost interest in the series and stopped updating that player. At some point I intend to automate some of the player manipulation so that a user can create their own player for any youtube account, which would automatically source the relevant information and download the thumbnails.

The Marble Hornets player
The Marble Hornets player

The second aspect of the project is more interesting and challenging, and it is the automated creation of infographic images to help clarify the information known about the series. These files are shared with the community on the forums, and help users discuss the series. Videos are split into scenes, which contains characters and items. The scenes are sorted chronologically (although in many cases the chronological ordering is ambiguous, and the consensus opinion is usually taken in these cases) and then the characters and items are represented by arrows which flow from scene to scene. The scenes are arranged in columns to give the location of the characters, or the owners of the items. Users can create and enter their own XML files to make their own infographics, and automatically dump XML snippets by clicking on the scenes they wish to select. The users can filter by characters, camerapersons, items, and seasons. The scenes are colour coded to represent the sources of the footage.

Part of the master timeline
Part of the master timeline
Part of the (even more complicated) items inforgraphic
Part of the (even more complicated) items inforgraphic

Challenges

Challenge: The web series is told out of order, so one of the biggest problems to solve was sorting the scenes in order, when the order was sometimes ambiguous.
Solution: This was solved by following the fan-made “comprehensive timeline” when in doubt, and sorting the scenes with dates, and in the case of multiple scenes per day, by time. The scenes are assigned timestamps, and the videos are assigned release dates. With this in place, the scenes and videos can then be sorted quickly and easily. (Resolved)
Challenge: The data has to be stored in an organised manner.
Solution: Initially this was solved by declaring objects directly. In order to make the data more portable and for other users to contribute, I wrote and parsed xml files, so that nearly all the data is sorted semantically. One of the infographics keeps track of the exchange of posessions between characters, and this data is not yet accounted for in the xml files. (Resolved, to be revisited)
Challenge: This project required extensive use of the youtube js API.
Solution: Thanks to this project I can now queue up videos, make them autoplay, and use a timer to move between sections of video. (Resolved)
Challenge: The video stills had to respond to the user’s actions.
Solution: The video player in this project allows the user to mouseover the video stills, with dynamic changes of style as the user does so, makng it more aesthetically pleasing. This had to be responsive and with little overhead, and the result is rather pleasing. (Resolved)
Challenge: The timeline has to be laid out properly on the page.
Solution: This means that each element must be given enough space to display all the text and images, and then arranged to give the character arrows sufficient space. This has been achieved using a text wrapping function, and parsing the lists of objects multiple times to ensure sufficient spacing. Editing this code is not a pleasant experience though, it could certianly benefit from some refactoring. (Resolved, to be revisited)
Challenge: The player should allow the user to create a custom playlist
Solution: The user can create a playlst filtering by characters etc, and choosing to play in release order or chronological order. The player also allows the user to watch all scenes in order. (Resolved)
Challenge: There have been many many challenges with this project, so I may add more as they occur to me!
Solution: (Resolved)