TouchGFX Design + Jigsaw Puzzle

sylar^z

TouchGFX Design + Jigsaw Puzzle [Copy link]

   This project is a jigsaw puzzle game. The game implements three levels of difficulty: easy, normal, and hard, jigsaw puzzle picture switching, changing the order of jigsaw puzzles to restart the game, displaying game instructions, and game completion animation. The design uses components such as contaimer, cuscontaimer, scroll wheel, and animated image. The design also uses the interaction event response mechanism and clickListener event response mechanism. In the jigsaw puzzle picture moving function, it is designed to click the jigsaw puzzle block to move the corresponding block. The moving function is realized by the button control and the image control respectively in conjunction with the interaction event response mechanism and the clickListener event response mechanism. The rotation animation of the STM32 LOGO and the game completion animation are realized through the animated image component. In order to demonstrate the game completion animation effect, a sequence that can quickly complete the game is designed in the combination of 3X3 puzzles (see video). This ToughGFX design made me understand the power of ToughGFX. The design uses part of the functions of ToughGFX. There are many functions worth further exploration. This project is designed based on the 800*480 LCD screen of the F769I-DISCO development board. Since there is no development board at hand, a simulation demonstration is used. Design sharing: 1. Button event setting, select call to specify response function, set the response function name to showInfo. Add the corresponding code in MainView.hpp Add the corresponding code in MainView.cpp 2.ScrollWheel control function Item custom control used with ScrollWheel control Add the corresponding code in MainView.hpp Then, according to the steps of adding button events, link the difficultyLevelButton button with the difficultyLevelScroll control, and add the corresponding code in MainView.cpp 3. Animation effect setting 4. The clickListenner event response function of the control. The clickListenner response of the same type of control can be written in a callback. This project uses clickListener of two controls, Image and AnimatedImage, and the code also contains these two parts. Add the corresponding code in MainView.hpp Add the corresponding code in MainView.cpp 5. Code for moving puzzle pieces, checking spelling completion, and part of the code for other functions (please see the project source file for the complete code) Below is the source code and video Baidu Cloud address of this design: Link: https://pan.baidu.com/s/1o1uZ_F8o6z1Xw0FjWgmfcw Extraction code: 6qpm

okhxyyo

This puzzle is pretty cool. You guys are really creative.

sylar^z

okhxyyo posted on 2019-4-27 10:14 This puzzle is a bit cool, the guys are really creative

I came across the Creative GUI Tour event of TouchGFX, and I just had some small ideas, so I made one.

tobot

sylar^z posted on 2019-4-28 08:56 I came across the Creative GUI Tour event of TouchGFX, and I happened to have some small ideas, so I made one

It’s really good. I made a Huarong Road (not finished yet), which is similar to yours. . . .

sylar^z

tobot posted on 2019-4-28 17:11 Very good, I made a Huarong Road (not finished yet), which is similar to yours. . . .

Huarong Road is also good, and it has a stronger sense of logic. Share it when you finish it