Category: Blazor

Work in Progress – Web game

Work in Progress – Web game

Blazor AppI did some investigative work on this at the weekend, This is my Inselkampf type web game. Although I know C#, I’m fairly new to ASP.NET and Blazor. Now the first thing you’ll notice about most Blazor examples on the web is that many look like the screenshot. In particular, the purple gradient down the left hand side.

So my first job was find out where that’s defined and try changing it. In the project which is Blazor WebAssembly, there’s a shared folder and it contains two .css files. MainLayout.razor.css and NavMenu.razor.css. These are the files you need to alter.

Now its probably seven or eight years since I last touched CSS and it has come on quite a bit since then. I discovered css-grid which simplifies things enormously.  If you want to find out more about CSS, take a look on FreeCodeCamp.org. This site has lots of example layouts using CSS-Grid and I went for Redefining Grid Areas with Media Queries. 

This lets you specify a width so you can have a responsive website which adapts to mobile phones as well as desktop. I merged the css and HTML from the example into the project and although its an early stage, I’m quite pleased with it.

Game framework This is very early. The font, colours etc will all change but this has given me a web template with round corners, header, footer and two sidebars.

If I shrink the width of the browser the two sidebars move to positions above and below the main content like this below. It would have taken a lot more effort before css-grid to do this.

Narrow game framework

 

 

More Thoughts on the Blazor game design

More Thoughts on the Blazor game design

OpenGameArt
OpenGameArt

This is the latest in a series on the design of a web game based loosely on a no-longer-run game called Inselkampf. It won’t be exactly the same as the original game, I have my own ideas. To see other articles in this series, click here or on the category: Blazor on the right hand side.

There are two models with Blazor. Server and WebAssembly. Both are similar but the crucial difference is that WebAssembly can run completely standalone whereas Server needs a connection to a webserver. Server uses SignalR technology.

The danger with using the Server model is that each person playing the game implicitly creates a connection. With the WebAssembly version, there is no direct connection though it makes sense to have a connection of sorts perhaps a Restful type interface.  This means running a query to fetch game data and then running update queries.

So Blazor with WebAssembly it is. Why Blazor? Because it simplifies updating controls on the page.

Looking after Time

The nature of this type of game is any construction (buildings and units) takes a finite length of time. which can range from seconds to a day or so  I want to see how long before my gold mine goes up a level and so on. It’s normal to have all times countdown in the browser. This should put no strain on the server as its running in the browser. Keeping server and client in sync needs a bit of care in case someone figures out how to make the browser code run faster. Once it reaches 0, an update should be sent to the server which should do a quick comparison with its time and if shenanigans has occurred, return an update status and resync the browser to the server. The rule is “If you give em a chance to cheat- they will“.

Procuring Graphics

Much though I like the Inselkampf graphics for all the buildings, I’m not going to use theirs. It’s infringing copyright (reimagining the game is not copyright infringement BTW!) . As well as the free kenney graphics that I’ve mentioned before and various other websites such as opengameart, (shown in the screenshot) there is also the Reddit game assets subreddit so between these and some others I hope I can find what I’m looking for.  My requirements are quite modest.

 

Web development- learning Blazor

Web development- learning Blazor

Web pages
Image by Mudassar Iqbal from Pixabay

I’ve talked about Inselkampf in a previous post. it was an example of a PBBG (Persistent Browser Based Game).  Currently if you want to write a web application that updates part of a page without refreshing itself, you have to do it via a JavaScript toolkit. People have been doing this going back about 15 years or so initially using a technology called AJAX.

Refreshing an entire web page takes a few seconds- some of the pages have got really big what with trackers and other things that bloat them up. So being able to update just part is a massive time saver plus it looks good.  Browser games couldn’t work without it.

Blazor takes things further by letting you update parts of pages, controls but in C#. There are two types of Blazor. WebAssembly (the machine code of the web) which does everything in the browser. It’s how the trains program works. The other type uses a server and does everything server side (controls and data) then sends it to the browser to be rendered.

For my purposes, the WebAssembly one is better. If you have a lot of people connected to a server then the Blazor server can use a fair whack of server resources. Th Blazor WebAssembly will also connect to the server but just to fetch or update data. So I’ve bought a Udemy course and am soaking up Blazor.

