Design And Development Process

Designing a realistic claw crane 

In order to answer the question: How can I make a real claw crane in an AR app? I analyzed the experience of the claw cranes we used to play, and designed the storyboard for the app. 

Below is the storyboards: 

Now the playing experience is clear, the next step will be the modifications on the details and the building of the model. I built the crane myself in Unity, and used the birds' assets from the asset store. After setting up the crane, I started to connect it with the marker I would use later in the AR app. I adjusted the location and size of the crane to fit the screen, making sure players are having a proper size of view of the crane and could comfortably control the key. The last thing to set up the scenario is the music. I added the music and sound effect to enhance the play experience, and voila, here is the AR claw crane. 

I was so excited to play with it, and then I found the key hole is too small which made the experience frustrating when I tried so many times for nothing. Since it is an AR app, the crane in the app is not that stable and shaking for some time while playing. As a result, I made the holes larger and easier to aim. 

The windows are the other issue I had when I was playtesting the claw crane. Normally the real claw cranes are transparent on three sides, and that is what I did at the beginning. However, compared to the real ones which players need to move from side to side, the AR crane seems too simple to aim since players would be able to take a look at any side by simply moving their phones a little bit. In order to create the same experience of the real ones, I added the blockers to the side windows that players would have to choose only one window to be transparent. At the same time, they are only able to control the key when the front window is transparent. This made the game harder yet playful. 

Implementation issues

It was a markerless AR app instead of makerbased app. However, I found the buttons are not working well while I was using the markerless AR since it is easy to be stabbed. It is also harder to decide the place and size of the crane. 

In the very first design, I was planning to make it the same size as the real ones, in which players need to walk from side to side to aim the hole. Then issues came out that it is hard to view clearly since the view is limited by the screen. Moreover, the crane won't show up when the floor is not plain white. So I changed the app from markerless to markerbase, sacrificing the realisticness of the experience for a more stable performance. 

The other issue I met was how can the key only be movable when players are viewing the front window. The answer is simple: make the scripts of moving the key active when the front window is transparent. 

I also designed the animation of the birds after the key hit the hole. Birds would fly out when they are unlocked. But I didn't know how to do that until I learnt it from Google. There is a boolean in the parameter of the animation. I set it false at the beginning where the animation is idling. When the key hits the keyhole, and the bird is freed, the boolean parameter will change to true and play the animation. 

Post-Mortem

Hit The Cage is one of my first attempts at developing AR apps. I really enjoy the process of designing and developing the final project. There are ups and downs in the process, and the experience of solving problems made me feel satisfied. 

Changing it from a markerless AR to a marker based one is a compromise in the process. I understand that things may not work out the way I planned in the first place, but it would always work out in some way as long as I keep exploring it. 

I also believe that the more I learned the better I could do, and the claw crane would be exactly what I imagine one day in the future.