Introduzione allo sviluppo UWP per xBox

#TecHeroes loves GameDev Tour
Introduzione allo sviluppo
UWP per xBox
Massimo Bonanni
SR Consultant – Modern Apps Domain EMEA – Microsoft
@massimobonanni
massimo.bonanni@microsoft.com

Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
Perchè sviluppare per XBOX??
20+ milioni di console vendute
UWP (C#, XAML, roba nota, insomma….)
400 milioni di device Windows 10 (settembre ‘16)

Utenti sempre
aggiornati
Ucore unificato e
stessa piattaforma
per le app
Viaggio nella convergenza
Windows Phone 7.5
Windows Phone 8
Windows
Phone 8.1
Windows 8
Xbox One
Windows on Devices
Xbox 360
Windows 8.1
Windows 10
Stesso
OS kernel
Convergenza nello
sviluppo delle app

Phone Small Tablet
2-in-1s
(Tablet or Laptop)
Desktops
& All-in-OnesPhablet Large Tablet
Laptop
Classici
Xbox IoTSurface Hub Holographic
Windows 10

One Store +
One Dev Center
Reuse
Existing Code
One SDK +
Tooling
Adaptive
User Interface
Natural
User Inputs
Una Universal Windows Platform

Come iniziare

Cosa è necessario per sviluppare
• Visual studio (dalla Community edition)
• Windows 10 SDK 14393
• Account sviluppatore
• XBOX :D
• Idee, idee, idee……

Come iniziare!
Attivazione della modalità “Dev
Mode”
• Installazione dell’applicazione “Dev Mode Activation”
• Esecuzione dell’applicazione “Dev Mode Activation”
• Generazione del codice di attivazione del device

Come iniziare!
Registrazione del device
• Accedere al portale del Dev Center
developer.microsoft.com/xboxactivate
• Inserire il codice di attivazione generato
precedentemente

Come iniziare!
Attivazione del device
• Una volta immesso il codice di attivazione, nella console apparirà
una schermata di stato relativa al processo di attivazione.
• Aprire l’app di attivazione della modalità sviluppatore e
selezionare Switch and restart.
In questa fase la console potrebbe subire un aggiornamento
anche lungo!

Dev Home

Dev Home
E’ necessario avere un utente loggato
(tramite Microsoft Account) nel device per
poter deployare le applicazioni.
In maniera del tutto analoga a quanto
accade in un PC o in un telefono.

XBox device portal

Come
sviluppare

Come sviluppare
• Un’app per xBox è una
«normale» UWP application.
• Per creare una app per xBox è,
quindi, sufficiente crare un
progetto Universa Windows
Platform!!

Debug remoto
• xBox è, di fatto, equivalente ad un
device esterno, come un telefono o
un tablet.
• xBox è connessa al debug remoto via
rete:
• Deve essere messo in pairing con Visual
Studio;
• Deve essere indirizzato tramite l’IP
recuperabile dalla schermata Dev Home
dell’xBox stessa

Visual
difference

TV-Safe Area
Non tutti i televisori consentono di visualizzare il
contenuto fino ai bordi dello schermo per motivi
storici e tecnologici.
Per impostazione predefinita, la piattaforma UWP
eviterà di visualizzare il contenuto dell'interfaccia
utente in aree non sicure della TV.
Sarebbe opportuno che le nostre app estendano
gli elementi della UI fino al bordo per una migliore
esperienza per l’utente. In particolare in basso e a
destra.
960 x 540

E’ possibile gestire la Tv-Safe Area attraverso la classe
ApplicationView:
Gestire la TV-Safe Area
private void DisableTVSafeArea()
{
ApplicationView.GetForCurrentView()
.SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow);
}
private void EnableTVSafeArea()
{
ApplicationView.GetForCurrentView()
.SetDesiredBoundsMode(ApplicationViewBoundsMode.UseVisible);
}

200% scale factor
(“10-foot experience” vs. “2-foot experience”)
La UI a 10 piedi deve essere circa
~200% di quanto visibile a 2 piedi
La risoluzione di Default per le apps
su Xbox è
960 x 540
effective pixels

Dimensione della UI (in effective pixels)
1366 x 768 1920 x 1080360 x 640
960 x 540 960 x 540 960 x 540

Gestire lo scale-factor automatico
E’ possibile gestire lo scale-factor automatico attraverso la classe
ApplicationViewScaling:
private void EnableScaleFactor()
{
ApplicationViewScaling.TrySetDisableLayoutScaling(false);
}
private void DisableScaleFactor()
{
ApplicationViewScaling.TrySetDisableLayoutScaling(true);
}

Game pad e telecomando
Proprio come tastiera e mouse per il PC e la tecnologia touch per i telefoni
e i tablet, il game pad e il telecomando sono i dispositivi di input principali
per l'esperienza di interazione da 3 metri.
La qualità del comportamento predefinito del game pad e del
telecomando dipende dal livello di supporto per la tastiera presente
nell'app.
Una buona soluzione per assicurarsi che l'app funzioni correttamente con
il game pad e il telecomando è verificarne il funzionamento con la tastiera
del PC e quindi testare il game pad e il telecomando per trovare eventuali
punti deboli nell'interfaccia utente.

La piattaforma UWP esegue automaticamente il mapping del
comportamento di input della tastiera nell'input del game pad e del
telecomando.
Tastiera Game pad/telecomando
Tasti di direzione D-pad (o joystick sinistro nel game pad)
Barra spaziatrice Pulsante A/Seleziona
INVIO Pulsante A/Seleziona
ESC Pulsante B/Indietro