There’s still all sorts of questions. For example keeping the tick in synch. PBBG games often have a clock where new resources, building construction happen after a few seconds or longer. If you do this on the server then it’s not so difficult if the browser gets disconnected. In the browser though, it has to update the server or come up with some scheme so the browser and server don’t drift part. These are all part of the fun designing and programming such games. But I definitely think Blazor offers a lot of potential here.

Amazing multi-platform Asteroids in C#

Amazing multi-platform Asteroids in C#

Android asteroidsAsteroids was the first full arcade game I ever wrote in C. Asteroids in C# takes things to a whole new level.  The solution contains 12 projects in all: Three Blazor projects, a WinForms version, a WPF version, a UWP (Universal Windows Platform) and a Xamarin Android Forms version (shown).

You can compile and run any of the projects though you will need to install and setup a suitable SDK and emulated (or a real device) for the Android.

Written by Howard Uman and ported by Ernie Salazar, this is a wireframe asteroids, more true to the original than my own raster version. Out of curiosity, I created an Android 9.0 emulator (I don’t have a recent Android phone) and compiled then deployed it to the emulator. The screenshot is grabbed directly from the emulator which has a less than ideal screen ratio. This would work better on a tablet.

The structure of the C# Solution is interesting. All of the game code is in the Base project. All of the other platforms just host the main game window. The game uses the SkiaSharp graphics framework for Android Forms.

This is a very nice open source project and an excellent way to see how Blazor works in both Wasm and Server mode, not to mention the Android, WinForms/WPF and UWP versions.

I have an interest in Blazor which lets you write C# code that runs in the browser very easily.  With a bit of workj, this should be runnable on a Linux webserver as well. Something for me to try…

 

 

Thinking about my Inselkampf reimagination

Thinking about my Inselkampf reimagination

Database schema
Image by mcmurryjulie from Pixabay

In an earlier post on web games, I mentioned an old multi-player web game that I used to play and which was discontinued in 2014.  I have a rough design for this and am busy learning Blazor as I believe that would be the best technology to use. It lets you run C# programs in the browser, no JavaScript needed. This simplifies input with verification and also updating the web page without having to do lots of messy Ajax stuff.

But being a web game there is a web server involved and the big question is what sort of data architecture to use? The most obvious one is probably using a relational database behind the scenes. That way each game (with up to 1,000 players) is held in a single database in about 12 tables. I’ll probably use MariaDB.

I did consider doing everything in RAM but its a terrible abuse of a web server and rather restricts it to running one or two games. Pulling stuff out of a database is much less strain on the system than having a few hundred MB of RAM tied up per game. A web server can support multiple games which helps keep the costs down.

Also with a web game, it raises the possibility of caching certain static files on disk to improve throughput.  This blog uses WordPress but has a cache so when you view a page, it’s almost certainly been pre-generated rather than built on the fly.

An example of a web game that I admire is Torn.com.

I like web games

I like web games

IllyriadNot the Flash type games you get on sites like Kongregate but strategy games like Illyriad, (Pictured) Though you can waste an awful lot of time playing them. The web is an excellent platform for certain of multiplayer games. Heck you can even play games like Quake III which was a desktop game but redone using WebAssembly.

I used to play a strategy game Inselkampf (German for Island war) where you start off with one island and improve it then you can start building ships and invading other islands. I remember getting to the point where I was managing an empire of 80 islands and the only way I could do track all the details was with an Excel spreadsheet. But it was a big time hog, taking up over and hour and a half each day (just mad!) and I stopped playing.

It seems to have closed down a few years ago which is a shame as it was very popular in the mid 2000s. The UK website inselkampf.co.uk just has a start Game Over message on it! Searching about I even found a copy of the Inselkampf rules online.

Given my postal games background (I created three Play by Mail games back in the late 80s, two of which are still run today on kjcgames.com. ) I still have an inkling to create a big web or mobile playable game. I’m not saying I’ll make a £million like torn.com.  I’m not a great fan of web development (well the JavaScript part of it) but I’m currently studying a Udemy course on Blazor which is Microsoft’s take on C# and WebAssembly.  This lets you create websites in C# running in the browser. And C# I am most definitely a fan of.