The Sunday Blog: Scalable design and gaming
Part 2: Let’s build the game and gamble!
After a highly theoretic blog article last Sunday (huge thanks to all readers who made it through it), it’s now time to apply everything in practice. So, let’s build the project in the Nextion Editor. Those who fear copying and pasting a little less than 150 lines of commented code may download the ready-to-use .hmi file below. The pedagogic principle behind this blog is to teach how your HMI designs can be made scalable, able to run on different screen sizes and resolutions, with no or at least a minimum of modifications. Some component attributes (like x, y, h, and w) are immutable at runtime, so these need to be set “by hand” beforehand. But all what can be done in code will be done in code. At the same time, we need to reduce the CPU time for calculating and drawing the ball movement and the check for bouncing. Thus, we will make use of some pre-calculated helper vars.
For example, when we have a ball with a radius of 6 pixels, when does it touch the upper screen border? No, not when the ball’s center y-coordinate is 0, but when it equals the radius. So, for top and bottom bouncing, we can pre-calculate 0 + ball radius as the upper compare value for the ball’s center y, and page height – ball radius as the lower one. We’ll see more details below.
First, the page design
Rather easy-peasy, we’ll have to place…
– a full-height 5px wide vertical progress bar j0 at x=0 as score indicator
– a full-height 30px wide vertical slider h0 at x=10 as racket
– a full-height 30px wide vertical slider h1 at x=max-40 as racket
– a full-height 5px wide vertical progress bar j1 at x=max-10 as score indicator
– a timer tm0
Don’t care about colors and other attributes, they’ll all be set in code. The result should look like this:
Then, the program.s file
Here, we define all needed variables and set a few constants for the foreground and background colors and a highlight color for the score display progress bars.
// Declare variables and initialize the less dynamic ones int ball_rad,ball_x,ball_y,new_x,new_y // ball coordinates (buffered) int vect_x,vect_y // movement control int tmp_b,tmp_t // tmp helper vars for bouncing at the sliders/rackets int min_x,max_x,min_y,max_y // permanent boundary helper vars for quicker bouncing check int min_out,max_out // permanent boundary helper vars for "ball out" int bco=12678 // background color int pco=65535 // foreground color int hlt=63488 // highlight color page 0 // start the game
In this file, we can’t yet start any calculation, since we need the page height and width for that, but these aren’t available as long as no page is loaded. An when a page is loaded, program.s does not longer execute. So, all that scaling and initializing will go into…
The page Post Initialization Event code
This is the place to put everything which depends on the page format: Setting the ball radius, the racket size, boundaries, colors, initial positions, and finally start the game by enabling the timer. We set the racket height (the .hig attribute of the sliders) to 1/4 of the page height and the maxval to the remainder. This has the advantage that the slider’s .val attribute always corresponds to the lower end of the racket (seen from the screen bottom) and (.val + .hig) to the upper end. Since the Nextion counts the y coordinates from the top, we’ll have to do subtractions from page.h later in the timer event code – that’s what the helpers tmp_b and tmp_t are for, to get the absolute y coordinates of the respective rackets to check if the ball will be hit back or if it goes out.
// Configure the page page0.bco=bco // Configure the timer tm0.en=0 tm0.tim=50 // initialize variables depending on screen dimensions ball_rad=page0.h/40 min_out=h0.x+ball_rad // left boundary if ball has not been hit back min_x=h0.x+h0.w+ball_rad // left boundary if ball has been hit back max_out=h1.x+h1.w-ball_rad // right boundary if ball has not been hit back max_x=h1.x-ball_rad-1 // right boundary if ball has been hit back min_y=ball_rad // top boundary max_y=page0.h-ball_rad-1 // bottom boundary // configure left racket h0.bco=bco h0.pco=pco h0.hig=page0.h/4 // racket height h0.minval=0 h0.maxval=page0.h-h0.hig // page height - racket height h0.val=h0.maxval/2 // center position at start // configure right racket h1.bco=bco h1.pco=pco h1.hig=page0.h/4 // racket height h1.minval=0 h1.maxval=page0.h-h1.hig // page height - racket height h1.val=h0.maxval/2 // center position at start // configure left result progress j0.bco=bco j0.pco=hlt // configure right result progress j1.bco=bco j1.pco=hlt // configure speed vect_x=page0.w/2-h0.x-h0.w/24 vect_y=page0.h/80 // start over j0.val=0 j1.val=0 ball_x=page0.w/2 ball_y=page0.h/2 cirs ball_x,ball_y,ball_rad,pco delay=1000 tm0.en=1
The timer event code is responsible for moving, bouncing, and deciding if the ball is hit back or goes out, depending on the slider positions. This code should execute as quickly as possible to allow a visually fluid ball movement. After a ball goes out, the corresponding score counter is increased and then it’s thrown in again from the middle of the screen. If one of the score counters bars reaches full height, the game is over and starts again by reloading the page. Note that sometimes a combination of conditions has to be checked, the nesting of the if() clauses has been done in an optimized way, so that if the main condition is already not met, further conditions will not be evaluated to save CPU cycles at runtime.
Here, you may download the .hmi file, created for the 3.2″ Standard HMI display, but as described above, the code allows you to run it on all sizes, you’ll just have to adapt the height and position of the 4 screen components: gam_dev
Thank you for reading and happy gambling! 🙂