Legend of the Greasepole gets the Silverlight 4 + Analytics treatment
Legend of the Greasepole has been ported to Silverlight 4 and reincarnated on http://greasepole.net.
Greasepole is the long-suffering game about multimedia tribute to the inexplicable Engineering traditions at Queen’s University in Canada. Over 50 students contributed to the project back in the day.
There’s a significant AI component to Greasepole – the autonomous “frosh” characters have models for learning and communicating with one another.
A couple of years ago I ported it from C++ to C# and XNA. I abstracted out a series of services (graphics, sound, input, timer, persistence) so that it might ultimately be ported again to a platform like, say, Silverlight or something. Why? I don’t know, maybe I’m a little obsessed with the illusion of preservation.
The Silverlight 2 version was a bit shaky. Silverlight 4′s hardware acceleration and bitmap caching make it pretty solid. It is also awesome to hear from friends that it apparently works on the Mac.
Analyze These… Shenanigans
I also added a little analytics. Although it should probably be said that the Greasepole event largely defies analysis, the game itself does not, and so this is the first time I can let someone poke their head in and see how the froshies are doing all around the world.
Back in the day, the worldwide best time was in excess of a mere 53 minutes. But I had to learn that by way of Sean Murray (class of ’05; wonder where he is now) sending me a screenshot. Now the interwebs will tell us immediately. (Admittedly, it’s not a fair fight against Sean, because the frosh are now permanently in “keener” mode, and the Options screen has been replaced by a dozen trendy Achievements for you to “unlock”).
So get going stalling those frosh, and my question for you is – what statistics would you like to see?
“Number of pints Al ‘Pop Boy’ Burchell has quaffed?”
“Number of hippos fed”?
“Height of human pyramid vs time”?
I am going to enjoy cooking up visualizations for some of those.
(Coding notes: A few new VS2010 things helped with this update: Web.config transformation (rocks), improvements to Web Publish functionality, XAML designer, Entity Framework experience… and more.)
Play Legend of the Greasepole Online Edition.
Cross-Country Olympic Mind Games
During the Winter Olympics, the lights of the CN Tower are taking part in an interactive art installation that’s controlled by a participant’s brainwaves.
What I like about the CN Tower installation (in addition to the cross-country nature of the biofeedback loop) is how they teach participants to generate the correct brainwave patterns. We faced a similar challenge back at MediaLabEurope.
Continue ReadingFour Perspectives on Delivering ‘Return on Experience’ Follow-up Notes
And now, as promised, the link-laced follow-up to this week’s “Four Perspectives on delivering ‘Return on Experience.’”
Our UX Gurus on the panel were:
- Susan Greenfield, a Senior UX Designer at Infusion
- Ernie Taylor, a Project Manager at Infusion
- Bill Baldasti, the VP of Canadian Accounts for Infusion
- Daniel Cox, an Interactive Designer at Frozen North Productions
and in addition to their insights on Wednesday night, they’ve kindly helped me compile these links.
(If you want to contact any member of the panel, they’re first-initial last-name at infusion.com, or ping me.)
The panel began by reflecting on the masochistic teapot made famous by Donald Norman on the cover of his book The Psychology of Everyday Things, to remind us that in the software industry, what we create for our clients often becomes an everyday thing.
Are we making things that are functional but masochistic like this teapot?
- You can visit Donald Norman’s site and read The Psychology of Everyday Things.
- I also enjoyed his more recent Emotional Design.
The panel then weighed in on Deborah Adler’s redesign of the Target Rx medicine bottles, which was bravely showcased by Microsoft as a UX case study from another industry during the second day keynote at Mix09.
It was a story arc that highlighted the many elements of ‘return on experience’ – everything from safety and customer satisfaction, through brand awareness and driving revenue.
- You can see the MIX09 keynote here.
- Read more about the Target Rx bottle redesign here.
- My initial thoughts on the MIX09 keynote (with more links) are here.
Then we reflected on the co-existence of the Development and Design lifecycles. There were varying opinions on where each person on the panel feels squeezed for time and resources in the cycle.
Ernie’s more thorough PM’s Gantt chart (very much not shown here) was a sobering dose of reality. We considered techniques for determining the point at which the value to the client diminishes when you add more time and resources.
I did a Sketchflow demo. We created an interactive prototype. It had the “right level of fidelity” and the panel remarked that the “sketchy” look helps manage client expectations.
At a high level – there was love. Sketchflow should change our software development lifecycle.
But some easy things were hard. We integrated sample data (and Susan quite fairly called me on it when I talked about a designer “databinding” to “sample data.” (If Blend wants databinding to be [the designer's] job then the designer says “but it’s not my job!”). We looked at editing a data template (for a Listbox full of items) and everyone agreed this experience was currently way too hard without grokking a number of Blend and XAML-specific concepts.
Especially valuable is Sketchflow’s ability to solicit feedback from clients with standalone prototypes. Ernie remarked that it was when he saw Sketchflow run “live” as a standalone prototype that he saw how valuable it could be. Integrated client feedback was a big win. We also saw how it can generate Word doc summaries, and all eyes lit up.
We remarked on its incredible potential, which it’s not quite living up to just yet. Earlier on in the presentation, we’d hit upon this theme that a good user experience should never make the user “feel stupid” – but for new users Sketchflow can unfortunately make some of its target audience feel stupid.
For a v1, though – wow – we all saw the value, and deeply, desperately want it to be awesome. Ernie said he’d go back to his team the next day and tell them to start using it.
- Download Blend3+Sketchflow trial here.
- These are the most thorough Sketchflow tutorials I’ve watched.
- If you have less time, watch Qixing’s Sketchflow mini-tutorials.
- In case you don’t know, Sketchflow channels the ideas of Bill Buxton from Microsoft Research.
- Specifically, it channels the ideas in his book, Sketching User Experiences.
After the break, we talked about roles and expectations. Given the changing tools and processes, we wondered what should be expected of different roles.
We noted how “designer” is a “suitcase word” that carries many different meanings. Susan saw all these “people” in the Venn Diagram and just wanted it to be clear that in real life, it’s often all a single, multi-faceted “person.”
- The diagram is from Robby Ingebretsen’s incredible Design Fundamentals for Developers presentation, which is highly-recommended perspective-broadening stuff.
Most of the panel are, or have been, involved in Infusion’s Surface projects, so we took a moment to talk about design and user experience as they relate to that platform.
Susan remarked that Surface development demands UX design skills “to the extreme.”
The Surface design challenges include: attracting the attention of casual users, encouraging users to overcome the novelty of simultaneous multi-user interaction, and embracing the lack of an “up” direction. It’s “hyper-real,” and there is a need to consider the affordances of design elements used on this multi-user touch-table application.
- Joe Fletcher’s MIX09 Surface Session considered the nuances of Surface UX design
- Infusion makes Surface apps.
- FalconEye is a cool Surface app and there are videos of FalconEye and other Infusion surface apps here.
We had Dan Wilcox from the games industry, so we also asked him what we can learn from the gaming world if we’re trying to build line-of-business apps instead.
Dan agreed that a significant challenge is showing users what they can interact with, and how. That “affordances” thing again. He talked about how the games industry has improved in its ability to guide people through 3D landscapes, and perhaps similar cues could influence navigation through user interfaces. He gave examples of where games are blurring the boundaries between user interface and game world.
- Frozen North Productions is working on the Wii title Flip’s Twisted World.
- Affordance Theory is per Gibson,
- and you should check out Don Norman’s book too (see above re: the teapot),
- as well as the Henry Dreyfuss classic Designing for People.
Then we talked about the future, because that’s always fun.
But the twist here was: what kind of UX considerations will come into play as we design for new kinds of interactivity?
We ran out of time because we wanted to run down the street to see the Surface app before Rogers closed, but now you have time to explore, and add your own thoughts below…
- This MIT Media Lab Augmented Reality system projects context-sensitive information, and employs gesture, image recognition and tagging.
- The Nearest Tube on the iPhone is a great augmented reality app.
- Layar is an Augmented Reality browser.
- Project Natal’s use of the whole body to interact examines scenarios focused around the living room (and Johnny Lee is on board)
- What will be the UX of E-paper – will every surface be a Surface?
- How do we design for interfaces with no touch, only nearness?
Silverlight 2 Greasepole Game Engine
If you’re authoring multimedia applications in Silverlight, you might be interested in how each of the core game engine services for Legend of the Greasepole is now implemented for the Silverlight 2 Beta.
From C/C++ to a Provider Model-Based .NET Engine
Some brief history to explain how we got here: Greasepole’s first incarnation was manky C/C++ stuff that I’d perf-optimized to bits back in 1997-98. Trainwreck stuff.
Migrating that C/C++ mess to a C# mess involved writing a lot of Visual Studio 2008 macros. These macros could gain surprising insight into non-compiling half-C++, half-C# code, in order to sweep through and perform laborious changes.
What came out the other end of the refactor was a C# core engine for the game that required the implementation of five platform-specific services:
- RenderingService,
- SoundService,
- InputService,
- GameTimerService, and
- GameSettingsService.
I previously implemented those services for the XNA version. Now let’s look at the Silverlight versions of these services.
Silverlight RenderingService
When each frame is rendered, the engine ultimately requests that the RenderingService draws a series of sprites from particular “frame descriptions” or “FrameDesc”s (a vestigial name, essentially meaning bitmaps with metadata) at given (x,y) coordinates:
public void DrawBitmap(TSprite associatedSprite, FrameDesc frameDesc, int nScrx, int nScry, byte[] replaceRGB, byte[] substituteRGB)
The bitmaps themselves are stored as Resources in two assemblies (SilverLegendAssetsMenu.dll and SilverLegendAssetsGame.dll) that I download on-demand using WebClient. This has the advantage of dramatically reducing startup time, and only requiring the game engine to manage the downloading of two files over the web after startup. An equivalent option would have been downloading archives full of bitmaps, but I was concerned that this would require decompressing the bitmaps at runtime.
The RenderingService pre-caches the URIs for the bitmap associated with each FrameDesc (e.g. “SilverLegendAssetsGame;component/Graphics/Frosh4a.BMP”) so that the bitmap can be looked up without string manipulation whenever it is requested by a sprite.
Each game sprite is assigned its own System.Windows.Control.Image by the RenderService, which is initialized by having its UriSource Property set to a System.Windows.Media.Imaging.BitmapImage. When the FrameDesc for the sprite changes (and therefore the sprite’s bitmap appearance has changed), the Source Property of the BitmapImage, a URI, is changed to the appropriate cached Uri. (It looks as though you’re not permitted to re-use BitmapImage instances across multiple Images.)
Mirrored images are achieved by setting a MatrixTransform on the sprite’s Image’s RenderTransform.
Z-Ordering is performed by using the ZOrder property on the Images.
After each frame is rendered, the RenderingService iterates through all the Images on the Canvas, looking for any that weren’t rendered during that frame and therefore should be removed from the Canvas.
But what’s with the byte[] replaceRGB, byte[] substituteRGB parameters on the DrawBitmap call? In all the other versions of Greasepole, the characters became multicultural by performing color-key swapping of their solid skintones. The DirectX engine used two BitBlts, and the XNA engine uses custom shaders. Achieving this in real-time with Silverlight 2 is something I haven’t yet figured out.
Silverlight SoundService
Sounds assets are stored as MP3 Resources in the previously-mentioned download-on-demand assemblies SilverLegendAssetsMenu.dll and SilverLegendAssetsGame.dll.
Just as with with RenderService, the SoundService pre-caches the URIs to all the sound files.
The SoundService keeps a static collection of MediaElements around. These are added as children to an invisible Canvas called SoundCanvas. When the engine requests that a sound is played, the SoundService finds an unused MediaElement in the static collection, sets its Source Property to the correct URI, and Play()s it.
The MediaElement’s MediaEnded event is handled to either loop the sound by either (1) setting .Position=TimeSpan.Zero and calling Play() again, or, (2) if it’s not looping, to add the MediaElement back to the static collection of available Media Elements.
Incidentally, this whole MediaElement juggling trick was a highly unstable process in the Silverlight 2 Alpha which seems to work reliably in the beta.
Silverlight InputService
In the Silverlight 2 Beta, handling input was a piece of cake. Mouse and Keyboard events are handled for events on the main Canvas to inform the InputService of human interaction.
Unfortunately for game developers, keyboard input is more or less crippled when Silverlight is in fullscreen mode. Luckily, we’d designed Greasepole to be playable with just one mouse button.
I also wish I could use the right mouse button for input, but instead it brings up the Silverlight Configuration menu.
Silverlight GameTimerService
To create a game loop, Greasepole uses the “empty Storyboard technique” outlined at Silverlight Games 101. The game loop calls Update enough time to ensure a constant 24 updates-per-second update rate, and Render whenever possible, which triggers the RenderingService (see above).
In every other respect, the game timer is the exact same as in the XNA version. DateTime.Now works as advertised! Here’s to a common set of .NET Framework classes!
Silverlight GameSettingsService
The IsolatedStorageFile API makes it very easy to rapidly save and load game settings in a local sandbox.
See this sample for more information on how to use the virtual file system in Silverlight. The GameSettingsService uses a very similar technique.
Continue Reading