Pulsante Game pad Telecomando
Pulsante A/Seleziona Sì Sì
Pulsante B/Indietro Sì Sì
Tasto direzionale (D-pad) Sì Sì
Pulsante Menu Sì Sì
Pulsante Visualizza Sì Sì
Pulsanti X e Y Sì No
Joystick sinistro Sì No
Joystick destro Sì No
Trigger destro e sinistro Sì No
Pulsante dorsale destro e sinistro Sì No
Pulsante OneGuide No Sì
Pulsante Volume No Sì
Pulsante Canale No Sì
Pulsanti per il controllo multimediale No Sì
Pulsante Disattiva audio No Sì

Mouse Cursor Emulator
Due modalità di navigazione
• XY Focus : il focus si sposta sui controlli
dell’app in base alla pressione dei tasti XY o
del joypad
• Mouse Mode : viene mostrato un cursore
gestito dal joypad
XY Focus
Puntatore Mouse

Interfaccia utente inaccessibile
Poiché lo spostamento con stato attivo
XY limita i movimenti dell'utente verso
l'alto, il basso, sinistra e destra, possono
verificarsi casi in cui alcune parti
dell'interfaccia utente sono inaccessibili.
Il consiglio è sempre di testare l’app con
il controller e il telecomando prima di
rilasciarla

TextBlock
Minor numero di click
E’ opportuno permettere all’utente di eseguire le attività più comuni
con il minor numero di click.

Gestire il mouse cursor emulator
E’ possibile gestire il mouse cursor emulator tramite la classe
Application:
La proprietà RequiresPointerMode è disponibile a partire dall’SDK Windows 10, versione 1607. Per evitare eccezioni in
caso di version precedent è opportune utilizzare ApiInformation
private void DisableMouseMode()
{
if (ApiInformation.IsPropertyPresent("Windows.UI.Xaml.Application", "RequiresPointerMode"))
App.Current.RequiresPointerMode = ApplicationRequiresPointerMode.WhenRequested;
}

Gestire il mouse cursor emulator
Può essere gestito il mouse cursor emulator anche a livello di singolo
controllo all’interno dello XAML:
<Grid Background="YellowGreen" >
<maps:MapControl RequiresPointer="WhenEngaged" />
</Grid>

TV-Safe Colors
• Occorre tener presente che i colori vengono visualizzati in modo
molto diverso a seconda del televisore. Se l'app si basa su minime
differenze di colore per distinguere le parti dell'interfaccia utente, i
colori potrebbero fondersi, confondendo gli utenti. E’ opportuno
utilizzare colori diversi, in modo che gli utenti siano in grado di
distinguerli chiaramente, indipendentemente dal loro televisore.
• I televisori non gestiscono in modo ottimale i valori massimi di
intensità. Su alcuni televisori, questi colori possono produrre uno
strano effetto a righe alternate evidenziate o un effetto slavato. I
colori ad alta intensità possono inoltre causare un effetto di
scolorimento, in cui i pixel iniziano ad assumere gli stessi colori di
quelli vicini.
• In genere i colori all'interno dei valori RGB 16-235 possono essere
usati senza problemi per la TV.

TV-Safe Colors
• Per corregger i colori in maniera ottimale si può
ricorrere ai seguenti passi:
• Clamping: si tratta di limitare i colori all’intervallo
sicuro. Questo metodo può essere adatto alle app
che non usano una tavolozza di colori complessa.
Attenzione al caso in cui la vostra app utilizzi colori
molto “vicini” tra loro situati al limitare delle fasce
estreme.
• Scaling: il valore dei colori viene riportato nella scala
0:255 in modo da coprire tutto lo spettro visibile.
• E’ sempre opportuno verificare il risultato a video
in modo da essere certi che l’interfaccia grafica
sia leggibile e confortevole.

Personalizzare l’app per Xbox
• Utilizzo dei Visual State Trigger
• Da codice
• AnalyticsInfo.VersionInfo.DeviceFamily
• Pagine xaml personalizzate
• [pageName].DeviceFamily-[qualifierString].xaml

Visual State Trigger
https://github.com/dotMorten/WindowsStateTriggers

Limiti attuali
Alcune api non implementate
• Chat
• Cortana voice commands
• Credential API
• Launcher API (FolderLauncherOptions e LauncherUIOptions)
• Personalization (UserProfilePersonalizationSettings)
• Photo import
• Share contract
• Tile, toast and badge notifications

Riferimenti
• UWP on Xbox One
https://msdn.microsoft.com/en-us/windows/uwp/xbox-apps/index
• Xbox best practices
https://msdn.microsoft.com/en-us/windows/uwp/xbox-apps/tailoring-for-xbox
• Attivazione della modalità sviluppatore per Xbox One
https://msdn.microsoft.com/it-it/windows/uwp/xbox-apps/devkit-activation
• Progettazione per Xbox e TV
https://msdn.microsoft.com/it-it/windows/uwp/input-and-devices/designing-for-tv
• Microsoft Virtual Academy - Developing Xbox One Applications
https://mva.microsoft.com/en-US/training-courses/developing-xbox-one-applications-16860
• dotNet{podcast} - #128 UWP per Xbox
http://dotnetpodcast.com/show/card/128

Grazie a tutti!!

Introduzione allo sviluppo UWP per xBox

More Related Content

Viewers also liked

Similar to Introduzione allo sviluppo UWP per xBox

More from Massimo Bonanni

Introduzione allo sviluppo UWP per xBox