Proof of Concept for a Gtk4 2D action game using only widgets

This is my proof of concept for a simple gtk4 2D action game using only available widgets and hosted on github.

Issues encountered:

  1. Keyboard input is not fluid. I am using the GtkEventControllerKey to process keyboard inputs but since it is meant for widgets the keyboard input is kind of lagging behind. And i can’t move and shoot at the same time while holding both the arrow key and the space bar for shooting. Is there a keyboard function that i can called on each frame to process the keyboard input just as it’s usually done in a game loop?

  2. How can i apply a tint effect on a GtkPicture?

  3. This one has nothing to do with the game but i was just testing rotation animation of a GtkPicture using gtk_fixed_set_child_transform. I noticed that the GtkPicture is rotated with its pivot being at the top left corner. Is there a way to rotate around the center of the picture or any specific point within the picture?

1 Like

That’s a pretty interesting idea, I have some suggestions, although I must admit I never thought to make a game with only GTK widgets!

  1. You can just store some booleans like: bool left_pressed, right_pressed; and then set it to true/false on key pressed/release event. Then in your game loop you would do an action based on those booleans. GTK will send you key repeat events but this method will account for that.

  2. I think you will have to subclass the widget and use gtk_snapshot_push_color_matrix or gtk_snapshot_push_blend. Or make it into a container widget with GtkBinLayout.

  3. You would have to first use gsk_transform_translate to translate by values equal to half the dimensions of the image, then call gsk_transform_rotate, then translate back by the negative of the dimensions/2.

Side note: you likely don’t want to use gtk_widget_add_tick_callback for your game’s physics loop, because that will tie the game loop to the refresh rate of the monitor, which could change. You’d usually want to have a fixed step rate and then for example do g_timeout_add(1000/60, ...) for roughly 60 steps/sec. For higher precision you would have to use the underlying platform (timerfd_create or similar). To do higher FPS rendering you could then use gtk_widget_add_tick_callback again, but only to interpolate the positions of the objects based on their velocity vectors.

2 Likes

Well, someone did.

There are some improvements needed, but he did a fantastic job.
I am going to post a video on my YouTube Channel with this news.

1 Like

Thanks for the feedback. For today i got only time to look into the rotation problem and your rotation solution totally works… :+1:

Your tip on the keyboard issue made me remember that the solution has already been implemented in the original code. I inadvertently deleted the codes while converting the keyboard processing from allegro to gtk4.

Have fixed the issue on github.

Now only remain the tint issue to look into :star_struck:

1 Like

Yes i think your solution to the tint issue would definitely work. :+1:

But since my goal is to use only available widgets without creating new ones, i will stop here. If i really need the tint effect then think i will just create another sprite with tint and do the animation with it like old times.

Am actually building a luajit ffi bindings to gtk4 and a much higher api to the gtk4. So no subclassing.

By the way have already translated the gtk4 game to the luajit version and it just works same as its C version. :grin:

Don’t forget to share the link to the video. Am curious to see how it runs on another computer as my laptop is 12 years old and could display only ONE icon :scream: in the fishbowl demo for gtk3 and near 170 icons for gtk4 after waiting more than 20minutes :sleeping: :thinking:

Well asuming your machine is much newer :stuck_out_tongue:

Are you allowing yourself to use CSS? For a limited form of tinting you could do something like:

.green {
    filter: sepia(100%) hue-rotate(90deg) saturate(400%) brightness(75%);
}

And then do gtk_widget_add_css_class(picture, "green").

2 Likes

OMG. The css tip really works and it also works for the luajit version. :star_struck: :+1:

I was feeling that css could be a solution but i just got started with gtk and have yet to start reading on gtk’s css.

Have added the tint effects in github. Now when the alien ships get hit, they are tinted red.

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.