iPhone

Boom Bugs Released!

Posted on December 11, 2011 by Quick Fingers in Boom Bugs, iPad, iPhone, Unity | 1 Comment

Title says it all :) Boom Bugs my physics based destruction game has officially been released on iPhone and Android, and the iPad HD edition is under review as we speak.

After working solo on the project for a little while I collaborated with the guys at Playerthree and between us we finished it from an early alpha to the polished game that it is now!

If you aren’t familiar with the game, please take a look at the trailer below (courtesy of unity3d.com)

All you have to do is head on over to www.playboombugs.com for more information, get it on your smartphones and start killing some spiders!

Designing for iOS

Posted on October 26, 2011 by Quick Fingers in General, iPad, iPhone | 5 Comments

I’ve been quiet recently, a lot of this is due to me focussing on a couple of key titles for me for iOS. One you already know about and one is totally unannounced. With all this work on little screens I was doing all sorts of UI and HUD design and one of the things that bothered me was previewing the work I was doing in Photoshop on a device at native resolution. (especially with retina display when the native resolutions screen area is tiny compared to most computer monitors displaying the same resolution). I’ve researched some solutions but inevitably came up with my own that suits me best.

There’s an app for that.

Currently there’s a couple of apps out there suited to this. First up is LiveView from Nicolas Zambetti. This is a free screencast type affair that broadcasts a select area of your screen to your device. Setup is super simple, you do need a host app installed on your computer and it is only available for Mac, once installed the device connects over wifi and everything works. You need to specify an area of your screen just for the screencast, this means if you move your photoshop windows about a lot it’ll break the illusion and you might spend time re aligning to the capture area.

The second app i tested is called Review by Kevin Kalle and Pieter Omvlee. This is a more bespoke tool for the task, specifically targeting photoshop users. It is a file sync solution that again requires a host application and again is Mac only. (I use both a mac and pc throughout development so I prefer cross platform solutions)

Once you’ve got both the iOS app and the mac app running syncing them was easy enough and to use it, there’s a system wide shortcut for syncing any images selected in the finder or any active window open in photoshop as a png. Very nice. The only negative thing i found was the process to update an image currently being displayed was slightly convoluted. It requires you to go back to the start of the app, hit the refresh button, wait for the update and the click on the image again to show the updated version. The iOS app of Review is also not free. It’s currently being sold for £1.99.

So one app (LiveView) provides instant updates as you make them via screen casting techniques but requires you to have a reserved area of your monitor specifically for this so didn’t really allow for folks like me who chuck photoshop windows around reckless abandon. On the flip side Review was more suited to me, just a keyboard shortcut and a file is ready to be viewed on the device, however the price and process to view a file I may of only changed a couple of things in meant it wasn’t right for me. The other problem I had with both these apps was having to install another helper app on the mac side was something I’d like to avoid if possible (and ideally, get a cross platform solution) and with liveview, broadcasting a screencast does have an impact on your processor.

My solution (Dropbox / custom website)

Photoshop Action (bound to SHIFT-F1)

So what was the end result? Well I chose to use neither. Instead I utilised what I already had available to me… Namely a Dropbox account and a tiny little web site on my domain. How this works is as follows… I’m messing around with a mockup in photoshop, I hit a keyboard shortcut, an action runs to save a copy to my Dropbox public folder with a specific name (in my case iospreview.png) and I just tap my iPhone screen and the image magically appears.

(One added bonus of using Dropbox is the nice little icon that tells me when the image is done. And if the changes are minor it only uploads the delta so it’s pretty darned fast)

