NextWar Windows Phone 7 Update 1.01 Released

NextWar for Windows Phone 7 received a small update today, fixing a small issue with the sliders in the options menu and updating the marketplace/tile icons. The update should be applied automatically the next time you start the game.

NextWar: The Quest for Earth released for Windows Phone 7!

After many months of development and testing, NextWar: The Quest for Earth is now up on the Windows Phone 7 marketplace!

If you've got a Windows Phone 7, check it out!

only US$2.99

Zune client software required.

More information at microngamestudios.com

NextWar Trailer for Windows Phone 7

Just released the trailer for Nextwar on Windows Phone 7. See it below!



Download Link (right-click, save-as) (.wmv, 19.9mb)

NextWar: Now in Landscape!

Work continues. Newest feature: landscape support!

Next on the to-do list: two-finger rotate.

Pinch zooming using XNA4 on WP7: Getting it right

If you don't care about the explanations and just want to skip to the code, click here.

Pinch-to-zoom is one of the basic multi-touch gestures. It's an intuitive way to zoom in/out and is found pretty much anywhere multi-touch is found. It's really easy to implement but it seems that more often than not, people get it wrong. Unfortunately, even Nick Gravelyn's touch-gesture sample on the XNA website got it wrong. (But to be fair, the sample was more about demonstrating the API than what you could do with it.)

Let's first take a look at how pinch-to-zoom is supposed to work.

The Gold Standard

If you have an iPhone or iPod Touch, pull it out now and view a big image. Find two "landmarks" in the image: spots which are easy to precisely identify in an image - for example the tip of a skyscraper or somebody's nose. Find two of these spots, place a finger on each and pinch together. As you pinch you'll notice that your two chosen landmark spots still remain in place underneath your fingers.

This is how pinch-to-zoom is supposed to work. Each of your two fingers should act as an "anchor" on the image - once the two fingers are pressed on the screen, the points on the image underneath each finger should stay stationary relative to their respective finger.

Okay, so maybe that explanation wasn't very clear. Maybe an image or two will help:




Now you can see what I mean: the points on the image underneath each finger don't move relative to the finger. After the gesture is complete our friendly koala's eye is still under the thumb and the top of his head is still under the index finger.

Implementing it

Okay, so how do you actually implement that? The easiest way would be to use matrices - using matrices you can easily define the center of scaling to handle much of this for you. But the SpriteBatch.Draw method doesn't allow you to specify a transformation matrix - so you have to make do specifying a scale and a position.

Scaling

Scaling is pretty simple. In your GestureSample, you get position and a delta for each finger. If you subtract the delta from the position, you have the previous position of each finger. And the amount you need to scale by is simply the ratio of the old and new distances between each finger.

position1 = position of finger 1
position2 = position of finger 2
delta1 = delta of finger 1
delta2 = delta of finger 2

oldPosition1 = position1 - delta1;
oldPosition2 = position2 - delta2;
newDistance = dist(position1, position2);
oldDistance = dist(oldPosition1, oldPosition2);
scaleFactor = newDistance / oldDistance;

The scaleFactor is the amount you multiply your object's scale by, not the absolute scale of your object. In other words, it doesn't determine your object's scale directly, only how much to change your object's scale by. In pseudocode:

float scaleFactor = GetScaleFactor();
obj.Scale *= scaleFactor;
renderer.Draw(obj.Position, obj.Scale);

Translation

Translation is a little bit trickier. We've found the amount to scale our object by, but remember that the points underneath each finger shouldn't move relative to the finger - those points should be "anchored" to each finger. So that means we need to translate the object in such a way that whatever was under each finger before the pinch motion are still under the finger afterwards. Again, in pseudocode:

newPos1 = position1 - (oldPosition1 - obj.Position) * scaleFactor;
newPos2 = position2 - (oldPosition2 - obj.Position) * scaleFactor;
obj.Position = midpoint(newPos1, newPos2);

Note: this assumes that obj.Position is in screen-space!

Where the definitions of position1, position2, etc. are the same as previously.

An explanation:

Ignore one of the fingers for now - consider only one of the two fingers. You know that the finger moved by some amount this frame, and the object has also been scaled by some amount this frame. And you want to ensure that the point on the object underneath the finger previously is still underneath the finger now.

All that the code does is find the difference between the object's position and the finger's old position, scales it according to the scaling factor, then adds it to the finger's new position. But wait! There are two fingers - which one do we use? Well, both, actually - which is why we take the midpoint of the two possible new positions.

Summary

That's it. If you apply these simple formulae for the scaling and translation of your objects, your pinch-zoom behaviour will be correct and will "feel" right to your user. Reading and translating all that obtuse prose can be a pain, I know, so I've also provided some sample code that you can use.

The Code

There isn't much to it, really. I've provided a static class PinchZoom which contains the functions necessary to implement pinch zooming, as well as a sample project. You'll need a multi-touch capable monitor or an actual WP7 device to test it, of course. Alternatively you can try this excellent multi-touch simulator drop-in component.

PinchZoom.zip Sample project (789KB)
PinchZoom.cs (5KB)

Here it is in action:

NextWar for WP7 at TechEd

If you were at TechEd Australia 2010, you might have seen NextWar at the keynote on Tuesday. Mad props to Dave Glover for doing that - getting it out there in front of 3000 pairs of eyes was certainly some nice free publicity. ;)

At istartedsomething, Long Zheng (coincidentally also an MHS old boy) has a photostream that includes a couple of photos of NextWar running on prototype hardware.

Dave lent me his TabletPC and his prototype WP7 device so I could test on it before the demo at TechEd. It was only prototype hardware and not representative of the final product, but it ran amazingly well. Prototype or not, it looks amazingly good running on an actual device!

There'll be some more updates coming soon, so stay tuned!

App My State

I'm proud to announce that my app for Windows Mobile 6 and 6.5 devices, Metropolitan Melbourne, has won second prize in the Victorian Government's App My State competition!

On Monday I went to the awards event at the State Library of Victoria to accept the prize. Premier of Victoria John Brumby was there to present the awards, and it was interesting to see the other entries and winners. Well done to all who entered! I won a 17" Macbook Pro, a 16GB iPhone 3GS, a 250GB PS3 Slim, a JB Hi-Fi gift card, and a MinoHD 8GB flip video camcorder. The prizes have a total value of $5000.

About Metropolitan Melbourne:
Metropolitan Melbourne ("Metro Melbourne" for short) is an app for Windows Mobile 6 and 6.5 phones. It features train timetables for all metropolitan Melbourne train services presented in a simple and easy-to-use interface.

Features:

• View metropolitan train network maps
  
• Use the in-built journey planner to generate the fastest route between two stations
  
• Browse timetables for all train stations across all lines
  
• See which trains are next to depart from any particular station
  
• View departure and arrival times for a particular train service
  
• Save your favourite stations in a quick-access favourites list

Downloads and usage instructions for Metropolitan Melbourne can be found on its website: http://metropolitanmelbourne.com/