Add a touch gamepad to your HTML5 game

1 Reply

As we discussed in the last post, Design a game that stands out, a great way to differentiate your game is by having touch interactivity. Many touch games are not nearly as great as their console counterparts simply because they have crummy controllers.

For many games, it’s appropriate to have some sort of game controller UI to move your character around, and trigger an attack or jump. Like designing other custom touch interactions, this is hard to get right. Seb Lee-Delisle has a great write up on Multi-touch game controller in JavaScript/HTML5 for iPad, so I adapted his design to be easily reusable in your WinJS HTML5 games.

In this post, I’ll show you how to quickly get it added to a game, step-by-step.

TouchControls: GamePad

I’ve added a new WinJS GamePad control to TouchControls control library. It lets you plug and play a gamepad into your existing game implementation, as easy as detecting keyboard or physical game controller input.

Step 1: Add the TouchControls NuGet package

In order to add the TouchControls GamePad to your game, the first step is to add the DWCares.TouchControls.WinJS NuGet package to your game.

To do this, it’s super easy. Start by opening up your WinJS game solution in Visual Studio and then right-click on your solution and click ‘Manage NuGet packages.’

In the dialog that pops up, just go ahead and search for “TouchControls” and click the “Install” button next to the TouchControls search result.

The last step for adding the NuGet package is to add a script reference to the TouchControls javascript file that you just added in your Default.html file.

<!-- Game dependencies -->
<script src="TouchControls/touchControls.js"></script>

Step 2: Add the GamePad control to your <canvas>

The next step is to instantiate the TouchControls.GamePad WinJS control. You can do this either in HTML using the data-win-control pattern, or in JavaScript. You must add the control on an HTML element of type <canvas>, so it can be drawn and sized correctly.

How to add it using HTML

<canvas id="canvas" 
        data-win-control="TouchControls.GamePad">
</canvas>

How to add it using JavaScript

function init() {
   _canvas = document.querySelector("canvas");
    _gamepad = new TouchControls.GamePad(_canvas);
 }

Step 3: Draw the GamePad every frame

I designed the control to be integrated in an existing HTML5 game loop, so I let you call draw from your game loop so you have control over it’s visibility, like any other game elements.

function draw() {   
    if(_gameOver) {
        drawMenu();   
    } else {
      _gamepad.draw();
      drawSprites();
      drawTiles();
      drawWorld();   
    }
}

Step 4: Handle input in your game loop

Like the draw loop, you can just as easily handle game controller input in your game update loop. Just like you were handling a key press or a physical game controller state.

function update() {
    if (_gamepad.leftController.position.x < 0 || 
        jaws.pressed("left")) {
           goLeft();
    }

    if (_gamepad.leftController.position.x > 0 || 
        jaws.pressed("right")) {
            goRight();
    }
}

Tweak till you’re done

After you handle input you’re gamepad will be fully operational. Just put your thumbs on your canvas and watch your player respond to your touch input! You can go further to tweak colors, opacity and controller mode. Read the github readme for full documentation.

Design a game that stands out

5 Replies

Mobile games are amazingly popular. Whether you’re launching an Angry Bird while you’re kicking back on the couch watching TV, or flapping a bird waiting in line at the grocery store, we love playing games. If you’re currently are, or considering entering the world of game dev, you may already know how competitive the space is. Even though there is a lot of money to potentially be made, there are also a lot of professionals investing a lot of money on a potential hit.

In this post, we’ll study a few of the elements that make great games stand out and talk through some examples of great games.

How do I differentiate?

In any given mobile marketplace there is an over-abundance of games, in each game category, it’s easy for any game, big or small, to get lost in that marketplace. Like planning any app, planning a game requires an amazing amount of focus, to set up how your game to be successful, and have a differentiated point of view from other games.

Starting with a great concept

At the heart of every great game is a great concept. It’s usually a brief sentence that is the hook that makes you want to play it. There is really no formula to a great game concept. It is only limited by your creativity.

Example: EyeCycle

Recently at a local IGDA meetup, Zach Johnson pitched his Global Game Jam game, Eye Cycle. “It’s essentially a Tron or snake game, that you play on the surface of an eye.” Even before I saw the game, I wanted to play it. What’s great about this concept, is that it is unique, but simple. There’s a balance between clever and straightforward.

Addictive game play

Another important way to set your game apart from the flock by having an amazing, or unique game play. This is something that is difficult to master. One key to building great game play is not being afraid to iterate. Many of the best games have their details tuned hundreds of times to make playing them just right.

Example: Starwhal

One game that I think exemplifies great game play is Starwhal: Just the tip. You’re essentially in a galactic Narwhal joust brawl (also a great concept) and with limited control of a blubbery beast, you have to flap your way to success by piercing the heart of your opponents with your tusk. Part of the reason it’s so great to play is you don’t have ultimate control over your beast, you have to clumsily flap your tail to make your attack. This paired with a slow-motion mode when a kill is possible, makes for a great game.

Beautiful art

