Prototyping Mania

Here we are again and today we’re going to get into programming, yaaay! It has actually been ridiculously fun for me to try and wrap my head around programming languages.

Mainly because now I get to use programming related cat pictures!

So let me share the joy!

I have been going back and forth a lot on how to make my actual app. My first idea was to go for HTML5. I have some experience with HTML and CSS and with the new HTML I could make something both tablet and pc browser compatible. I started with the HTML/CSS, Javascript and JQuery courses at Codecademy. This website provides several programming courses which are presented in short assignments that you complete. By combining the basic things you learn in the assignments you are guided in creating small projects. Most of it was helpful, though sometimes the instructions were a bit confusing and I felt I wasn’t really able to use what I learned outside of the guided assignments. This is generally something I notice with myself when I try to learn something. If I am not being shown the bigger picture and just complete small assignments it takes me forever to understand what I am doing. I understand the little segments on their own, but I can’t put it together by myself and it takes me forever to figure out what is wrong when it’s not working the way I think it should.

Cats are no help in these cases either

So to further increase my understanding of code I went through some video courses over at Zenva. Their HTML5/CSS and Javascript course are free and very good. It really helped to go over the basics again after doing Codecademy and with the Zenva courses I did get a sense of the overall picture. I was so pleased with the free courses that I ended up purchasing some of the other ones (JQuery, HTML5 game development and iOS app development).

However, no matter how many hours I put into it now, I am a beginner at programming and to hang my project on this scared me quite a bit. Therefore I looked into alternatives that would require me to code less. This brought me to a program called Hype by Tumult.

Hype provides users with a graphical interface to create interactive and animated websites, without the need to code. I made a small prototype in a couple of days, trying to get in all the functionality I would like to see in a basic story page (not a mini-game) of the final product. These features were:

  • Images displayed that make up the scene with looping animated elements
  • Animated characters with different animations
  • Text appearing on the screen, words being highlighted as they are read out
  • Text is being read out by a voice over
  • Navigational arrows
  • Small interactive elements, something happens when they are pressed

This is the result. Don’t blink or you’ll miss it.

Every interface takes a bit of time to get used to, but Hype is overall quite intuitive. You can easily assign actions to elements and animating objects is very straightforward. It uses an interesting system of being able to create different timelines on which the elements can have unique animations. It keeps everything well organised and flexible.

As you can see in the video I didn’t finish putting in everything on my list. Nice as the program is, I ran into some issues. The most important one was the difficulty in doing frame-by-frame animation. The ways I tried (animating the opacity and animating the image input) caused flickering between frames. I was also missing the luxury of being able to parent objects the way I’m used to in 3D programs and After Effects and being able to animate the Z-depth of an element. While none of these issues were very big, I knew they would cause me problems down the road when I would be trying to do things the program isn’t (yet) meant to do. I was very pleasantly surprised to be contacted by Jonathan Deutsch, Hype’s creator, who found me on Twitter. He was so kind to suggest a different way of doing frame-by-frame animation in Hype, and some of the other features I was missing might end up in a future version of the program. If you ever need to easily make an interactive and/or animated website I strongly suggest checking it out! But for this project I decided to try and future-proof myself and get into Unity.

I couldn’t find a relevant yet fun picture for Unity, so here’s the cats again

Unity is a game engine that has been on my list of “things to get into”. It supports Javascript although once I had decided to get into the program I figured I might as well learn CSharp (from what I’ve seen they are quite similar, just with a different syntax). I’m still a little worried about the coding, though the interaction I’m planning isn’t very complicated. Definitely the theme for the upcoming months should be “keep it simple”. We recently had our end of term assessments where it became clear that the scope I had in mind was way too big. I am therefore scaling back my design a lot and seeing this more as a “lite” version of the actual app. This should help in keeping everything manageable, including the programming.

Another post later this week: ups and downs in getting ready for the assessments and art!

PS. Just found out Zenva now offers a Unity course too.

Side-Quest: Animation Marathon

