ZapWorks Lightsaber Hilt AR Brochure
In this article I will document my design process on building out an AR eccentric Brochure based on the “Anatomy of a Lightsaber Hilt”.
Let me start off by saying that despite the frustrations and roadblocks I encountered creating this I had a blast and strongly recommend this sort of project to anyone to challenge both your technical and creative side and to learn a new skill!
I will be giving just a high-level account for my design process on the AR experiences I created because my brochure was definitely more AR and experience based than content based.
Experience #1: The front panel (Star Wars Crawl video)
Upon first looking at the panel the user is greeted with the title and a ZapCode. I wanted the first experience to really pull the user in to the world of Star Wars to get them in the mood and what better to set the mood than the classic opening credit crawl. I created the video in Hype 4 which is a hybrid motion graphics\website creation software. To create the video in Hype I changed backgrounds to black, put in text for the opening in turquoise, then had that scene switch to the main text block to scroll. To achieve the “Star Wars Crawl” effect I simply inserted my text and animated it going up through the scene, then appended it to a group node, which I distorted at a 60 degree angle to give it the “going off into the distance” look. I then brought it into Imovie and laid the soundtrack over it. Finally this asset was ready to put in AR! This was probably the simplest part as I used the widget editor to upload a movie, put the code in my pamphlet and finshed.
Experience #2: The Anatomy of a Lightsaber 3D model.
This experience probably took me the longest as there was a lot of learning and mistakes made to get it working properly. Here are the steps I took to get it working.
- Select appropriate template
- Find and import model from sketchfab (and configure correctly)
- Create and set up lighting
- Import “trained image” so that the software knows how to track
- Set up animation timelines and raycasting triggers
- Export and Publish!
This is all much easier said than done (and learning to do).
Experience #3: This experience was a simple interactive slideshow and was one of my favorites because it was extremely easy to implement. I simply created a new Zap Project in widgets, chose slideshow, and selected my pre-picked high definition asset images.
Experience #4: This experience was the “real life lightsaber” experience. It was one of my favorites to create because it seemed really cool if I could pull it off and I also had a couple ideas on how to accomplish it. So the design aspect starts off with where I’m going to get the asset. Well I was thinking I could use a 3D model of a lightsaber blade however I couldn’t find any on sketchfab. So after some more research and thinking I realized that what I could do was search for a png image of a lightsaber, then crop out the hilt so I just had the blade. I wanted a png because I could use the transparency of it’s background to correctly overlay the blade so it looks correct and doesn’t have any whitespace around it. After creating the png asset I opened a new Zap Project in Studio, imported a trained image like before as well as importing my png. the transparency worked like a charm! Now there was another issue: I had to rotate it and line it up relative to the Zap Code so that on the Brochure it looked it wasn’t just coming from the code, but actually coming out of the lightsaber emitter itself. This took some trial and error of looking at it in the Zappar app and then readjusting it in Studio to get the right fit. My end result wasn’t perfect but it was pretty darn near it I think and I’m really pleased with the outcome!
Now to finish off with the actual print. I came up with a design and color palette that reflected Star Wars in a recognizable and fun way.
I wanted this brochure to be very AR experienced based, however I knew that it still needed content so I added in content on panels to supplement certain experiences as well as having panels that were solely content driven to give more information.