Core to any great game, is beautiful art. In a sense, games are more art than computer science. You need the skills to develop it, but composing each frame of an interactive adventure, or arcade game is more like interactive art project than a programming puzzle. How do you pull together the right 2D or 3D background art, game objects, animations, sounds?

When building a game, find a way to team up with an artist. Even if you don’t have a “game illustrator” you’d be surprised how they’ll change your perspective on what the game is about. Not only are they likely to have the skills to help you differentiate your game art, you’d be surprised, many artists with amazing skills may have always wanted to pair up with someone and make a game.

Example: Sword and Sorcery

The game that always comes to mind for me when I think about a game that is centered around great art is Sword and Sorcery. From the minute you boot the game, you are immersed in these amazing landscapes with intricate detail. As you move through the game, you experience the different game atmospheres emotionally because the art itself draws emotion.

Make your game social

The best games always have some social component. As humans, we’ve evolved to interact with each other and if you’re game, cultivates that desire, it will be more successful.

There are multiple levels of social interactivity your game can have:

Share information about the game. Offer some entry point to share that you’re playing the game, what your high score was or if you’ve unlocked some kind of achievement
Offer a leaderboard. You could take the simplest game and add a leaderboard and you’ve added an entirely new element to the game. One example is Balloon, a game I wrote for Windows 8, where have to patiently tap every 2 seconds or so to keep a Balloon in the air and you get a point per tap. I added a worldwide leaderboard and people competed to get up to over 5000 taps..almost three hours of tapping! My colleague Stacey has a great post on how to easily create a leaderboard using Windows Azure like the one I made for Balloon.
Versus play. If you offer a way for people to play against another player, that game will be more exciting and engaging. That could be turn-based play or real-time play and you can consider supporting online multi-player and device-to-device (e.g. wifi direct) multiplayer.
Massively real-time multiplayer. The only thing better than playing against a few people is playing against everyone at once. Take any simple game concept and add, the fact that you’re playing against tens or hundreds of people at the same time, and you’ve got a hit.

Example: Wordament

Wordament is a great game success story. It takes a similar game mechanic from the Boggle board game and it has you play it with everyone at the same time. The massively multiplayer component creates an entirely new type of gameplay that is proportionally competitive to the size of the audience.

What single-player game would you be able to find the kid who can find hundreds of words per minute? It’s the competition that drives us.

Build great touch interactivity

Screenshot (104)

In mobile games, it’s easy to miss on building great interactive touch game play. If you build a game that was meant to be played with an Xbox controller, but you but simple buttons on screen, the kludginess of the UI could kill the game. Every touch game is loaded with custom touch interactions, and a lot of care has to go into ensuring these are designed and built correctly.

Example: Halo: Spartan Assault

Halo: Spartan Assault is a example of a game with great touch interactivity. They’ve essentially replicated the Xbox controller interactivity on-screen with a virtual gamepad. One thumb drives your character, and the other one shoots the gun the direction you point it. It provides an experience that mimics an Xbox controller, while being designed for touch.

Update: In a new post, how to add touch gamepad, you’ll see how to add a controller like Halo: Spartan Assault to your game using a WinJS control package that’s up on NuGet.

Don’t forget about the basics

It goes without saying, but any game that crashes, jitters, runs at a low framerate, or kills your battery is going to be dropped, regardless of how beautiful and differentiated it is.

I hope these examples are helpful when you’re considering how to make your game stand out. Now stop talking about it, go make a great game!

Bring your App Studio apps to Windows 8

5 Replies

Windows Phone App Studio Beta is awesome. It’s a great way to build your first app for Windows Phone. It lets you choose different design templates and styles, and lets you pull in different data sources, from RSS feeds, to YouTube, to Flicker or even Bing. In this post, we’ll talk about how to take an app that you created in App Studio go further by making it work on Windows 8 using the latest update to Windows Phone App Studio.

New features in App Studio

Just last week, the team announced an updated version of App Studio. Emilio, over at the Windows Phone Developer blog has a great blog post on the New UI and capabilities for Windows Phone App Stuido Beta developers.

The update is fairly comprehensive:

A touch-enabled UI
Rebuilt emulator
Auto-image conversion
Improved performance
Improved generated source code
Ability to generate a Windows Phone and Windows 8 solution

Hold the phone, it generates a Windows 8 solution?

Yeah, it’s great. The latest version actually exports cleanly-architected, full Visual Studio solution with a shared data model, and platform-specific view models and views. You essentially end up with a great launching point for a cross-platform app.

It doesn’t go as far as exporting the Windows Store upload package, so you still need to make some edits in Visual Studio, but it gets you most of the way there.

Building your first App Studio app

Before you can bring your app to Windows 8, you need to first build it for Windows Phone. There are tons of great tutorials online on how to create your first app using App Studio. My favorite is Christine Matheney’s tutorial, Build a Windows Phone app before lunch!

I went ahead and created a simple app for Olympics fans.

Generate and download your Source Code Package