I haven’t gotten this whole blog writing business down yet (I am getting better at Twitter!). I think I’m probably supposed to do this weekly or so, instead of letting it pile up and then not knowing what to write about. Quite a lot of things have happened since the last post, though most not important or interesting to talk about. But recently I went to the Fête de l’Anim in Tourcoing (Lille, France) where I participated in the animation marathon, the result of which you can see at the top of this post. This has given me a lot of input for my own project again, so that’s what I’ll talk about today.

What is an animation marathon? It is not binge watching a ton of anime, in case you were thinking that (good guess though). In this event about 18 schools from around Europe sent teams of 3 students to create 10 seconds of animation in 2,5 days (that’s a lot of numbers). Because my school and the organizer of the marathon and festival are part of the VIVID program, Tess Martin, Jeroen Koffeman and myself were able go and participate.

Day 1

We arrived on Wednesday morning after our train having technical issues between Roosendaal and Brussels and very nearly missing our Eurostar connection to Lille. On the way my old nemesis The French Language also quickly reared its head as we tried to figure out whether Bruxelles Midi was the central or southern train station in Brussels (midi, middle, central… nope, it’s south). However, everything turned out fine and after a trip on the subway we arrived at l’Imaginarium, the main location of the festival and our work space. At 2 pm the image (created by Franck Dion) that all teams had to start and end their animation with (so that they may be played after another in one compilation on the last day of the festival) was revealed. This is what we had to work with:

FranckDion_AnimationMarathon_Image

You can probably imagine we were confused for a moment.

We decided to use one of the characters in the front since that’s where the eye of the viewer goes first and we found the character on the right the most interesting. Quickly dubbing him Baby Catfish we got to work.

Before we saw the image we already decided we’d like to try an animation technique called pixilation. This is a stop motion technique where live actors are used as a frame-by-frame subject in an animated film, by repeatedly posing while one or more frame is taken and changing pose slightly before the next frame or frames (go Wikipedia!) In our case the “actor” (me) was holding a drawing with a frame of an animation we made of Baby Catfish. By changing the drawing every frame the final result is a slow moving animation on the paper, while the actor and environment change quickly around it. Still following me? Here’s some stills to clarify:

Pixilation-example

I might have to go for a modeling career after all.

Jeroen mentioned he’d also like to do something in 3D, which meant we would have a 3D model of Baby Catfish. Since we would have this model anyway, we decided to use it to create the animation, after which we would trace the frames off of the computer screen. So with our plan in mind Jeroen went to work on the model and Tess and me went to the center of Tourcoing to find an art supply store and a location to do the photo shoot.

Luckily Toucoing has a pretty center with a beautiful art/book store and a market square with a fountain. The perfect setting for our Baby Catfish character to take a little trip. We made some test pictures and headed back to Jeroen who had a model ready for us.

From the test photos it was clear that a single sheet of A3 paper would be too small to show the animation properly. So instead we taped two sheets together at odd angles to fit the movement of Baby Catfish on each frame. Since we needed the room to be dark to be able to trace the images off the screen we had to hijack another team’s computer that was set up in a dark room. Sadly by 2 AM the building was closing so we had to trace the remainder of the drawings from my laptop in the tiniest hotel room in the world. By 3:30 AM or so we were done and could get a few hours of shut-eye.

tinyRoom

Never have I seen so many beds in such a small space.

Day 2

In the morning, after a very sad breakfast of spongy supermarket croissants (in France?! YES, in FRANCE!), we used the acrylic paint we bought the day before to color in the traced drawings. By 11 AM, completely according to schedule, we were done and headed out to the fountain to shoot. There we discovered that Thursday in Tourcoing is market day and our fountain was completely obscured from view by market stalls. Fearing the worst we headed closer and fortunately the area around the fountain was kept clear. We were able to do our shoot and the acivity of the market in the background actually made the animation more interesting. Besides the church tower blocking the sun, causing a pretty severe lighting change in our animation and the occasional typhoon like wind which blew some of the drawings away (one into the fountain), the shoot went extremely smoothly and we were done within 2 hours.

flan

Time for a break with flan, presented in a pretty box!

