Creating iBooks (And Headaches)

In class, we had to make an iBook. We made groups and had to come up with an idea. The new Mario game was about to come out soon so I suggested a book about Mario. The first problem we ran into was what about Mario? Mario is much too broad of a topic, he’s been in over 100 games over the years. We decided on Mario power ups. Even that was a little broad, so we narrowed it down to power ups of 2D Mario games.

Process

Luckily a series like Mario is so well known that just about every asset from every game has been ripped and put online. This made gathering assets fairly easy for us. We divvied out the work and had each person gathering stuff like audio, video, sprites, and general information. We also sketched out a general idea of what the pages could look like.

Design

When working on a design, one of the first things that I had was having the background be a continuous background of World 1–1 from the games.

Turns out that was a little bit too busy with all the enemies, blocks, and terrain so I went into photoshop and edited out all of the clutter to have a flat, ememy-less landscape.

On top is the first level from Super Mario World, the bottom is after I edited out most of the clutter

I wanted all of the title pages to match the games they came from as well so I found/created fonts that would match the original games. My main goal was to make each section or chapter of the book feel like the game it corresponded with.

Headaches

Most of the issues we ran into came from iBooks Author. We had issues with transparency — HTML widgets and GIFs can’t have a transparent background, instead replacing the transparency with a white background. Sizing was an issue too — image galleries, buttons, and other things had a minimum size that was often too big for what we originally had planned.

A GIF would only show up with a white background behind it. It also wouldn’t allow us to resize it any smaller, which was a little bit too big for our liking.

Another big pain was how iBooks handled image resizing — the sprites we had were small, like 16 x 32 px small, and when you resized them they turned out blurry. Rather than just resizing in iBooks Author or Preview, we had to go into Photoshop and resize each of the images there. Resizing and exporting as “Nearest Neighbor” instead of a different resampling type took probably 10 times longer than it would have in other programs, but the final images came out as clean pixel art rather than the blurry mess they were before.

On the left is what happened when something like iBooks or Preview would try to resize the image. On the right is when you exported using Nearest Neighbor in Photoshop

The last main problem was video. We had the idea to put the trailers from each game into the iBooks. Sadly all of the trailers, even from the more recent Nintendo DS title, were pretty poor quality. In the end we still included them since we felt that the poor quality added to the charm and felt authentic.

Testing

We really were testing all along the way. Every time we added a new feature or segment of the book I would load it on the iPad and see how it worked. We tested different things and some of it worked and some didn’t. For instance, I wasn't sure how placing an image over a button would effect anything. I tried it and it still worked, which let us do some more stylized buttons than if it didn’t work.

Conclusion

In the end, I’m very proud of the project we ended up with. Sometimes it was frustrating having to deal with limitations in iBooks, but we worked with what we could do. We kind of had to deal with some uncertainty in the group about our project, if we should change to a different topic, and how to handle working together in a group, but we ended up messaging or getting together to figure out what we were going to do.

Jonathan Irwin is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. This article relates to projects in the DGM 2260 Courses and is representative of the skills learned.