Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Visual representation of Connect Four
Forum Updated to NodeBB v4.3 + New Features

Visual representation of Connect Four

Scheduled Pinned Locked Moved Unsolved General and Desktop
14 Posts 2 Posters 2.2k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • L Offline
    L Offline
    LxKiss
    wrote on last edited by
    #1

    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. :)

    1 Reply Last reply
    0
    • mrjjM Offline
      mrjjM Offline
      mrjj
      Lifetime Qt Champion
      wrote on last edited by
      #2

      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.

      1 Reply Last reply
      1
      • L Offline
        L Offline
        LxKiss
        wrote on last edited by
        #3

        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?

        mrjjM 1 Reply Last reply
        0
        • L 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?

          mrjjM Offline
          mrjjM Offline
          mrjj
          Lifetime Qt Champion
          wrote on last edited by
          #4

          @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.

          L 1 Reply Last reply
          0
          • mrjjM 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.

            L Offline
            L Offline
            LxKiss
            wrote on last edited by
            #5

            @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.

            mrjjM 1 Reply Last reply
            0
            • L 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.

              mrjjM Offline
              mrjjM Offline
              mrjj
              Lifetime Qt Champion
              wrote on last edited by
              #6

              @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.

              1 Reply Last reply
              0
              • L Offline
                L Offline
                LxKiss
                wrote on last edited by
                #7

                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?

                mrjjM 1 Reply Last reply
                0
                • L 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?

                  mrjjM Offline
                  mrjjM Offline
                  mrjj
                  Lifetime Qt Champion
                  wrote on last edited by
                  #8

                  @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.?

                  1 Reply Last reply
                  0
                  • L Offline
                    L Offline
                    LxKiss
                    wrote on last edited by
                    #9

                    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?

                    mrjjM 1 Reply Last reply
                    0
                    • L 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?

                      mrjjM Offline
                      mrjjM Offline
                      mrjj
                      Lifetime Qt Champion
                      wrote on last edited by mrjj
                      #10

                      @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?

                      1 Reply Last reply
                      1
                      • L Offline
                        L Offline
                        LxKiss
                        wrote on last edited by
                        #11

                        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?

                        mrjjM 1 Reply Last reply
                        0
                        • L 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?

                          mrjjM Offline
                          mrjjM Offline
                          mrjj
                          Lifetime Qt Champion
                          wrote on last edited by
                          #12

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

                          1 Reply Last reply
                          0
                          • L Offline
                            L Offline
                            LxKiss
                            wrote on last edited by
                            #13

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

                            mrjjM 1 Reply Last reply
                            0
                            • L LxKiss

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

                              mrjjM Offline
                              mrjjM Offline
                              mrjj
                              Lifetime Qt Champion
                              wrote on last edited by mrjj
                              #14

                              @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 )

                              1 Reply Last reply
                              1

                              • Login

                              • Login or register to search.
                              • First post
                                Last post
                              0
                              • Categories
                              • Recent
                              • Tags
                              • Popular
                              • Users
                              • Groups
                              • Search
                              • Get Qt Extensions
                              • Unsolved