Tess got to work on transitioning from the original image to our drawn animation while Jeroen and myself racked our heads over the best way to rig up a snake like creature (something that I should know, but keep forgetting how to do properly). In the end we managed it and Jeroen could get to animating the end of the animation. We caught up on some sleep this evening and were in very good shape to finish the animation well on time the next day.

Day 3

On Friday all that was left was compositing the 3D animation into the After Effects file and tweaking the result. This still took the larger part of the day, but it was very relaxed. By 5pm we called it quits, backed up our files and cleaned our workspace. In the evening we watched the 2D graphic battle, where participants had short competitions of speed painting in their software of choice. This turned out more exciting than anticipated and we enjoyed it immensely.

2DGraphicBattle

Theme for this round: Birth of a Unicorn. Made me sad I wasn’t participating, I’d have done a rainbow explosion with a bloody unicorn shooting from it.

The actual festival

So while we were working on our animation, there were already things going on in the background for the actual Fête de l’Anim, the first thing of which that I attended being the graphic battle. Since we were leaving on Sunday morning I had one complete day to enjoy the festival. I opted to attend the masterclasses, rather than the movie screenings, most of which were in French and a half an hour subway ride away. The speakers I saw were Franck Dion, Suzie Templeton and Andreas Hykade.

The whole talk with Franck Dion was in French. While the venue had a nifty system with headphones through which the talk was immediately translated, I wasn’t very engaged (plus I get a headache from headphones pressing my glasses into my head for two hours). The whole format of the masterclasses was that 3 films of the guest speaker were shown, after which they sat down with the host who asked them questions. Therefore the quality of the talk was very much dependent on the host and the questions from the audience. The talks with Franck Dion and Suzie Templeton were all-right, but the most interesting was Andreas Hykade. I had not seen his work before and wasn’t crazy about it when it was screened, but he took the lead in his own talk and was very funny and engaging. The way he could explain his choices and his honesty and openness about his work methods was really inspiring, to an extend it made me like his work more than I did initially.

AndreasHykade_TheRunt

My favorite of the films being shown by Andreas Hykade, the Runt.

After packing up for the next day we were ready for the last night in our tiny boat cabin of a room and head back home.

Wrapping up

So what was so motivating about this experience, as I hinted at the beginning of this post? First, it was great to work together with Tess and Jeroen. Without Tess’ suggestion of doing pixilation it would never have occurred to me and now we got to get our hands dirty and go outside instead of being locked behind a screen for the whole marathon. I learned a lot from both of them. Also creating something in such a short time is very liberating since you have no time to overthink things. Finally, I met a bunch of nice people and seeing how everyone creates something completely different from the same image was very inspiring.

At the end of my last post I hinted at getting crafty for the art direction of my project. Since then I have actually been putting off touching all the paper, markers and paint I got, probably for fear of making mistakes. But with this experience under my belt I feel very ready to get messy and experiment. So in my next post I will be keeping up that promise, prepare yourselves!

Stories with interactivity or interactive stories?

So, here we are in March, which means I have about 4 months to produce an insightful and meaningful research document and about 6 to make a kick-ass app to graduate with. About time for some progress you might think, and I would agree! As I’ve mentioned in my last post (the boring one with no images), the first month or so of my project has been devoted to research. In this post I’d like to share some observations I’ve made during my research so far and some progress on the project. And there will be images this time, yay!

There, an image already! …so cute! O.o

As I mentioned briefly before, I feel that a lot of interactive storybooks on the market could do more with the medium they are on. Last weekend I hijacked my mom’s iPad and went on a storybook spree to study some of the best reviewed apps out there at the moment. While many of these apps are absolutely delightful and no doubt provide hours of entertainment for many kids, on a storytelling level I can’t help but feel there are some missed opportunites. The best example of this I found in The Witch With No Name by SlimCricket. But before I get into that we’ll do a little Storybook App 101 on what every self-respecting storybook needs!

 

1. Interactive background elements & Read to me / Read by myself

The very basics of a storybook app. Two options in the beginning: to read in silence or have the story be read to you by a voice over. As far as the interaction goes there is page turning and touchable background elements that make a little animation or sound when touched. This is the very basics for a storybook and something almost all apps that I’ve tried have. The visualization, the story and the creativity in what is interactive are in this case really what makes one better than the other.