Once you’ve designed and built your Windows Phone App Studio app, just go ahead and click the “Generate” button from the Finish step.

Even if you’ve already generated your app with the previous version of App Studio, you’ll need to do this again, in order to get the Windows 8 source project.

You’ll get this new dialog that let’s you choose the Windows Phone 8.0 and Windows 8.1 Visual Studio solution.

A few seconds later you’ll be ready to download. Rather than downloading the app to your phone, or Windows Phone publish package, you’re going to want to download the source code.

Just go ahead and download, extract and open up that folder and browse it’s contents. You’ll see the different shared libraries, and the source for both Windows 8 and Windows Phone.

Configure the solution

This next step requires Windows 8.1 and Visual Studio Pro or higher, so you can open a solution that includes both Windows 8 and Windows Phone projects. Anyone with a student DreamSpark Premium or startup BizSpark account should have access to it. In the solution, you should see both the Phone projects and the Windows 8.1 projects. After you open the solution, it only needs a little bit of configuration to get it working. You just need to load in the dependencies, set the startup project and load in your app logos.

Restore NuGet Packages

The App Studio generated code has some dependencies on some public libraries. You need to make sure these are loaded properly. It’s super simple to do this, just right click on the AppStudio.Store.UI solution, and select Manage NuGet Packages…

In the dialog that pops, there is a gold bar at the top that says, “Some NuGet packages are missing from this solution.” Go ahead and click the restore button, to load all the dependencies.

Set the startup project

The last you thing you need to do before you run it, is right-click on the AppStudio.Store.UI solution, and choose Set as Startup Project. This will make the Windows 8 project run, instead of the Windows Phone project.

Run your Windows 8 app

Hit F5, and watch your Windows 8 app run. All of the same functionality from your Windows Phone app is available, with the same styles, just adapted for the larger screen.

Getting ready for publishing

Before you can publish your app to the Windows Store, you’ll need to make a few more changes to get ready for primetime.

Update your application manifest

Windows 8 has different tile sizes and splash screen sizes so you’ll need to create new images for Windows 8. To update the images, just open the package.appxmanifest file in the the Windows 8 project. If you’re going to design a logo for your app, see my other post on How to make an app logo that doesn’t suck for some tips.

Don’t forget about privacy policy

The generated Windows 8, app currently doesn’t have a privacy policy added by default. All Windows 8 apps that access the internet need a privacy policy to be accepted and published to the Windows Store. ExpressionBlend.com has a great tutorial and source code for adding this.

What’s next: The sky is the limit

Even though the app is ready for publishing, don’t stop there. How can you edit the code to make this app even more useful, desirable, and potentially profitable?

A few ideas:

Add more custom behaviors, or views
Support push notifications with Windows Azure
Style the design in Blend
Add the in-app advertising control

In conclusion, go bring all of your Windows Phone App Studio apps to Windows 8. Based upon the improvements that we’ve seen App Studio make so far, I would expect that App Studio will continue to evolve!

Introducing WinJS TouchControls

3 Replies

In an earlier post, I walked through step-by-step how to build pull to refresh. While informative, it is a lot of work if you just want to add this cool trick to your app. In this video, I show you how to use TouchControls to add pull to refresh to your existing app in a couple minutes.

I made TouchControls, in order to help WinJS developers who want to easily improve the touch interactivity of their apps. It’s a NuGet package of WinJS controls that you can add through Visual Studio. Over time I’ll continue to add more controls based on common app patters I see and feature requests. Add a comment on this post if you have feature ideas!

TouchControls is availiable on NuGet:
https://www.nuget.org/packages/DWCares.TouchControls.WinJS

Here is GitHub link for TouchControls for code and documentation:
https://github.com/dwcares/TouchControls

Pro Tip: If you want to make your own WinJS controls, read Brandon Paddock’s post on custom WinJS controls. I wish he had written this before I made TouchControls!

Handle projectors when using actual size in your app

3 Replies

In a previous post, Using Actual Size in your Windows 8.1 app, we talked through step-by-step how to build an app that displays content with consideration of the actual screen size. Since then, I was demoing my awesome RealRuler app, and it didn’t work on the projector.

Screen size info can be zero

As good as the post was, it left out one important case: projectors. When you project a Windows 8.1 PC and duplicate your screen, Windows doesn’t know which screen to give you the pixel density of, so it gives you zero. Even if you aren’t duplicating your screen, many projectors, and older monitors don’t provide accurate display size information through their EDID, so it’s a good error case to handle anyway.

Handle it

It’s simple enough to handle this case, just check if the returned value is greater than zero.

var info = Windows.Graphics.Display.DisplayInformation.getForCurrentView();
if (info.rawDpiX > 0) {
    // Do the actual size stuff
} else {
    // Fake it till you make it, or fail out
}

Updated RealRuler code

I submitted an update to RealRuler published on the Windows Store, and updated the code published on github for you. Go check it out if you want to see how I simulate screen size when it’s not available.

GitHub