That magical bit is where the interesting part lies, I’m using a free app on my iPhone called Full Screen Browser (this app is also a private browser, whatever that means, but the full screen bit was perfect for my needs. I have a website that just shows that drop boxed image, and nothing else. With some metadata and javascript I’ve made it fit the iPhone screen pixel perfect and make the image a link to refresh the page. Simple! Now I can design on my Mac or my PC, with no extra applications running and update my iOS view with a simple shortcut and a tap of the screen. It also works without the iPhone being on the same network as my computer (Useful if your workplace has network restrictions or no public wireless) and its totally free.

Before and After some HUD Changes. 1 key press & 1 tap to see the update on device.

As an added bonus I included a swipe control on the website that toggles a “screen-door” effect. This basically emulates a non retina screen on a retina display device. So when viewing images on my iphone4. I can see how they would look on an iphone 3gs and lower just by swiping across the image. For information on how this works (and why it is different to just viewing a half resolution image on your retina screen) visit Louie Mantia’s blog here

If you want the source code for the html page to do this click the big blue button

 

Download Source

 

iPhone 4 Gyro Control in Unity

Posted on August 7, 2011 by Quick Fingers in iPhone, Unity | 11 Comments

The Write Up.

This idea spawned from seeing an iPhone app called Cameraman for Maya by Wes Mcdermott (www.the3dninja.com). The basic principle is you can use the gyro inside an iPhone 4 to record motion capture data. Really useful if you want to get an authentic shaky cam effect. I’ve been planning some larger projects in my head and figured something like this would be really useful for getting some animation clips for the camera in cutscenes.

Initially I thought this would be really easy in Unity. It has a remote iPhone app and I can just use that. I had a friendly peer-imposed deadline of 24 hours from Prime_31 so I figured why not :).

Unfortunately gyroscope support has only been added to Unity in the very latest version (3.4) and the remote hasn’t been updated to send Gyroscope data to Unity when using it as a remote. So that was out, (although that would also have limited me to having a usable system only on Mac). So I tried something else.

(If your not interested in the background and just want to get it going on your own projects, goto the bottom of the post to get the download links and how-to)

OSC?

For the uninitiated OSC stands for open sound control and is a messaging format optimized to be super fast over current networks. It’s primary use is in audio, controlling synthesizers and synchronising hardware with software. However due to its light weightness its really good for real time stuff, I did a quick search for iPhone apps that support OSC and found a BEAUTY. This is part 1 of the puzzle to get this thing running.

Control

The app is called control. It’s a single dev’s work by the name of Charlie Roberts (www.charlie-roberts.com/Control/). If it wasn’t for this I wouldn’t have made my 24 hour deadline. It’s basically a customizable interface allowing access to all sensor and touch events and send the raw data with OSC. The great thing about it is the interfaces are in JSON format so writing your own is a piece of cake. Oh yeah, and it’s free! Here’s an example interface for Control:

loadedInterfaceName = "template";
interfaceOrientation = "portrait";
 
pages = [[
{
    "name": "refresh",
    "type": "Button",
    "bounds": [.6, .9, .2, .1],
    "startingValue": 0,
    "isLocal": true,
    "mode": "contact",
    "ontouchstart": "interfaceManager.refreshInterface()",
    "stroke": "#aaa",
    "label": "refrsh",
},
]
];

So I made an interface that sends the gyroscope information 100 times a second and also has 4 triggerable buttons on the screens (used for movement in Unity). Once you’ve got all this sending data, it has to be received by something. So another app was required here. (Sending the gyro at 100hz was absolutely fine as long as my wireless signal was strong. Any sort of interference or low signal caused a few drops here and there)

Osculator

Another wonderful application that I utilised is Osculator (Mac only unfortunately. I didn’t search for a Windows alternative but OSC is an open format so should be plenty of software out there!). It is available as a demo which functions fully apart from a pause every 10 minutes or so for 20 seconds. This application receives all the OSC data you can throw at it then does whatever you want with it. You can see in the screenshots it provides these great live views for any parameters you send it so I get a nice graph showing me exactly whats happening with the gyroscope. On my osculator setup shown in the screenshot you can see I mapped each gyro output (pitch, roll and yaw) to a different joystick axis and then assigned the 4 on screen buttons to joystick buttons. Now just have to hook them up in the Unity editor and half the puzzle is solved.

Osculator Setup

Unity

Once we are in Unity we just set up the 3 axes in the Input Manager and write some script to handle it. The scripting is pretty straight forward. Just adding a little code to convert the axes into the transform data and everything starts moving around as it should. Initially when I did this I had the animation creation as a 2 step process where you would make your data whilst playing, then create the animation file and edit it after the game has ended and your back in editor. Now I’ve streamlined it thanks to Unitys AssetDatabase API I can create the animation asset whilst your playing and store it in your Assets folder. (This will obviously only work in the editor still, it wont work if you export. That was never my intention). Anyway that was the final hurdle so now, we are done :) It took me 20 hours in total to reasearch and complete the prototype.

 

