Fast quick and dirty screen test

Currently I am testing some 2d game-mechanics. The mechanics can be ok, but they have to pixel-precise match the animations images defs etc.
Does anyone know how I can quickly setup a test-environment to visually check frame by frame what happens? Just blitting an RGBA array.
(I am working on windows)

The quickest and dirtyiest way would be to output a BMP file. It’s pretty much just a simple header and then the data.
If you want to do it in your own program, you can just open a window and call the normal win32 rendering functions. If I remember correctly, you simply start the drawing with BeginPaint, then just copy the data with StretchDIBits, then EndPaint.
You could also go with a simple GUI library. ImGUI is pretty cool and simple, but there might some that are even simpler.

I know StretchDiBits. It does not need a handle. The problem is the window itself and a keyboard. I’ll check out if there is some raw setup for windows.
And have a look at lmGUI

If you want to stay in raw windows you can @cInclude windows.h or use a library like GitHub - marlersoft/zigwin32: Zig bindings for Win32 generated by https://github.com/marlersoft/zigwin32gen .
Examples are here: zigwin32gen/examples/helloworld-window.zig at main · marlersoft/zigwin32gen · GitHub
You can still choose how much you want to use zig-idioms to create the window, but I pretty much just wrote it in C-style copying the msdn examples.

Aha. It is just for visual testing. Will have a look there as well…

Then I have to agree with Lucas, just write a bpm or ppm to a file and view it with an image viewer like irfanview on windows.

That will create thousands of 1 MB bitmaps. And it is not possible to really ‘view’ the transitions.

I think you can go quick and dirty with SDL2, just blitting RGBA texture is a matter of few lines of code

You also could use raylib:

Here is a simple example code you could start with and adapt to your needs:

var x: i32 = 0;
var y: i32 = 0;

const image = ray.GenImageChecked(256, 256, 16, 16, ray.WHITE, ray.PINK);
defer ray.UnloadImage(image);

const texture = ray.LoadTextureFromImage(image);
defer ray.UnloadTexture(texture);
ray.SetTextureFilter(texture, ray.TEXTURE_FILTER_POINT); // for crisp pixel rendering

// to update the texture after the image was changed / updated
// ray.UpdateTexture(texture, image.data);

// see the cheatsheet for more infos:
// https://www.raylib.com/cheatsheet/cheatsheet.html
// and examples for how to do specific things:
// https://www.raylib.com/examples.html

while (!ray.WindowShouldClose()) {
    if (ray.IsKeyDown(ray.KEY_LEFT)) x -= 1;
    if (ray.IsKeyDown(ray.KEY_RIGHT)) x += 1;
    if (ray.IsKeyDown(ray.KEY_UP)) y -= 1;
    if (ray.IsKeyDown(ray.KEY_DOWN)) y += 1;

    {
        ray.BeginDrawing();
        defer ray.EndDrawing();

        ray.ClearBackground(ray.BLACK);

        ray.DrawTexture(texture, x, y, ray.WHITE);
    }
}

If you clone the repo above and replace the main loop with the example you would get something like this:

If you want to use a ui you could try the raygui branch.

2 Likes