Saint Paul Universities

Build your first app

Have you ever wanted to make an app for your phone? Come and build one for Windows Phone. People who come will be eligible to win a phone! No programming required. Bring your Mac or PC.

Macalester
April 23
5pm – 10pm

Saint Thomas Grad
OSS 326
May 2
2pm – 5pm

Port your Windows Phone app to Windows 8

You already made a sweet Windows Phone app, now you want to bring it to a potential 100M active Windows 8 users. In this session we’ll take the apps we already made in AppStudio and port them to Windows 8. People who come will be eligible to win a phone. No programming required. Bring your Mac or PC.

Saint Thomas ACM
OSS 210
April 29
6pm – 10pm

When artists make games…

How does a code geek like you meet cool artists?

I met the folks who run Light Grey when Lindsay Nohl, their founder, gave a talk on some of the amazing projects they’ve done in their short two-years of existence. They’ve done exhibitions on everything, from spooky paper art, to whimsical local landscapes, to a geeky fantasy role playing card game.

@lightgreyartlab you should have an installation with 30 of the same game with different art. I can help with code and tablets. DM me.

— David Washington (@dwcares) November 5, 2013

What stood out to me, besides the great artists that they are able to draw for their exhibitions, is their ability to find a way to tie the whole story together into a cohesive event.

"Palacio de Cristal" by Lauren Airriess
“Palacio de Cristal” by Lauren Airriess from the IN PLACE exhibition

ROLEMODELS exhibition with 99 unique playing cards

“Camp Beaver Lake” by Manuel Kilger from the GREAT PERSONALITY exhibition

NIGHT OF THE EXQUISITE CORPSE paper art exhibition

What are the games going to be like?

DreamArcade_Screenshot2

The core game type is of the side-scrolling platformer variety…think Mario, Mega Man X. But the elements of each game will depend on what each of the artists comes up with. Over the past few months we’ve been working on the core game components from player behavior, to test levels and enemy types. Additionally, we’ve been working on ways to wrap up all of the per-level game assets in a way that each artist can replace them and still have a great game.

I love that I’m just the code monkey in the project, as Light Grey and each of the artists who submit, have total creative freedom to take the game where they want it.

What’s under the hood?

HTML5

For maximum flexibility we decided to go with HTML5. This way we can have a game that could work on any platform, and also work in the browser. HTML also happens to be my platform du jour, but if I was making the decision again, I may have considered Unity now that I have experience in it, and they are supporting plugin-free gaming with WebGL export in Unity5.

Ludus.js and Jaws.js

As a starting point, I built off of the amazing open source WootStudio Platformer Starter Kit. It employs a simple platformer harness called Ludus.js which is a wrapper of the Jaws.js game sprite and state libraries. Using an open source starter kit is key, so we have the ability to push and extend beyond the basic capabilities of the starter kit. From new enemy types, to new game states and transitions.

Tiled terrain map editor

Chris at Light Grey is designing all the levels using Tiled, a terrain map editor that lets you export level data to JSON that can be imported into the game. Tiled is a super flexible editor, not only useful for platformers. It’s worth checking out if you’re doing any level design.

Why Windows?

Light Grey Art Lab is going to release all thirty mini-games and the completed full game on the Windows Store. By submitting them to an app ecosystem like Windows, they’re opening up the games to be discovered and played by casual gamers who may have never played a game in their web browser or engaged with an art gallery before.

Windows is a great first option because Windows and Windows Phone natively support HTML5 apps, so I can literally drag and drop all of the game code between the Windows game project and the web site without having to deal with a web browser control. Windows also does a great job of keeping the game running at 60fps, even on low-CPU spec devices like the original Surface tablet. Finally with over 200,000,000 Windows 8 Phones, Tablets, Laptops and Desktops there is great potential reach for their games.

But of course, since it’s HTML5 they can always wrap the game in an web browser control on iOS and Android to increase their reach to more tablets. Or even us something like PhoneGap or Cordova to package it up.

What’s next

Watch blog.lightgreyartlab.com for submissions and updates on the Dream Arcade exhibition. Between now and September you’ll start to see the games start to take shape! If you’re an HTML5 game developer, definitely check out the Platformer Starter Kit to see what is possible.

My goal as a technical evangelist is to help folks be successful on the Windows Platform. Whether that be helping a wizard dev build killer app on Windows Phone, or a group of artists build 30 games without. If you want to make apps or games too, reach out to me…I can help. @dwcares

Add a touch gamepad to your HTML5 game

2 Replies

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

6 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

6 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

5 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

5 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

4 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