A simple ruler app that demonstrates how to use physical size in a Windows 8.1 app.
https://github.com/dwcares/RealRuler
0 forks.
0 open issues.
Recent commits:

Get feedback on your logo

2 Replies

In the last post, How to make an app logo that doesn’t suck, we talked through three acts on how to make something that looks good. The final act is to put your design out there and get feedback on it.

Getting feedback on your logo is going to make it better. This doesn’t mean you’re designing by committee, or crowd sourcing your design, it just means you’re getting more sources of input to help you evaluate what you’ve created. In my experience, the design discussion is one of the most essential and valuable tools available to a team building UX.

To the Reddits!

With our Coffee Finder app, let’s look at how feedback can make the design better. On Reddit, mattattaxx provided a ton of great feedback about our initial logo design. Here is some of the feedback paraphrased:

The map pointer doesn’t look good when it’s small
The cup and lid don’t make good use of negative space
The cup and lid are too long and look stretched

Use the feedback to improve your design

In this case, mattattax outlined a ton of actionable ideas that I could directly use, but also it’s up to me to apply it in a way that fits my design goals. Using his feedback, I applied the following changes to the design:

Made the logo fill a square better, by not being so long
Centered the logo differently on the splash screen vs. the tile
Simplified the pushpin logo
Made the lines in the drawing more pronounced

End up with something better

The end result is something that I think looks better, and is more recognizably meet your goals. Here are all the updated images and svg file. What do you think? How would you improve the Coffee Finder logo further?

How to make an app logo that doesn’t suck

6 Replies

Your app logo is the impression you give people of your app the first time they find it, and every time they launch it. First you need to come up with a brand, a good concept that fits it, make it look good, and then you need to save it to all of the right sizes for tiles, splash screens, store logos, badge and notification logos. Finally, if you want it to look crisp and not blurry on high DPI screens like the Surface 2 and the devices of the future, you need to create images for each of the scale factors. For many apps, that can be as many as 30 images!

In this post, we’ll walk through creating an app logo from beginning to end for a fictional app, Coffee Finder, that lets you find the best coffee shops in your local area. In three acts, I’ll share some of my experience creating logos for the apps I’ve created, and my experience on the Windows product group making logos look good on high DPI screens. We’ll talk through how to come up with a concept, design it using SVG vector graphics, and finally we’ll use an app I wrote, Vector, to automate the export of all the different image sizes for Windows 8.

Act 1: Sketch out a concept

Many of us independent app devs don’t have a full time designers on staff that we can rely on to create our app’s assets for us. Usually, it is up to us to put something together. Just because you’re not an expert graphic designer, or can’t afford one doesn’t mean it’s not worth a little bit of your time thinking through the details of your logo.

Finding inspiration

A good place to start is to look for inspiration. Look at the apps with logos you like and other brands that stand out to you. System glyphs are also a great place to look for inspiration, as they are often designed by professionals, iconic, which follows the Windows 8 design style, and most users will recognize them from seeing them elsewhere. The Windows 8 AppBar reference also, has a list of glyphs and their meanings.

System glyphs are a great place to look for inspiration. In Word, go to Insert > Symbol

A note on brand differentiation

When you’re designing your logo you’re essentially designing the brand for your app. So you’ll have a natural inclination to want to differentiate your logo to help position your brand from other apps in the store. There’s nothing wrong with differentiation, but as with most aspects of design, it’s often harder to practice reduction and constraint than it is to add more and more to your design.

@grork @BrandonLive @Clarkezone @dwcares in other words, is there a way to hint at the unique value or style of yr particular app via logo

— Amb! (@crossslide) January 28, 2014

Rather than adding more color, gradients, borders and glyphs, think about what is absolutely essential to hint at your app’s unique value. Any additional points of differentiation you add are likely to dilute your brand and hurt your design. If you don’t believe me, take a look at some of the most memorable and iconic brands.

Most of your app’s differentiation will come from having a great experience inside of the app. The logo is just the signpost that reminds people of what’s inside.

Think it through

Before you start drawing out sketches for what your logo should look like, take the time to write down some of your thoughts about the app:

What is the essence of what you’re trying to convey with your logo?
What is the one image or metaphor that people should associate with your app?
What visual style are you looking for (iconic glyphs, photography, rendered, whimsy, typography, etc.) ?

Sketch out a few ideas

After you have a sense of the concepts that you want to convey and some potential visual elements to best represent them, draw a few sketchy pictures to play with the ideas. When you’re looking at the pictures, think about which ones best represent the concept, as well as represent the brand you want to create.

Evaluate and re-sketch

You can make as many or as few sketches as you want to, or have time to make, and then take the time to evaluate them. In this case we only had time for a few: different coffee cups, a map, and an old-timey espresso machine. I like how recognizable the coffee cups are, and the map conveys the local concept. The espresso machine is the coolest image, but not everyone will recognize it as a coffee machine.

After evaluating, make a few more sketches that take the elements that you like about the different sketches and brings them together. In our case, we’re going to use the nice coffee cup, and tie that into the map.

Act 2: Design your vector art

