Solarus-Games English Forum

Community => Game art & music => Topic started by: kabaiakh on July 19, 2022, 09:01:21 PM

Title: Snow flakes
Post by: kabaiakh on July 19, 2022, 09:01:21 PM
Hi.

I've recently finished some work of mine and I thought some of you might be interested in.
AFAIC, I would appreciate feedbacks: understandability and/or prior existence of the technique, optimisations for weight at run time within the Solarus engine, incorrect spelling ...

Enjoy ! ;–)

https://kabaiakh.pagesperso-orange.fr/solarus-vetero/
Title: Re: Snow flakes
Post by: Max on July 20, 2022, 02:00:47 AM
Hi! The forum get some suspicious spam posts sometimes and this looks a lot like one! Sorry if it's not.

However, you ought to explain more what your link is pointed to and what you want feedback about.
Title: Re: Snow flakes
Post by: kabaiakh on July 21, 2022, 12:36:06 AM
Be reassured, I ain't no ser spammer.
For demonstrating purpose, I made use of CSS to overlay images.

Thank you for your exlpainations, this thread won't rot unanswered.
I'm working on a conversion into something that can be displayed here.
Title: Re: Snow flakes
Post by: kabaiakh on July 21, 2022, 05:25:28 PM
We want to animate falling snow flakes in the Solarus game engine (https://solarus-games.org/) framework.

(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/snowlarus/screen_1_320x240_bg.png)

The main screen size is 320x240 (QVGA (https://en.wikipedia.org/wiki/Graphics_display_resolution#320_%C3%97_240_(QVGA)) for those from bygone days), traditionally animated using wrapping (https://en.wikipedia.org/wiki/Wrapping_(graphics)) tiles (https://en.wikipedia.org/wiki/Tile-based_video_game).

Let's pick up a 32x24 one, because the dimensions (width && (https://en.wikipedia.org/wiki/Operators_in_C_and_C%2B%2B#Logical_operators) height) of one tile must be multiple of 8 under Solarus.
Put it into motion with 24 frames (https://en.wikipedia.org/wiki/Film_frame) so the animation can loop at 40_ (https://en.wikipedia.org/wiki/C0_and_C1_control_codes#Field_separators)ms delay per frame (slow snow, persistence of vision (https://en.wikipedia.org/wiki/Persistence_of_vision)).
We get a 18.432_k (https://en.wikipedia.org/wiki/Kilo-)px (https://en.wikipedia.org/wiki/Pixel) animation (32*24*24), tiled 10x10 on the screen as shown hereafter.

One small tile

 
   
   
WxH   |   kpx   |   tiling
32x24   |   18.432   |   10x10

 
   
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/A/flat1L.gif)     (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/pixels.jpg) (https://www.imdb.com/title/tt2120120/)

Preferring something with less -- if not without -- patterns ?
We could generate a more evenly randomized tile and ...
we would replace patterns with a grid or ...
we should try to make one single 320x240 tile.

One big tile

 
   
   
WxH   |   kpx   |   tiling
320x240   |   18432   |   1x1

 
   
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/B/flat1L.gif)     (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/leathalweapon.jpg) (https://www.imdb.com/title/tt0093409/)

This tile is 1000 times heavier (320*240*240=18432_kpx).
Too large / too tall for Solarus, which prefers the overall size of tiles sets
to be less than 2048 for compatibility reasons.

So, besides getting rid of patterns, we also need to limit pixels overweight in the process.
The good news is both those goals can be reasonably achieved by superimposing
two differently sized tiles so that they conceal each other's patterns.

Two differently sized tiles

 
   
   
WxH   |   kpx   |   tiling
32x40+40x24   |   74.24   |   2x2

 
   
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/E/back3L.gif)     (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/firstclass.jpg) (https://knowyourmeme.com/memes/perfection)

Let's begin the off-putting underlying theory detailed explanations with a basic layout of two same size tiles.
Each one has its own patterns, we label them (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/ZZ_10.gif) and (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/00_10.gif).
When we overlay both, we obtain a new pattern, unrandomly labeled (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/Z0_10.gif).


 
   
   
   
1 * tile #1   
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/C/flat1S.gif)(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/ZZ_14.gif)
1 * tile #2   
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/C/flat2S.gif)(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/00_14.gif)
overlay   
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/C/flat3S.gif)(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/Z0_14.gif)

Not that good once tiled on the screen. We still see patterns.


 
   
Tile #1
       
WxH   |   kpx   |   tiling
24x24   |   13.824   |   13.33x8
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/C/flat1L.gif)
   
     Tile #2
       
WxH   |   kpx   |   tiling
24x24   |   13.824   |   13.33x8
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/C/flat2L.gif)
   
     Overlay
       
WxH   |   kpx   |   tiling
24x24   |   13.824   |   13.33x8
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/C/flat3L.gif)
   
If we do the same thing with differently sized tiles as aforementioned, we get something more interesting.
Let's just take a tile of 2 patterns (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/AABB_10.gif) and another one of 3 patterns (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/112233_10.gif):


 
   
   
   
1 * tile #3   
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/D/flat1S.gif)(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/D/flat1S.gif)(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/D/flat1S.gif)(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/AABBAABBAABB_14.gif)
1 * tile #4   
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/D/flat2S.gif)(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/D/flat2S.gif)(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/112233112233_14.gif)
overlay   
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/D/flat3S.gif)(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/A1B2A3B1A2B3_14.gif)

The overlay builds a 'meta-tile' comprised of 6 new patterns which then resume their cycling.
Those 6 patterns are built upon only 5: 2 from tile #3 ((https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/AA_10.gif) and (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/BB_10.gif)) plus 3 from tile #4 ((https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/11_10.gif), (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/22_10.gif) and (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/33_10.gif)).
Arithmetically, 6=lcm (https://en.wikipedia.org/wiki/Smallest_common_multiple)(2,3) and 5=2+3 (arrest this man, he talks in maths (https://genius.com/Radiohead-karma-police-lyrics)).
We do not 'see' 3 repeating (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/AABB_10.gif) or 2 repeating (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/112233_10.gif) but only one larger (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/img/A1B2A3B1A2B3_10.gif).


 
   
Tile #3
       
WxH   |   kpx   |   tiling
16x24   |   9.216   |   20x10
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/D/flat1L.gif)
   
     Tile #4
       
WxH   |   kpx   |   tiling
24x24   |   13.824   |   13.33x10
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/D/flat2L.gif)
   
     Overlay
       
WxH   |   kpx   |   tiling
48x24   |   23.040   |   6.66x10
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/D/flat3L.gif)
   
With this second tile example, the meta-tile is 48x24 (from a 16x24 tile and a 24x24 one).
Tiny compared to 320x240 but the bigger the meta-tile, the fewer patterns.
So what would be the best ratio for our screen (smallest tiles for biggest patterns-concealing) ?

That would be scann'd (https://www.gutenberg.org/files/1787/1787.txt) and dimensioj-kalkuli (https://sourceforge.net/projects/solarus-vetero/files/bin/dimensioj-kalkuli) is here to enumerate all the possible combinations;
among which two in particular attract attention.


 
   
   
   
   |    meta-tile    |    tile set    |    W / H    |    H / W    |   
sizes A    |    160    |    1280    |    40    |    32    |   
sizes B    |    120    |    960    |    40    |    24    |   

Since 32 is 1/10 of the screen's width and 24, 1/10 of its height,
let 32 be the width for tile #5 and 24, the height for tile #6.
We get a 160x120 meta-tile. 1/4 of the screen. Shiny (https://en.wikiquote.org/wiki/Firefly_(TV_series)).

There is also another scheme: 40x32 + 24x40.
Unfortunately, 40*32*32+24*40*40 = 79.36_kpx when 32*40*40+40*24*24 = 74.24_kpx only !

Now is time for kahelo-animi (https://sourceforge.net/projects/solarus-vetero/files/bin/kahelo-animi) to (slowly) generate images magic (https://imagemagick.org/)ally.


 
   
Tile #5
       
WxH   |   kpx   |   tiling
32x40   |   51.2   |   10x6
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/E/flat1L.gif)
   
     Tile #6
       
WxH   |   kpx   |   tiling
40x24   |   23.04   |   8x10
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/E/flat2L.gif)
   
     Overlay
       
WxH   |   kpx   |   tiling
32x40+40x24   |   74.24   |   2x2
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/E/flat3L.gif)
   
Compared with the first two one-tile solutions, ≈ (https://en.wikipedia.org/wiki/Almost_equal_to) lightest * 4 but ≈ (https://en.wikipedia.org/wiki/Almost_equal_to) heaviest / 250.
Totally worth it (https://knowyourmeme.com/memes/totally-worth-it), as it prevents eye bleeding. Judge yourself.


 
   
One small tile
       
WxH   |   kpx   |   tiling
32x24   |   18.432   |   10x10
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/A/back1L.gif)
   
     Two differently sized tiles
       
WxH   |   kpx   |   tiling
32x40+40x24   |   74.24   |   2x2
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/E/back3L.gif)
   
     One big tile
       
WxH   |   kpx   |   tiling
320x240   |   18432   |   1x1
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/E/back3L.gif)
   

 
   

Remains to be applied to Solarus:


  • Make it look more like falling snow flakes than like
    a rotated, portrait oriented (https://en.wikipedia.org/wiki/Portrait_mode), port (https://en.wikipedia.org/wiki/Port_and_starboard) star field (https://www.markwrobel.dk/post/amiga-machine-code-letter12-starfield-effect/) retro effect
    deprived of its sine wave scrolling text (https://www.pinterest.com/pin/a-sine-wave-text-scrolling-effect-yeah-thats-it--830843831233879691/).

  • Make flakes slide gently from left to right and back.
    Using sine waves (https://en.wikipedia.org/wiki/Sine_wave) rather than Bézier curves (https://en.wikipedia.org/wiki/B%C3%A9zier_curve), sadly seldom
    natively supported by any programming language.

  • Have different flakes shapes (and maybe colours).

  • Two tiles allow two different speeds, concealing even more
    and creating a parallax scrolling (https://en.wikipedia.org/wiki/Parallax_scrolling) for depth perspective.
    Bonus (https://en.wikipedia.org/wiki/Bonus_track#Bonus_tracks) hack (http://www.jargon.net/jargonfile/t/TheMeaningofHack.html).
      (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/F/back1L.gif)      

My God ! (https://www.goodreads.com/work/quotes/14863741-ready-player-one?page=17)
It's full of stars. (https://knowyourmeme.com/memes/my-god-its-full-of-stars)
And, voila ! solarus-vetero.tiles.png (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/snowlarus/vetero/solarus-vetero.tiles.png) solarus-vetero.dat (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/snowlarus/vetero/solarus-vetero.dat)
Crystal bits of snowflakes all around my head and in the wind. (https://genius.com/Alphaville-big-in-japan-lyrics)

The scenery provides its own patterns hiding as shown below
(customary animated GIF (https://en.wikipedia.org/wiki/GIF#Animated_GIF) everywhere for compatibility).


 
   
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/snowlarus/anim320x240.gif)

Foreground flakes
Are sparse, scattered and fast.
Could also be big and bright.
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/snowlarus/back32x40.gif)
      (https://kabaiakh.pagesperso-orange.fr/solarus-vetero/snowlarus/back320x240.gif)

Background flakes
Are numerous, tight and slow.
Could also be tiny and dark.
(https://kabaiakh.pagesperso-orange.fr/solarus-vetero/snowlarus/back40x24.gif)

Of course, the principle is not tied to two tiles top (https://en.wikipedia.org/wiki/Alliteration), it would work well with way (https://en.wikipedia.org/wiki/Alliteration) more.
Needless to say, laziness can grasp even the most motivated ...

Similar to the context-free chaos theory (https://en.wikipedia.org/wiki/Chaos_theory), this method should be quite ecumenical
and could theologically theoretically (https://en.wikipedia.org/wiki/Lapsus) be applied to animations other than snow: mist, rain, swell (https://en.wikipedia.org/wiki/Swell_(ocean))  ...
It might as well already exists, just like this (https://www.hpcalc.org/details/8873) ancient 'differential scrolling' was indeed a mere parallax.