Meeting just the very basic requirements in terms of interactivity, but very charming story and art style: The Prisoner of Carrot Castle by Purple Carrot Books

2. Animation

A step further than having a largely static image with touchable elements is animated segments that play out as the story is being told. While adding a lot to the experience when done right, some apps take this to an extreme. In these cases there is a very distinct difference between movie-like segments and interactive segments, breaking the flow of the experience and moving quite far from anything resembling a book.

Numberlys by Moonbot Studios looks very stylish with full CG cutscenes. Its interactivity and story are not very well integrated with each other though.

3. Using device features

Almost all apps I’ve tried used the gyrosensor of the iPad, either in mini-games (like aligning a compass) or to give the idea of depth in the storybook scenes. Many also use the camera and other features the device has to offer at certain points in the story.

The Penelope Rose by Mobad Games advertises itself as having 3D without glasses. Personally I found the combination of drawn elements with 3D models and photo-like backgrounds quite jarring. But while it is not a 3D effect like the Nintendo 3DS, it does give the illusion of being a window to a different world.

4. Mini-games

Most paid storybook apps include mini-games. These are often integrated well into the story and it is therefore very much dependent on the app what the mini-games are. When looking at the actual mechanics, most (if not all) come down to touch-dragging objects to the correct place or tapping objects in time (if I might get technical for a moment). Using game mechanics to make something more engaging is a hot topic at the moment (gamification) and the fact that they are used to make books more appealing is great. A question I have, which I will get to in a bit, is how we can make them more meaningful, and not just have them there for entertainment purposes.

minigames_jackbeanstalk

Some of the minigames in Jack and the Beanstalk by Nosy Crow

5. Non-linearity / Alternative endings

The points I just mentioned are pretty much what makes up the basics of any good storybook app. How well these points are handled is different between apps, but the same elements can be found throughout. Now we are getting to what I am really doing this research for, which is interactive storytelling. There is huge difference between a story with interactive elements and a story that is interactive. A story with interactive elements unfolds the way it has been designed and the interactivity propels the story forward (ideally). An interactive story changes based on what the reader puts into it. Of course interactivity is always limited since the options we give the user need to be the designed as well as the outcome of these choices. Besides the extra work in designing these choices and outcomes it also comes with a set of challenges. It is for instance harder to tell a consistent story when the user can progress in multiple ways.

The amount of apps at the moment that are trying something in terms of interactive storytelling are limited, but I found a few. First there are the fairytale apps designed by the guys at Nosy Crow. I tried 3 of their apps, Cinderella (2011), Little Red Riding Hood (2013) and Jack and the Beanstalk (2014). All these apps are of great quality with nice artwork, voice acting and interactive elements and they are definitely some of the best apps I’ve tried. While Cinderella is nice, its interactivity in story is limited. Little Red Riding Hood really takes a leap foward in comparison, featuring a non-linear path through the forest which leads to different mini-games. From each game Red collects an item which she in the end uses to fight off the wolf and save grandma (bonus points for making Red the hero of her own story here). The three little sequences in the end are different depending on the collected objects, therefore slightly changing the ending based on the choices the reader made.

Choose your own path in Little Red Riding Hood by Nosy Crow

The newest app from Nosy Crow is Jack and the Beanstalk which takes the interactivity in the story even further. The story is linear until reaching the giant’s castle. Here there are 9 rooms, each of which has a mini-game in it. After finishing a room, Jack gains a key to another. The order in which Jack gets the keys is random, changing the order with each play through. Furthermore, there are 3 rooms where the giant is found sleeping. Here the reader either gains an item (coins, goose that lays golden eggs or magic harp) or wakes up the giant. If the giant wakes, Jack is chased out of the castle and he chops down the beanstalk. The “worst” ending is Jack and his mom and a lifetime supply of beans from the stalk. The more items the reader gains in the castle before waking the giant, the wealthier Jack and his mom are in the end.

