It’s been a while since I posted anything. I wish this one is about JitHub as it’s definitely due for an update, but that’ll have to wait as I’m still working on the next feature. Today we are talking about something different, Skia and Blazor. I’ve always wondered about these two and the possibilities of combining them. Due to the lack of experience in, well, anything related to them, I’ve never been able to make any real progress. That is, until this pull request made by the awesome Matthew Leibowitz added Blazor support to SkiaSharp. What does that enable? Well, keep reading~
A little background here. Skia is a cross platform high performance 2D rendering engine made by Google. It’s written and often consumed in C++. In order to use it in the .NET world, Mono made the wrapper for Skia in C# called SkiaSharp. It made 2D rendering in Skia a possibility in many .NET based application types like Windows app or Xamarin app. Ever since Blazor came into play, many people wondered the possibility of using SkiaSharp in Blazor to render 2D content in HTML canvas. Matthew’s pull request to the SkiaSharp repo made this possible.
So What Did I Do With It?
I’ll save the boring bits of what this can enable and what it all means to the end. First, let’s look at what I made.
Originally implemented in this test repo, Matthew implemented the Blazor support for SkiaSharp. Quickly after that, he made a PR into the SkiaSharp repo, and this great rendering engine is suddenly available to Blazor developers. As of the writing of this blog, SkiaSharp in Blazor is still in pre-release move, so I had to use it through this nuget package.
dotnet add package SkiaSharp.Views.Blazor --version 2.88.0-preview.179 dotnet add package SkiaSharp --version 2.88.0-preview.179
The MoveAll function is very simple. I check if the current position of the bird is colliding with any pipes. If so, the game is over. Otherwise, I try to add pipes to the list of pipes that I need to render on the screen based on if there’s needs to be a new one appearing at the right edge of the screen. I then try to remove the ones that are already off screen. I then calculate how far should each pipe move based on the constant pipe moving speed. Finally, I calculate the new position of the bird based on the speed, gravity and user input.
The DrawAll function is even more simply. I basically just go through each sprite’s position and render them on the screen. I don’t even know if this is worth a separate paragraph.
What Does This Mean?
So… I Can’t Use A New Framework Even If One Exist?
That definitely not what I meant. If, one day, an end-all-be-all framework was created and all the feature of the web and native platform are implemented properly in this one way to write and render app on any platform that support a common rendering engine, that’d be the best day for all developers. But until then, we shouldn’t throw away years of learning, features, bug fixes just for a idea that’s still pretty far out. That being said, if you are one of those talented people who can help making this future arrive faster, here are some repos that you can consider contributing to.
- SkiaSharp: https://github.com/mono/SkiaSharp
- The C# wrapper of the awesome 2D rendering engine Skia. With it being available on Blazor, more and more people are going to use it and start to submit bug reports or feature requests. It’s a good time to jump in and start looking for ways to contribute.
- AvaloniaUI: https://github.com/AvaloniaUI/Avalonia
- Cross platform app framework for .NET. They are also adding Skia support for some of their controls. There are exciting possibilities given maybe one day we’ll be able to run Avalonia app in the browser (or we already can? I’m not quite sure on their progress)
- .NET Comet: https://github.com/dotnet/Comet
- Comet is a cross platform app framework in .NET C# that allows you to write the UI in C#. It promotes the MVU pattern, and it’s the experimental playground of what .NET MAUI came to be. It supports rendering using SkiaSharp, and it used to have a Blazor target as well. With Blazor support in SkiaSharp, there might be hope to revive the Blazor target with SkiaSharp one day.
- MAUI Graphics & MAUI Graphics Control: https://github.com/dotnet/Microsoft.Maui.Graphics & https://github.com/dotnet/Microsoft.Maui.Graphics.Controls
- This is a cross platform 2D rendering library that uses each platforms’ native rendering layer. It also has a Skia target, which means Blazor could one day be a target. The control repo is a set of controls in different style rendered using the MAUI Graphics.
- Uno Platform: https://github.com/unoplatform/uno
- Based on the C# UWP framework, Uno compiles and runs the app on any platform that supports .NET. It’s in very active development and there are lots of community support.
SkiaSharp has very high performance, and Blazor support is one of the best things that happened to the .NET Blazor community. I can’t wait to see what happens in this space as I believe the future of web is with WebAssembly and web based rendering engine. With all the different repos that targets web or Skia, I bet it can be helpful to you as well.
Make a one-time donation
Make a monthly donation
Make a yearly donation
Choose an amount
Or enter a custom amount
Your contribution is appreciated.
Your contribution is appreciated.
Your contribution is appreciated.DonateDonate monthlyDonate yearly