Category: design

More notes on my Webassembly web development with Blazor

More notes on my Webassembly web development with Blazor

Web networking
Image by Gerd Altmann from Pixabay

This is another post in the Inselkampf series. Having spent much of my career creating “desktop” application, web always feels a bit different. If it’s a website then HTML/CSS/PHP + MySql is a reasonable way of working. But when its a web application like a browser game that uses a SQL database, then there’s a bit of architecting involved.

I’m using Blazor because it lets me write C# that runs in the browser. I’ve never been a JavaScript fan though I realise many people are. I also have to use database. As I’ve said before Blazor gives you two choices- The WebAssembly version that runs completely in the browser and the Server version that talks to a server using a protocol called SignalR.

I’m trying to be clever by using the WebAssembly version but having the C# talk to a restful interface. Restful just means it has a bunch of http calls to do things like update, fetch data, login etc. On the server runs a ASP.NET program implementing this. It’s headless, as in its not outputting any webpages to the browser but just returns data in JSON (or maybe MessagePack).

This avoids having a SignalR connection for every user logged into the site which is one way to bring a server to its knees. When you create a Blazor Server application, it has a few disadvantages. As Microsoft says: when you use Blazor server.

  • Higher latency usually exists. Every user interaction involves a network hop.
  • There’s no offline support. If the client connection fails, the app stops working.
  • Scalability is challenging for apps with many users. The server must manage multiple client connections and handle client state.
  • An ASP.NET Core server is required to serve the app. Serverless deployment scenarios aren’t possible, such as serving the app from a Content Delivery Network (CDN).

I’m also not using the Microsoft authentication but rolling my own. Yes it’s possibly not perfect but I’ve done it before. This way I get to generate recovery numbers. (Both GitHub and Gmail offer these). A bunch of one off codes that are used to authenticate you, if you’ve lost your password or messed up your email then you login with your account number and an authentication code. This is the only way you get to change email and/or password. You just have to keep the codes safe.

Rolling my own Interface

So things like logging in, getting current status, updating game play are all done by making a call to an HTTPS routine. This is all behind the scenes so players see nothing. Values are sent as POST parameters and also include a nonce. This word (that unfortunately means sex offender in UK English!) , refers to a special code that has to be supplied with each call to the server to authenticate it. Successful logging in returns a nonce that has to be added as a parameter with every call to the server.

The program on the server that serves the restful calls is a simple ASP.NET Razor pages application (Well maybe Razor, I’m not sure if I need them). Behind the scenes I’m using MySQL which was installed as part of VirtualMin (the excellent software I use to setup the VPS).

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.

Thinking about Slay tutorial 7- Game AI

Thinking about Slay tutorial 7- Game AI

Slay gamesHaving just published Slay Tutorial three, making the Onslaught game play well as a computer opponent(well up to 8 of them)  has been weighing on my mind. I have played the original Slay perhaps a couple of thousand times, so I’m reasonably familiar with strategy.

There’s almost 500 games on the Slay game chooser screen shown with four different sizes of islands; the four boxes. Usually by the time I’ve played through all games here (probably taking 18 months to two years) , I can start again and have forgotten what it was like. Plus I think it randomises the starting positions so you get a lot of replay value.

In the first Slay Tutorial I published a map of the tutorials and so far am sticking to it. Tutorial seven is the one for the game AI and its on my mind. I play all the Slay games at the same top intelligence level and even it sometimes makes stupid mistakes like leaving an area vulnerable to splitting and losing all units due to starvation.

The main aim of any player is to expand their territory at the expense of other players. Joining territories can be one tactic as its lets you support the bigger units. The 2 point unit is a Peasant then there’s Spearmen (6 points) , Knights (18 point) and Baron (54 points).  Getting a Knight early on gives you a big advantage as it can defeat castles and too often I’ve seen a territory with one or two spearmen get trapped by castles and destroyed in a few turns.

Likewise putting a castle down early on can secure a territory for a while. Or if you have a larger area, a couple of castles can shield your flanks so you can focus yoyr troops against one enemy and not worry about other players moving in.

Self Playing

In Slay once you are eliminated the games plays through until one player beats everyone else. But self-playing can also be a useful way to have computer players learn. One possibility is to try and implement a “matchbox” AI. This was done with Tic-Tac-Toe (noughts and crosses for us Brits) with Menace, Now it may be that Onslaught is too complex to implement that but there’s a lot of RAM available, so if I can limit the number of setups that it recognises then maybe?

Anyway there’s a fair bit of time and Tutorials 4-6 to do before I get to Tutorial seven.

PS

If you move the mouse over the About Me, you’ll see a link to a page that has short cut links to all blog posts along with the title of each.  It’s a quicker way of navigating.

 

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.

So someone wanted to know how to go about creating a dating sim

So someone wanted to know how to go about creating a dating sim

Wikipedia Ren'Py imageThis was a question in the reddit gamedev subreddit.

Here’s my answer. “Think about how you might make it work as a roleplaying game. You’d have a set of characteristics- age, cuteness, physical attraction, charisma, boldness etc. Have your characters roll 3 6 sided dice to get these. Then you can work out an easy scoring system by comparing similar characteristics.

So once you have a basic matching algorithm, your game has to let the player find potential dates. In the gym, supermarket, dating site, college etc. Perhaps you get an initial idea about someone you meet and then you get multiple dialogs where you try and figure out how to ask them out. Choose the wrong phrase (e.g. “Do you spit or swallow?” ) and you won’t see them for dust. Maybe if the person you are asking out has a large personality they’ll laugh at your humour and say yes.