Compared to most other storybook apps, what Nosy Crow does in these last two apps is revolutionary. Coming from a gaming background though, it’s fairly limited. The ending is always happy for Jack, the only difference is how happy he is exactly. There is also the assumption that non-linearity automatically makes a story more interactive and therefore more interesting. In fact, I believe it is generally better for a story to maintain some structure and linearity, since it’s extremely hard to tell a meaningful story when the segments can be played in any order. Jack and the Beanstalk is therefore not much of a book at all for the middle section, but rather a collection of unrelated situations.

To better explain what interactivity can add in terms of storytelling we’ll look in a bit more detail at the example I mentioned before, The Witch With No Name by SlimCricket. This app is of similar production quality as the apps by Nosy Crow and it’s a lot of fun. It tells the story of a witch who doesn’t remember her own name, or even how she might have lost it. In the story she collects ingredients to make a potion to help her remember, which leads to a small twist in the end that does a nice job in involving the reader in the story (I won’t spoil it here).

At the beginning of the game the witch is walking down a path and we are told about how she doesn’t remember her name and how, to her annoyance, her neighbors make fun of her for it. As she walks she passes by several people shouting an insult or joke her way. Here we are prompted to tap on either the witch or the person, which will result in the witch putting a spell on them in revenge. When we go into the next scene inside the witch’s house, her bat friend makes a comment on how he saw her being nasty to their neighbors and how she won’t make friends this way.

witchwithnoname

The witch encountering her neighbors and being berated for bewitching them

Now here comes the problem. While most children will just press the indicators when they flash up and put funny spells on the neighbors, this is in no way necessary for the story to progress. The witch stops for a moment and grumbles when the neighbors make their jokes, but if nothing is pressed she will just continue her walk and the neighbors will stay normal. When she enters the house the bat will make the same comment about her being nasty, despite her not having done anything wrong. Likewise, after the witch figures out her name and she walks back along the same path, all the neighbors are changed, regardless of whether the reader cursed them in the beginning.

It would have been so easy to make a check whether the reader actually put spells on the neighbors, and if they hadn’t, change the dialogue to reflect this. For instance, the bat could have commented on how proud he is of the witch that she didn’t abuse her neighbors out of anger, despite them being mean, teaching a small lesson in the process and giving the decision of the reader to have the witch retaliate or not some actual meaning.

Because that’s what interactivity is all about. It is about giving the player choices, yes, but choices are not all that interesting until their consequences can be felt and we can reflect on why we make the choices we make. To quote Carolyn Handler Miller: interactivity is not really satisfying until it is meaningful. And while completing a mini-game is interactive and has a result (the completion of the game and usually the acquisition of an item to progress the story), wouldn’t it be interesting if the outcome of the game, win or lose, would actually influence the story being told and the characters? This is what I want to explore with my project, seeing how we can keep the experience of reading a book and keep those elements that are in existing storybook apps (because they are a ton of fun), but add more meaning to the story and the reader’s involvement in it.

jackbeanstalk_barrels

Another example of a lack of consequence: when Jack has to flee the castle the reader is supposed to help him jump over the obstacles he encounters. When this is not done Jack crashes into them and says it will slow him down. However, no matter how many times he crashes into an obstacle, the giant will never catch him.

 

My concept in a nutshell

Besides the interactive storytelling component I have a clear theme I want to work with in my project. We all have fears and insecurities and it is often hard to share these, even with our friends. I would even go so far as to say we are often taught by society to not show our worries and issues, for this is considered a sign of weakness. This is such a waste, since we all need people who support us, accept us for who we are and help us deal with our problems. One of the worst things is feeling you are dealing with something and you are alone in this, with no one to turn to.

It is not a novel concept that our issues or fears take shape in some sort of form (green monster of envy, monkey on your shoulder, J.K Rowlings boggarts). In my story the problems the heroes are facing are evident in their counterparts, their imaginary friends.

A group of children is going on a week-long summer camp. They all have their own insecurities they are dealing with and while they are trying to suppress them, they are showing more and more clearly through their imaginary monster friends. At the beginning of the week a backpack of one of the children goes missing. As she tries to find it and figure out who took it and why, she befriends the other children and helps them deal with whatever it is they are struggling with. Or perhaps she won’t… that will be up to the reader. :)

 

What’s next?

