I thought maybe the non-tiled hex map program mentioned in my last blog entry would be easier to work with and as fast but just to be on the safe side, I measured the frame rate of both programs.

I did this with a nifty bit of Flutter code ceated by an AI that I’ve included below. I added it to the program created by Alexander Shevelev who wrote a Medium article about using Flutter + Flame + Tiled. That’s his program running.

import 'dart:math' as math;
import 'dart:ui';
import 'package:flame/components.dart';
import 'package:flame/events.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flame_tiled/flame_tiled.dart';
import 'package:flame_tiled_example/background.dart';
import 'package:flame_tiled_example/tile_info.dart';
import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:flutter/scheduler.dart';
import 'package:flutter/widgets.dart' hide Animation, Image;
import 'package:web/web.dart' as web;

class FpsCounter {
  // Singleton instance
  static final FpsCounter _instance = FpsCounter._internal();

  factory FpsCounter() => _instance;

  FpsCounter._internal();

  bool _running = false;
  int _frameCount = 0;
  double _elapsedMs = 0;

  double fps = 0;

  /// Start measuring FPS
  void start() {
    if (_running) return; // avoid double registration

    _running = true;
    SchedulerBinding.instance.addTimingsCallback(_onTimings);
  }

  /// Stop measuring FPS and remove the global callback
  void stop() {
    if (!_running) return;

    SchedulerBinding.instance.removeTimingsCallback(_onTimings);
    _running = false;
    _frameCount = 0;
    _elapsedMs = 0;
    fps = 0;
  }

  /// Internal callback fired for every frame timing
  void _onTimings(List<FrameTiming> timings) {
    if (!_running) {
      return;
    }

    for (final t in timings) {
      _frameCount++;
      _elapsedMs += t.totalSpan.inMicroseconds / 1000.0;
    }

    // Update about 4 times per second
    if (_elapsedMs >= 250) {
      fps = _frameCount / (_elapsedMs / 1000.0);

      if (kIsWeb) {
        web.document.title = "Hex Map — ${fps.toStringAsFixed(1)} FPS";
      }

      _frameCount = 0;
      _elapsedMs = 0;
    }
  }
}
void main() { 
    WidgetsFlutterBinding.ensureInitialized(); 
    FpsCounter().start(); // 👈 start measuring FPS 
    runApp( Background( child: GameWidget(game: TiledGame()), 
    ), 
  ); 
}

That puts the FrameRate in the caption. My 40 x 40 hex frame rate was between 6 and 10 FPS,

The Tiled program displayed a 30 x 30 hex grid at just between 250 and 400 FPS! A clear and deserved winner.

Thanks to suggestions in the Reddit CSharp subreddit (you can view the entire thread here), I fixed the missing file issue and SkiaSharp is now happily outputting graphics on the VPS.  I’m referring to the More Programming Joys blog entry I posted yesterday.

There were two things that were needed to fix it.

1. Add a package to the solution. This was the SkiaSharp.NativeAssets.Linux package and I used Nuget to add it to my Windows solution. If you haven’t used Nuget, it’s a great package manager and makes it very easy to add packages.
2. On the Visual Studio Publish page, I needed to change the Target Runtime to linux-x64. That’s the dialog above. When I clicked the Publish it put all the files including the library that was missing (libSkiaSharp.so) into the Target location and once uploaded it worked.

So I’ve been doing some .NET programming. First on Windows because I can debug it there then “Publish it” which puts all the files (compiled in release) needed, including any dlls into one folder and upload it to a VPS using WinSCP. I’ve also got a terminal session connected by Putty. I use Serilog for logging and SkiaSharp for graphics.

First bug was a missing file but it was a stupid error on my part. I had the file in a path under the home folder and had used ~ in the file’s path. You can use ~ in Bash- it means your home folder, but not in a file path in an application. Putting in the full path fixed the bug. D’oh.

Because it’s .NET (6) that I’m using, you don’t get configuration stuff the same as you did with .NET Framework. I store some config information in a file and define the path with these lines of code which work on both Linux and Windows.

 bool IsWindows => RuntimeInformation.IsOSPlatform(OSPlatform.Windows);
 var appSettingsFilePath = IsWindows ? @"c:\turfwar\twConfig.json" : "/home/user/turfwar/twConfig.json";

I like Serilog ( with project on Github at ). Nice and simple logging but flexible enough. As this application is a command line app run whenever, it’s easier to view the logs afterwards.

Why use SkiaSharp?