Then you have to decide what wins the game. Getting to first base, 2nd, breakfast? Or you get a low score when they tell you they’ve decided to become a nun because of you…

How you implement it is entirely up to you? Things like renpy, or maybe you’ll do the whole thing. For the possible target market I think you might have to make it graphical. Perhaps a comic-book type approach? That way you don’t need too many drawn backgrounds.”

This is the kind of thing you might use Renpy for. What is Ren’py? Ren’Py is a visual novel engine used by thousands of creators around the world that helps you use words, images, and sounds to tell interactive stories on computers and mobile devices. These can be both visual novels and life simulation games.

I got the screenshot from Wikipedia. Talk about breaking the fourth wall! And yes Ren’py has an irritating apostrophe in the middle!

Thoughts about the Onslaught map generator

Thoughts about the Onslaught map generator

Map
Image by DarkmoonArt_de from Pixabay

With the 2nd Tutorial under my belt, I’ve ben thinking about the map generator which is the subject of the third tutorial. I suspect it will be based on the Empire map generator which you can read about from an earlier blog post.

The difference is that there will only be one continent not several and it has to occupy between maybe 50% and 80% of the specified map size. These are 20 across by 15 deep (small), 30 x 20 across (medium) and 40 across x 30 deep (large). On a 1024 x 768 Window, I managed to fill it with 31 across by 28 deep, so I’ll need a larger playing Window.  The current one is 1024 x 768.

The Empire generator works by first scattering a number of land and sea points in an empty grid then growing layers around each point in the empty cells, stopping when a non-empty cell is found.  I’ll need to modify it so that the starting land points are near enough to form a single continent when grown and reject any map that has 2 or more continents.

I also put Onslaught on my Raspberry Pi and found that it runs a lot slower than on the Hyper-V Ubuntu. I can only put this down to the number of hexagons. a screenful at 1024 x 768 is 31 x 28 hexagons and that requires 868 blits ( each a call to SDL_RenderCopy). Each blit copies 1088 bytes in VRAM.  That’s almost 1 MB of VRAM being copied in itself each frame which is not that much for a GPU but there’s probably some overhead for each blit and I imagine that could be the performance killer.

Kilo- a thousand lines text editor in C

Kilo- a thousand lines text editor in C

Antirez kilo text editorDeveloped by Salvatore Sanfilippo aka antirez and licensed under the BSD 2 licence, kilo is a simple text editor in one file.

If you are learning C and want to see how to write a utility, this might be a good example to follow. Warning though he does use pointers so make sure you’ve learnt them first!

I had a stab at writing one quite a few years ago but it wasn’t very good. I have a suspicion that writing a good text editor depends upon you first creating a good implementation of the text storage. Solve that and it’s downhill for the rest.

I’ve added this to my curated library of C code, on the C Code link on the top menu.

 

Some thoughts about game AI

Some thoughts about game AI

Military
Image by Dimitris Vetsikas from Pixabay

When I say AI, I mean control logic for computer played units in a game, not Ai as in Machine Learning or Artificial Intelligence. For instance in the Empire type game, that I started (On the Games source link) which has ships and units fighting on land and sea, capturing cities and building new units.

An AI for an Empire type game has a lot of logic to be implemented. I thought about this quite a bit and came up with a task based Ai system. A neutral city is spotted by an exploring ship. If its a transport with armour on infantry then it just attacks the city and hopefully captures it.

If not a task is created. This comprises a number of steps.

  1. Locate units nearest to the city that aren’t allocated to the task.
  2. If the units are on the same continent then just send them to attack the city.
  3. If not Locate the nearest transport and send it to rendezvous with the units at the nearest point to them. Load the units.
  4. If there aren’t any units free then locate the nearest friendly city that’s not tasked with anything and task it to build the units.
  5. If there’s no transport, have the city build a transport after building the armour/infantry units.

That’s just one for task but what if a friendly city is threatened and the tasked units are the nearest. Care has to be taken so that units aren’t flip flopped, getting orders one turn then being pulled away three turns later to a different task.

Each task should be given a time-to-live (say 30 turns), long enough to acquire the resources (units it needs) to do the job and reach the target. The rule then is no diverting units on a task unless a dire emergency (like threatening one of its cities) and those are the nearest.

There’s nothing worse than allocating units to a task then seeing enemy units sail right past unopposed. Writing code to deal with different situations and priorities is not an easy task

 

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.

 

The L game by Edward de Bono

The L game by Edward de Bono

The L Game
Image from Wikipedia

I bought a book The Five Day course in Thinking by the author Edward de Bono when I was at University. It included a seemingly very simple two player strategy game called The L Game.  If you’ve heard of the phrase Lateral Thinking that was invented by him back in 1967.

On a 4 x 4 board there are two L shapes and two neutral single pieces. To win you just have to move your L shape and (optionally) one of the neutral pieces so that your opponent can’t move his L shape.

I’ve had a cursory search for C source versions of this game and there are bound to be more than the one I found which was written for an Arduino WifiBoy Pro. There’s a downloadable zip file which contains a file wbpro_chess_L.ino. Despite the extension, it is a C source code text file.

If you are looking for an interesting programming problem then create a computer opponent for a game. The good thing about this is, its so simple graphics wise that you could draw the board in a console with B = Blue, R = red and 1 and 2 the two neutral pieces like this.

1RR.
.BR.
.BR.
.BB2