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

[email protected]

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 sempreaggiornati

Ucore unificato e stessa piattaformaper 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

StessoOS kernel

Convergenza nellosviluppo delle app

Phone Small Tablet2-in-1s

(Tablet or Laptop)Desktops

& All-in-OnesPhablet Large TabletLaptop

Classici

Xbox IoTSurface Hub Holographic

Windows 10


One Store +One Dev Center

Reuse Existing Code

One SDK + Tooling

Adaptive User Interface

NaturalUser 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

https://developer.microsoft.com/xboxactivate


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 estendanogli elementi della UI fino al bordo per una miglioreesperienza per l’utente. In particolare in basso e a destra.

960 x 540


E’ possibile gestire la Tv-Safe Area attraverso la classeApplicationView:

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 540effective 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 classeApplicationViewScaling:

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 classeApplication:

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 singolocontrollo 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 fasceestreme.

• 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 attualiAlcune 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 practiceshttps://msdn.microsoft.com/en-us/windows/uwp/xbox-apps/tailoring-for-xbox

• Attivazione della modalità sviluppatore per Xbox Onehttps://msdn.microsoft.com/it-it/windows/uwp/xbox-apps/devkit-activation

• Progettazione per Xbox e TVhttps://msdn.microsoft.com/it-it/windows/uwp/input-and-devices/designing-for-tv

• Microsoft Virtual Academy - Developing Xbox One Applicationshttps://mva.microsoft.com/en-US/training-courses/developing-xbox-one-applications-16860

• dotNet{podcast} - #128 UWP per Xboxhttp://dotnetpodcast.com/show/card/128


Grazie a tutti!!

Introduzione allo sviluppo UWP per xBox

Technology

Transcript of Introduzione allo sviluppo UWP per xBox