I was quite happy to use System.Drawing but according to this, There are issues with libgdiplus. So I thought I’d try SkiaSharp as I’m doing stuff with Flutter and Skia is the library that underpins that. This is what it takes to create a 100 x100 grey coloured Bitmap in SkiaSharp, add yellow dots and save it to disk as a .jpg. That’s what you see up above.

        internal void SaveBitMap(int id, string filename, Gang gang)
        {
            var info = new SKImageInfo(100, 100);
            using var surface = SKSurface.Create(info);
            SKCanvas myCanvas = surface.Canvas;

            // clear the canvas / fill with white
            myCanvas.DrawColor(new SKColor(0x99, 0x99, 0x99));

            // draw the dots, one for each block
            foreach (var block in Blocks)
            {
                if (block.Owner == id)
                {
                    myCanvas.DrawPoint(block.X*5/2, block.Y*5/2, SKColors.Yellow);
                }
            }

            // Now save to filename
            var mainCanvasImage = surface.Snapshot();
            var TempTIFbitmap1 = SKBitmap.Decode(mainCanvasImage.Encode());
            using (var image = SKImage.FromBitmap(TempTIFbitmap1))
            using (var data = image.Encode(SKEncodedImageFormat.Jpeg, 100))
            {
                // save the data to a stream
                using (var stream = File.OpenWrite(filename))
                {
                    data.SaveTo(stream);
                }
            }
        }

It works fine on Windows but on Linux, (Ubuntu 20.04) I hit bug #2. “System.TypeInitializationException: The type initializer for ‘SkiaSharp.SKImageInfo’ threw an exception.”. And that’s where I am at the moment.  This is similar.  I’ll keep you informed.

I’ve bought graphics and they do up to a point- e.g. kenney.nl is very good. But sometimes you need something a bit better or that’s not covered by that library.

Now one of the things I’ve done is use low costs artists from sites like Fivesquid.com and fiverr.com. Many of these artists are very good but live in countries where things are a lot cheaper than here in the West. Exploitation? Maybe, but they are happy to do the work and it saves me a fortune. What might cost me a couple of hundred pounds here in the UK can be done for say £20.

But I’ve found when dealing with them that you can’t take anything for granted. You have to have a bit of patience and explain everything including your expectations. And make sure you nail the price down exactly. I had arranged everything with one to do 35 small graphics and he wanted £35 for each graphic. Despite his advert saying 5 graphics for £10!

So I’ve found, you need to specify file format (.png or .jpg), layout- single files or in a sheet in a grid. Also fivesquid have a thing where when the order is delivered, you have three days to mark it complete or asks for changes. One artist said it was complete but hadn’t quite got it ready and the three day period expired before I’d received anything. So I could hardly accept nothing. It was though a genuine mistake on the part of the artist and I did get the graphics eventually.

These are from game-icons.net and are 512 x 512 pixels two colour icons and completely free to use so long as you give credit and include a copy of the licence or a link to it. There are over 4,000 but you can download a subset if you don’t want the lot. The download file zip file size for all of them as .png is only 33 MB.

Subsets include Animal (182),  Building & Place (181), Weapon (172), Symbol & Emblem (171),  Body (158), Arrow & Spear (146), GUI (140), Spike, Slash & Crack (138), Head & Face (126), Blade, Sword & Knife (126), Food (125), Liquid (122)Creature & Monster (119), Tool (117) and Board & Card (116).

What’s nice is you can have them as .svg (vector) or .png and have black on white or white on black.

They may look small when shown here but each is 512 x 512 pixels which is a lot.

If you remember tixy.land that I mentioned back in November last year, here is another website that lets you control a visualisation. In this case, tileflip.xyz lets you create a single function and applies it to every square on a board. You can control how many squares the board has and how often they are updated through a pair of sliders. You can pause the animation and toggle squares by clicking on them in the mouse. One of the early examples runs Conway’s Life and has a really short function.

The functions can be quite complicated (it’s JavaScript) as this example shows which moves a ball around the screen while changing colours.

The ctx (short for context) object has various properties and functions that you can call on it. For example ctx.resolution is how many squares there are on the board and this page lists all the properties and functions.

function rule(ctx){
  
  ctx.color = ctx.floatToColor(10/ctx.t)
  
  let r = Math.min(ctx.t**2/10, ctx.resolution/4);
  let cx = ctx.t*2%(2*ctx.resolution+1);
  let cy = ctx.t*3%(2*ctx.resolution+1);

  
  if(cx >= ctx.resolution+1){
    cx = 2*ctx.resolution - cx;
  }
  
  if(cy >= ctx.resolution){
    cy = 2*ctx.resolution - cy;
  }
  
  cx = cx/(ctx.resolution)*(ctx.resolution-2*r+1)
  cx += r - 1;
  
  cy = cy/(ctx.resolution)*(ctx.resolution-2*r+1)
  cy += r - 1;
  
  let toReturn = inCircle(cx, cy, ctx.x, ctx.y, r);
  
  if(!toReturn){
    ctx.color = 'black'
    ctx.invert = true;
  }
  
  return toReturn;
}

function inCircle(cx, cy, x, y, r){
  return (cx-x)**2 + (cy-y)**2 < r**2 ? 1 : 0
}

JavaScript is like C in many ways and while not the main purpose of LearnCGames.com, websites like this are an inspiration to games creators. My other interest is C# and I’m currently learning about Blazor a technology that lets you create webpages in C# using WebAssembly so it’s quite possible that things like this could be done in Blazor.

But it’s fun to look at the different example functions and you can also download the images as gifs via a link at the bottom of the page,

Tilengine is an open source, cross-platform 2D graphics engine in C for creating classic/retro games with tile maps, sprites and palettes. It’s intended use is for developing 2D games of old.

