Tag: graphics

How to create a big image from a number of smaller ones

How to create a big image from a number of smaller ones

Card DeckAfter the day before yesterday’s experiment showed that loading a single larger image on an Android phone is nearly three times faster than loading 52 smaller images, I decided to write a short utility program to read all the 52 individual card files and create one file with them laid out neatly in four rows of cards, one row per suite with each card running from Ace to King.

The individual card .png files were all in one folder with two letter filenames rank and suit in capitals like AS.png (Ace of spades), TH.png (Ten of Hearts and so on).

This 62 line C# program reads all 52 files into RAM in a two-dimension array cards (original name eh!) in the method LoadAllImages() then in BuildOneImage() it writes them out in the four rows into the bitmap allcards then saves them out as one .png format file.

C# makes doing this very easy. In C you would have to write your own file format handling code or use a library like libpng.

// Author D. Bolton Learncgames.com You are free to use and copy this program as you wish but please leave this line in.
using System;
using System.Drawing;
using System.Drawing.Imaging;

namespace mpics
{
    class Program
    {
        const int CardWidth = 100;
        const int CardHeight = 153;
        const string source = "your path here"; // Path to all 52 card files
        const string dest = "target file here"; // Path + filename for target .png file.
        const string suits = "HCDS";
        const string ranks = "A23456789TJQK";

        static Bitmap[,] cards = new Bitmap[13,4];
        static Bitmap allcards = new Bitmap(CardWidth * 13,CardHeight * 4);

        static void Main(string[] args)
        {
            LoadAllImages();
            BuildOneImage();
        }

        private static void BuildOneImage()
        {
            Console.WriteLine();
            var aty = 0.0f;
            using (Graphics g = Graphics.FromImage(allcards))
            {
                for (var y = 0; y < 4; y++)
                {
                    var atx = 0.0f;
                    for (int x = 0; x < 13; x++)
                    {
                        var r = new Rectangle((int)atx, (int)aty, CardWidth, CardHeight);
                        g.DrawImage(cards[x,y],r);
                        atx += CardWidth;
                    }
                    aty += CardHeight;
                }
            }
            allcards.Save(dest, ImageFormat.Png);
        }

        private static void LoadAllImages()
        {
            var i = 0;
            foreach (char c in suits)
            {
                var j = 0;
                foreach (char r in ranks)
                {
                    var s = source + r + c+".png";
                    cards[j++,i] = (Bitmap)Bitmap.FromFile(s);
                }
                i++;
            }
        }
    }
}

Don’t forget to set the source and dest path constants. This was compiled in Visual Studio 2019 and run on Windows 10. The only really important thing I found was using the Rectangle r in BuildOneImage(). If I used just atx and aty and didn’t specify the size of card then DrawImage() drew much smaller images into the bitmap. I’m not sure why as the card images when loaded from disk were 100 wide by 153 deep, the same as specified in the constants CardWidth and CardHeight.

The card images were originally downloaded from the American Contract Bridge League but were much bigger so I scaled them first to 100 x 153 pixels. There are many free playing card images on the web but these are one of the nicer sets.

A rather powerful C Graphics library

A rather powerful C Graphics library

Raylib libraryI’m not going to be departing from SDL2 any day soon, but if I were starting from scratch, I would seriously consider raylib.  It ticks many boxes!

  • Written in C(C99). Tick.
  • Cross platform including Raspberry Pi desktop. Tick.
  • Open source and liberal licensing tick.
  • Full 3D support with animated models. Tick.
  • Extensive Sound support. Tick.
  • Very open license that even allows static linking with closed software. Tick.
  • Lots of examples. Tick.

There’s even a set of open source games on GitHub. including several that you can play in your browser (HTML5). Documntation is in the form of a 36-page Wiki. I took a quick glance through there and was impressed with some of the features. For example, OpenGl can be used directly and not through X11 though that is also available.

Plus full marks for including struct sizes on the data structures page. That’s not something you often see, nor is instructions for configuring Visual Studio, Visual Studio Cocde, Codeblocks, Eclipse and Sublime Text. The cheat sheet (which you can also download as a pdf) gives an idea of the number of functions in Raylib. They cover five pages!

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.