Category: Graphics

A fabulous collection of game icons

A fabulous collection of game icons

Building icons
Building icons from game-icons.net

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.

 

Interesting Visualisation – like tixy.land

Interesting Visualisation – like tixy.land

Tileflip visualisationIf 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 – for creating Retro games

Tilengine – for creating Retro games

TileengineTilengine 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.

Drawing  dungeon rooms using characters

Drawing dungeon rooms using characters

Some roguelike roomsThe 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.

So I’ve decided- graphics it is for the roguelike

So I’ve decided- graphics it is for the roguelike

Dawnlike on OpenGameart
Dawnlike on OpenGameArt.org

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.

Ultima 3 screens

Another mini project – a resource manager

Another mini project – a resource manager

Castle imageIn 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.

 

I’m tempted to go Nuklear

I’m tempted to go Nuklear

Gallery Image of GUI developed with NuklearNuklear is a library that is a single-header ANSI C immediate mode cross-platform GUI toolkit. It lets you develop stylish and beautiful GUIs for your applications. It’s written in C but any programming language that can work with C such as C++ or Python can also use it.

Importantly, it also includes documentation so you can make use of it. The best software in the world is useless if you can’t use it and GUI toolkits tend to be a little bit more complicated than say a text editor.  This is nicely written, and though it’s just one document, it’s a long one!

It’s one thing to write a simple GUI as I did in that Empire game but mine was only 600 lines long and pretty rough looking. Nuklear is 18,000 lines long ie 30x as big.  If there’s one thing I’ve found from my software development experience, it’s that a nice looking piece of software will get away with having more bugs than something that looks not as nice.