simple-magic-ball-main

App: Simple Magic Ball

 

It's been not so long time ago due to not being American I discovered a fortune-telling toy called Magic 8-Ball. Nothing special, just a plastic ball with a special shaped 20-sided object inside called Icosahedron floating in colored alcohol. Each side of it contains an answer: 10 positive, 5 neutral and 5 negative. Workflow of using it is next: ask a question, shake a ball and get one of the answers shown to you. Fascinating.

magic-8-ball magic-8-ball-answer

1. Research

So, I got this "cool" idea of creating an mobile app for it. Well I thought it was cool, until I actually decided to research a bit and see if there any other applications that already in a market. And sure there where many of them. So I decided to install bunch of them and see how they work. And this was the point I got really excited: none of the applications where working the way I expected them to work. Major flaws are basically overcomplicated functionality: to many taps and to much animation involved before user actually get an answer. I basically wanted to delete them all after I tried to play for a minute. And this is where I saw some opportunity.

I asked myself a question: why such a simple game is being so much complicated on a user interface? Why can't I as a user just shake my phone and get and answer, shake it again and yet get a new answer almost instantly – the same way actual Magic Ball works? And I decided to make actually a Simple Magic Ball.

Simple first app as a iOS developer, simple user interface, simple yet beautiful animation and happy users in the end.

 

2. Animation

I am not a good designer let's be clear here (in fact I'm awful). But I always consider myself of being able to distinguish good user interface from crappy one. 

My first idea was to take video of actual answer being revealed, brake it on frames, extract them and then play them in a loop. So, I tried with one answer and it look like garbage – too many bubbles around Icosahedron, and way to much work of trying to make perfect videos out of 20 answers.

I showed results to a couple of people and got some advices on how to make it work better. In particular, my friend and co-worker Lucas Ohara (awesome designer from Brazil) offered some help on creating 3D animation in 3ds Max and rendering it in Abode After Effects. All it's left was to break videos on a frames for further use. And I must say it looked so much better then my initiall approach. Props to Lucas for creating stunning and realistic animation.

Here is video preview of end result:

3. Making an iOS app

There is not much to say on this section. I put couple of controls together: button, two images and two timers for roll-in and roll-out animation. Simple enough.

Update: my first posting attempt to Apple for Review failed, due to "not enought functionality" some sort of. So I added "Share on facebook" button, "Mute/Unmute" and some Fade-in and Fade-out instruction labels. They are not on screenshots below.

simple-magic-ball-iphone-1 simple-magic-ball-iphone-2 simple-magic-ball-iphone-3

4. Making an Apple Watch app

There was a little bit more for making a Apple Watch app. In addition to main extension application which will reveal answer to user upon force touch, I decided to add Glance controller and a Complication controller. On a Glance controller I added timer to display new answer every 5 seconds. As for Complication, which is available only for Large Modular watchface, I decided to show user an random prediction every now and them thought out the day (without ability of so called time travel).

And truth be told, using app for over two weeks my faforite feature is actually being able to see answer right when I raise my wrist. It's kind of cool when you think about something, and then look at your watch and it gives you answer for your question. Hopefully it will give someone a bit more confidance let's say in a bar, when you having doubts: should I approach this beautiful girl or not? And your watch is like a wingman: "Without a doubt, man! Go for it!".

simple-magic-ball-watch-1
Complication look
simple-magic-ball-watch-2
Force touch to get an answer
simple-magic-ball-watch-3
Prediction screen #1
simple-magic-ball-watch-4
Prediction screen #2
simple-magic-ball-watch-5
Glance look
 

5. Conclusion

I do realize it's not a major break-through in app development, but I think it's a good first step for me personally. I enjoyed this journey of learning Swift and making cool looking app with a support of people around me. Thank's to everyone who helped me for this app to happen!

Let me know in a comments what do you think and abviously DOWNLOAD, SHARE AND RATE! Much appreciated 🙂

Credits

visual design
Lucas Haruo Ohara

audio engineer
Joshua McAllister

sound effects
Mike Tesh

assistance
Ken Sutter

programming
Eugene Pavlov

1,142 total views, 7 views today

Leave a Reply

Your email address will not be published. Required fields are marked *