With the design of the story and interactive elements slowly progressing, soon it is time to start on the visualization. Since I will be spending a lot of time in the upcoming months behind the computer I have decided to get crafty for this. Coming up in the next blog post:

artsupplies

Getting creative with paper for character design!

Full of ideas…

… is what I never am. Ever. I am envious of people who say they are constantly getting ideas. Notebooks full they have with little snippets of genius. Holy grails of creativity these little note and sketchbooks are. Or at least, that’s the impression I get.

I am not like this. It takes me forever to get an idea. And then it takes me forever to consider it, toss it away again, go through a crippling cycle of self-doubt and eating ice-cream, pick it back up and then finally… hopefully… ending up somewhere that can be called the beginnings of a concept. Officially I started with my graduation project about a month ago. Ask me to show you the progress since then and I will probably avoid your gaze while I pretend to be busy, hoping you’ll get the hint and go away.

Necessary as it is, research takes time and you have nothing to show for it. Things have happened, oh yes! I have done a refresher course on HTML and CSS (one day I’ll make my own website from scratch, for now I am very thankful to people who make awesome templates like this one) and I have gotten into learning Javascript. Many hours have been spent at the library immersing myself in literature for children, researching my target group, illustration styles, etc. And of course I have looked into what has already been made and what I will be building my own project on. These things will soon show up in my “review” posts, but other than that… I have nothing to show for it. That’s also why this post is so bland without any images… :(

However, if you haven’t given up on me yet and you are still reading this (thanks!), let me get a bit more concrete. There will be an app. It will probably be made in HTML5 and Javascript. It will be aimed at kids, but I’ll be darned if I don’t manage to make it interesting for adults (at the very least for the type of full-grown child like myself). I see a lot of storybook apps aimed at kids that (in my opinion) don’t do enough with the digital medium. Personally I think I will always prefer to read a book over reading off a screen. So when developers decide to take the step to go digital, they better make it worth it. Interactivity is an immensely powerful tool and it is often underused. My intention is to make a product that provides a good story, looks appealing and is designed to use the medium that it is on, instead of it being stuck on as an afterthought.

As far as story goes, there will be children and there will be monsters. Often we are taught to not show our weaknesses and insecurities. This makes many people feel like they are alone in their issues or that they can’t ask someone for help, while this is hardly ever the case. This will be the main theme that my story will revolve around. Oh, and there is a backpack… a very important backpack.

I hope you’ll stick with me as I embark on this trip. I am scared to death :D And also very excited!

Ruis

Ruis is a short animation about a world without visual culture. It was our goal to show how many things around us are part of visual culture and why it is important to society.

This was the second project I worked on in my master year at AKV St. Joost. Our client was the House of Visual Culture and the theme was (surprisingly) visual culture. For this project I had the pleasure to work with my fellow student Lisan Peters, whom I taught the basics of 3D modeling and animation over the course of this project. The film was shown at Culture Night 2014 in Breda.

Watch the film at the top of this post or on Youtube.

 

The Box

The Box is a short animation about a girl who goes on an adventure with the help of a plain old carboard box.

In September 2013 I started my new study at AKV St. Joost with the goal to improve myself and obtain a MA degree in animation within a year’s time. The first assignment we got was to create an animation for the One Minutes foundation. As you might have guessed, this video had to be one minute long. Other than that, no restrictions. Since I had been trained in 3D software, I took this opportunity to try out hand-drawn animation in TVPaint.

Watch the video at the top of this post or on Youtube.

Looped

In July 2013 I received my bachelor’s degree in visual art for video games from the NHTV University of Applied Sciences in Breda. The project I graduated with was Looped, a silly animated short about two dogs.

This project evolved a lot over time, starting out as a way more complicated story about a fat little dog trying to get food from his neighbor dog. My ambition soon crippled my productivity and I spent some time in limbo before pretty much starting from scratch. The only real thing that remained from the original idea was the dogs.

It goes without saying that I love dogs, we’ve always had them in my family and I can’t imagine life without one. My main goal for this animation was to capture some of the behavior and personality I see in my own dogs and make something fun and recognizable for other dog lovers.

Watch the film above this post or on Youtube.