In the spirit of documentation, I’m going to be writing a few posts on what I’ve been working on for Alchemy, a game funded by the Brown Institute’s Magic Grant. For now, I’m just going to drop in media res into what I’ve been up to this weekend (with the dream of someday writing up a few retrospective posts on other aspects of the game).
One of the challenges of having members of our time in separate locations is that rapidly prototyping new interfaces can be tricky. This weekend, I wanted to create a way to display a sort of “yearbook” of the characters from the game. The “yearbook” would actually function much like a “Guess Who” board as the game is being played and importantly, provide a peek into what the authorities in the fictional world of Alchemy know about its primary character (and all other characters in the game).
We’re quickly approaching final presentations at Stanford, so ideally, I wanted my prototype to be something that could be easily changed into a more final form by Eileen, our artist, and I attempted to keep that in mind when building the present iteration.
To keep in style with some of Eileen’s other work, I decided to recreate the wood-grain she had made for the recipe book in the game, seen below:
To make my wood grain, I began with a new document in Photoshop, separating the background color and wood grain details into different layers that could be easily edited, recolored, etc. In Illustrator, in a new 800x600 document, I laid out small rectangles into a row of five and then, copied that row 4x to form “yearbook” for 20 characters. I made some adjustments to the fill and stroke type of the rectangles to match the “charcoal” pen style Eileen has used in some other parts of the game. I also added two rectangles on the righthand side to act as placeholders for the informational boxes.
The version of the “yearbook” I came up with looks like this:
Each of the twenty boxes will eventually have a sprites of various characters, and the righthand rectanges will update with each character’s name and information when the player hovers. Ideally, Eileen can make the character sprites with transparent backgrounds, and we can manage the player interactions with the sprites in Phaser.
For now, I created a new scene in our game by adding Identifier.js and updating Scene.js, Preload.js, and index.html as needed (ugh, I always forget to update index.html until errors are thrown up).
Kevin, our most experienced developer, had already created had some running code for an different interface for showing characters (a kind of terrible scatterplot that we are getting rid of). I adjusted his code to redirect to the new yearbook interface (or Identifier), and after a thousand tiny bugs, it was up and running.
Next up, I need to let Eileen know of our updated art asset needs and work on adding some potential user interactions into the yearbook/Identifier interface.