8 Puzzle for Linux

[Jonax]

Update:

New mini-game project is started with dual approach.
Background decoration as (huge) bitmap file. Currently linux allows 300 % scaling for the happy owners of huge monitors. So the image better be big enough to handle that.

In the new project the executable increases from previously ~3 MB to ~11 MB. Still reasonable but there may also be a gziped version for download.
What do you guys say? downloading 11 MB is no big deal nowadays? Compressing the file may be overkill?

Then for this project there is also the scalable vector graphics approach.
I try a home-made version using a series of

image.canvas.line(x1,y1,x2,y2);

commands.

The current result is shown below




(image may be removed from the server at some later time)

Quite blocky but it scales decently and I start to like it.
Might even keep it. We will see. The ascii-art will have to wait.

The actual game?

Can you guess the theme from the presented "art"?

As often it's a variation of an old and well known concept, with some Jonax touch added.

Hopefully it can be presented any week now. At least if I make do with the above "art" and solve a few remaining bullet points.

[SilverWarior]

What do you guys say? downloading 11 MB is no big deal nowadays? Compressing the file may be overkill?

11 MB is no big deal today. Especially if you take into account that may web-pages can exceed 5 MB od downloadable data per page.
As for tying to reduce size of your executable that has increased due to including a large image in it. You can do a lot by using appropriate image format. For instance:
If your image has low number of colors then using PNG image format would reduce the data size the most due the way PNG image compression works.
If your image has lots of colors like in a photo then using JPEG might be better idea since JPEG compression is developed to better handle this kind of images.
You should avoid storing images in plain BMP format since BMP offers no compression.

I try a home-made version using a series of

image.canvas.line(x1,y1,x2,y2);

You should check TCanvas.Polyline (https://lazarus-ccr.sourceforge.io/d....polyline.html) which allows you to draw a line across a an array of points. It will probably make your life a bit easier
And of you want less "linear" results you may also want to check TCanvas.PolyBezier (https://lazarus-ccr.sourceforge.io/d...olybezier.html) which allows drawing of nice curved lines.

[Jonax]

Thanks for input and suggestions . I'll probably skip the zipping. Indeed the PNG and JPG formats are great. I think in this case I had some problem making it work with PNG, while a BMP-file behaved well albeit being huge. Anyway. First priority is to create something executable and playable at all.

I'll have a look at the polyline and bezier suggestions.
Indeed my approach while getting the job done started to get cumbersome, as more points were added . In fact I spent 100 lines of code just to make that image. A polyline with array could no doubt simplify things. And more curvy lines can add some allure.

There's still some polishing and adding of functionality to do so nothing can be presented yet. Hopefully a new thread can be started for the new project in the coming week(s).

[SilverWarior]

In fact I spent 100 lines of code just to make that image.

100 lines of code for that
What are you doing to need 100 lines for that. I can draw that using 33 lines of code
I hope you are not setting brush properties (color, thickness, brus style) and starting position for each line segment.

How I draw teh same image as you did

procedure TForm1.DrawNormal;begin
  //Fill background
  Image1.Canvas.Brush.Style := TBrushStyle.bsSolid;
  Image1.Canvas.Brush.Color := clBlack;
  Image1.Canvas.FillRect(Image1.Canvas.ClipRect);


  //Set pen properties
  Image1.Canvas.Pen.Style := TPenStyle.psSolid;
  Image1.Canvas.Pen.Color := clWhite;
  Image1.Canvas.Pen.Width := 2;


  //Move to starting position
  Image1.Canvas.MoveTo(16,144);


  //Draw lines to next points
  Image1.Canvas.LineTo(16,128);
  Image1.Canvas.LineTo(32,128);
  Image1.Canvas.LineTo(16,80);
  Image1.Canvas.LineTo(16,32);
  Image1.Canvas.LineTo(32,16);
  Image1.Canvas.LineTo(48,16);
  Image1.Canvas.LineTo(32,32);
  Image1.Canvas.LineTo(80,32);
  Image1.Canvas.LineTo(128,48);
  Image1.Canvas.LineTo(128,80);
  Image1.Canvas.LineTo(80,64);
  Image1.Canvas.LineTo(80,80);
  Image1.Canvas.LineTo(128,96);
  Image1.Canvas.LineTo(128,128);
  Image1.Canvas.LineTo(144,128);
  Image1.Canvas.LineTo(144,144);
  Image1.Canvas.LineTo(16,144);
end;

After looking more closely at positional values I noticed that all of them are multiple of 16 so I'm guessing 16 is your scalability factor for this image.So I then wrote a code that can draw your image using different scalability factors and thus allow scaling

procedure TForm1.DrawScaled(ScaleSize: Integer);
begin
  //Fill background
  Image2.Canvas.Brush.Style := TBrushStyle.bsSolid;
  Image2.Canvas.Brush.Color := clBlack;
  Image2.Canvas.FillRect(Image1.Canvas.ClipRect);


  //Set pen properties
  Image2.Canvas.Pen.Style := TPenStyle.psSolid;
  Image2.Canvas.Pen.Color := clWhite;
  Image2.Canvas.Pen.Width := 2;


  //Move to starting position
  Image2.Canvas.MoveTo(1*ScaleSize,9*ScaleSize);


  //Draw lines to next points
  Image2.Canvas.LineTo(1*ScaleSize,8*ScaleSize);
  Image2.Canvas.LineTo(2*ScaleSize,8*ScaleSize);
  Image2.Canvas.LineTo(1*ScaleSize,5*ScaleSize);
  Image2.Canvas.LineTo(1*ScaleSize,2*ScaleSize);
  Image2.Canvas.LineTo(2*ScaleSize,1*ScaleSize);
  Image2.Canvas.LineTo(3*ScaleSize,1*ScaleSize);
  Image2.Canvas.LineTo(2*ScaleSize,2*ScaleSize);
  Image2.Canvas.LineTo(5*ScaleSize,2*ScaleSize);
  Image2.Canvas.LineTo(8*ScaleSize,3*ScaleSize);
  Image2.Canvas.LineTo(8*ScaleSize,5*ScaleSize);
  Image2.Canvas.LineTo(5*ScaleSize,4*ScaleSize);
  Image2.Canvas.LineTo(5*ScaleSize,5*ScaleSize);
  Image2.Canvas.LineTo(8*ScaleSize,6*ScaleSize);
  Image2.Canvas.LineTo(8*ScaleSize,8*ScaleSize);
  Image2.Canvas.LineTo(9*ScaleSize,8*ScaleSize);
  Image2.Canvas.LineTo(9*ScaleSize,9*ScaleSize);
  Image2.Canvas.LineTo(1*ScaleSize,9*ScaleSize);
end;

PS: If you try to directly compile my code you may have to make slight changes where I set-up brush and pen style. Modern Delphi versions define many constants like Brush Style as sets instead of series of constants as it have been done in older versions of Delphi and is probably done in FPC. This then require slightly different code.

[Jonax]

No multiple setting of properties, just the setting of four coordinates per line segment and liberal use of newlines and comments.


Obviously your approach is more compact and easier to use. I'm pleased to confirm the Canvas.LineTo(x,y) command also works for Lazarus. So LineTo it will be.


Indeed that image has scalability factor 16.