Enlarge/Zoom a TImage

[gof6yogy]

Hey there
I have recently finished programming my little snake game, but the field is to small. It is 100x100 pixels but each part of the snake takes one pixel and it is really hard to see something. So I wanted to zoom into the TImage so that every snake-pixel equals 3x3 screen-pixels
I set the options
AutoSize:=false;
Center, Proportional and Stretch:=true;
and used the code:

Code: [Select]

newheight:=(Form1.Image1.Height*3);
 newwidth:=(Form1.Image1.Width*3);
 Form1.Image1.Height:=newheight;
 Form1.Image1.Width:=newwidth;In other programms this worked perfectly, but it doesn't want on this one 
It just puts out the regular game field with black squares.
Thanks to everyone who can help me
Greetings
gof6yogy

[derek.john.evans]

I'm unsure how you have your code designed, but I would get away from using TImage as your backbuffer.

Im guessing you have a TBitmap somewhere? In TForm.OnPaint, use something like:

Code: [Select]

Canvas.StretchDraw(Bounds(0, 0, FBitmap.Width * 3, FBitmap.Height * 3), FBitmap); 


[gof6yogy]

Well, first thanks for the reply
I am not that sure what you mean... The TImage is used to display the movement of the snake. Every pixel/position in an array that is 1 (=snake) is painted black and every pixel/position in an array that is 2 (=food) is painted red.
A TBitmap is not used anywhere (I am not that far into Lazarus :/ )

[derek.john.evans]

Mmm, a game without using TBitmap? Are you sure youre not using TImage.Picture.Bitmap? How else are you drawing to the TImage? Or, do you have multiple controls, which you are moving?

Either way, the most common approach is to create a TBitmap for your backbuffer. Render your game in TBitmap.Canvas on every TTimer.OnTimer event, and draw that to your display. eg: TForm.

That way will upscale. ie: If you find the refresh rate is low, you can swap to a TBGRABitmap, and/or use OpenGL to draw the backbuffer.

Thats the best advice I can give.

[gof6yogy]

Errrrrr....
I am drawing using two For-loops going through an array checking which number is in there (as I mentioned before). The I use Form1.Image1.Canvas.Pixels[x,y]:=TColor;
To the rest you were writing I can totally say nothing because I have nearly understand nothing :/
As I said, I am not that into Lazarus...
Thanks though for the reply
gof6yogy

[derek.john.evans]

Without actually knowing it, you _are_ writing to a TBitmap. TImage.Canvas creates a TBitmap the same size as the TImage and returns the TBitmap.Canvas.

So, Im guessing you are rendering to TImage.Canvas, after resizing it, so, you wont get a small bitmap, zoomed to the larger size.

If I write this, I get a red line of small pixels.

Code: [Select]

  Image1.Width := 500;
  Image1.Height := 500;
  Image1.Canvas.Pen.Color := clRed;
  Image1.Canvas.Line(0, 0, 500, 500); 

But, if I write this, I get a zoomed red line (assuming TImage.Canvas has not been accessed, and the original TImage size is smaller than 500x500)

Code: [Select]

  Image1.Canvas.Pen.Color := clRed;
  Image1.Canvas.Line(0, 0, 500, 500); 
  Image1.Width := 500;
  Image1.Height := 500;

Solution:
Manually set the size of your backbuffer (TBitmap).

Code: [Select]

Image1.Picture.Bitmap.SetSize(320, 200);   


[gof6yogy]

So I would have to write

Image1.Picture.Bitmap.SetSize(320, 200);

each time I change something in the TImage.Canvas? I tried that out, but it won't work
Do I have to set special properties?
And what do you mean with

assuming TImage.Canvas has not been accessed

Thanks again and sorry for asking that much 
gof6yogy

[derek.john.evans]

You only need Image1.Picture.Bitmap.SetSize(320, 200);  once in TForm.OnCreate().

After that the internal bitmap will remain that size even if you enlarge the TImage.

RE: "assuming TImage.Canvas has not been accessed".

On first access to TImage.Canvas, a bitmap is created of the same size as the TImage. (The LCL code is easy to navigate).

[gof6yogy]

Hm... I tried that out, but it will still not work. Are there special properties I need to set? Sorry but I don't get it :/
Thanks again
gof6yogy

[derek.john.evans]

Start a new project. Place a TImage on the TForm. Put this code into TForm.OnCreate.

Code: [Select]

  Image1.Picture.Bitmap.SetSize(16, 16);
  Image1.Canvas.Pen.Color := clRed;
  Image1.Canvas.Line(0, 0, 16, 16);
  Image1.Stretch := True;
  Image1.Center := True;
  Image1.Align := alClient; 


[gof6yogy]

  Thanks alot!! Finally it worked!! Now I can play my own snake
Greetings
gof6yogy

[gof6yogy]

Well to be honest, it is not as good as I thought... The game is just in the top left corner and the way you mentioned colors the rest of my form black. Are there ways to place the field in the center and remove the black?
Thanks again for every help
Greetings
gof6yogy

[derek.john.evans]

Do you mean centering the TImage?

If you setup a backbuffer (TImage) using something like:

Code: [Select]

  Image1.Picture.Bitmap.SetSize(100, 80);
  Image1.Stretch := True;   

Then in TForm.OnResize just use something like this to center it given a zoom value:

Code: [Select]

procedure TForm1.FormResize(Sender: TObject);
var
  LZoom: Integer;
begin
  LZoom := 2;
  Image1.SetBounds(
    (ClientWidth - Image1.Picture.Width * LZoom) div 2,
    (ClientHeight - Image1.Picture.Height * LZoom) div 2,
    Image1.Picture.Width * LZoom,
    Image1.Picture.Height * LZoom);
end;   


[gof6yogy]

FINALLY!!!! Thanks alot! Not it is finally like I hoped it would be.
Again: Thanks for the great help! Now snake is in its final form
Greetings
gof6yogy