Now that we have a concept drawn that we like and some inspiration, the next step is to translate our sketch into something digital that we can manipulate. Rather than drawing it in MSPaint, or Photoshop, we want to use a vector drawing tool, like Adobe Illustrator. Using vector graphics allows us to to create a drawing that can be any size without losing any fidelity.

I use free vector drawing tool called InkScape. It’s free, has many of the tools that Illustrator has, let’s you save to SVG. If you’ve used Illustrator, PowerPoint or other design tool, it should be familiar to you.

Build your basic primitive shapes

I usually start by pasting in some sort of bitmap to trace as a starting point. In this case, we’ll just use our sketch. Then, build up your primitive shapes on top of it. Here, I build the basic cup shape out of some ovals and a trapezoid. Don’t get too fancy here, just try to establish the basics.

Tweak the paths to make it look right

One of the coolest parts of vector graphics is that you can take any object and turn it into a path, who’s individual points can be edited. You can even take multiple paths and merge them together in one simplified path. In order to make our cup lid look right, we’ll convert it into a path, and edit the lines.

With your objects selected, choose object to path.

When you have multiple paths, you can then use union to merge them into one simplified path. Then you can go ahead and tweak the path vertices to make the cup shape.

Simplify, then add only what is needed

Now that we have our shape created, we want to reduce and flatten it to it’s most elemental shape, by removing all the distractions and all the colors. In this case, we’ll just make it one color.

Then, we go back and add only what is necessary, and nothing more, to make the shape recognizable. In the case of the cup, we’ll add a few lines to show the lid, and the drink hole.

Once we finish the coffee cup cup concept, we need to add the map to reflect the local concept. Adding a map behind the cup could be possible, but it may add too much clutter. Instead, we’ll add the map glyph.

Invert the color and save

It’s important that you’re logo work on any background with potentially different colors, from tiles, to splash screens, to being embedded in your app. For this reason, you want to make sure the foreground color is white, and the background is transparent so it can work on any background.

Finally, just go ahead and save your logo as a .svg file. The SVG format will embed all of your design primative information and allow for it to be scaled to any size without losing any fidelity.

Act 3: Export ALL THE IMAGES

Now that we have our SVG that we’ve designed to work on any background, our next step is to export it to all of the sizes for our Windows 8 app. Inkscape has some great tools for exporting PNGs at different sizes, but it can be a lot of manual work to get all of your images exported at the right size and aspect ratio for Windows 8.

Vector for Windows 8 is your friend

Vector to the recue. After made one app and I went through the arduous process of exporting all of the tile and splash screen images to the right sizes, I decided to make an app to automate that for me. Vector is a super simple app, that lets you take any SVG and export up to 30 different PNG files for your Windows 8 assets.

Place your logo on the color plate

Exporting all the images in Vector is super easy. First, just click, choose svg, and pick your SVG file using the file picker. In this case we’ll choose cup.svg. The logo auto-centers itself on the color plate, but you can use your mouse or touch to place it how you want it. I usually keep it centered, and make it a bit bigger.

Preview your background color

Even though your exported images won’t contain any color, you can look at your logo on different background colors using the background color button. Once you find a color you like, you can take the color HEX value and paste it directly into your app manifest.

Choose export settings

The next step is to choose which logo sizes you want exported in the settings pane. I usually just check them all, and only copy over the ones I need. Note: it also provides an option to ‘export all scales.’ This option takes your SVG file and exports the scale-140 and scale-180 images that will be used on high pixel density screens like the Surface 2.

Once your settings are set, click the export button and choose a folder to export all of your images. All of your images will be exported to a folder there with the same name as your SVG file.

Add your images to your app

Once your files are exported, you just need to drag and drop them into your images folder in your Visual Studio solution.

When you are editing your application manifest file in Visual Studio, you can just type the name of the file without the scale-140, and it will auto-populate all of the images for that image type for you.

All done

Now we have a logo that doesn’t suck for our Coffee Finder app! Feel free to download the svg file and all the exported images here. Somebody might have to go make an app for it. I’d love to hear about what works for you when you create your app logos. Go ahead and add a comment or tweet me @dwcares.

Update: Get feedback

1/29/2014: Based on feedback, we made the logo better. See how: Get feedback on your logo

5 steps to publish a “Project Siena” app to the Windows Store

2 Replies

Screen shot 1

Microsoft “Project Siena” is an awesome Windows 8 app that let’s you design and create highly customized and data rich apps for Windows 8 without writing any code or using Visual Studio. It let’s you leverage your experience designing PowerPoint decks and writing Excel formulas to get something up and running very quickly.

Siena is still in beta, and it doesn’t officially support creating apps you can publish to the Windows Store “as-is” per it’s release notes. This may be a bummer if you just spent a weekend making a a beautiful Windows 8 app and you want to share it with the world. In this post, I’ll walk you step-by-step how to get your Siena app published to the store without installing Visual Studio. Caveat: If your app uses the webcam, or a live connection to the internet, this guide will not help you as it requires turning off these capabilities.

