Bringing Wordfeud to WP7 and Windows 8
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Subtitle |
| |
| Title of Series | ||
| Number of Parts | 110 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/51518 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
NDC Oslo 2012105 / 110
1
2
3
5
7
9
11
12
15
19
20
23
24
27
28
29
31
32
33
35
36
37
38
39
41
43
46
47
51
52
56
59
60
61
62
63
65
67
70
71
74
75
77
79
80
81
83
87
91
92
93
94
95
96
97
98
100
103
106
108
110
00:00
Software developerRevision controlSoftware developerCodeScheduling (computing)Projective planeBlogLaurent seriesSpeech synthesisMultiplication signFigurate numberComputing platformComputer programmingTwitterGame theoryWindowMaxima and minimaSimilitude (model)Cartesian coordinate systemMereologyVideo gameKnotBitINTEGRALSign (mathematics)Focus (optics)Term (mathematics)Real numberBuffer overflowTunisWordMobile appTessellationAndroid (robot)Different (Kate Ryan album)Computer animation
02:12
Software developerElectronic data interchangeWordGame theoryCountingContent (media)Graphical user interfaceReduction of orderPhysical lawNormed vector spaceMountain passMenu (computing)InformationComputer fontGame theoryWeightLine (geometry)Content (media)Greatest elementCartesian coordinate systemMobile appOnline chatImplementationEmailRevision controlWindowFocus (optics)GradientGraphical user interfaceRight angleWordComputing platformBit rateDialectNumberInverter (logic gate)Projective planeDecision theoryDifferent (Kate Ryan album)Android (robot)Formal languageLaurent seriesType theoryGoodness of fitPosition operatorInstant MessagingTerm (mathematics)Marginal distributionSlide ruleTouchscreenSign (mathematics)Flow separationView (database)SpacetimeGroup actionFerry CorstenIntelligent NetworkPlanningPixelPrincipal idealPoint (geometry)Computer animation
06:40
Game theoryWhiteboardData dictionaryComputer configurationRandom numberSoftware developerBlogUser profileGame theoryDemo (music)TouchscreenCartesian coordinate systemWindowRevision controlRight angleBitGroup actionSpacetimeSet (mathematics)Element (mathematics)EmailGreatest elementGraphical user interfaceWordCuboidComputer fileMoment (mathematics)Ferry CorstenUniform resource locatorOpen sourceSlide ruleCASE <Informatik>AnalogyGraphics tabletGraph coloringDisk read-and-write headDependent and independent variablesSource code
09:05
Software developerMathematicsPasswordUser profileFerry CorstenWindowTouchscreenRevision controlOperating systemWeb pageSet (mathematics)Game theoryProfil (magazine)Computing platformStructural loadSlide ruleCodeStandard deviationBitCartesian coordinate systemGroup actionPivot elementInstance (computer science)Closed setTerm (mathematics)Computer animation
10:04
Software developerPersonal identification numberGame theorySlide ruleGame theoryRight angleOnline chatFluidMessage passingVideo gameComputer animation
10:46
Software developerIcosahedronConfidence intervalImplementationSlide ruleWindowWeb pageGroup actionSet (mathematics)Service (economics)Ferry CorstenMessage passingPixelImage resolutionConnectivity (graph theory)MultiplicationBitOperating systemComputer simulationDifferent (Kate Ryan album)Orientation (vector space)Electronic mailing listStatisticsCartesian coordinate systemCellular automatonAirfoilSingle-precision floating-point formatAsynchronous Transfer ModeStability theoryState of matterPoint (geometry)Network topologyGraphics tabletType theoryTouchscreenFile formatWebsiteGradientComputer animation
13:02
Different (Kate Ryan album)Software developerView (database)Clique-widthAsynchronous Transfer ModeWindowCartesian coordinate systemTouchscreenElectronic mailing listPixelData managementGame theoryVisualization (computer graphics)Regular graphTablet computerState of matterDeclarative programmingCodeInstance (computer science)Keyboard shortcutTessellationRight angleMobile appGame controllerEvent horizonDifferent (Kate Ryan album)WebsiteWave packetArchaeological field surveySatelliteSpecial unitary groupSet (mathematics)Uniform resource locatorLaptopStatement (computer science)Musical ensembleBit rateComputer animation
15:16
Software developerComputer-generated imageryOnline chatCartesian coordinate systemKeyboard shortcutGame theoryDemo (music)Limit (category theory)Image resolutionView (database)
15:59
Software developerBuildingCartesian coordinate systemState of matterGame theoryVisualization (computer graphics)Term (mathematics)Data managementStatement (computer science)WebsiteReal numberTouchscreenDependent and independent variablesTessellationWordImage resolutionElectronic mailing listGroup actionMathematicsSlide ruleScaling (geometry)Scalable Coherent InterfaceMultiplication signPosition operatorTask (computing)InformationComputer animation
17:28
Software developerKeyboard shortcutMenu (computing)Game theoryCodeGame theoryCartesian coordinate systemWindowFormal languageSoftware developerCodeMultiplication signWritingMaxima and minimaImplementationLatent heatMereologyPoint (geometry)Presentation of a groupSign (mathematics)Computer animation
18:35
Social classSoftware developerPortable communications deviceRevision controlTouch typingFinitary relationWhiteboardData modelBlogWordDivision (mathematics)MomentumPoint (geometry)Level (video gaming)Library (computing)CodeRevision controlSoftware developerGame theoryComputer filePortable communications deviceWindowField (computer science)SoftwareMultiplication signCommunications protocolCore dumpLogicEndliche ModelltheorieGroup actionUtility softwareConnected spaceService (economics)Entire functionAndroid (robot)State of matterUniformer RaumFingerprintTouch typingTrailComputer animationSource codeXML
20:28
Software developerCurve fittingView (database)Data modelServer (computing)DisintegrationLibrary (computing)Social classService (economics).NET FrameworkFlow separationStandard deviationSocial classCore dumpLibrary (computing)CodeWindowRevision controlCartesian coordinate systemPortable communications deviceRun time (program lifecycle phase)Projective planeDirectory serviceCuboidTemplate (C++)BitVisualization (computer graphics)MultiplicationType theoryComputing platformSoftware frameworkFraction (mathematics)Point (geometry)WordEndliche ModelltheorieView (database)Mobile appUtility softwareINTEGRALPlanningCode refactoringInheritance (object-oriented programming)Mobile WebSatelliteRight angleMaizeDivisorFactory (trading post)
22:03
Gamma functionData modelSoftware developerIntrusion detection systemGame theoryLocally convex topological vector spaceQueue (abstract data type)Communications protocolPortable communications deviceSocial classLibrary (computing)Thread (computing)Computer networkCryptographyWindows PhoneCache (computing)Streaming mediaEndliche ModelltheorieCore dumpWindowSoftwareCodeLibrary (computing)Multiplication signPortable communications deviceFile systemDigital photographyMiniDiscUser profileSemiconductor memoryComputing platformCache (computing)Structural loadMobile appSocial classAbstractionInterface (computing)Latent heatComputer fileData storage deviceTelecommunicationMedical imagingLocal ringLogicRaster graphicsDirectory serviceInstance (computer science)Set (mathematics)CryptographyAdaptive behaviorReading (process)WordMereologyImplementationGoodness of fitPattern languageTablet computerDirection (geometry)BitSystem callPower (physics)Thomas BayesState of matterPhysical systemDigital librarySpecial unitary groupCartesian coordinate systemLength of stayExistenceSource codeXMLProgram flowchart
25:15
Queue (abstract data type)Software developerString (computer science)Fluid staticsMedical imagingCodeRevision controlCategory of beingGame controllerOffice suiteInternet service providerInformationSocial classService (economics)State observerForm (programming)Interface (computing)Different (Kate Ryan album)Hash functionNamespaceImmersion (album)Uniform resource locatorMereologyControl flowInstance (computer science)Inversion (music)Mobile appFile systemImplementationFluid staticsPortable communications deviceWindowLibrary (computing)Enterprise architectureRight angleComputer fileComputer animation
26:32
Computer configurationSoftware developerPortable communications deviceLibrary (computing)Social classTouch typingWhiteboardCodeGame theorySocial classPortable communications deviceProjective planeComputer fileComputing platformMultiplication signSpecial unitary groupLink (knot theory)Dependent and independent variablesLibrary (computing)Revision controlMobile appWindowEvent horizonProgram flowchart
27:22
Software developerInclusion mapGUI widgetoutputExtension (kinesiology)HypermediaMedical imagingGame theoryWeb pageWhiteboardElectric currentSquare numberClique-widthComputer fontWeightPortable communications deviceSocial classComputer fileMathematicsRevision controlDrop (liquid)Link (knot theory)CodeGame theoryLibrary (computing)Social classNamespaceComputing platformMedical imagingElement (mathematics)RectangleDecision theorySolid geometryPoint (geometry)Condition numberImplementationSymbol tableImage resolutionEntire functionWhiteboardSquare numberTessellationDifferent (Kate Ryan album)Core dumpMereologyGraph coloringState of matterProjective planeWindowGame controllerData typeMarginal distributionElectronic mailing listMultiplication sign.NET FrameworkLevel (video gaming)Sound effectCross-platformFormal languageSystem callPhysical systemPortable communications deviceGradientConstructor (object-oriented programming)Interactive televisionBitException handlingMobile appCompilation albumStack (abstract data type)Block (periodic table)Template (C++)Cartesian coordinate systemEvelyn PinchingZoom lensConnected spaceRootType theoryClient (computing)Computer animation
31:18
Software developerUniqueness quantificationTessellationWindowCovering spacePower (physics)MereologyResultantClient (computing)Computer architectureOpen setWordData managementConnected spaceServer (computing)Different (Kate Ryan album)Cartesian coordinate systemUniform resource locatorBitSoftwareCodeTrailCASE <Informatik>Instance (computer science)Message passingAndroid (robot)Service (economics)Virtueller ServerPosition operatorGoogolMultiplication signPoint (geometry)Operational amplifierSpecial unitary groupGroup action
33:57
CountingComputer-generated imagerySoftware developerContent (media)Cache (computing)TessellationGame theoryInformationMedical imagingDescriptive statisticsMessage passingComputer wormBitTemplate (C++)Set (mathematics)WindowVariety (linguistics)SubsetWordTouchscreen1 (number)Cartesian coordinate systemRevision controlStapeldateiNeuroinformatikUniform resource locatorService (economics)Element (mathematics)Server (computing)Roundness (object)Digital photographySlide ruleSquare number2 (number)NumberInterior (topology)Gastropod shellRegular graphFinite setProfil (magazine)Demo (music)Content (media)BuildingFlow separationState of matterSingle-precision floating-point formatMultiplication signDoubling the cubePrisoner's dilemmaCASE <Informatik>Simplex algorithmComplex (psychology)Local ringLine (geometry)Open setComputer virusRight angleCompass (drafting)Computer animation
38:44
Software developerGame theoryTessellationNeuroinformatikComputer iconField (computer science)Cartesian coordinate systemTouchscreenRight angleWordMultiplication signDemo (music)Video gameRevision controlArithmetic meanComputer animation
39:26
Smith chartSoftware developerPay televisionWordTessellationTwitterWordTouchscreenMessage passingGame theoryWindowSubsetOnline chatStreaming media
40:41
Software developerMaizeTemplate (C++)Message passingAreaMedical imagingTessellationFerry CorstenComputer animation
41:34
Software developerExecution unitMobile appInformation privacySynchronizationLocal GroupComputer iconRevision controlCartesian coordinate systemTouchscreenMobile appGame theoryPhysical lawWindowTessellationComputer animation
42:18
Software developerGame theoryInterface (computing)Clique-widthCategory of beingMotion captureDigital photographyFile formatAsynchronous Transfer ModeView (database)ThumbnailComputer filePixelSlide ruleWindowCartesian coordinate systemState of matterPower (physics)PlastikkarteSet (mathematics)Right angleShared memoryTouchscreenConsistencyProfil (magazine)Event horizonObject (grammar)Electronic visual displayMotion captureGame controllerMedical imagingComputing platformComputer fileTessellationMenu (computing)File formatDigital photographyMobile appGoodness of fitMathematicsMereologyPresentation of a groupGame theoryCodeType theorySingle-precision floating-point formatAddress spaceSystem callRaw image formatInterface (computing)EmailNumerical integrationTap (transformer)Connectivity (graph theory)Line (geometry)InformationOpen setTask (computing)PixelClique-widthVideo gameService (economics)View (database)BitMultiplication signDecision theoryUniform boundedness principleWeightTerm (mathematics)FamilyStatement (computer science)Heegaard splittingComputer animation
47:49
Field (computer science)EmailSoftware developerPhysical lawCountingElectronic visual displayTask (computing)Broadcast programmingSoftware developerWindowCartesian coordinate systemEmailGame theoryNumberAddress spaceBitPlanningProjective planeMathematical optimization2 (number)Entire functionSoftware testingStandard deviationMultiplication signMereologyFamilyCovering spaceContent (media)Task (computing)Process (computing)Beta functionUniform resource locatorElectronic mailing listSpacetimePublic key certificateType theoryEvent horizonWordField (computer science)Mobile appBuildingScheduling (computing)Computer animation
51:16
Software developerCodeLibrary (computing)Front and back endsDreizehnGame theoryMultiplication signCartesian coordinate systemSoftwareWindowSoftware developerRevision controlComputer fileComputing platformMaxima and minimaPortable communications deviceTouch typingSocial classAntimatterLink (knot theory)TunisMereologyPosition operatorDrop (liquid)Cuboid
Transcript: English(auto-generated)
00:00
So thanks to everyone for showing up and also thanks to everyone in the Overflow room that has tuned in to channel 4 for this session on Porting Hold on first glitch There we go porting bird feud to windows phone 7 and windows 8 So during this session i'm going to share some of the experiences and lessons learned while porting a pretty popular
00:26
android and iphone game over to windows phone 7 and windows 8 So my name is Julen Aspolusse. I work for BEC in Trondheim. This is my fourth time speaking at NDC So i'm not going to spend too much time talking about myself But I figured i'd include a different picture this time around so that's one of the things I like
00:43
I love to do when i'm not programming. So that's salmon fishing and This year's season have just kicked off My online handle is folusse and you can find me on twitter github and on my blog So the things we're going to cover today is first of all bird food for windows phone 7 and windows 8
01:03
Then a little bit about designing for metro Just a quick show of hands. How many made it to the previous session on metro design principles? About half so in this session So you're probably going to see more concrete examples of those principles applied in a real application I'm not going to go into the same detail as lawrented in this previous session
01:24
But instead try to illustrate how we apply some of the principles The next thing we're going to focus on is how to design for maximum code reuse across platforms So when you're doing windows phone 7 and windows 8 you're essentially targeting two different platforms And there's certain things you can do in your code base to design for maximum reuse
01:41
And then next part will be about live tiles and platform integrations before Sharing a little bit about how we run the project in terms of schedule Hours spent development just in case you're curious about how much time and effort does it take to build a windows phone 7 or windows 8 app I've been lucky enough to work to work on quite a few
02:02
Windows phone 7 apps available in the marketplace Over the last year or so Through a partnership with microsoft, but today the focus will be on bird food So I assume who in here hasn't played word food before A few probably the guy's not from norway is going to name it very fit
02:20
It's a hugely popular word playing game like scrabble versus friends It's implemented by a guy called hokum barthavison who wrote it first for android and then for Ios, and it immediately got a really big hit. I think he got more than 10 million players Active accounts And when nokia planned to release the lumia in february this year
02:43
They realized that they needed a killer app when introducing lumia to the scandinavian and nordic markets So nokia approached microsoft norway and asked like do you guys have anyone that could work with hokum to get word food on to windows phone 7 and Of course microsoft having worked with us previously on some of the other apps I had on the previous slides
03:02
Said yep, we got back in front line. Maybe they can do a team together and implement the game So for nokia, it was about getting a killer app for the lumia launch and for hokum the goal was to get even more players playing word food and for beck it was a good chance to Try out some new stuff and work on a cool windows phone 7 project
03:21
And the implementation turned out pretty well. The game was well received got a lot of attention And some good Ratings in the marketplace. This is a tool that lets you view ratings across all marketplaces all regions So the numbers are pretty good And since this was a success
03:40
Microsoft asked. Okay. Look you did invert food for windows phone 7 and now we have this community. Sorry this Release preview coming out in june. Could you see if you could port it on to windows 8 as well? Which of course was something we said yes to So that's the game running on windows 8 So the talk today will be about the things we learn
04:00
While implementing the game and the first thing collect one of the assumptions we made before starting implementing the game Was that metro and metro design is really important That we need to collect understand the principles and try to apply them Because if someone buys a windows phone They make a conscious decision to buy something that's different than android and iphone and as a designer, you should try to respect that decision and and write an application that's fully integrated and use the
04:26
conventions and the design language of the platform so in the previous session Laurent went through many of the metro design principles. I'm not going to go through them in detail But i'm going to illustrate how we apply them One of the principles is that type can be beautiful in itself. You don't need much graphics if you got good typography
04:46
Good typography can also be effective in terms of weighting information saying that this information is more important or to be used as grouping So but just looking at the weighting of the font so you can tell okay, this is the header This is the footer if done correctly The second principle is the idea of having content not chrome instead of having a lot of
05:06
menus and headers and Title bars around your application the focus should be on the content You should use as much as many as those pickles available to draw the actual content of the application And finally, there's a principle of fierce reduction, which is about taking away everything that is not strictly necessary. You don't need
05:25
Gradients all over you don't need shiny buttons Try to like simplify it to to the extreme So this is a screenshot of The game the iphone version running on the left and the windows phone version running on the right so this is an example of how we try to simplify things we remove much of the
05:45
Canvas as you can see around us around the chrome. I mean, sorry The header and the positioning of the buttons if we remove the gradients instead of using Gradients and bars to separate finished games or separate one game from another we use Whitespace and margins so that can be just
06:03
Just a scared visual clue to say that okay. This line is one game. This line isn't it's the next game same thing when playing the game Again, remove as much of the chrome as possible by simply simplifying it removing the navigation type navigation bar At the top of the bottom and then just making it a lot simpler in a way
06:23
same for chat again, it's important to Respect the platform you're targeting so on the left hand side you have the chat for the iphone version mimicking the sms ui For the iphone and on the right hand side. We have the chat for the windows phone version mimicking the chat client on windows phone seven
06:40
Again using borders and on the left hand side to group elements. We use white space and white space on the right hand side a new game dialogue same concept And then we have the ipad version Which again is based around the same design id same colors, but again as you can see there's a lot of chrome in the header bar
07:03
Displaying the current score the last play word. I mean and at the bottom with all the buttons And the way the each group of games so your turn their turn and finish turns are separated from one another And this is how we design it for windows 8
07:20
chat chat running on windows 8 Again another example of how they pop out tons of chrome to just make everything into boxes Something we don't need on windows 4. We can just well just draw it on the cameras so this gives you some idea of How they different how they're different in a way you can easily tell that this is a very true game
07:44
But it's implying much of the mid metro styling instead And for things like settings we use flyouts. That's another design concept of windows from seven So instead of having dialogues on top of your screen You can just slide it in from the right hand side similar to the settings charm
08:01
I'll get back to integrating with the settings charms in a bit the new game screen another principle of metro is motion Whenever designing application we should try to apply animations without it being Glossy or tacky in a way but
08:20
animation done right can really add to an application because nothing in this role are Are either there or not, there's always transitions when someone opens the door the door gradually opens There's not just closed open So by applying animations you can make the application look much more fluid and you also get a lot better Perceived performance right instead of waiting for a screen you can apply an animation while the data is loading
08:44
So when the animation is done, the application is immediately responsive So that's another trick to make things Look a little bit more performant So i'm just going to do collect the first demo just to show the applications a little bit before Going more into the technical details of how we implement the things. So the first thing I want to show is
09:05
the windows phone 7 version I just need to Exit the slideshow and hopefully we should be Inside the vm Run the screen sharing app. So this is the windows phone 7 version And as you can see as immediately as you start the application you get the standard platform
09:24
animations when it loads You get the turn slide when opening and closing a page Same way going into settings changing your profile And these are following kind of like the standard animations that are defined by the platform
09:43
We'll look at the code how to add transition animations like that in a bit So that's just an example of how we Apply the motions animation. So some of the animations are taken care by the operating system for instance using the pivot When moving between pages and then we're navigating into
10:01
A game and then back again So that's the windows phone 7 version and then we have the windows 8 version And again, I got a game going on with And I can open the chat and you see when I open up the flyout The chat message kind of animates in from the side when I turn something new
10:25
It just pops in again applying subtle animations to make the whole experience a lot more fluid and also try to New game invite As you can see the ui kind of slides in from the right hand side right to twitter
10:47
So that's kind of what the ui looks like. Um I just want to get back to the slides and then we can start looking at more around implementation details how it's actually Implemented so doing animations for windows phone 7 the page transition animations
11:03
We use the syllabi toolkit. The syllabi toolkit comes with a service called the transition service And then using xml you can use a set of predefined animations to say how the page should enter And exit so we apply animations for the backward And the forward animations for entering and exiting the page
11:24
And by doing that we don't have to animate every single pixel ourselves we get a consistent animation for every page And for windows phone 7, sorry for windows 8 they made it even easier to add animations to your application So inside each component you have something called a transition collection
11:41
So for every items collection so lists grids Thing that contain multiple items so you can add a Transition collection, so whenever an item is added to the list or removed from the list you can play one of the built-in animations So when we did the chat whenever I typed something you saw that the new chat message
12:02
Slightly animated in from the side and that was taken care of by the built-in animations on the operating system So you don't really have to care about it directly yourself. You simply add And those transition collection and then add the entrance theme transition One of the other challenges Designing for windows 8 versus ipad is that you have to think about multiple
12:24
resolutions and devices so ipad has a single resolution and 1024 by 800 and then you have retina which is quadruple stat resolution, but you don't have to think about different Like 4.3 16.9 and 16.10
12:40
But with windows 8 we have to design for everything all the way up from My 27 inch imac which is 2600 pixels wide all the way down to 1024 which is the smallest resolution windows 8 will run on So this is something we had to and i've tried to demo that in a little bit using the simulator because you can easily change
13:00
the resolutions You also have to take different orientations into consideration As well as different modes. So windows 8 allows each application to be in three different modes Full is basically just launching the application running on the full screen and snapped is when the application is running on Just as a bar on the right on the side
13:20
So you can kind of like snap your application to the side and then run another app in the full screen And then filled is when your application is running on one side and then another application is snapped And the way we did implement this code is We listen for the events when the screen size changes and then we work out the new aspect ratio
13:41
And based on the aspect ratio, we use the visual state manager So the visual state manager should be familiar for those of you who have worked with silverlight or windows 1 7. It's a way of Declaratively describing different states in your application then you can just say to the visual state manner manager I want to go to this application state. So one state is for instance full screen full screen landscape or filled
14:04
And then the visual state manager is basically a set of storyboards. So you write one storyboard Sorry one visual state for instance snap and then in the storyboards you write what kind of animations you want to have applied So when someone snaps the application to the very side of your screen, so you only get three 320 pixels of ui
14:22
Then we hide the game list and we hide the game No, sorry, we make the game list 320 pixels wide and then we hide The actual game and the chat so you only get the list of games running on the side of the monitor The other thing you need to think about when designing for windows 8 is mouse and keyboard
14:42
Microsoft's goal is of course to have everyone buying tablets running windows 8 but truth is to begin with most users will probably try it out On their laptop. We're using a regular keyboard and mouse And when you stop windows 8 applications can be designed to take advantage of this in vert food. We decided to use keyboard
15:00
And When you have a blank tile and you can pick what letter you want to play for that blank tile You can use the keyboard instead of the mouse and then if you just start typing while playing a game The chat will get focused. So I'll do a quick demo of What that looks like?
15:20
Hopefully I have enough Horizontal resolution to do this snap demo. The os has kind of like a limitation saying that you won't get Snapped unless the resolution is higher than a certain amount But i'll do first the chat. So whenever i'm Playing a game. I can simply start typing and the game view comes up. It's just a simple thing you can add
15:43
To make it run better on keyboard. So I guess the main takeaway is Don't forget that the application will be running using mouse and keyboards. You need to take that into consideration as well So i'll try to do these Snapped View as well just go to the start of your applications
16:00
And that's an example of the application running in a snapped state Which was basically the visual state manager saying go to snap and then it Hit away the main game and the chat on the side and then when I select Something it slides out to the side and the other application is available. So this is the filled state
16:22
so that's an example of how your application needs to Be responsive in terms of adjusting the ui based on available screen real estate But it's quite easy using the visual state manager because you can simply just assign each state as they go to this state if the resolution changes
16:40
And then you can just take it over to the slide and the game scales up Um, let's see if I got any blank tiles. Yep. Got a blank tile. That was lucky uh I'll do an r See if that works, yep, and then we play it and I don't know if you notice
17:05
But when you play the play the word the item is removed from the top list and then added so i'll play a quick word Again, and that's using the built-in Transition animation so you don't have to worry about that yourself the first remove animation will be played when we remove it from one list and then the add animation will be played when we add it to the
17:23
their current list so Thankfully end users really do like a metro. So if you take the effort to really
17:41
implement metro design in your applications Users start to appreciate it So when we looked at some of the reviews from the windows phone 7 game There were a lot of comments and comments mentioning metro specific So my point is metro started out as a design language at microsoft So something they used internally to describe a new style of applications, but over the time metro as a name
18:03
Has gotten more and more known by end users. So they start saying oh, I like the metro ui in this application They're getting more and more cautious about Whether an application implements metro correctly or not So next part of the presentation is about designing for maximum code reuse
18:22
This is important if you're writing in a windows phone 7 application today I want to take advantage of windows 8 in the future or if you already have an existing application I want to refactor it and then reuse as much code as possible on Windows 8 so during the development we identify three ways Of doing code reuse or three levels of code reviews we have portable class libraries
18:43
linked files and then simply reusing saml and c-sharp code that we Could apply the same skills copy paste it across So that's kind of like not as cool as having actual code reuse But it still provides a lot of value when getting a game quickly ported but before getting into that, I quickly want to mention that the first versions of
19:04
Vert feud up till version 1.2.5 was actually built using monotouch So the 1.2.5 version was released 25th of may running on monotouch Unfortunately, this is about the same time attachment laid off the entire mono team I don't know if you remember from last year. We had a talk
19:22
Doing the state of the union for monotouch and it was pretty sad news because everyone had just gotten sacked but today everything is good again with samarin, but This was the time when vert field started to take off on the iphone and hokum wasn't Didn't feel safe sticking with monotouch because the future was so uncertain so he wrote it
19:41
But the good thing is that he used git and he had tagged his releases So all we could do is do a git check out get the 1.2.5 version and then take all that code originally written for the iphone in monotouch and simply port it over to windows phone 7 And that was about a day's worth of work and we could reuse all the core
20:00
Logic things like models modeling a game player move rack the network connectivity so the rest based protocol And the services that we use to apply each action and some utility stuff So all that code originally written for the iphone in monotouch was copied straight across to the minutes phone 7 version so
20:20
Just want to point that out that Reusing code can be possible across iphone and android if you use some of the samarin tools So then we have this portable class library when we did the windows phone 7 version We didn't plan for the windows 8 version. So everything was just one simple application So the first thing we did is we created a new portable class library and we used the re sharper refactoring move to folder
20:42
Super heavy thing. A lot of people should use that more often instead of saying we need 10 projects from day one Just to make things separate. It's really easy After the fact to move certain classes from one project to another using The move to folder refactoring So we started refactoring out all the kind of core non-ui code into the portable class library and a portable class library
21:04
Is a project template in visual studio that lets you target multiple versions of dotnet for those of you not too familiar with it dotnet has fragmented a little bit because you have dotnet on the xbox dotnet in silverlight dotnet on windows phone Dotnet in windows 8 and then the standard dotnet runtime which are all slightly different, right?
21:23
It doesn't make any sense to take all the Legacy standard dotnet stuff to do things like active directory and bring it over to the windows phone so they kind of like fragmented the thing a little bit and then portable class libraries lets you pretty much take Take a box saying which projects you want to support And then the project type will make sure that the code you write can run on all platforms
21:45
So it's basically programming against the smallest common denominator across all frameworks So what we had at that point was basically the windows 8 app and the windows phone 7 app Both referencing the word feud lib which was a portable class library containing the model view model utilities and service integration
22:03
And after doing that we had a class library that looked something like this which contained the app services The core stuff io model networking. So there's a whole ton of code that we could simply just reuse on windows 8 With not much effort Though you quickly run into some problems. There's some code that you want to put in the
22:22
Portable class library that depends on platform specific apis You have the dispatcher for invoking code on the ui tread Uh, you have network communication So the way you do networking requests are slightly different in windows 1 7 versus windows 8 you have file access in windows 1 7 you use the isolated storage while on
22:42
Windows 8 you use the local folder api And same for settings and cryptography So that's just some examples where we had code that we wanted to reuse but part of the code used platform specific apis So what we did is we applied Kind of like a pretty handy technique
23:02
Which is called basically extract interface and implement adapter good old pattern in no design So what we have we have the windows 8 app Windows phone app both reference referencing the word food library And then in the word food library, we define some kind of abstraction Encapsulating platform specific apis for instance i file access
23:24
And then we implement two adapters one for windows 1 7 targeting the isolated storage Called the isolated storage adapter and then for windows 8 called local folder adapter And we apply this pattern for everything to do with http dialogues dispatcher settings cryptography cryptography and file access
23:43
So as a concrete example, we can take the bitmap cache class in word food That's a class that takes care of caching the user profile images So we don't have to download them all the time the cache is built in a way where it keeps some photos in memory And if it hasn't been accessed in a while, it's stored to disk and I mean it loads up again
24:00
It can read images either from memory or disk So there's a lot of logic in the bitmap cache not directly associated with file access But it still needs file access, right? The logic is is this photo expired should I download it again? That code should be the same but the code actually writing it to disk And needs to be platform specific So bitmap cache shared class that needs access to file system
24:25
And then The bitmap cache takes in the file access as a dependency And then we can do things like create the directory if it doesn't exist Or do checks I said the storage directory exists
24:42
So next thing we did is we had The abstraction for file access which looks something like this is basically we took The code we had on windows 1 7 and then we extracted an interface with all the methods We already were using and then we figured okay We'll just keep the api from windows 1 7 and then kind of glue it on to windows 8 to make it work on both platforms
25:02
And then we have the platform specific adapter Which since in windows 1 7 we based the api off the ice at the storage So the adapter was basically just calling straight through to the underlying islet the storage file So this image shows the different Classes or services we identified
25:21
Just an example, there's not too many but they were all living in the app services namespace as an interface And then of course we need to use some form of inversion of control, right because the portable library cannot instantiate Its own instances of for instance file access it needs to be pushed in from the outside The windows 7 app needs to provide implementation for file access and the windows 8 version needs to provide the implementation for file access
25:47
So instead of using a full ioc container and making it Big enterprise if you just use a good old fashioned service locator Which is basically just a static class with a bunch of static properties exposing the different interfaces
26:02
And then in the startup code for each platform, this is the windows 8 version we simply instantiate each property so the device is instantiated to metro device The hash text is Instantiated the hash algorithm provider adapter and so forth and so on
26:21
And then on windows 1 7 we did the same thing and then we just instantiated windows from 7 adapter So that's a very simple way of providing basic inversion of control Without using a big ioc container, so the next technique we apply was something called linked files Linked files is something we use when we couldn't use a portable class libraries because there were too many dependencies on the underlying apis
26:47
So one example of this is the game board drawer that's the class responsible for drawing the entire game It contains a lot of code using things like canvases ui buttons Touch events things are pretty platform specific, but at the same time it kind of works on both platforms with a few tweaks
27:05
So instead of copying the class across and having two versions to maintain You can link it in so that the same file is built into the windows 1 7 app and the windows 8 app And the way you do linked files is you right click on your project add existing item
27:22
And you pick the file you want to add and then instead of just clicking add you do that little drop down It's not a very obvious feature and then you pick add s link And that will just be a logical reference to the same file. So whenever the file changes both versions will be updated And in the game board drawer we use a lot of the ui elements we use the canvas
27:43
the rectangle solid color brush text label image a bunch of controls Used on windows phone from the silvite namespaces, which is basically system that windows that controls but in windows 8 they decided to keep the apis and But they changed a lot of the namespaces. So in windows 8 we need to use windows ui.saml instead
28:05
So what you can do is you can apply conditional compilation symbols to control which code gets compiled for which platform So the metro project has a compilation symbol called netfx core So when you compile for windows 8 those namespaces are included but when we compile for windows from 7 the other namespaces are included
28:24
So this is a common technique applied when writing cross-platform code in any language and it's really helpful when doing cross-platform code on windows 7 and windows 8 You can also use it inside your class. This is an example of the game board drawer constructor
28:40
Which again is a class that draws the actual game and takes care of all the user interaction And then on the windows phone 7 version we want to be able to use like pinch and zoom to zoom the Board a little bit more but on windows 8 we don't need that behavior because the board will always be big enough So what we do is we only We remove the pan and zoom behavior if running on windows 8 using a conditional compilation symbol
29:03
So that way we can reuse the entire game board drawer class, but we can remove certain pieces And then just a final example Showing a tiny difference. This is the method creating that tile center square on the board with a star Which again is just a simple ui element and we set
29:24
An image on it But they changed the way they do parts So the way you need to reference an internal image is different. So Oh, sorry The top one shows how it's done in windows 8 so they use ms dash app x to reference package internal images
29:41
while on Windows 1 7 you use relative paths for just back slices So the top code will be compiled for windows 8 and the bottom code will be compiled for windows 1 7 The final type of connect reuse we applied is simply reusing ui elements you probably noticed that the game list Is pretty similar to the game list on windows 8
30:03
And we were able to reuse a lot of the saml code simply by copy and pasting it across because a lot of the core elements things like Stack panel grid text block are exactly the same The only difference is the name spaces so we could just copy and paste the data templates across as a starting point And then we started tuning them for each platform
30:21
So again, we didn't we made a cautious decision saying that okay the ui will be separate for each platform But we'll use this as a starting point to quickly implement the application So that's how the game border class was able to draw The board in pretty much any resolution and it's the same code except for a few changes using conditional compilation
30:45
Again another example from the game board drawer just to illustrate that many of the core classes are exactly the same So they create empty square creates a border sets the background to it and some margin And then create square root modifier just uses pretty much the same type of code So this is to illustrate how similar the apis are for doing
31:03
in windows 1 7 and windows 8 apps So these are kind of the three levels of code we use for your client preferably portable class libraries Linked files when we must and copy paste saml code to speed things up
31:23
The next part I want to cover is how we use live tiles live tiles is one of the kind of like identifying features of both windows 1 7 and windows 8 It's one of the things that make the platform unique And something that you really should try to to take advantage of So the way you update live tiles is through push notification and push notification can be a little bit complicated
31:45
The way push notification works is you have your application code running on the phone and then you have an os push client Running and then you have an api to talk to it and the way Push notification is designed is to prevent each Application to have a continuous connection to the server because that would drain battery life instead
32:03
The os will keep one connection and push all messages through it. So the way it works is You start by saying okay, I need um a push notification uri The os push client will talk to the microsoft service saying okay, this application is requesting a push
32:22
Notification uri and it hands it back So you get it returned back to your application code and the push notification channel is basically a http url And that uniquely identify your application and your phone So then we push something to that url that will be forwarded to your phone So you take that uri and then we hand it off to the server in this case the word food server
32:45
So each player can have multiple devices I play on an ipad an iphone a windows phone and a windows 8 device and each have different push channels So the word food server keeps track of all your push notification channels So for instance when two of the place the word
33:01
The word food server will look at my profile and see how I any push channels open if so Post a message to that url and the architecture for push notification is very similar across apple and google so It didn't take much work since he already had push notifications for apple and android to port it over to windows 1 7
33:20
It's just a different url and a different piece of xml that is sent across but the architecture is exactly the same And then finally the microsoft service pushes the message down to the os client And the result of this architecture is that each application does not need an open network connection and it's taken care of by the os So to create a push channel is pretty simple
33:42
you just say Push notification channel manager create push notification channel for application async. That's quite a mouthful for a method name But it's an easy api to use so you get the uri back and you hand it off to the server And what you can do using push is you can update the tiles and windows 7 has
34:01
A few things you can push it you can push toast notifications And you can push live tiles. So the toast is basically a title and a description While the live tile notification contains a counter a background image and a title and you can also push content to be displayed on the back side of
34:20
The tile which can be some content a back background image and a back title So these are the pieces of information you can change using push notifications For word few we didn't want to use the built-in counter to show how many games you have currently going on We wanted to have something that looked a little bit more like the chat and email application with a number a little bit bigger
34:42
So what we did is since we cannot use templates or saml to define the the live tile We used the photoshop template and we generated 22 images And From zero ongoing games all the way up to 10 or 10 plus and we did the same But with a chat cliff and the server will work out how many ongoing games you have
35:03
And if it was a new chat message, if it was a chat message, it will send the chat URL and if it was Just a new game It'll send the regular URL For the back we just used the toast content to notify what was going on and for the back of the tile We used the image to display if it was a word that was played
35:23
Or if someone resigned got an invite or something else happened in the game And the message sent to the push notification service is pretty straightforward. It's a piece of xml containing each element you want to update So you can set the back round image and the thing to note is the URL for the back image is a local URL
35:41
So the image displayed on the tile is loaded from the application package because it's a finite set of images It's basically those 22 images I showed on the previous slides And we set the title and we also set the back background image that is set to an absolute URL Which is the profile image on the server. So on the back of the tile, you'll get the image of the player you're playing with
36:06
And then we send the toast that's another message using an xml payload and payload is pretty straightforward It contains text 1 and text 2 if you do not provide text 1 you don't get the title For windows 8 microsoft made this a little bit more flexible by introducing a set of templates so you can push
36:24
a wide variety of xml templates To update your tile. This is just a subset. I think there's like 50 at least different templates you can apply And the ones we decided to use for the windows 8 versions were these two
36:40
So on windows 8 the user is in control whether or not you want to display a single tile or a double tile So you need to provide a tile for both designs so we went for This one displaying a counter for how many games? The photo of the player and then the text And it uses that kind of peak ui where it kind of slides up and down i'll demo this in a bit
37:03
And the way you update it is using Again, a simple xml message and you can update both tiles in the same message. You just have two Xml nodes the binding updating the tile square peak image and text04 template and the tile wide peak image of five template And sets basically the image and the texts
37:23
Again, very simple ui you post that to the url and the tile will be updated The second piece of information we update is the badge which is that tiny number at the the low hand corner The simple int value will update the counter And then we have the windows 8 toast templates
37:40
So on windows 7 you couldn't do any design on the toast. It was basically a title and a text on windows 8 again There's a bunch of templates you can choose from And the ones we picked look like this and a toast notification will show up even in the standard Collect the old school windows 7 shell. So when you're sitting in excel, you can get a notification that it's your turn to play a word
38:01
And you get the notification In the regular metro start start screen and again, it's a simple xml payload Consisting of the toast image and text template. So you say which template you apply in each value As an added bonus of using push notifications in live tiles, you can easily enable something called a lock screen application
38:21
Which lets you display A tiny bit of information when your the computer is not logged in So all you have to do is you have to say in the application manifest you want to say I want to use lock screen And I want a notification to this with both a batch and a tile text And you need to provide the batch logo
38:41
So you add that to the app manifest and the added bonus is When the computer is at the lock screen any push notification or any toast coming into the word field game will show up In the upper right corner and you also get that icon underneath the date time Showing that you have one open game and you can integrate your application even in the start screen
39:03
it's a very simple thing that you get almost free by using live tiles and and push notifications So I want to do just a quick demo of some Live tiles just to show what it looks like So i'll start by
39:21
I think demoing the Windows 7 version. I don't know if i'm playing with Twitter right now. I'm playing with Twitter So this is the Windows 7 version. It's Twitter's turn so I need to play something Play that word
39:45
For marketing And i'll go back to the start screen and if Twitter replies to that message Hopefully or place a word We should get a push notification through saying that Twitter played Some word. Hey challenge me for a game. So I got a push notification. Twitter sent the message
40:02
And as you can see we see the back side of the tile just flipped so we see a new message from Twitter And it should flip back Hey miss chatting as well. So i'll play with I'll accept Andrea's invite. I just need to turn off the sound as well So you kind of saw how
40:21
the tiles What the tiles looks like? Yep, I can look at the chat. Okay, so that was the the live tile for For For there's lots of upcoming games for the live tile for Windows 7 for games
40:42
And then i'll show the tiles This is a different user. So this is policy two for those who want to challenge me So it's their turn to it if you we could do a chat, I think I'll just send something and exit So if you reply You see that you get the toast notification in the upper hand corner and you get the live tile updated
41:04
And I can make it smaller. I get that different template I get the image and it should slide up and show the last message like that And also if I go to the regular desktop, and if you try and send a message again It should display the toast notification
41:23
in the upper hand corner Did you send? Live stuff, we'll see when it gets through And I'll show the The lock screen as well. The user has to enable it. So you go to the lock screen
41:43
And you can do Add a lock screen application and because I had that thing in the app manifest Virtually shows up as a lock screen app And then if I add it go back And do lock I get the game invite from Haim
42:02
I should have gotten that small one as well, but at least I got the toast notification so that's an example of using live tiles both for Windows 1.7 and Windows 8
42:20
your slides so Turns out end users love live tiles again This is because when you buy a Windows 1.7 device or Windows 8
42:40
Hopefully in the future when people start buying Windows 1.7, Windows 8 devices They do it because they want to take advantage of the platform And one of the things people look for are applications that implement live tiles in a good way and again, when we looked at some of the comments from the reviews from the app people said things like Love the game awesome with live tiles It takes good advantage of live tiles
43:01
The way it uses live tiles and notifications are It's called I think that's Danish for awesome I'm not sure Has a nice interface and live tile and this is something that just keeps coming up If you do live tiles correctly your application is more likely to be featured by Microsoft. It's more likely to get good reviews
43:23
So then towards the final piece of part of the presentation is integrating with the platform So whenever you use a new platform It makes sense to try to kind of follow the conventions and use smart integration points One of the things you can do in Windows 8 is you can integrate with the charms The charms are pieces of UI that comes in from the left and right hand side of your application
43:42
and on Windows 8 you can Use the charm to access settings, search and share so your application can integrate with those pieces in the in the charm so we use the settings charm and the way the settings charms works is
44:02
It's drawn by the OS but you can inject your own menu items So you basically write a piece of code saying I want to have these extra menu items show up in the settings charm The user clicks it and again the benefit is you get a consistent user experience across all applications users know where to find settings And the code to do is pretty simple. You pick up an event for the
44:23
commands requested for the settings pane and in the event you can create settings command objects Which contains an ID a title and a callback And you add it to the collection of commands and it will simply be drawn as a simple button It does not And then it's up to you to do whatever you need to do when the button is clicked
44:41
So this is for changing profile picture What we do is we display a custom user control as a flyout some of the user clicks change profile picture We knew up the user control and display it as a flyout So the settings API does not take care of the UI for you. It only gives you the command at a consistent place So the way we do the flyout is we create a pop-up
45:03
And a pop-up basically lets you draw one UI component on top of the rest of the screen And you have this probably called it's light dismiss enable which basically means that if the user taps outside the pop-up It's the miss dismissed and goes away And then in the settings command
45:21
We create the pop-up We create the settings user control And then we just set it as the child and display it and that's basically all it takes to display a flyout One of the other APIs we use was the camera API It's pretty straightforward you create a capture camera UI
45:41
And then you can set a bunch of settings some of the useful settings are allow cropping And then you can say crop aspect ratio by doing that the os takes care of the UI to Crop your image you do not have to take the raw image and then do that you are yourself And you can also specify the image format you want to have back Whenever the user takes a photo And then we can simply say capture file asynchronously and then await for that call to finish
46:05
Take the file display it and upload it Another example where we integrate with the platform was That we enable the user to import their profile picture from their windows profile into the game So if you already have set a profile picture in windows, you can just click a button say import
46:22
A profile picture and that picture will be your bird food profile again two lines of code You use the user information get account picture and you specify the size You'll get back apart that you can display and then upload to the profile again It's just a simple quick win to take advantage of the platform to make the user experience a little bit better for the user
46:43
Another thing we use was the file picker dialogues, so we enable users to pick files from any application that can provide images The UI pretty straightforward file open picker a few settings which file types we support And then we just call pick single file asynchronously
47:03
Windows one seven has a similar API You can use the get photo task and it also has a handy UI where you can specify the Desired aspect ratio and you also get that UI to crop it. You do not have to implement that yourself And the code is basically a photo chooser
47:21
And you save it or not The camera should be enabled and the desired pixel height and width So whenever the user resizes the image image and clicks, okay, you'll get back a resized image. You do not have to resize it yourself And then for and you simply wait for the call back We did something similar again common theme you use these launcher and choosers to integrate with the platform
47:44
We use it to pick the email address of a person to invite a contact to a game And that's pretty Simple you create the contact picker And you say I want to only display contacts that has email set so in the desired fields So say I want to know about email
48:01
So if I have a bunch of contacts where I only have the name or the phone number They will not show up in the contact picker. This is a very handy thing To use when you want to filter Based on certain fields you you want to know about And then windows one seven has a similar API using the email address chooser task
48:25
Again display the task Listen to the completed event and then you can read out the contact that was selected and check whether or not he has an email So this API does not provide that built-in filtering You have to take care of that yourself to check whether or not the selected contact actually has an email
48:41
so the final the final piece I want to cover or tell you a little bit about is Project schedule and testing some of the things we learned that I think could be valuable for Others so for the first app the windows one seven app the team consisted of Håkon Bartowsson the guy who kind of like owns the word food game through the Reynolds and myself as developers
49:05
And we made the first commit on the 22nd of November pretty late in the evening and then During the development process. We did daily builds. We took the sap package and we pretty much just set up a public Dropbox folder and then every time we did a new bill
49:21
We just dropped it in the Dropbox folder and we gave that URL to a bunch of testers So an application built for windows one seven Requires that the testers has an unlocked phone and the development tools to deploy it to their own phone. We don't have anything like Test flight app yet for windows phone So the testers testing the daily bills for basically other developers either at Beck that played word food or at Microsoft
49:46
Norway or Sweden that were keen on trying it and then on the 23rd of December we did the first beta and for the betas who used the windows phone marketplace beta feature and what you do When you upload an application, you can say that I want to upload a beta application
50:01
And what happens is Microsoft does not require you to go through the certification steps so immediately becomes available and you just type in the list of people that should have access to that beta and that can be standard end users with an With a phone that is not developer unlocked so you can take any and when anyone in your friends or family or just get them on a list of emails paste it in and then give them
50:24
access to the beta and then on the 22nd of January we submitted the Final beta to the marketplace and we didn't take as beta We just submitted it and said we want to run through the full certification process But we made sure that we mark the application as hidden
50:41
So if Microsoft approved it, it wouldn't be made available publicly So this is a way of testing whether or not your application will pass certification without actually releasing it So it's smart to do that before a release date because if you screw up something in your application is rejected The plan release may have to slide and thankfully it was approved on the first try
51:03
So on the 30th of January, we released the application. So we spent about 450 developer hours for the entire team One developer full-time two developers part-time and then for the Windows 8 the team consisted of four Developers and one UX designer and again, we did the first commit on the 13th of March
51:29
Daily battles via Dropbox and we had a playable version by roughly 21st of April And then we had a lot of time to just do the fine-tuning to really make it appear as a solid good game
51:41
Before it got approved on the 17th of May and went live with the Windows 8 release preview and for the Windows 8 game We spent about 400 hours for developers part-time and one UX designer part-time So that says roughly something about the amount of time it takes to build an application Please keep in mind though that we did reuse a lot of the monotouch code for all the networking in the back end
52:04
So this is basically time spent Doing the UI and the push notifications and all the design so Just to kind of wrap up the things we've gone through today is basically Some examples of how you can take advantage of the metro and metro design principles to really make your application
52:24
blend in on the Windows Phone 7 or Windows 8 platform We've seen some examples of how we can architect our code to achieve maximum code reuse through things like portable class libraries Linked files and simply taking advantage of the fact that many of the underlying API are the same
52:40
and then we've seen some examples of how to implement live tiles and use some of the built-in API's and hopefully this gives you at least some idea what it takes to build a complete Windows 8 game and Thank you very much for your attention and I'll open up a question afterwards. Thanks
53:04
So if you come on and go to next section, that's fine I'll just hang around for those who want to ask question can just come up I think that's that'll probably work best