Trying it Yourself!

If you’d like to give this a go yourself… Well, cool. But there’s a few prerequisites.

  • Control Application for iOS (iTunes Link)
  • Osculator for Mac. (Demo)
  • iOS with Gyro (iPhone 4 or iPad 2)
  • Your computer and iOS device on the same network.

Okay I have all that, I still wanna do this!

  • Start Osculator and grab my patch file from here. Load it and leave it running.
  • Start Control on your device: In the app, goto ‘Interfaces‘ click the plus (+). Point it at the URL http://www.quickfingers.net/unitygyro/layout.js (This will download the interface to your phone so it’ll always be there from now on) You should see it in the list as “Unity Controller“. Now goto ‘Destinations‘ and your computer’s IP address should be there, tap it. Then back to ‘Interfaces‘ and tap Unity Controller.
  • Inside Osculator you should see things starting to flash.
  • Now open a new or existing Unity Project
  • Download the GyroRecorder.cs file and attach it to the camera. (Or anything you want to record animation for)
  • Download the InputManager.asset file and overwrite the one in your projects /Library folder. (Be aware this will destroy your Input Managers settings so don’t do this on some pre existing project with complex button mapping setup).
  • Restart Unity.
  • With Control and Osculator running, hit play in Unity and everything should just work!
  • Hit ‘Zero‘ on the device to reset the current gyroscope position as 0,0,0.
  • If your getting weird behaviour and flipping make sure to lock your devices orientation. This uses Core Motion so the accelerometer does come into play. I had weird effects when the orientation was detected. It’s better to just lock it

The rest should be pretty straight forward! Hit the record button to start tracking input. If you stop the engine or press stop it’ll output to a .anim file in the Assets root directory. Okay enjoy!

Introducing : Boom Bugs!

Posted on March 23, 2011 by Quick Fingers in Boom Bugs, iPad, iPhone, Unity | 4 Comments


Hello! I am pleased to finally announce the project I’ve been working on for the last few weeks… It is called “Boom Bugs!”

Earlier on in the year I made a blog post announcing a new title called Tick, Tick Boom. Well that was the prototype for what is now “Boom Bugs!”. I was getting to grips with working in 2D in a primarily 3D engine (Unity) and now I’m ready to reveal!. I thought a nice way of doing it would be in the form of a simple developer natter in a youtube video. This is my first youtube video I’ve talked in and I didn’t plan anything it’s just one take so its nice and raw :)
Enjoy the talk, and see how I’ve done some of the funky little things in Unity… Feel free to full screen it if you want a good view of the Unity interface. It’s in HD so should all be readable.

Thanks for watching!

New Project Announced! : Tick Tick Boom!

Posted on February 21, 2011 by Quick Fingers in iPhone, Tick Tick Boom, Unity | 1 Comment



Hello! Surrender has been live for a few weeks now. Response has been generally good. I’ve learnt a lot and I will no doubt be re-visiting this project in the future to add much needed multiplayer and develop it further into a “proper” game worth paying for :)

Now, about the present… I have started working on a new project aimed at the iPhone market. I’ve called it Tick Tick Boom! It is an explosive destruction based physics puzzler with lots of bombs and some little bad guys to kill.

I’ve decided to make it a 2D game which meant artwork was a different ball game to my usual. This meant digging out the old Wacom (Intuos 2(!) in retro navy blue) and getting down with the vectors… again. It’s been a good 4 or 5 years since I’ve done any extensive 2D design but it was kind of enjoyable but I still suffer from the I can’t actually draw very well problem and approach everything mathematically. Still I’ve also got a 3D gremlin model (a royalty free purchase, for speedy development time) and am using that embedded in my 2D environments. The visual style still needs a little polish, the colours aren’t exactly right. I am unfortunately cursed with colour-deficiency (Yes I know my robot ruse is wearing thin, maybe there was a problem with my CCD’s at the workshop) so I will be enlisting the help of Mrs. Finger’s artistic eyes to help :)

I’ve included my first video update here (You’ll notice I’ve switched to Youtube for the development videos. I will still be using Vimeo for full trailers and “proper” videos, but for the stuff more akin to work in progress I’ll be using Youtube as my screen capture software publishes directly to youtube and the videos process pretty much instantly)