The insane road to creating the first hyper real stickers on the App Store

Floyd’s Sticker Jam is an action shooter game, featuring Time Travel, and awesome HYPER-REAL stickers. This is a brief story of how we came about creating the ‘hyper reality’ for the stickers. Enjoy.

 
floyd-pack.jpg
 

For Floyd’s Sticker Jam, we had the crazy idea (production wise) of creating a sticker album. The whole concept of the album was heavily designed, not only to serve as a ‘collectible’ feature for users in the game, but also as a means for the user to unlock content.

One of the first sticker designs we did for Floyd's.

One of the first sticker designs we did for Floyd's.

Example of completing a boss group sticker pack in the album.

Example of completing a boss group sticker pack in the album.

Whenever you complete a sticker group in the sticker album, you unlock new content, giving a new powerful value to all the sticker packs you are rewarded with whilst playing.

So, whenever a “boss” or “minion” group is completed, for instance, a new boss or minion is unlocked in the game you play. So the gacha feel is amazing, you never know when you’ll be getting new content next. It’s a gacha-mixed-with-DLC thing we decided to design.

Why did we do this? Well, basically because we figured there were a lot of card collecting games in the appstore, but no STICKER game. I mean, there are lots of sticker games, but they are simple collecting games, not actual genre games.

An early image of how Floyd would've looked if all in-game sprites were stickers.

An early image of how Floyd would've looked if all in-game sprites were stickers.

Some early concept art of Floyd's Sticker Jam

Some early concept art of Floyd's Sticker Jam

Blind pack concept art.

Blind pack concept art.

So, in all the process of generating this sticker-album feature, we figured yet another thing... we said to ourselves: wait, if we are going to do stickers, and sticker packs, shouldn’t we be doing them as REAL as possible? Meaning, hollographic, and stuff?

custom-security-hologram-stickers-combo-640-280.jpg

First of all, we started looking at stickers. From a US and Japan trip I had made myself, I had brought a bunch of cool hollographic, retro, stickers and collecting cards. So first of all we begun analizing the sticker packs and stickers.

Non tamper proof hologram seal.jpg
custom-security-hologram-stickers-icon-400x340.jpg
Hollographic sticker references we brought from Japan.

Hollographic sticker references we brought from Japan.

We were excited. But we didn’t know how we’d be achieving that, and also we didn’t know the amount of hard work that it would entail. So we pulled up or sleeves and got on it. We worked the game on Unity.

After making a real good analysis, we started googling ‘how hollographic stickers’ are created, how is that effect generated? We wanted to replicate what’s going on in real life, to make the effect as real as possible. So we begun making some tests in After Effects, doing some simple animations.

ezgif.com-optimize (1).gif

Before heading to Unity, we did this entire animation on After Effects to figure out how we wanted the whole 'opening pack' experience to feel.

One of the first 3D sticker / hollographic + accelerometer tests we did on Unity.

The result was awesome. And it was a bit simpler than expected... on the visual side. We just had to find a ‘hollographic’ texture, make a pattern off it, and then mix it via screen-mode or any additive mode, and animate the HUE of the pattern. But the real challenge came when we wanted to create all this on Unity ----how?

Hol_test11.png
Hol_test13.png
tex_FloydPacket_Diffuse_01_loco.png
tex_GoldPackett_MASK6.png

We had to create what we called "holo-maps". And, with some 'coding wizardry', we were able to figure out how to create shaders that would work --exactly-- as all the video references we had made. Kudos to the coding team!

So, right after figuring that out... that’s when we got the idea of connecting the HUE animation to the accelerometer of the iPhone. And that’s when the magic happened:

More tests, this time with the blind packs.

The result was uncanny. We were extremely pleased. Once we saw this, we decided to add this effect to every sticker and sticker pack in the game. Not only at the store, or reward moments, but actually IN-GAME as well (you can pick up stickers by shooting the ground in-game whilst playing).

Better results with shaders. How each sticker rarity works. Every rarity has it's own shader/hollographic texture, COMMON, RARE, EPIC and LEGENDARY.

sticker-open.jpg
sticker-pack-gold.jpg

In the end, we were very happy with the result. It was a long, technical, creative and artistic voyage, but totally worth it. And it shows: the hyper-real sticker feature in Floyd’s, is the most appealing feature to users, aside it’s time-travelling mechanic, which is a whole different story. Hope you enjoy Floyd’s at the appstore!