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