wader / gtktetris

Simple GTK tetris game
https://github.com/wader/gtktetris
MIT License
5 stars 6 forks source link

Use vector graphics for blocks to support any scale #12

Open wader opened 3 years ago

wader commented 3 years ago

I remember having some idea about getting rid of GDK_SCALE and instead just scale the block images maybe using SVG etc.

I can see if i can brush off my inkscape skills and draw some scaleable blocks SVGs

wdlkmpx commented 3 years ago

I think it can also be done by drawing blocks with cairo, and store the drawings in pixbufs.

That way is possible to randomize the colors, textures and stuff, but cairo is about math acrobatics.

There might be some examples out there, I understand very little of cairo, but with examples, I can integrate some code, I know how GTK interacts with Cairo, so the only missing part is some cairo examples.

It's possible to draw white horizontal and vertical lines in the game_area and the next_block_area to complement the black background.

A cairo guru is required.

wdlkmpx commented 3 years ago

Practicing... grid1

Stuff happens... grid2

wdlkmpx commented 3 years ago

After a few hours I didn't find an example but I did learn a few things and was able to produce something usable

These blocks are drawn by Cairo: tetris_cairo

That makes 2 things possible: ability to specify any block size, and with some tweaks, ability to display a grid tetris_cairo2

It works, but when I tried to fix the logic I broke it, so it was kind of an accident that it worked well with and without the grid. But with the grid on, I see that it needs some more tweaks.

wader commented 3 years ago

Nice! have you thought about making it possible to resize the window to any size?

wdlkmpx commented 3 years ago

When the block size changes, the application must be restarted, and the window size will change as well, because the game_area is created using the block size.

I'll apply the changes I've been making, the blocks look primitive, but doing everything with cairo has its advantages:

1) ability to change block size 2) ability to display a grid 3) ability to randomize block colors a bit

I'll implement 1) and 2) as options in the Settings dialog, and a very basic 3).

wdlkmpx commented 3 years ago

Too much complexity for my little brain, but I'm plowing away.

I fixed the logic error I was talking about which caused graphical glitches, now there's no need to apply some convoluted hacks.

Currently, the blocks are not created and stored in a special object or surface, they are drawn directly in the game area.

   if (color == 0) { // black
      cairo_destroy (cr);
      return;
   }

   // now draw a line around the block
   // but the line must remain (completely) inside the block
   // to avoid graphical glitches.
   cairo_set_source_rgb (cr, 0.2, 0.2, 0.2); // dark gray
   cairo_set_line_width (cr, 1);

   cairo_rectangle (cr, dest_x + 1, dest_y + 1, width - 2,  height - 2);
   cairo_stroke (cr);

This is the result: Screenshot

But I'm yet to see how it works with the Grid and the changes I need to make for the Grid to look nice.

wdlkmpx commented 3 years ago

Wrong screenshot again.

Now does this look good enough? Screenshot(7)

wdlkmpx commented 3 years ago

Something to think about: https://bugs.eclipse.org/bugs/show_bug.cgi?id=507020

There is a difference between Xorg and Wayland, like two different operating systems. I've only used Xorg.

Some interesting comments:

Does GDK_SCALE=2 no longer work? for me GDK_SCALE=2 is inconsistent.

The way we scale on GTK is by drawing on surfaces. Cairo surface has an attribute device_scale. This holds the scale factor information at surface creation time. Surface holds the image which needs to be drawn.