Step 1: “Publish” your app files from the Siena app

Siena has a feature where you can “Publish” or essentially export your Siena project to an intermediate app state. To do this after you finish building your app, just go to the File menu and select, “Publish.”

On the Publish screen, enter a display name, choose your tile fill color and icon, then click publish. Make sure to publish to a folder that you can easily find, I chose desktop.

Step 2: Create the appx package

After you publish there is an “InstallApp.exe” file that let’s you install the app on your local PC, or create an appx file for sideloading on other PCs. Launch InstallApp.exe, and choose the option to “Create an appx file for sharing.” This will generate an .appx file that we’re going to use in a later step.

Step 3: Create your Windows Store app registration

The next step is to create your Windows Store app registration. If you don’t already have a Windows Store Dev Center Registration, navigate here to get one. My app is called DWCares, so I reserved that name.

Follow the on-screen steps for app registration, until you get the the Packages step. Open that module and upload the .appx file we generated in Step 2. Mine is called DWCares.appx.

You will get a bunch of errors that look like this. Don’t worry! We’re going to fix them, but you need this output to fix them, so keep this page handy.

Step 4: Modify the AppxManifest.xml for your account

Navigate to the folder that Siena originally exported in step one, and launch the AppxManifest.xml file in a text editor. You are going to edit a few attribute values to match your Dev Center account.

Update Identity name and publisher

Identity name has to match the Package Identity name value that you saw in the error when you uploaded your package. Identity Publisher has to match the “CN=” Publisher ID value in that same error.

<Identity Name="DWCares" Version="1.0.0.0" 
    Publisher="CN=David@SNACKPRO" ProcessorArchitecture="neutral" />

Update DisplayName and PublisherDisplayName

DisplayName has to match the name for the app that you reserved, publisher display name has to match your Windows Store app publisher name. For me: “The Robot”

  <Properties>
    <DisplayName>DWcares</DisplayName>
    <PublisherDisplayName>Siena</PublisherDisplayName>
    <Logo>images\default_icon_storeLogo.png</Logo>
  </Properties>

Remove all declared capabilities

Siena auto-declares a bunch of capabilities that you may not be using, and you need a privacy statement in your Settings charm to use. Since Siena doesn’t provide a way to change the Settings charm you can’t use the capabilities in your app. Delete them all from the manifest.

  <Capabilities>
    <Capability Name="internetClient" />
    <Capability Name="enterpriseAuthentication" />
    <Capability Name="privateNetworkClientServer" />
    <DeviceCapability Name="webcam" />
    <DeviceCapability Name="microphone" />
  </Capabilities>

Other manifest changes

At this point you can make additional manifest changes according to the documented appmanifest schema. You might want to add a wide tile, a different splash screen, or change your tile color. Be careful when you edit the manifest as it won’t package our app if you don’t follow the schema.

Step 5: Create and upload the modified appx

This step requires the Windows 8 SDK. If you have Visual Studio 2012 or 2013 installed, you already have it, but if you dont you may need to download it. We are going to use a tool called MakeAppx.exe that will re-package our app into an appx with the new manifest.

C:\Program Files (x86)\Windows Kits\8.0\bin\x64\makeappx.exe pack /d c:\PublishedPackage\DWCares /p c:\PublishedPackage\DWCares.appx

Run MakeAppx.exe from the command-line and feed it the folder that Siena exported with the AppxManifest.xml file and an export folder. It will output the log of progress to the console, but there shouldn’t be any errors. If you see an error, check your appmanifest.xml edits and try again.

Navigate your browser back to the Windows 8 Dev Center, and upload the appx file you just generated, and you shouldn’t see any new errors. Click the ‘x’ next to the previous uploaded package to clear the old error.

Nailed it

Boom, now just fill out your app description and screenshots now your Siena app is ready to be on the Windows Store! I have my fingers crossed that none of this will be needed in the future and that app store publishing will be better supported through Siena, but if you want to publish your Siena app to the store today, that’s how to do it.

Update 1/14/2014:
Christine Matheney wrote a sweet post that includes a tool that automates some of these steps and lets you keep your capabilities. Check it out! Build a Windows 8.1 App before dessert with Project Siena

Using actual size in your Windows 8.1 app

5 Replies

Unlike any version of Windows before it, Windows 8.1 exposes the actual pixel density of the display for you to take advantage of in code. In this post, we’ll talk about a few techniques for using pixel density, some of the code to use it in your app.

All the screens

One of the best things about Windows, is the choice of devices that people have to buy. Maybe a small Dell Venue, a do-everything Surface Pro 2, or big workhorse Dell XPS All-in-one. Maybe all three? Each of these devices has a different screen, and each of these screens has a different number of pixels. This is great because you can choose the perfect device for you, for the right price, battery life, visual crispness, thickness, and weight.

How many pixels in an inch?

Knowing the pixel density of your screen in a very cool thing. It let’s your code know how big things are in the real world in a language it can understand, pixels. This lets you do things that wouldn’t be possible without some sort of awkward calibration UI. Here are a few examples:

