← Back to Blog Overview

Augmented Reality Halloween App Tutorial

Augmented Reality Halloween App Tutorial

Any light-hearted soul knows that a great part of Halloween fun revolves around pulling pranks on friends and family. You just cannot beat the laughter which follows a well-played prank. And since the season of mischief is upon us, you might be thinking of putting on a mask and sneaking up on someone for the perfect scare. Even though old-school practical jokes are definitely a classic, we think you could do better. How about a custom-made Halloween app?

As an augmented technology provider, Wikitude wants to spread its craft. So, after watching a few unsettling AR horror films and discussing the dark side of AR at your Halloween get-together, be prepared to give a legendary augmented reality grand finale prank. We will show you how in 4 easy steps. 

Augmented Reality Halloween app tutorial

Step 1 

You need to record a scary video. Please notice that the video must be encoded using the H.264 video compression standard. In our sample app, we used the Demons Cam app and recorded a video by providing an image.

Step 2

Download the JavaScript development framework and choose our sample 11_VideoSimpleVideo. All you need to do is upload your own video in the assets folder and update the code so that it points to this video.

In the code provided above, create a new augmented object which is a video and position it in the y axis. You can see all the parameters that the Video Drawable Class provides here.

Step 3

In order to make our Halloween sample a bit scarier, we added another augmented object; a HtmlDrawable. We had an animated .gif of running blood but, since the Image Drawable class does not support this type of images, we simply added it as a HtmlDrawable.

Step 4 

The VideoDrawable is bigger (in terms of file size) in regards to the animated gif and therefore, the HtmlDrawable would appear before the video would be loaded. However, we can define the sequence we wish our augmentations to appear in. First, we set the HtmlDrawable object to enabled:false so that it will not appear once the Image Target is recognized. Then, we make sure to change this property to true once the video is loaded.

Based on the events that are associated with a VideoDrawable and the properties of a HtmlDrawable, you can have a lot of variations here.

Whether you are planning on developing your Halloween app to be deployed on Android or iOS (or both), Wikitude has got you covered! Our cross-platform augmented reality SDK combines 3D Markerless Tracking technology (SLAM), Object Recognition and Tracking, Image Recognition and Tracking, as well as Geo-location AR for apps.

That is all you need to make your own Halloween app! 13 lines of coding in JavaScript, the most used SDK among our developer community. However, you could adapt this tutorial for the Native API as well. Interested? Download our augmented reality SDK to get started. It has been said that it is as much fun to scare as to be scared. Put your spooky app to the test and find out the fun way!

For other Wikitude app tutorials like this one, check out “The Turtle” and “Your own Pokémon Go“. Additionally, visit our Youtube channel to view our great AR Unity 3D video tutorials

Questions, comments? Let us know!

If you have questions, suggestions or feedback on this, please don’t hesitate to reach out to us via Facebook, Twitter or send us an email at hello@wikitude.com!