Visual representation of Connect Four

LxKiss

Greetings!

I would like to create a connect four type game, but I've came across some difficulties.

I've started using QT about 8 weeks ago, and so far I've only made basic widgets, such as a tic-tac-toe, and a puzzle game, which were relying on mostly QPushButtons and layouts.

My current issue is, that I'm already done with the "engine" of the connect four game, but I would like to use images, or painting to visualize the game, instead of buttons.

So far I've created an image of a single grid piece, which is just a rectangle with a circle within, and I've successfully put them in a QGridLayout, and even adjusted the spacings, so it resembles the game quite well.

However, my plan is to animate the tokens that are falling in place of the empty cells, but I'm not sure how to do it correctly.
Is there a way to use the painting class to paint under the grid image, where it's transparent within the circles. or should I just ditch the idea of using image resources, and draw the whole thing as it is?
But even then, is there a way to manipulate "layers" so that they can overlap, but show through eachother in certain parts?

Here is an example, of what I'm trying to achieve:
https://github.com/chriskempson/cpp-connect-four

Thank you very much for your replies in advance. :)

mrjj

Hi
Check out Graphics View framework
http://doc.qt.io/qt-5/graphicsview.html

http://doc.qt.io/qt-5/qtwidgets-graphicsview-collidingmice-example.html

Should be fast enough to animate the "gems" dropping.

LxKiss

Thank you for your reply!

To be honest, I'm quite intimidated by the Graphics View framework.

Am I supposed to paint certain resources with like paintevent, then use the graphics framework to manipulate them, or do I need to do everything with the framework?

mrjj

@LxKiss
hi
it would be via framework
often via a custom class to represent say the "gems" and the board.
Basically you subclass one othe the Item Types and use the paint
to draw. much like paintevent for widgets.

class Mouse : public QGraphicsItem {
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option,
QWidget *widget) override;
...

This said.
Did you look into QML.
Its very fast and would have no issue animating the falling gems.

LxKiss

@mrjj

So basically all I'd have to do is create the board by duplicating a single piece of drawing of the grid n×m times, then adjust their coordinates to fill the window, then create two different colored elipses, then whenever I click on a certain region of the scene, defined by the columns of the grid, then play the animation of the gems falling in place, while adjusting the model of the game accordingly?

Sounds easy on paper, so I'll definitely give it a go down the line, but for now I will probably stick to the caveman style of creating it with buttons, because I really need to dive deeper into the whole painting aspect and the Graphics View framework, let alone animating it.

Still, thank you very much for your help!

If you don't mind, I will not close this post yet, because I might need to check back for further questions, and I would not like to flood the forums with them.

mrjj

@LxKiss
Hi
Well its able to handle huge object amounts of objects and i know people made games with it
so hence i suggested it. So yes you would have a data structure with your items and
would manipulate their location as they are being dropped.

btw i came across this made in QML
https://github.com/csgib/AngryMom
Didnt try it yet though.

LxKiss

Hey there once again.

So I've came across this class called QPropertyAnimation, which in my mind would be perfect, because all I want to achieve is just to make the afformentioned gems fall vertically down, then maybe throw in a bounce effect once they react their end destination.

However, my game screams for a grid layout, but I cannot make animations work inside a layout.

I've created a QLabel, and I've set it's pixmap to my desired image, but I cannot get it to work. Is it due to it being within a layout, or am I missing out something?

mrjj

@LxKiss
Hi
Any widget inside a layout cannot be moved at will. Layout controls location/size
So nope, QPropertyAnimation wont work on widgets in a layout.
But calculating the grid by hand is not super complicated.?

LxKiss

Obviously not, but how would I treat the main window of the application as a "canvas" for the images?

For instance, if I declare two labels with pixmaps assigned to them, then invoke their show method, they show up in two different windows, as they should.

So without layouts, how do I get around that?

mrjj

@LxKiss
Hi
When you create the QLabel simply assign centralWidget() as parent
and they will be inside the center of mainwindow.
like
new QLabel("hellO", centralWidget());

You could also make a custom widget to encapsulate the handling of the QLabels and use
that on on mainwindow.
How do you handling the clicking on the Q Labels?

LxKiss

Well, I've thought about handling mouse events, but for now I'll just place as many buttons as there are columns above the board, in a layout.

As far as using centralWidget() goes, I have never used the mainwindow class generated by default, I've always created new widgets, then used them in the main.cpp by creating a new instance, then using the show function, so how would I make it available in a new class, as you've suggested?

mrjj

@LxKiss
You mean how to create a new subclass Like GemBoard and let it handle the labels?

LxKiss

No, I mean I was unable to access centralWidget() in my own class.

mrjj

@LxKiss
Oh, but if are QWidgets, they dont have centralWidget() then simply use the
widget as parent.
Like
(in main)
Mywidget wig;
QLabel *lab = new QLabel("hellO", &wig);
(Lab will then be inside Mywidget )