Making PictoCross

This is going to be a long one, so strap yourselves in. I’ve tried to divide it with sensible section headings but ultimately the reason this is one post is that it’s one story; feel free to skip bits, but you can’t complain if something later doesn’t make sense. It’s as much a review of Windows 8 and Visual Studio 2012 as it is anything else.

The Beginning – Thursday Morning

Cerys and I got tickets to Over The Air at Bletchley Park; I had attended it last year, but it was Cerys’s first. We knew we wanted to do a hack together, and that it would be some kind of app, and that there would be prize-carrying challenges to attempt. When the challenges were announced we decided to go for the Innovation on Windows Phone challenge, and make a game. There were two problems: we needed a game idea, and we didn’t have a machine which could run Visual Studio. On Thursday, the day before the event, we solved both problems. On the train to London in the morning I saw someone in cycling gear playing Draw Something, which prompted this optimistic iMessage exchange which contains basically the entire design of the game:


To address the second problem I went to PC World during my lunch break and bought a Lenovo IdeaPad Yoga 11S, which as far as I can tell is the base model of their line. It has a Core i3 processor, 4Gb RAM, 128Gb SSD, 11″ screen and cost £700. I wanted the 13″ Core i7 version with 8Gb RAM and 256Gb SSD for £much but this was the only one they had in stock to go that day. I resigned myself to seeing a lot of egg timers and took it anyway.

Windows 8 and the Lenovo Yoga 11S – Thursday Evening

I was expecting my experience of Windows 8 on the Yoga to be pretty similar to Windows RT on the Surface. There are two huge differences: I almost never see the please-wait animation, and the desktop makes sense because it has a proper laptop keyboard and touchpad. On Thursday evening I started the installation on Visual Studio for Windows Phone then spent the few hours it took to download familiarising myself with the interface and its idioms. It’s interesting that in both the desktop and the modern UI I found myself using all three of the input devices (the keyboard, touchpad and touchscreen) to get stuff done.

It was difficult for me to achieve things on Windows 8 at first because I am very familiar with the flows I use to get stuff done on iOS and OS X, and the flows are quite different on Windows. Here is an example: I spend a fair amount of time trying to keep track of my friends and colleagues across Twitter, iMessage, Facebook, LinkedIn which are four distinct apps on iOS; on Windows 8 they (or the equivalent) are aggregated into an app called “People” which is also your Address Book. In this instance I think that the Windows approach is clearly superior: it’s oriented around the thing I am trying to do rather than the services which are being used.

I did not know this by Thursday evening but now, on Sunday evening, I can say it with high confidence: this bottom-of-the-range Yoga 11S could easily replace my MacBook Pro and iPad for all the non-coding purposes I use them, and that caveat is only because my job is coding for iOS. Of course I would be unable to run any of my current iOS and mac apps, but I could afford to buy replacements for the ones I need with the money I saved.

In hindsight I also think it was my good luck that PC World didn’t have the 13″ model when I went shopping; in the last few days I don’t think it would have been better at any point and would frequently have been less convenient.

Visual Studio & Blend - Friday

We spent Friday at OTA, where I enjoyed Andy Wigley’s session to introduce us to Windows Phone 8, VS2012, Blend, the Nokia Lumia and some of the APIs. It was particularly useful to watch his Visual Studio demonstrations because it’s changed a lot since I last saw it, and it helped to convey how a Windows Phone 8 app is expected to be constructed. Blend is a new program focussed on UI design and designed to be more suitable for non-programmers than the VS2012 XAML editor. I also checked-in with the Nokia guys and checked we would be able to borrow a phone for testing on Saturday morning: I expected we could do a lot using the simulator, although I hadn’t even checked that I had a simulator at this point.

Once we got back home and had fed the cat, we started putting the app together. We hit a couple of hurdles early-on: the emulator (similar in purpose to the iPhone Simulator) requires that you enable Intel’s virtualisation technology in your PC, which took me a while and a couple of reboots to work out. It also requires a 64-bit Windows Pro installation, and it turns out that this PC was running 64-bit Windows not-Pro. Happily there is a non-destructive upgrade mechanism which we used at a cost of £100 and (more importantly) about 90 minutes of lost productivity while the extra bits downloaded. Then you have to enable the Hyper-V functions in Windows, reboot, and finally you’re good to go.

