← All projects in the gallery
Joystick sprite: steer a rocket round a box
by jonathan harrocks
A little rocket you fly round a box with the Joystick widget, on the LCDWIKI ES3C35P (3.5", ESP32-S3, touch). Push the stick and it moves that way, faster the further you push, and turns to face where it's going. It stops dead at the walls, and when you let go it stays put, still pointing the way it went.
There's no code in it: variables, one automation and a few bindings.
How it's made:
- The box is a Panel, 300 x 270, with a 2 px border and no padding.
- The rocket is a 40 x 40 picture with a transparent background, compiled into the firmware, in an Image inside the box with its pivot at the centre (20, 20) so it turns on the spot.
- The Joystick writes JoyX and JoyY (-1.0 to 1.0) and its angle into variables.
- An automation runs every 20 ms: ShipX = clamp(ShipX + JoyX * Speed, 0, 256), ShipY = clamp(ShipY - JoyY * Speed, 0, 226), and Heading follows the stick's angle while it's pushed.
- The rocket's X position, Y position and Rotation are bound to ShipX, ShipY and Heading.
The clamp is what keeps it in the box: 256 and 226 are the inside of the box minus the size of the rocket.
The whole build, step by step with a picture of every step, is in Tips and tricks on the forum: https://lcdwizard.com/forum/t/17
Runs on the ES3C35P. On another touch board, change the sizes in the two clamp formulas to suit.
About this design
Joystick sprite: steer a rocket round a box is an LVGL interface for the LCDWIKI 3.5" ESP32-S3 (ES3C35P) (ST77922 320 x 480, ST77922 (touch half) touch), with 1 screen and 6 widgets, made for Arduino (C++) on LVGL 9.
Screens
- Screen1
Hardware and build
- Board
- LCDWIKI 3.5" ESP32-S3 (ES3C35P)
- MCU
- ESP32-S3
- Display
- ST77922
- Resolution
- 320 x 480
- Touch
- ST77922 (touch half)
- Graphics library
- GFX Library for Arduino
- LVGL
- v9
- Exports to
- Arduino (C++)
- Peripherals
- SD card (SDMMC, 4-bit), NeoPixel string (WS2812 / SK6812)
- Libraries
- lvgl, GFX Library for Arduino, Adafruit NeoPixel
Purchase this boardAs an Amazon Associate, LCD Wizard earns from qualifying purchases.
Notes from the author
A rocket you fly round a box with the Joystick widget. It turns to face the way it goes and stops at the walls. No code.
Using it
Open a copy in the designer and it is yours to edit: restyle the screens, move it to another board, and export the Arduino (C++) project. Designing is free, and a copy needs no account. Open the designer.