Mi piacciono i retrogames, sin da quando ho iniziato a usare i computer con il mio amato Commodore 64 negli anni ottanta. Così nel mio (poco) tempo libero cerco di reimplementare, non come sviluppatore professionista, i giochi più semplici e coinvolgenti con cui ho giocato, portandoli sul web con JavaScript e Phaser.io. Quindi voglio condividere la mia esperienza. Poi, dato che lavoro con Azure e i giochi diventano delle Web App, cerco di evolvere i giochi aggiungendo alcune nuove e moderne funzionalità, così per sperimentare un po' i vari servizi di Azure, soprattutto quelli che normalmente uso meno.

1. MARCO PARENZAN
Scrivere retrogames per
il web e aggiungerci
qualcosa di nuovo con
Azure e il cloud
WPC2018 1

2. I’m not a game developer
Less than an indie...
VERY long lasting projects! 
...it means «unfinished»!

3. «...Azure and the Cloud...»:
a nice apologize for
retrogaming WAF factor

4. Wife Acceptance Factor (WAF)• Wikipedia: https://en.wikipedia.org/wiki/Wife_acceptance_factor
• Scott Hanselman: https://www.hanselman.com/blog/TheStateOfMyDigitalMedia.aspx

5. Retrogaming is just a scenario
Objective: some takeaways,
some failures, some fun with
some Azure Services

6. Agenda
• Retro Fan
• Recreating the original game on a PC
• Identity for Serverless
• Connecting with websocket and
(Azure) SignalR
• Serverless container....what?
WPC2018
6

7. Retro Fan

8. Retro recovery from the dump (or garage)

9. (re)Making it with Arduino

10. And then?
MAKE IT AS A GAME ON A PC...

11. Recreating the original game on
a PC

12. Make it different...and new!
• Make it move in 4 directions
• Then do something more, like adding shoots and obstacles like
arkanoid (not yet implemented)
• Play it on mobile phone (touch!)
• Perheaps playing it remotly

13. «Less than an indie means...»
• ...no money
• «I’d like to deploy to the cloud»
• ...serverless!!!
WPC2018 13

14. Azure Serverless application platform
• Serverless is not strictly a technology, but an approach

15. Javascript
• I like it
• Used Phaser, powerful, but....
• ....too many feature for old legacy games...
• ...and Phaser 3 required a rewrite...
• So finding something lighter
• Just abstraction to the canvas
• And sprite management
• Collisions and physics by myself
• Kontra!
• Implemented like the arduino version
• Playfield is like Physical screen, device oriented (simple and easy...remember somewhere next
in slides!)
• Entirely JS no server side logic

16. Building a Blob Storage centered Web App
• From simple web page to web app
• Delivering the app to users from Blob Storage
• Client side Javascript to enrich the web app
• Enhancing the Web App with AI and data services
• Cloud AI services for a better end user experience
• Serverless technologies for ease of deployment and scale

17. Static Website Support
• Static website hosting in Azure Storage
• Default document
• Custom error document
• Custom domain SSL support with Azure CDN
• During preview of static websites support in Azure Storage, select
"custom origin" from the "origin type" drop down menu to add your
storage web endpoint. In Azure Portal, you will need to do this from your
CDN Profile instead of directly in your storage account.
• Storage Explorer
• Invites using Functions as a Backend

18. DEMO

19. Take away
• Azure Storage Static WebSite
• Azure CDN

20. What I need now
• Using the same JS base to allow two person playing
remotely
• With remote players you need to notify/be notified
• No polling
• For you, as a player
• ...and someone needs to «move» the ball!
• Web Sockets!
• But before reaching players, you need to identify them!

21. Identity for Serverless...

22. Requirements
• All logic is hosted in javascript
• No server-side logic
• Remember ASP.NET Identity?
• How to support social identities without it?
• Use SaaS
• Azure Active Directory B2C
WPC2018 22

23. Azure Active Directory B2C
• Reach any user, on any platform
• Select from a set of built-in, self-service identity experiences
• Customize each pixel. It’s your brand, your HTML and CSS
• Scale to 100s of millions of user accounts
• Run on the same secure, highly available infrastructure that
powers O365 authentications

24. Production-ready MSAL
• SDK for gaining access to API protected by Microsoft identities
• Fully OSS, easy to use, full-featured, production-ready
• Works with Azure AD v2 (work & school accounts, personal accounts)
and B2C
• Available on
• .NET 4,5x, .NET Core, Xamarin (iOS, Android, UWP)
• iOS (ObjC/Swift)
• Android (Java)
• Javascript

25. DEMO

26. Take away
• Azure Storage Static WebSite
• Azure CDN
• Azure Active Directory B2C

27. Now what?
• Now it’s time to connected the two identified players

28. Connecting with websocket
and Azure SignalR

29. WebSockets vs SignalR Core
• For games, websockets as better as the raw protocol
• SignalR is a layer on top of websockets, that becomes one
of the protocols supported by SignalR
• But you need to implement a backend logic
• Ex ASP.NET Core SignalR
• So what?
WPC2018 29

30. Azure SignalR Service
• Fully managed service—without worrying about capacity
provisioning, scaling or managing connections
• Native ASP.NET Core SignalR development support
• New possibilities when integrating with other Azure services
• Available in growing global regions

31. Initial feature sets for Azure SignalR Service
  

32. Azure SignalR pricing (just to understand)
• It is not subsecond pricing, but it’s an optimal proposal
in a (almost) serverless design

33. Is everything fine?
WPC2018 33

34. Is everything fine?
• No...because from signalr you cannot send messages to
peers
• So you need something like the hub
• Argh! Asp.NET Core? App Services?
• Any possibility for Serverless??

35. SignalR is a new binding for Functions
• SignalRConnectionInfo to associate the identity and
connection endpoints
• SignalR attribute to send messages to individual users or
broadcast
• …*sigh*…no sending to hub ….*sigh*….
• Hope improvements in the future
• Let’s fall back to Functions

36. Invitation
• How connecting two players?
• Web Sockets are useful to create web.whatsapp.com like links
(QR codes are just ncoded urls for cameras!)
• So
• The first player generate the link (which contains his/her username,
registered on the SignalR hub)
• Send the link (example through message/FB)
• The second player click on the link
• The page send a welcome message to both players...and the game
begins)

37. What I wrote on the client side
• The ball logic
• It’s your responsibility to calculate boll position if ball goes to the
other side
• LeftSpeed.x>0
• RightSpeed.x<0
• Receive ball position and other player position
• ...the ball...if is coming to you
• ...still different coordinate issues exist...

38. DEMO

39. Take away
• Azure Storage Static WebSite
• Azure CDN
• Azure Active Directory B2C
• Azure SignalR
• Azure Functions

40. Peer-to-Peer WebSocket Solution
Performances
• Bad. Too slow (big roundtrip for two entities - ball and player)
• Functions too slow
• Too delay (not investigated too much...)
• I needed something more
• And another issue:
• What about different screen sizes?

41. What I need now
• I need to rewrite because of world coordinates
• But also I need to host server side logic for ball

42. Serverless container....what?

43. Server-side worker hosting
• I don’t want to use a VM
• No Web Jobs
• It should be time for containers
• But I don’t want IaaS
• It should be time for Service Fabric
• But I don’t want IaaS
• Mesh! Serverless containers and service fabric it’s good for me
• Pay per second
• No IaaS

44. Azure container ecosystem
IaaSPaaS
Azure services
SQL Database
Redis Cache
CosmosDB
And more!
Partner services
OpenShift
Pivotal Cloud
Foundry
Docker Enterprise
Edition
Mesosphere
DC/OS
Azure
Azure
Container
Registry
(ACR)
Service Broker
Azure Kubernetes
Service (AKS)
ACS
Engine
Batch
Azure Container
Instances (ACI)
Azure Virtual
Machines
Virtual Machine
Scale Sets
(VMSS)
Service Fabric
Virtual kubelet
App Service

45. Containers as the App Packaging Format
…

46. Azure Container Registry
Manage a Docker private registry as a first-class Azure resource
Use familiar, open-
source Docker CLI tools
Azure Container Registry
geo-replication
Manage images for all
types of containers

47. Azure Container Instances (ACI)
Containers as a primitive
billed per second
Secure applications with
hypervisor isolation
Run containers
without managing
servers

48. Service Fabric Mesh
Dedicated Azure clusters
Service Fabric
Cluster
Bring your own infrastructure
Service Fabric
Standalone
On-premisesAny cloud
Dev machine
Dedicated
Service Fabric
Mesh
Fully managed by Azure
Serverless

49. What I wrote on the backend
• Game class which implements the game itself
• World class with 0..1 coordinates for Game
• Ball, Paddle classes which lives in World-sized game
• GameHub that communicates from/to clients through
websocket
• Game that runs the game loop and send ball movements to
users and receive users positions

50. What I wrote on the client side
• No more ball logic
• Only send your position
• Receive ball position and other player position
• All in world coordinate: each client had to scale to physical
as the current size
• (no dynamic resizing yet)

51. DEMO

52. Take away
• Azure Storage Static WebSite
• Azure CDN
• Azure Active Directory B2C
• Azure SignalR
• Azure Functions
• Azure Container Registry
• Azure Container Instances
• Azure Service Fabric Mesh

53. Conclusions

54. What I have learned
• Distributed/cloud need abstraction from the physicalWorld
• Containers are great if serverless!!!!
• Nice to have an out-of-the-box solution scaling out web
socket

55. Costs
• I haven’t done any cost analysis
• Is serveless feasible with all these amount of messages and
interaction?
• ...click...

56. Take away...just for a very simple game!!!
• Azure Storage Static WebSite
• Azure CDN
• Azure Active Directory B2C
• Azure SignalR
• Azure Functions
• Azure Container Registry
• Azure Container Instances
• Azure Service Fabric Mesh

57. ...and make more fun with
retrogaming!
@MARCO_PARENZAN

58. https://github.com/marcoparenzan/webotronic
THE CODE

59. Q&A • Domande e risposte
WPC2018
59

60. Contatti
• OverNet Education
• Info@OverNetEducation.it
• www.OverNetEducation.it
• Rozzano (MI)+39 02 365738
• Bologna +39 051 269911
• www.wpc-overneteducation.it
ROZZANO (MI)
BOLOGNA
ROMA
GENOVA
TORINO
NAPOLI
WPC2018
60