Building games in .NET MAUI - Shaun Lawrence - NDC London 2023

okay uh good morning everybody thank you very much for joining me in this talk today about trying to break out of the typical scenario of building business applications in.net Marion focusing on having a bit more fun um in terms of the format I've tried to fill as much of this slot as possible so try and keep questions towards the end if we can but I will try to make sure there is time um although on the topic of saying that you might not have time for questions I I'd like to start by asking yourselves some questions um who here has had a great idea for a game format good oh how about now is this any better more is this better a bit better should I keep talking until we get to a better level a bit more keep going how about now is this better yep okay let me start again um hello everyone thank you very much for joining me um I'd like to try and uh talk to you today about breaking out of maybe building a typical business application that Dr Miller is typically touted for and focusing on having a bit more fun um I'd like to start by asking a couple of questions of yourself so who here has had a great game idea no fewer than I was expecting um who has turned that idea into a actual concept that you could try and prove thank you David and finally who he has uh started on that great idea only to be distracted by something completely uh nonsensical and disappearing down a rabbit hole into building something you didn't need um I certainly have my hand up for these questions that we did as well but um that's precisely what today's talk is all about um let me just quickly get the introductions out of the way uh my name is Sean Lawrence I'm a independent software engineer and I typically work on functional business applications so there isn't a lot of freedom to be able to flex my creative side um but hopefully today we can break out of it I was very lucky to be awarded the Microsoft MVP this year which I'm sorry last year now um which relates to the open source work that they typically do on Donna Mary Community toolkit and the xamarin community toolkit uh and a little bit of what we're talking about today is uh something called the orbit game engine which is taking down at Maori and then being able to build 2D games with it and then finally it does claim that I'm an author but it's currently in production so if anyone is in are interested in learning about how to use.net Maui come I've got May time then I would thoroughly recommend a book called Introducing donut Maui um so what are we going to cover today um uh hopefully by the end of the session you'll learn about two of my great passions uh what is Dr Maui uh gaming in general and then how we can then combine them together into something that could be fun in terms of the development process as well as actually the output a lot of the work that I've been doing is probably I don't know if it's quoted David more about the journey rather than the destination because as developers that's what we enjoy um so we're going to look at what we can achieve with.net out of the box um and then look at how we can then bend it to do what was probably considered a typical game or lots of looking at a game engine and how we we would build that into.net and then finally there'll be some tips and tricks to help you avoid any pitfalls that I have experienced over the past months um so a very brief introduction as to what.net Maui is um if anyone didn't catch Gerald's talk yesterday he gave a much more in-depth detail but then that will be available I think to catch up on um well like I said this is rather brief is a cross-platform framework to allow you to build modern applications and that gives support for things like mobile mobile idiom in terms of Android and iOS we've then got desktop support in Mac OS and windows and then through third-party support via Samsung we can run on Smart TVs and smart fridges via the tizen platform and actually a colleague of me at mine yesterday Jay sent a photo of one of the sample games from this repository running on a Samsung fridge which is quite impressive um uh onto a bit more so uh Jolly Murray is the evolution of xamarin forms we ended with xamarin for forms five we've got we had.mr6 and then we're on to seven um it is now versioned and released alongside.net so we get a major version every year with long-term support every other year the evolution does bring a lot of much needed benefits I don't know if many people here have dealt with xamarin forms in the past but um there were lots of things that left it lagging behind but now being part of net officially we get much better support for things like modern languages so we can actually deal with latency sharp features we're not we're not lagging behind on that and then we've also got five faster Superior built-in support for things like dependency injection so if anyone's built an ASB net core application you'll be familiar with the app builder pattern you get exactly the same thing in Maui I think belief I have is that it then allows us to transition between.net code base is far simpler because we're all looking at the same kind of pattern um we've covered briefly what Dynamo is so now let's look at what a game is um according to Wikipedia it's a structured form of play so this could be anything from a card game a piece of Sudoku and a piece of paper um exploding kittens which is a foam and family favorite or even then we can move across to something like a console game or even virtual reality Games so it could be anything that ultimately becomes fun sadly I'd hoped to get a great quote out of my children for a game but they've now turned it into a game of just hitting me with dictionary definitions um so now um there's we've we've covered what dot ml is very briefly and what a game is now we can start to look at what we can do when we combine the two together um there are actually a lot of games that we can build out of the box so if we use a typical business application architecture like mvvm there are actually there's a number of games that we can build and here are two examples of of doing that uh like I say this this is built this is actually built with Emory forms but it is slowly being migrated across to.net Maui um and a lot of these functionalities are using either built-in support or third-party packages so we've got things like there's an animation class that allows you to animate your UI make it feel alive to the users there's things like Lottie which I don't know if anyone's familiar with Lottie but that's really quite fantastic piece of technology that I fairly recently discovered um it allows you to render any form of Animation in an application and it is rendered in the application therefore you get scalability it's not like embedding an animated gif in there and you have to deal with sizing issues and actually bloats because it boils down to a little Json file so actually it performs pretty well as well um the The Words which app on the right is closed source which makes it difficult to then show off the functionality so as part of the recent work I've been doing is is taking the key concepts of this one and then being able to show you how you can achieve the same things but in an open source project um so like I says we've we've got the ability to animate things you can there's either inbuilt functionality with within.net Maui where you can animate the scale just in a single method call or you've got the ability to to dive deeper in terms of building an animation programmatically becomes a little bit more in-depth but um you can really get some quite fancy effects uh and then the finally the one that I really quite like is the little the star effect that you see when the the tiles match and that's um it's not something that ships with DOT net Maui um it's actually going down to the platform specific layer where we can then Implement a particle system um and I think one of the big selling points well I've done it Maori is supposed to do a lot for you you've still got the ability to get down to the layer itself so on iOS for example we're dealing with a core animation layer and we're generating a CIO emitter and then we're just firing particles off when um when we're calling it from the shared code base as well so you can write your platform specific code and then encapsulate it enough to be able to then interact with it directly from the shared code um there is a blog post here that shows you how to do this takes you through each of the steps I'm not going to focus too much on this today because actually there's hopefully some more fun things that we can start to look at um but I would like to point out that uh I wouldn't worry about keeping up with the links there's a QR code at the end that will take you to a post that covers all of the useful links from today's talk um so we have looked at some of the types of games that we can start to build uh out of the box so we're using things that come with Donna Maui but there are quite often scenarios when this this approach is not enough when we start to imagine games with multiple objects or characters that then each have their own States things can become complicated very quickly um I couldn't quite decide whether this image accurately represents that previous statement or whether it's actually just my mental state after being on this journey um so what we typically what we would need to do then when we when we could get to this level or to avoid this level of complexity we're going to start to look at what what's considered a typical game and that is the primary focus of the talk today um but before we dig into the how and the why I'd first like to show you an example of a game the game that had inspired this engine and then we can look at how we can go ahead about building that ah so um the great game idea that I came up with was a little bit of a Twist on asteroids we've got a planetary defense where you've got a ship on the right hand side and you're controlling it in a very limited manner you you're orbiting a planet and the idea is you can either speed up or slow down and you've got a battery that will deplete when you use your thrusters and therefore you've the aim is to control it well enough that you can then actually destroy the asteroids that are coming in to attack the planet so if we watch it in action uh we've got the ship we've also if you notice there is a shadow on the right hand side so the aim is that if you're not within view of the sun then you can't regenerate your power either so it's trying to add a little extra levels of complexity and eventually you'll see that these the asteroids will collide with the planet they don't collide with the ship yet that is something that I'm currently working on um I know you'll get into the level of uh it becoming too complex and you're running out of lives um it's an interesting one I've gone on this journey and I suspect actually the more finders we've actually been in the building of the the game rather than the game itself but it's been able to kind of expose what um Harry has to offer and what can potentially be achieved with the technology um the only other things I'd like to show quickly just based on uh some exercises we're going to cover um we can start to be able to add in extra little bits of information because I mean we can draw whatever we like on the canvas it's really quite powerful so when you realize your high school math is not quite up to scratch um you can actually start to see why the the objects are not going where they're intended um it did actually create quite a nice effect at first whereas Randomness in terms of whether the asteroids were heading but they weren't where they're supposed to be going um and then um the other thing to note we are going to have a bit more of a talk on accessibility as we progress but um the thing to consider when we're doing this is how we want to allow the users to actually drive the input so at the moment you click on the right hand side or touch on the right hand side and it'll speed the ship up I can show you that so I click it speeds up I click it slows down then the other thing to consider is maybe you actually want to provide a visual buttons for people to click on so it's a bit more obvious and inclusive release out there for now foreign so on the previous slide and during that talk I did uh refer to the term typical game so I'd just like to take a step back and um explain a little bit about what I mean by that these are um games that are typically built with game engines and they will involve a rather different way of working so uh you could consider this probably the first real conceptual difference between a business application and a game um where what happens is uh so a business application will you typically sit there idle waiting for user input whereas a game Loop it'll be constantly looping making sure that things need to be actioned are being actioned it should feel fairly familiar if anyone's worked with a real-time based system so that some PLC programming or things like that where again it's a looping approach and you're you're given um an allocated set of time if you exceed that and you're put on the naughty step you remove because there's so many components it needs to have at the time application um and we can see here in terms of the loop what actually we'll end up doing is we um if we look at the right-hand side the first step is we'll process user input make sure we're not blocking uh then the aim is to update some State and then eventually we'll turn that state into something that's rendered on the screen so we've got the two separate stays there they're really quite important and we'll get into the detail of those and then finally we wait so then actually we can get to a point of providing a continuous a smooth frame rate so we delay typically 16 milliseconds in order to provide a 62.5 frames per second um and then there are techniques so actually we say well if we know that the right hand side took six milliseconds to execute then actually we'll deduct that from the weight so then actually we try to provide as smooth the frame rate as possible um as I mentioned it's key to try and not block as much as possible because we have a limited amount of time to execute um so ultimately if you're going to take longer than this you end up going to introduce lag and then ultimately the application is going to die and the users are going to have a horrible experience um so now if we look at how this fits into.net Maui um some people have asked me why why did I try to do this uh there are many answers I'm not sure if I could decide any are good enough but um I guess the key takeaways are in part of building the word search app I was introduced to skia and I actually became quite impressed by what that did so then I took when we then migrated over to looking at Donna Maori they'd actually introduced their own API which is the dynamic Graphics API what we then did was look at uh I guess just trying to find out what's possible um it is I was pleasantly surprised I I guess one slightly contradictory statement that I've come up with is I wanted to push myself outside of the comfort zone while actually still kind of keeping myself as comfortable as possible staying in some level of comfort and that comes in the fact that I'm familiar and comfortable with C sharp and Dot net Maui I'm not familiar with the other parts but that's the bit that I wanted to flex and try and investigate what's possible uh obviously there are many other Frameworks like Unity or Unreal Engine that will do far more than this uh but the other key thing that I wanted to try and focus on is Donna Maori is a UI framework anyway so there's lots of functionality that already provides that you don't need to implement and should feel fairly familiar when you're building an application so the hope is it might be an easier transition in from building this business application to just flexing that creative side of having a bit of fun and then finally the Journey of building that demo application that we saw actually kind of identified some things that could quite easily be reused in terms of building my next great idea So the plan has been to build on top of.net group the top net Maui graphics apis for those not familiar with that it's essentially it's a surface that allows you to render I say Pixel Perfect graphics on any platform supported by a.net Maui we can consider that an abstraction layer itself just like dot net Maui in the fact that you interact with its API and it has its own platform specific implementation so being able to draw on on iOS and all of that is covered for you um and that to note is as I said during my investigation on the word search I'd come to the assumption that Dr Mary Griffith was built on top of Skies which it is not um you can it is entirely possible to swap it out so they've built that abstraction layering that you can put skier under the hood if you don't want the Maui layer uh but obviously you're going to end up with a bigger binary because you're shipping more dlls and I personally haven't come up with a technical reason to do that other than some unit testing side of things that we're going to look at later on so I mentioned that Dynamo provides us with the two key components we've got the graphics view which comes from the Dr Mary Graphics API a surface that lets you draw on things that's relatively straightforward and then we've got the dispatcher so which allows us to schedule an action are performed after a time delay and therefore that's our weight Loop so we can see how that fits into this Loop um the processing of the user input is a tricky situation because if we imagine we've got desktop devices we've got mobile devices we've got fridges I don't know how you're going to interact with the fridge um you get a Bluetooth controllers connected to any number of different control schemes you might use the accelerometer on a phone to as your input there's no inbuilt way of just doing it all for you or no easy way to abstract that away so at the moment uh user input in terms of trying to build a game with this engine it would be entirely on your own the in terms of touch support it's really quite impressive you've got an extensive number of events that you can subscribe to from the graphics view which is entirely available via the engine because it inherits from this so everything that comes with automara Graphics comes with the engine in the other hope that if new functionality comes out you can just use it you don't have to wait for new a new release and then because like I said previously Maui is a graphics a UI framework as it is so it provides you with no at no end of ways to be able to build a UI and deal with that user interaction so you can you can do it that way uh the next step in our in our Loop approach is to update the scene so we simply uh update that and we tell it how long since how long has passed since we last called you and therefore that means that if you're dealing with movement information you can actually use that as a ratio to calculate a smooth movement and things like that all relative to when you were last called and then the final step on the right hand side we call render which means uh we can't convert the state that was modified in the update method into something that's rendered on the screen and in terms of the implementation detail of what I've been looking at is we just have to invalidate the graphics View and that just tells it you need to go and rejoice yourself and then the final point in our Loop is uh the weight and that's just a case of scheduling something to be done after a period of time so that's just calling back to the same method the code you can't see here because it wouldn't fit on the screen is the calculations to work out how long it's taken in order to get you to the next step uh We've covered a little bit on a little brief detail as to what got me to the engine and I'd like to show you actually how you can use it because I'm hoping that it will provide you with a platform to actually go and create these ideas um I do believe they read me on the repository provides a decent overview of how to use it um but of course if there's nothing some things that aren't obvious then please do feel free to reach out or raise an issue or a PR or anything like that so correct things um but much like uh most uh bootstrapping options now with uh at least with Donna Marion um other things like asp.net core apps we just have to call as a used orbit engine extension method that will then register all the bits with dependency injection ready for you to uh use all of that goodness um in order to render something on see on the screen we have to add in a what's what's called a game scene View and this will then actually provide the surface that you can draw onto and uh it can function like any controlling in dotnet so it you can consider it just like a button or an image you can put it wherever you like you can make it as big or small as you like it doesn't have to consume the whole the whole page um and it provides all of the the the interaction events that come with that demographics so you can handle all of your touch input directly in your scene in your in your application and modify around um the other thing that you might note is that because we're in the orbit game the the background is static so actually there's no point in rendering that every time uh we we go through the render Loop so that sometimes the optimization is just just stick an image in because it never changes so actually there's little kind of tweaks like that that you can do to save on some some effort and of course you can stick buttons on top again it's all Z or Z index bass so you can actually control what goes on top uh if you want to pause dialogue or a game over message then you can put all of that into your UI uh and then the only other point that has been under this discussion and it's not clear whether it's a good option or not is whether we completely remove the need of a Content page and actually have a game scene page and therefore it'll just be a full screen um uh to interview once we've initialized it and we've put our surface on the screen we then need something to render so um we we we call this a scene and typically a scene is any screen in your application in your game so and and its Associated state so um what you'll see is in this scenario it's the home scene so it's when you first start the application It's relatively simple actually you don't need the spawn two methods they're just there to obviously highlight what you can do so you can update state in the scene if you really want to and you can render things so in some games there might be a dynamic background that you want to change therefore you could do that in the scene and then simply it the scene contains the objects that live in the life of the game and you can see here we're just adding a ship of sun and a planet and they will come through the magical dependency injection that will get to see shortly um once you've added your you've got your surface to draw and you've got your scene you then need to glue the two together so you you can actually just call there's uh an implementation called the game scene manager that controls the state of the scene and ultimately the game we have the load seed method which has recently gone under a bit of rework and the fact that uh we can scope instances there now so if you've got an instance of a game object that you want to share Across the Life of a scene that's all taken care of for you and actually we will cover a decent example of that and then every time a load scene closes then you can you can tidy up after yourselves so you don't have to have Singleton instances lying around which will continue to to consume some level of memory um you get all of the lifecycle events so you can start stop the game you can subscribe to them as well so if you want to show and hide you want to show a pause menu when the game is paused but you're not causing pause and you can you can interact with all of that and you um the loop stops as well when if you pause the loop is only running when you've started so you don't have to worry about other objects being updated in that in that regard uh so our final item is the game object itself and these are kind of the main building blocks of a game uh I've got written down here game object represents a single object in your game which is possibly not the best the most helpful description um it can be whatever you like it can be it can be a character it could be a component of the character it can be an enemy an asteroid as you can see in this example um ideally if we try and apply some level of solid principles then we'll try and keep things as simple as possible but uh like I said it can be literally whatever you like you can see that we've got the ability to load an image that's all built in so you can do that and then at the bottom we then have the ability to draw that on the canvas you can tell it where to draw it um and outside how big to draw it and we'll get into some more detail as to actually what dynamic offers in terms of the canvas interaction shortly um which is now so let's take a look quick look at the concepts that can be used in a real application here please do let me know if the code wants to be a little bit bigger so massive on my screen what's it doing it's opening a new window um so as we can see we've got the the use orbit engine Accenture method that we're calling and then as we look further down then we're just building up some of the dependencies that we're going to want to use so our main page has dependencies on things in the game so we have to register that then we've got we're making use of some of the essentials apis with the haptic feedback and the vibration and file system then there's for the audio playback there's a third-party package that we have to use and then some of the internals and actually to try and simplify or the size of this method there are little extension methods so they naturally exposed the bits that you care about uh just under each of the folders this is in terms of a gaming representation rather than the engine itself but it typically Works quite well and you you may notice here is what I was referring to with the scoped instance in the fact that um every time you call a load you'll have one battery instance that can be accessed by everyone and therefore when if we look here so actually we've got a ship that owns the battery we've then got Thruster that can consume power from the battery and then we've got a battery level indicator that actually presents it on screen in that way that means we could share the instance across the life of the scene and we don't have to worry about Singletons or having to pass things around we can still utilize the the density injection that comes with donut Maui um so we've done the registration we've added it to here so if we then look at in the code sample in the slide on the code to the code sample on the slide sorry we had a fairly simple UI obviously I couldn't fit all of this on the the slide it would have been really quite difficult to read but you can then start to see that you can construct your UI however you see fit there's um there's the game scene and then we've got things overlaying on top of the scene based on the button panel that you can speed up and slow down things like being able to start the game pause the game and then there's even the pause menu that pops up all controlled via the stage of the game and if we look at how we then add it in so we've got this load scene method again here which loads that in for us and then we can respond to states in the game so they see like we know once it's loaded then we'll stop we'll start playing the background music once it started then we will um hide the title and the play button and then we we've got um as much power as we like to do there so you can you can do animations you can do whatever you like with because it's all UI based um and as I mentioned we've got the the ability to use all of the the.net method so that there is quite a level of different uh interaction events that you can subscribe to they have better desktop support now so you can deal with hovering obviously you can't tell that your fingers hovering over the touchscreen but you can tell that the mouse is hovering over a button so you can build in better support for desktops if you're if you're aiming at building for that then once we've called so we called load on our home scene we can then look at the scene is really quite simple I know in the sky we actually had more codes because it's just proving that you've got the methods that you can interact with but in theory uh at least in the majority of scenarios that I've come across is that the scene doesn't do too much it's just a container for the the objects themselves but it is the thing that holds the state and it's called to to deal with the the rendering and that the loop updates if we then start to just look at a slightly more complex example in terms of the canvas interaction so in the ship we've got the complexity that it's rotating around the planet so we need to make sure that it is in the right place um thankfully with the beauty of the.net Mary canvas is the fact that we can move ourselves around we can re reposition our origin so actually the translate will say well the center is now actually zero zero is now actually in the center of the screen rather than top left then we can rotate the canvas and then actually we just have to draw the the image where we expect it to be and that then actually drastically simplifies the math that we need to do in order to put something on the screen um and then you don't have to worry about tidying up the translation on the rotation or any of that state once you leave the render method that's tidied up for you so actually you can mess around your heart's content get yourself in a certain position and then you won't be affecting any other objects that's all done for you that's fine okay so we've um covered a little bit about how the book how we can build the game then there are some tips and tricks that I like to kind of expose because like I say these are pitfalls that I've fallen into that have really quite complicated matters um so I like to come across a brief example uh so if we imagine we're controlling a ship that's flying through space um they say that suddenly some asteroids are going to appear and then we need to consider how to handle that Collision um if they they do it here's our ship um obviously we don't want that to happen so if we give ourselves some guns on the ship we've got a way to defend ourselves uh but if we say they're not just gonna be any guns they're gonna be smart guns or actually when the asteroids come into range then um they're gonna fire and um then what is ultimately going to do is going to leave us with a resource that we can collect uh which will be the next animation and therefore um you can start to see how complex this can become really quite quickly because if you've got a few things doing all of this then there's a lot of stated information in a single object um but we can actually split it down into something that becomes much more simple so what we can say is we can have a a hull a hull that can collide with an asteroid then we can say that we've got a gun that will fire when something comes into range um one detail that's not on this slide is actually the pulse colliding with the asteroid I got so deep in the animations that I've I don't dare go any further um and then you've got the the resource that can collect when it comes into the range of the sensor and then actually you've looked you've got quite individual little things that do a single task and they drastically simplify the the implementation and and hopefully make it easier to maintain um to continue on with some more tips and tricks uh the statement update really should be display independent so this comes into considering what devices you're running on or trying to not consider what devices you're running on effects um if you imagine you've got a character in the screen say you're running on a 1920x1080 screen and he's the character is in the middle if you then want to represent them on a different screen if you're playing a multiplayer game the screen size has changed or you've on a mobile device and it rotates you're going to run into all manner of trouble if you're storing 960 by 540 which is the middle uh because that's no longer the middle so if you can store your details in terms of really something that's relative to the size rather than the size itself so if we say we saw 0.5 by 0.5 you can then translate that in your render so as long as you can separate out update to render then you're going to run into um far fewer problems like ships jumping around on a okay when it's not supposed to um I don't know about yourselves but when I play mobile games I really lack the the positive feedback that you get from physical buttons not actually knowing that you're tapping it get frustrated that you've missed it um obviously you can't provide that physical element but you can actually provide some level of positive feedback that they've actually done something so you can put some haptic support in to actually let them know they have clicked on the button um and then you can also look at maybe adding audio so you can add a sound so click sounds or things like that in terms of the that you let them know the button has been clicked now I will be honest I'm quite a silent gamer my phone's always on silence actually I don't forget the the sound effects but the haptic support really does make a difference um but it does show that there's a wide range of different possibilities to be able to provide positive feedback to people there's not a one-size-fits all for all of this um and then with sound effects oh sorry not sound effects but audio in general you can provide backing tracks for your game as well and that will then enable to provide a whole different element to the game it really does make a difference um and on that note uh we do actually have sound in here as well so actually I don't want to leave this playing in the background while we're talking um so you up I've changed the control screen so you can then actually add a little elements that actually make it feel much more like you're actually letting the user know that they are doing something and I'll meet that now so we don't go too far uh and the only other final Port is um there is a lot of functionality that comes with the tooling and the framework so like I keep mentioning dependency injection but there are a lot of things that are designed to make our lives easier and because they come without their memory then we really want to make sure that we make full use of them um this feels like it shouldn't really be a tip and trick but um it is a really important topic that I always like to try and address and highlight uh accessibility it really is such an important topic and I think the sheer fact of the keynote yesterday was heavily focused on it just shows how important it is Maui does provide us with quite a few tools that make it easier for us to build a more inclusive application and if you think that um as a really quite crude benefit of making your application more more inclusive is you're opening yourselves up to a wider range of people to install it so if you're charging money then actually that gives you the benefit that you might actually make more money because you are appealing to more people um what it does do is it gives another abstraction it gives us uh inter the ability to interact with the screen reader so any of the voiceover assistants that come with let's say Siri or uh TalkBack is it with Google um it all comes out of the box for you so you can if you imagine that you've got a user that's got lost in the game they haven't actually provided any um any input you can actually then guide them to actually realize that they haven't done anything and maybe you just need to prompt them into what they need to do um the other thing to consider is when we're building our applications if we're building something that needs to be tapped or clicked then that's most likely that really should be a button because that is what buttons do um and the other the the benefit of what Dr Mary offers is the fact that you don't it doesn't render the button for you it delegates down to the platform specifically here which is a UI button on iOS and apple have built in all of their accessibility support around a UI Button as they know what a UI button is they know what it does and therefore the the voiceover assistant will be able to present that much more clearly to a user uh there are there will there will always be scenarios and I think in the orbit game you'll see that um the pause button and the play button are not buttons they're images and by default images are just a static piece of something visual that you can look at it's not something designed to be interacted with and therefore um the screen reader won't won't report that to the user it'll it won't tell you that you can interact with it but you can make use of things like the semantic properties that um will then guide the screen reader to report that to the user so you can interact with this and this is what it does and therefore ultimately that um find its way down so that the the user as well because it's you're guiding the the screen reader um actually what I really quite I wouldn't say fun experiences uh to turn your screen reader on and then actually go into a game or an app that you've got and actually realize how much of a painful experience that becomes um but uh this is actually only really scratching the surface of uh making games and applications more accessible uh the section at the end there are quite a few slides and I have sorry resources in order to help you on that Journey you can start to think about there's other examples where all right if you want to consider visual impairment then actually there's there's levels of contrast ratios to make sure that your content is actually presented to the reader so you want to make sure between the difference between the background and the text is there's enough of a contrast to make it legible and also certain fonts and things like that actually benefit you and then there's other things that we possibly could consider is that while in games it's great to be able to uh animate things make things move around and Flash actually they're even settings in iOS like reduce motion and if that's enabled then actually we probably shouldn't do any of that because that's actually a bad experience for someone rather than a good experience um and then I should add that the this the sample games so in in the the orbit repository at the moment there are three sample games to show you how to kind of build things there's a a drawing game uh an air hockey game which is mostly just a proof concept that doesn't do too much other than looking like a an a hockey table uh and then there's this orbit engine they have some level of accessibility support in but we're surely trying to build that up to provide a solid set of examples in order to build something that is inclusive um I've tried to talk around what the engine does offer in order to make people want to come and use it and contribute to it um but in short I wanted to cover what it doesn't offer which is these are mostly deliberate decisions in the fact that you don't need us to provide you database access you're running under.net so therefore you can utilize whatever you like you could use Entity Framework sqlite Dash net or like TV or many other services even cloud-based databases uh you could utilize the apis from Essentials which we've done with the haptic feedback or the vibration support there's many others you can utilize accelerometer so you can actually introduce that for your controller support um as well as many other things um and the essentials apis do refer to them as centrals because they were that in xamarin but they've they've been baked into Tottenham area so they are just part of the ecosystem but most people just refer to them as a central still we can provide multiplayer support via services like signalr or web services um and because both client and server will be running.net code you can actually share the code between the code bases um and in fact I took part in a talk last year where between myself in the UK and James in the US we live stream the drawing sample game from this Repository uh uh and it mostly just worked with relatively limited amounts of code signalr is actually really quite oppressive technology when you look at what it's doing under the hood um and then there is the part that I really like and that's having the ability to interact with the platform specific apis so um I did mention this briefly before but if you've got say like I said you wanted to implement a particle system on your in your game or your application you don't have to wait you don't have to be held up by.net Maui uh you can actually just write the functionality yourself because you can uh interact with DOT net for ios.net for Android and they are bindings wrapped around the entire iOS or Android libraries so you've got the full power there which you don't have to be held up um and then finally we mentioned uh audio support or actually the benefits that come with audio now audio playback doesn't come with donut Maui it also doesn't come with the engine but there is a third-party package that will enable you to do that so there are options out there that just doesn't necessarily come out of the box with with what you've got here um testing is a tricky subject uh so don't marry themselves they are investigating the team are investigating how to do UI testing but as I say it's under investigation so in terms of wanting I wanted to find a way to enable people that are building a game to be able to test their Creations relatively straightforwardly um so I've tried to take the approach of snapshot testing to some extent um It's Not A New Concept and if anyone's not familiar with snapshot testing um it the the premise is is that you write a test you you accept the output that comes out of it and you consider that what's called a Golden Master and then any subsequent test run the new output is then compared against the the Golden Master Albert and if there's any difference um you'll get a failure uh and there can be many different types of output for a test this one obviously is renders an image but you could serialize the state out to a Json or XML whatever you like and therefore you've got something that might be slightly more readable in terms of when you want to compare things certainly uh diff tools will work better with with um diffing text rather than an image um this and this approach is it's quite a crude example I mean it's not rendering the game but it's it's aimed at rendering something and therefore you can then actually prove uh what's done is is creating a scene and then just rendering a rectangle um and what you'll also see I mentioned before is that because ski is not built into donate mirror Graphics but in this scenario we're actually relying on skier because it's not there's no there's no platform for Net 7 support for the graphics so we have to do that ourselves so you can swap in the canvas for a skier canvas and then you can just render it and it'll work uh for any eagle-eyed people in the audience you may have noticed that this test will fail in the next run because there's no red circle that's being drawn in the test in the subject under test um I'd like to suggest that was deliberate I'm not sure I can um but yeah so I mean like so you can see that um it has potential and I think um in terms of being able to test do the UI testing this way it works well for things that I have games that provide repetitive Behavior so if you want to test uh something like a tutorial screen that you guarantee that people always have the exact same experience and something like this would work if you're going to introduce Randomness into the game which actually a lot of games do do um then you're going to run into problems because things are not always going to be in the same place if you look at the asteroids they're never sworn in the same place um so typically when we look at that then we'd end up serializing out to Jason and then we can use a technique which is known as scrubbing so you remove the bits of detail that are random and therefore you exclude those from the test but if you want to verify that a certain number of asteroids born in this the first 10 seconds of the game then you can still verify that but you're actually just removing the bits that that would actually cause the test failure um the that the first stop on this journey I guess is to aim to try and get something that's reusable for everyone in terms of when you get packaged that could be added to a project then you could build a game um in terms of getting there uh there's only five items on the list so it can't take too long can it uh um the first one and I don't know about you I really struggle with naming things uh child one and child two we'll vouch for that um but someone has suggested uh the the name of Mage which is multi-platform app game engine which sounds quite nice I can imagine a quite a fancy logo for that um and it fits in with the technology that's being used so that's something to consider um there's the investigation building in more physics so obviously the orbit engine deals with physics not the engines right the orbit game deals with physical elements um but not all games do so like I said there's a drawing game example that requires no physics so we're looking at potentially building a separate package for that that will provide helpers in order to simplify anything that you think you need to build in terms of Diagnostics you saw we had the bounding boxes on the screen and the hope is that we can try to make it as easy as possible because I've been there through the frustrations of why is this not here it's over there or actually quite often you don't even know where it is because it's out of bounds so trying to build in levels of Diagnostics there to simplify that I think we've all been through the frustrations of well we've all went to the frustrations of trying to diagnose something that's challenging and then things like being able to display the frame rate on screen things like that just just to simplify a developer's um job uh we want to add in a bit of better life cycle support So objects don't know when they're added or create when they're created or destroyed so actually you can't tidy up resources particularly efficiently at the moment um but that's I'm not going to say it's coming soon hopefully it would uh it's gonna say it's going to be trivial but uh that's a terrible idea and then we want to further enhance the testing support so we've got things like the the snapshot testing trying to investigate whether there's other options in order to make it far simpler because I know when um working on side projects testing tends to kind of Fall by the wayside rather than actually being a high priority but if we can build it in and it becomes really quite easy then there's no excuses to um and finally I've been I've been told I have to present this uh when I first told my daughters that I was building games and going to give a talk they became so excited they went off and designed their own game and actually wrote their own PowerPoint presentation that they thought I was going to present uh so if anyone here is interested in a hello neighbor across with Gummy Bears then uh that might be coming fairly soon um and then actually just before we do wrap up so just like we would have time for questions uh um there are some really great resources that I've come across on my journey see a smile there um so audio jungle provides really great audio as it suggests uh sound effects and and music they are typically paid for but uh they're they're not expensive and like I said they do really make a difference um the only thing I I discovered is that when you they give you samples as well so you can download it and play it they just put um I never know what the correct term is it's not a watermark but they've always there's a voice over it so make sure that you're when you're Distributing it uh it's not painful you can become quite used to that so actually when you pay for it and you remove it the the person speaking over it it actually feels unfamiliar and quite strange um open gamer is a really fantastic resource uh it's a portal for artists that share their work it's typically open source so depending on the license that's up there you can use most of it for free obviously with levels of attribution and that covers music sound effects graphics a multitude of different Graphics options and the the orbit engine uses all of that and all of the all of a graphical or artistic Artistry comes from there so that's the sound effects the music and the um the imagery and then there's two other great repositories which helped Inspire this uh there's a certain trains.net by this man down here David uh and then um as a Flappy Bird clone that was built on top of skier shop by Matthew lugowitz who maintains gear shop um and then that's it from me I want to thank you very much for coming and being a great audience to my very first ever conference talk um I hope it's been as much fun listening as it has been um talking about it uh the point I'd like to leave on is um I've spoken about a journey I've spoke about this engine that I think can potentially solve problems I'm not going to say what's all problems there are like I showed you in the earlier slides you can achieve these problems via typical means so if you want to use a like mvvm to build an app and there are better applications that are suited for it so they're a card game or things like that you could use what you're more familiar with you don't have to go and learn a new piece of technology and that's kind of where I started this journey thinking I didn't need to and then created a different piece of technology which I guess as I say it's part of the fun part of the journey um but I would love to see whatever Creations people come up with and please do reach out and suggest any suggestions or whatever there is so thank you is it would anyone have any questions or um uh well no sorry this is all renders natively on its platform so actually Dr Mario is taking care of all of that so you can render on win UI uh through through their drawing layer if they've got their own implementational menu when we tested the windows and fire up emulators uh so um there's multiple ways of looking at this so you can run unit tests um and you can force it so in the the code example here if I jump back in this you can actually run this just generally on on your on your machine you could just run.net test and it'll execute that for you uh there is another piece of technology with.net Maui called device test Runners which allows you to um running up on an emulator so you can spawn these tests up onto an emulator it is not the most pretty it kind of looks like test Explorer on the device and then you can run all of the tests there but it's running it in that environment and not just on.net seven it's running out.net seven for Android so you do have that power to do that uh no there should in theory be a verify method at the end that would that would actually call that uh so typically with Snapchat testing you don't you don't tend to write assertions you end up just verifying the state of an object so what really should have happened is it um rather than writing the the bottom two lines would be replaced with a verify the scenery so you'd verify the state of the scenery and then each time to what so this implementation here it would that would be inside of the verify method and it would compare its output to a known output two folds on this slide okay if there's no further questions I just want to say thank you all again

Channel: NDC Conferences

Views: 9,922

Keywords: Cross-Platform, Fun, Gaming, .NET, MAUI, Orbit, .NET 7.0, NDC, conferences, 2023, Live, Shaun Lawrence

Id: zCeGMsta5bY

Length: 54min 29sec (3269 seconds)

Published: Sat May 20 2023