Written in C99, it can be used on Windows (32/64), Linux PC(32/64), Mac OS X and Raspberry Pi. Internally it uses some SDL2 libraries. There are bindings for other programming languages as well as native support for C/C++.

You’d use this for parallax effects using sprites over background layers. It makes it easier than coding yourself. In particular sprite animation is excellent with pixel perfect collision detection and 17 different functions for manipulating them. Rather than roll my own in my Asteroids game I could have used this.

The other documentation is a little spare with placeholders, but I imagine you can work it out from the header files and samples.

The final game will use graphics but those graphics will be based on characters, so I’ve started off by drawing a room or two using the provided extended ASCII characters.

Here for example is an 8 x 8 cell room with four inner columns and four possible doors. I’ve used spaces in one and full stops in the other to see which looks better. I think I prefer full stops as you can count them but it’s not a big difference.

╔════╬═╗  ╔════╬═╗  /----\
║      ║  ║......║  |....|
║ ╬  ╬ ║  ║.╬..╬.║  #....|
╬      ╬  ╬......╬  |....|
║      ║  ║......║  \.||./
║ ╬  ╬ ║  ║.╬..╬.║
║      ║  ║......║
╚═╬════╝  ╚═╬════╝

The 3rd room is smaller and roughly octagonal though not as nice looking. I used the normal ASCII characters for that with the two slashes ( / and \ ) as well as # for a vertical wall door and two | for a double door. Here’s a corridor that goes round two corners and then meets another one.

═══     ╔════╦══
   ╚════╝    ║

There are plenty of ASCII character charts and I used this one which describes all the graphical chars making it easy, albeit a bit tedious to draw these in any text editor. There are single box characters as well as the double ones I’ve used. The ╬ character has proved very versatile as it provides not only columns but doors in both horizontal and vertical walls.

It’s noticeable that despite this room being square, it looks rectangular thanks to characters being taller than wide. Also in WordPress, the gaps between lines are more noticeable as gaps whereas in Notepad++ (the editor I used to create these) as shown in the image at the top, these gaps are absent.

I did a quick search for free rogue graphics yesterday and found an astonishing quantity of rogue type graphics in sizes varying from 8 x 8 (pixels), 10 x 10, 16 x 16, 32 x 32 and 64 x 64. I haven’t quantified these sizes exactly but the 16 x 16 ones seems to be the most frequent and so that’s what I’ll pick.  This post on Reddit provided links to many free (and some paid), most on the OpenGameArt website.

As a programmer sorting out graphics, it can be a very time consuming thing to do, so expect to spend a lot of time on it. You’ve got to satisfy yourself that you have enough graphics.  Not just for terrain (e.g. dungeons and cities) but also for monsters. There are artists who will draw you more on sites like fiverr.com but that’s all cost.  If you can draw or recolour then that’s a major plus.

Recolouring is another problem. With game graphics, you ideally want them all from the same source or else you’ll have the problem of mismatched sets. Nothing jars visually more than mixing graphics with different palettes. I’m no artist but even I can tell when something works and when it doesn’t.

Also there’s the question of perspective. The Dawnlike graphics are a sort of mix of from above but with a slant so you see front walls. Whereas something like the Kenney rogue game pack is front on. So you have to decide which you are going to go with.

My ideal game would be one of my favourites- Ultima 3. This is probably because its the only Ultima that I have played right through to the end and finished it! It was also the first. It took me about three months of one hour’s play a night. And I took copious notes. But as you can see its a bit more than a rouge like game! Those screenshots are from a CBM-64 which had a 320 x 200 screen (the image below is a composite of nine screens) borrowed from https://imgur.com/gallery/UvrzmBt. You can of course get the PC version sof Ultima III (and I and II) from gog.com.  (Note these are straight links not affiate. I receive nothing from them). I did buy Ultima I-VI from gog.com.

In my ebook I talked about professional games using a resource manager. Games like Quake 2 use a .pak file which stores all images, levels etc. The first stage towards writing a resource manager is to have some way of compressing files. Most graphic file formats such as jpg, gif and png are already compressed. But other files like level files aren’t, typically text and so will compress well.

So a resource manager if it understands the type of resources it is handling can compress or not according to the file type. It will bundle everything into one archive file, and maintain a simple directory indicating where in the archive file each resource file starts, length and type.

However there is the issue of security. The idea of the resource manager is to protect your assets. I have two old games from the Dos days (bought recently on gog.com and playable in Windows)  and a quick glance in the games folder shows some interesting files! That’s one of them shown above. It’s parts of a castle. There are hundreds of graphic files just lying there in the open. They are in an older graphic format (.pcx) but SDL2_image can read those quite happily.

So not only should a resource manager protect your files, it should obscure them so anyone inspecting them with a binary file editor can’t easily spot them.

That brings me to the 2nd point about security. Your program has to be able to use the resources directly from the resource manager rather than say unpack them into a folder on disk. According to this stackexchange answer, SDL2 can do that, so something for me to experiment with.

So I’m starting on a simple and easy to use resource manager. It’ll be implemented as a simple library that provides access to images, text files etc. all loaded from a resource file. And there will be a standalone utility to add, delete and list files in that resource file.