When I'm looking at the train's window on my way daily commute home, I remember, as a kid, I used to imagine a figure running alongside me on during road trips with my family.

I was curious and did a simple search. I found that many people out there also have the same imagination. Here are some links:

The only difference that they imagined a vary of figures, so I'm trying to think what's the most general figure: A stickman.

I'm excited to know all of this and want to bring the experience back, so we can get nostalgic, train our imagination muscle, and spend our commute time in a fun way.

What it does

A running Stickman 3D on a camera screen.

On the front camera, it shows an example of what's the effect all about. Switch to the rear camera to place the Stickman in the real world. Tap the screen to make it jumps. Pinch the screen to set the scale of it. Pan the screen to move it. Avoid the obstacle and enjoy.

How I built it

I get the 3D model from Sketchfab and modify it in Blender. After that, I used Mixamo to animate it. To create the sprite sheet of the background animation I used FFmpeg. Then, I used Spark AR and its Patch Editor to stitch them all together.

Challenges I ran into

  • How might I create a smooth transition between running and jump with one 3D model and two animation clips?
  • How might I minimize the effect size to reach more audiences (devices)?
  • How might I show an easy-to-understand example of how the effect works?
  • How might I make the effect more realistic?
  • How might I create an easy and intuitive user interaction?

Accomplishments that I'm proud of

I enjoy and learn some stuff throughout the one day process of this first hackathon project.

What I learned

  • The front camera is a good spot to show the example of the effect if it only utilizes the rear camera.
  • An example is very important for the user to can gain more context about the effect.
  • Use a sound effect to make your effect more interesting.
  • Combining multiple sounds effect and animations are a straightforward effort with the patch asset.
  • Utilize many gesture interactions as intuitively as possible by mimicking how user use their phone.
  • The Clamp patch function is really useful when we want to set the boundary of the object movement.
  • Always minify your assets.

What's next for Running Stickman

  • Add more figures to catch more user's imagination.
  • Add an animation effect to make it more interesting (wind when run, dust when jump, etc).
  • Add 3D obstacles to make it more fun and mix the reality even more.
  • Find a way to only import the animation clip without the 3D model.


Built With

Share this project: