Sprite Question - Spriting over a JPG

[wpvxp]

Thanks for a great suite of libraries Bodmer - I have used them in many of my projects with really cool results. Much appreciated!

I have a question regarding the Sprite function. Can the background be a bitmap/jpg, and the sprite a small icon that can move about the image? I am tinkering with a sailing GPS tool that can help optimize tacking and jibing during a race, and wanted to plot a small boat icon (10x20pixels) over a JPG map (320x480pixels) and in this example, the map is a jpg of Lake Lehman in Switzerland and the surrounding ports/harbor/towns. Ideally i would like to be able to move the boat icon "over the top" of the JPG map. As a second option I would like to keep the route sailed as separate sprite and be able to overlay (or remove) this from the jpg map when selected/deselected. Naturally the JPG map is large and thus I don't want to redraw this image.

The solution I have at the moment is the map of the area is in SPIFFS and I am pre-drawing the boat icon with the same blue of the lake - but of course this doesn't work when the boat is near the shore/harbor or anything else that's not the same color blue that I am pre-drawing with.

Are the Sprite functions capable of doing what I am trying to describe? If so could you please point me in the direction of how best to tackle this?

Any advice would be greatly appreciate. Thanks in advance!

[Bodmer]

Yes, you can do what you wish. You do not say which processor, screen and interface you are using... this is important since this will determine the approach.

The minimal memory approach for the more RAM limited processors is to use the method for the Animated_dial viz:

1. Draw the jpeg to screen
2. Read the screen area where the boat sprite will be plotted.
3. Plot the boat to screen using a transparent colour
4. When the boat moves, replace the screen area, grab a copy of the new area, got to step 3

You get some flicker with that approach but the annoyance level drops if the boat is not updated often.

A more RAM intensive approach us used in the discussion and example I posted here.

If the boat icon is not drawn very frequently (<10 times a second) then you could:

1. Have one sprite for the boat
2. Have another map spriteof same size
3. Draw map jpeg to screen
4. Draw map jpeg to map sprite with x,y offset to capture the area you want
5. Push boat sprite to map sprite with transparent colour
6. Push sprite from step 5 to correct position on screen
7. Repeat from step 4
   Due to jpeg decode time the frame rate will be around 5-10 frames per second

For the breadcrumb trail I would keep an array of x.y values (or lat, long) values. These could be plotted to screen and the sprite after step 4

[wpvxp]

Thanks Bodmer - this is excellent. I really appreciate you taking the time to answer my questions.

For this project I am using a Wemos D1 Mini as the processor and the screen is an 320x480 ILI9488 and interfacing via standard SPI. Sketch and photo of my wiring/layout is attached. The refresh rate is low - though a function of the speed of the boat. If the boat is sailing at less than 15 knots (95 % of the time), then due to the resolution of the map, the refresh rate is not be more 2 times per second. I guess where I was getting lost is your point No. 3 and the definition of a "transparent" color. In this case the background changes based on where you are on the map - sometimes the background is simply blue (for the lake/water) and other times its noisy if the point in reference is full of map detail (various colors/patterns/shapes showing shoreline/cities etc). Ive attached the map in questions so you can see the lake/shoreline etc.

For my application Option 2 is ideal. But for this option, for step 2 in your approach above, can I constantly change the map sprite to be a small section of the map area in question or should I be using a different approach? Im sorry if these questions seem obvious, but I have struggled to get my head around exactly how the sprite function works and how far I can push it into various applications.

I have been really struggling to understand how to do this more efficiency. In my mind the simplest approach to this problem would be to cut out 10x20 pixels from my map at x,y where I intend to place the icon into memory (this is the step that I wrestle with the most)...then place my icon on top of the map at x,y...then when its time to move the icon, replace the old space with the 10x20 cut out at x,y, and then re-lay down the icon to the new location. Would this be a more efficient way to address the problem and if so, do you know a simple way to copy a small cut out of an image in memory - say 10x20 pixels located at x,y in an image?

Thanks again for your time and any other advice you can share.

[Bodmer]

OK, this sketch deomonstrates the principles of option 2 but obviously this is just demo code that needs adapting!
Jpeg_Sprite_to_sprite_865.zip

[wpvxp]

Awesome!! Thank you so much for your time and guidance. It really is appreciated.

Happy Holidays!