Upload
massimo-bonanni
View
205
Download
2
Embed Size (px)
Citation preview
#TecHeroes loves GameDev Tour
Introduzione allo sviluppo UWP per xBox
Massimo Bonanni
SR Consultant – Modern Apps Domain EMEA – Microsoft
@massimobonanni
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
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
One Store +One Dev Center
Reuse Existing Code
One SDK + Tooling
Adaptive User Interface
NaturalUser Inputs
Una Universal Windows Platform
#TecHeroes loves GameDev Tour
Come iniziare
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
Cosa è necessario per sviluppare
• Visual studio (dalla Community edition)• Windows 10 SDK 14393
• Account sviluppatore
• XBOX :D
• Idee, idee, idee……
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
Come iniziare!
Registrazione del device
• Accedere al portale del Dev Center
developer.microsoft.com/xboxactivate
• Inserire il codice di attivazione generato
precedentemente
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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!
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
Dev Home
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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.
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
XBox device portal
#TecHeroes loves GameDev Tour
Come sviluppare
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
Come sviluppare
• Un’app per xBox è una «normale» UWP application.
• Per creare una app per xBox è, quindi, sufficiente crare un progetto Universa Windows Platform!!
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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
#TecHeroes loves GameDev Tour
Visual difference
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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);
}
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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);}
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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.
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
Game pad e telecomando
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
Game pad e telecomando
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ì
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
TextBlock
Minor numero di click
E’ opportuno permettere all’utente di eseguire le attività più comuni con il minor numero di click.
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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;
}
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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>
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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.
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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.
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
Personalizzare l’app per Xbox
• Utilizzo dei Visual State Trigger
• Da codice• AnalyticsInfo.VersionInfo.DeviceFamily
• Pagine xaml personalizzate• [pageName].DeviceFamily-[qualifierString].xaml
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
Visual State Trigger
https://github.com/dotMorten/WindowsStateTriggers
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
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
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
Roma, 27 Gennaio 2017#TecHeroes loves GameDev Tour
Grazie a tutti!!