Draw a ruler on screen so you can measure stuff with your tablet
Show a bunch of weird insects at actual size
Draw a button exactly the size of the average finger, no bigger, no smaller
Show different UI when you’re on a TV or a tablet even though they have the same resolution.
Make text more comfortably readable on small screens

Why I care

I’m super excited about this because in my previous life as a PM on the Windows team, we did a ton of work to plumb the display information provided in the driver EDID all the way up to the user-mode code so we can build the dynamic high-DPI scaling features in Windows 8 (See more in this post I wrote on Scaling to different screens). In Windows 8.1 the team has gone the last mile so you can use this in your app.

Lies, damned lies, and DPI

If every screen is a different size, with a different number of pixels, how does your app know how big an inch is? Your answer might be, “Simple, just use one of those DPI properties that have been around forever.” But you’d be wrong. DPI and PPI are some of the most incorrectly used terms out there, especially in API design.

Eight APIs that lie about giving you pixels per inch:

Don’t get me wrong, each of these APIs is useful for many scenarios related to the pixel density of the screen. Like if you should load a higher resolution image when your app is zoomed. None of these APIs, however, give you any information about the actual physical size of the display. They only give you a number that lets you calculate how much your app is zoomed.

Enter RawXDPI and RawYDPI

Windows 8.1 introduces Windows.Graphics.Display.DisplayInformation.RawXDPI and RawYDPI. These ones are actually the droids you’ve been looking for. I can’t imagine trying to name this API, I’m surprised it’s not TheRealDPIPleaseStandup since so many of the other properties are so convincingly named.

Pixel density and logical pixels

RawDPI tells you how many native pixels there are in every physical inch. This would be cool, but apps may be zoomed in in order to automatically make things big enough to touch or read, so one of your CSS or XAML (logical) pixels might be several native pixels. So the first thing you need to calculate is the number of logical pixels in a physical inch.

var info = Windows.Graphics.Display.DisplayInformation.getForCurrentView();
var logicalPPI = info.rawDpiX / info.resolutionScale / 100;

How do I draw an inch

You can just start using that logicalPPI value right away. In this case I’ll just make a DIV an inch wide.

// Resize the div to be an inch square
inchDiv.style.width = logicalPPI + "px";
inchDiv.style.height = logicalPPI + "px";

How big is the screen

If you want to figure out the size of the screen’s diagonal, just dust off a little high school math.

var screenSizeX = window.screen.width / logicalPPI; 
var screenSizeY = window.screen.height / logicalPPI; 
var screenSize = Math.sqrt(Math.pow(screenSizeX, 2) + 
                           Math.pow(screenSizeY, 2));

Real Ruler: an app that uses pixel density

Whenever I find a new API or system capability that I want to try out, I make an app! So I decided to make “Real Ruler.” It’s basically like all the other ruler apps in the Windows 8 store except this one is the only one (so far) that doesn’t need calibration. I use the pixel density to draw the inches at the right size on the edge of the screen, and I measure how many inches between your fingers when you put them both on the screen.

Get the code

I published all the code for Real Ruler on github, go ahead and download if you want to make Real Centimeter Ruler.

https://github.com/dwcares/RealRuler

Update: Don’t forget about projectors

Don’t forget to handle projectors and other screens that don’t expose screen size. Read how in this post: Handle projectors when using actual size in your app.

How to run a design discussion

1 Reply

Here in Minneapolis I recently started a new meetup called UX Design Discussion. The point of the meetup is for folks in the area to share each other’s work and through the act of sharing learn more about their own designs. We just had our inaugural meetup at SmartThings HQ a few weeks ago, and we started by walking through some guidelines on how to run a design discussion. In this post, I’ll recap the key takeaways from the intro of the discussion.

What is a design discussion?

At Microsoft, I worked on the user experience team for the Windows 7, Windows 8, and Windows 8.1 projects. In my experience, the design discussion is one of the most essential and valuable tools available to a team building UX. A design discussion is a meeting where the different people working different aspects of a project get together and share their work. The goal of a design discussion is to talk through a product design and varying stages of implementation to help improve the design.

Why have design discussions?

If you’re doing design or UX already, you may be wondering why you should do design discussions instead of just working in an ad hoc manner, or meeting when you run into a specific roadblock. I think the value of the design discussion is three fold:

1) Discussing is thinking

Just by putting your design out there and talking about it out loud with other people, you are essentially thinking deeper about your design. Simply from the variety of questions that you’ll get in any discussion, you’ll spark new neural pathways and consider new ideas that you wouldn’t have otherwise.

2) Learn from each other

Everyone benefits from the design discussion. As the leader you get feedback on your design and learn how someone else might approach the same design challenge, and as a participant you get to study a design challenge that you may not have had before.

3) Design across disciplines