While its purpose is similar the Windows Phone 8 emulator is very different in operation to the iPhone Simulator. The iPhone Simulator is an OS X app which partially mimics the function of an iOS device: you can’t interact with it by touch because there are no touchscreen OS X devices; and some of the iOS APIs don’t exist or don’t function in the same way as a real device (a big hello to Security.framework). The Windows Phone 8 emulator runs as a virtual machine on your PC; a window on your desktop shows the screen output and receives touch interactions. It’s certainly not a simulator, and in my opinion even the moniker emulator is doing it down, it’s a Windows Phone 8 device which happens to have the same CPU as your PC. You can even configure it to simulate various network connections (none/2G/3G/4G/WiFi) and signal strengths (Good/Average/Poor) which we have needed for iOS since day one, and still don’t have. In short, it was worth the wait and the minor hassle.

Beautiful though the screen on this PC is, it doesn’t really have the pixel count to make Visual Studio comfortable. About 10pm we worked out the trick of using the HDMI output to make our TV a second screen at 1920×1080: we put VS2012 and Blend on there and the emulator on the touchscreen, which seemed to be a near-perfect configuration for app development. About 10 minutes later we were reminded that the TV turns itself off if there is no signal, and that it only looks at the audio channel: we turned it back on and used Xbox music app to keep the TV happy. While doing this we found that the modern UI only appears on the main screen; the second desktop screen continues to update and remains interactive, so presumably if you were using this setup to make a Windows 8 modern UI app you could interact with it on the touch screen while using the debugger on the other. Now I think about it I don’t know how you would debug a full-screen OS X app (on OS X full-screen blanks any other displays).

Testing & Judgement – Saturday Morning

We coded until 4am Saturday, grabbed 3 hours sleep and then headed back to OTA. The Nokia guys, as good as their word, leant us a Lumia 820 developer phone for testing and the app worked exactly the way it had in the emulator. Despite this perfect correlation there are always things you learn when you go to a real handset which you can’t really appreciate when you’re looking at a window on a larger screen, so we spent the morning making some tweaks and showing the various category judges what we had done thus far: this involved a certain amount of running up and down Bletchley Park. I also cornered Andy again to show us how to make the transitions from page-to-page in the app prettier: once we had used the test handset for a few minutes it became apparent that our app was outclassed in this area.

Presentation & Results – Saturday Afternoon

I had to do a 90 second demo which was simple and easy thanks to the emulator, touch screen, screen mirroring and sweet-talking a recalcitrant HDMI to VGA adapter. It was nice to be able to show the app with demo GPS data while being able to interact with it by touching in the normal way. We were the first of the Windows Phone entrants to present but there were plenty of others who had also built interesting things, so we were by no means confident that we had done enough to win the challenge. We were surprised and delighted to place first and win a Nokia Lumia 1020 handset each.


Looking back on it, I suppose it was a bit mad to think we could build a competition-winning game in one night on and for an unfamiliar platform.  That we could do so says a lot for the quality and ease-of-use of Visual Studio 2012, Blend, the device emulator, the APIs and particularly the documentation. I didn’t know the Windows experience had got this good. Xcode is way behind Visual Studio.

I’ll write about the Lumia 1020 in a future post; I think this one is already long enough! I’ll also do a post about PictoCross, but I’d like it to be on the Windows Store before I do that.

2 Responses to “Making PictoCross”

  1. Dave Nice

    Awesome! I saw you post a Nokia link on twitter and thought it was not like you!

    I’ve got a Windows 7 laptop (no touch screen) and a Windows 8 DVD, haven’t yet summoned up the courage. The Lenovo sounds great and I look forward to seeing screen shots of the game.

    • Phil

      If you care for the integrity of the experience I think Windows 8 really needs the touch interface.

      On ours, somewhere in control panel, is a Windows 8 experience score which tells you how good your experience is compared to what it could be; it might be worth seeing if you can get that from some tool before committing to the upgrade. Ours only scores 5.5 because the graphics wouldn’t be any good for gaming, but it does very well in the disk speed and touch categories.


Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>