A huge advantage of a design discussion is you can have people of different marketing, engineering and design roles participate and discuss the design. If you’re not used to cross-discipline meetings this maybe frustrating at first, but I’ve found in my experience that it always makes the design better. The challenge is to set the right parameters for the discussion. Do you want to ignore feasibility for this discussion? That’s fine. The key value is that you have a more diverse set of perspectives looking at your design, and you’re bringing everyone along with you as you are building your point of view. This way there won’t be a shock or political battle later on when you need to bring in other disciplines.

What are the participant roles?

Discussion leader(s)
Discussion leaders are the hosts for the discussion and they come with the topic or UX to discuss. They setup the parameters and goals for the discussion. They are both responsible for leading the discussion and keeping it focused on the goals of the discussion.

Collaborators
The collaborators are the other meeting participants who engage in the discussion. They may be other designers, or it could be a multi-discipline group. The job of the collaborators, is to ask probing questions of to the discussion leaders and the group to help illuminate more discussion related topic.

What are some best practices?

1) Frame your discussion

As the leader, what is your goal for the design discussion? What do you want to get out of it? Do you want to get feedback on a specific detailed nuance of the design or do you want to discuss the high level principles of your strategy? If you put smart people in a room together they’ll talk about anything, but you want to make sure you make the most of the time you have available. Adding this focus allows for the discussion to go deeper on the topic you’ve outlined rather than spreading around a number of disjoint topics.

Here’s an example of how to frame a discussion:
Today we’re going to talk about how we can make the touch interaction for navigating between the text typing suggestions feel fast and fluid. We won’t be talking about the suggestions UI surface or the language model technology that calculates which words are shown.

2) Find the right altitude

Related to framing the discussion, you need to know what stage of the design you’re ready to discuss. If you bring up a design discussion on detailed visual design or animation polish but you haven’t thought through or discussed the goals of the project, the discussion will be less productive.

30,000ft	What is it great at? What is it for?
10,000ft	What does it do? What doesn’t it do?
1,000ft	What does it look and feel like? How does it work?

3) Use the right format for your discussion

If you are the leader of the discussion, you can choose whatever tool or combination of tools best reflects the design. There is no need to lock yourself into one format. You can expect that depending on the altitude of the discussion, you’ll use a different tool to convey the point.

Brainstorming tools
If you’re brainstorming, you may simply have a blank whiteboard, or sticky notes that you use to organize the free form discussion. If the stage of the design is super early, it could actually work against you to have higher fidelity artifacts like PowerPoint decks or prototypes.

Framing decks
The next phase in design may be about figuring you want you want your design to be great at, and what its goal is. This is absolutely appropriate for design discussion too. At Microsoft, for framing design discussions, the leader would usually bring a PowerPoint deck that outlines the vision, point of view and goals for the design.

Early concept sketches
Another common tool for design discussions are early sketches that convey the spirit of the design. These are intentionally low fidelity sketches that help give people an idea of the direction you’d like to go in without actually making any commitments around the detailed designs.

Low fidelity prototypes
Having a low fidelity prototype with some level of interactivity is also a useful tool to help study how users will experience your design, and useful for design discussions. Low fidelity prototypes can be everything from assembled paper, to PowerPoint animations, to HTML or working Flash prototypes.

High fidelity comps
Detailed production comps, usually designed and rasterized static Photoshop images or AfterEffects animations are useful tools for design discussions, when talking through the brand message that you want to send, and how the design may harmoniously work with other designs in your product suite. High fidelity comps are fairly dangerous though, if you bring high fidelity comps when you’re goal is to talk about broader design topics, or framing, you’re likely to have the discussion distracted by the details of the comp itself.

Product demos
While you’re building the each of the aspects of your product, design discussions are an amazing tool to validate some of your UX goals against what is actually built. This is also a great opportunity catch any details that may have been missed in the implementation.

4) Encourage discussion and feedback

As a leader or collaborator, it’s your responsibility in a design discussion to help facilitate an open and productive discussion. Look for ways to use probing questions to get to the heart of a design or a piece of feedback. Even though design is very personal, and as a leader you may be very passionate about your design point of view, look at feedback as a gift worth considering and know that it isn’t a personal insult or attack. As a collaborator, think about how you can pose the questions in a way that helps the leader have something actionable to think about.

Role	Bad	Good
Collaborator	I don’t like purple as the background. It looks gross.	Why did you choose purple as the background? It’s not obvious how that maps to your branding goals.
Collaborator	Why are you building this thing? XY product is way better!	I’d like to better understand your product is differentiated from other products in the market, XY product, for example.
Leader	This is the way I designed it, and I’m not going to change it.	Although I feel confident we’re going in the right direction with this design, I haven’t seen that perspective yet. I’m going to study that further.
Leader	You just don’t get what we’re doing here.	Can you explain in a bit more detail what your question is in relation to ?

Go join a design discussion!

Design discussions are a great way to get your designs out there and get some meaningful feedback from your peers. If you keep an open mind and a collaborative style, as a leader or a collaborator you are sure to learn something valuable from each presentation. Go and start or join a design discussion today, your designs will thank you for it.