Moonsong gif?

May 1, 2014 at 1:30 AM
Administrator
Forum Administrator
"Life begins and ends with Nu."
Join Date: Jul 15, 2007
Location: Australia
Posts: 6200
Age: 36
It isn't a gif because a gif of it would be absolutely massive. It isn't Flash because flash is being phased out these days. It was Flash once, but that was a loooong long time ago.

That image Woodenrat posted is used as a background. On top of it is each cloud section that is repositioned every 0.046 seconds using javascript and loops back to the start with every 320 pixels of movement. The dragon is repositioned 1 pixel every around 0.1 seconds maybe for up to 13 pixels in phases of up and down and the wing animation is simply showing and hiding a tiny image. It is made using javascript, css, html, and 7 different images (4 clouds, 1 background, 1 dragon, and 1 wing). Plus I've optimised the shit out of it over the years.

Oh, and it is standard DOM-based animation, not canvas in case you were wondering.

You can see the related javascript and css here if you wish:
http://www.cavestory.org/moonsong.js
http://www.cavestory.org/moonsong.css
 
May 1, 2014 at 2:04 AM
lol
Modding Community Discord Moderator
"All your forum are belong to us!"
Join Date: Oct 20, 2013
Location: Florida
Posts: 598
o.o
The only real question now is:How long did it take to make it?!
 
May 1, 2014 at 7:39 AM
daughter of chivalry
"Bleep, Bloop, Bleep, Bloop"
Join Date: Jun 12, 2009
Location: Edge of the universe
Posts: 1596
Clearly it's claymation
 
May 1, 2014 at 11:07 AM
Senior Member
"This is the greatest handgun ever made! You have to ask yourself, do I feel lucky?"
Join Date: Apr 24, 2014
Location: The Surface
Posts: 91
Is there a way of making this code into a gif?
That animated image seems so peaceful...
 
May 1, 2014 at 4:41 PM
In my body, in my head
Forum Moderator
"Life begins and ends with Nu."
Join Date: Aug 28, 2009
Location: The Purple Zone
Posts: 5998
it's already been explained how you would do that
 
May 8, 2014 at 7:06 PM
Senior Member
"This is the greatest handgun ever made! You have to ask yourself, do I feel lucky?"
Join Date: Apr 24, 2014
Location: The Surface
Posts: 91
Noxid said:
it's already been explained how you would do that
i kno! I am lazy :p
X-Calibar said:
p182967-0-mmm.gif


Looks like maybe flying over fog or something, with dark, dark, water in the background.
If you wanted to make an attempt at a gif you'll need lossless video capture, maybe use virtualdub to make a gif [100+ megs lol], then use something like photoshop to optimize it to try to make it a reasonable size... [under a meg if you're lucky...]
Why is it black-white?
 
May 8, 2014 at 8:16 PM
Indie game enthusiast
"What is a man!? A miserable pile of secrets! But enough talk, have at you!"
Join Date: Apr 18, 2006
Location: Forever wandering the tower...!
Posts: 1770
Why is it black-white?
I felt like trying to make the Moonsong gif you were hoping for ;D
But, unfortunately the screen recorder I used was lossy. It introduced a whole load of color variation, and minor compression artifacts. I usually think of Livestream Procaster as an excellent tool for recording video, but in this case where preserving the exact colors are crucial (by adding extra details, colors or shifting colors the video becomes a lot more complex to make a gif from, not to mention it doesn't look quite the same).

I tried to manually switch the colors back to the original, and remove excess color information; but unfortunately it never looked quite right, and the results were still a gif of 2 megs or more. In the end, I just reduced the colors to black and white and played around with it, and the above product is that result.

I was unable to get FRAPS to capture aero desktop, and I no longer have camtasia studio... So, at the moment I don't have a lossless video capture solution...

...
PS the gif above is like 1400 frames I think, but only 370 KBs lol (almost 2 minutes of animation)
If you reduce the amount of frames, you can increase the color information without it being...
 
Dec 5, 2019 at 5:11 PM
Lurking in the Shadows
"No! Don't OPEN that DOOR!"
Join Date: Dec 5, 2019
Location:
Posts: 0
Here’s the gif lmao it’s not amazing but it my live wallpaper now , screen recorded the gif and sent it to a gif converter
 

Attachments

  • 3F5AAD6C-D39C-4FB2-9CBF-7B27AB6128DE.gif
    3F5AAD6C-D39C-4FB2-9CBF-7B27AB6128DE.gif
    2.8 MB · Views: 45
Dec 5, 2019 at 9:19 PM
Junior Member
"It's dangerous to go alone!"
Join Date: Aug 5, 2019
Location: Hell
Posts: 41
it's not an explanation of how to get a gif of it, but here's how it works:

here's the HTML:
Code:
<div class="killreflow2">
	<div class="dragonalt">
		<div id="dragonaltl" class="dragonaltl" style="top: 9px;">
			<div class="dragonwc">
				<div class="dragonwcni" id="dragonwing" style="background-position: 6px 0px;">&nbsp;</div>
			</div>
		</div>
	</div>
	<div class="cloud4alt">
		<div id="cloud4altl" class="cloudaltl" style="left: -152px;">&nbsp;</div>
	</div>
	<div class="cloud3alt">
		<div id="cloud3altl" class="cloudaltl" style="left: -304px;">&nbsp;</div>
	</div>
	<div class="cloud2alt">
		<div id="cloud2altl" class="cloudaltl" style="left: -288px;">&nbsp;</div>
	</div>
	<div class="cloud1alt">
		<div id="cloud1altl" class="cloudaltl" style="left: -256px;">&nbsp;</div>
	</div>
</div>

the killreflow div has a background-image value of the moon & stuff
cloudback.png
the cloudaltl divs have background-image values of the clouds
cloud1culling.gif

cloud2.gif

cloud3.gif

cloud4.gif

the dragonalt1 div has a background-image value of the dragon
dragonstaticnt.gif

the dragonwcni div has a background-image value of the dragon wing
dragonwing.gif

there's some javascript that moves the clouds left (at different rates) using the "left" property of CSS

different js moves the dragon up and down by manipulating the "top" property of CSS for these between 0px and 13px

different js moves the dragonwing image up and down using the "top" property of CSS
 
Dec 6, 2019 at 4:15 PM
Everything you hate about humanity
"Big Joe Tire and Battery Restaurant! Opening Soon! Eat at Big Joes!"
Join Date: Sep 22, 2012
Location: Hell
Posts: 544
You can make an animated background like this without JS fyi

Look what I did on my website
Edit : Seems to be down at the moment so here's the css code
CSS:
.mnbanner{
     text-align: center;
     height: 252px;
     background-color : #000;
     background-image: url(Images/MNBannerFront.gif), url(Images/MNBannerBack.jpg);
     background-position: 0 0, 0 0;
     background-repeat: repeat, repeat;
     animation : animatemn 90s linear infinite;
 }
 @keyframes animatemn {
     from {
     background-position : 3072px 0, 1536px 0;
         }
     to {
         background-position : 0 0, 0 0;
         }
     }
 
Dec 6, 2019 at 7:17 PM
Junior Member
"It's dangerous to go alone!"
Join Date: Aug 5, 2019
Location: Hell
Posts: 41
You can make an animated background like this without JS fyi

Look what I did on my website
Edit : Seems to be down at the moment so here's the css code
CSS:
.mnbanner{
     text-align: center;
     height: 252px;
     background-color : #000;
     background-image: url(Images/MNBannerFront.gif), url(Images/MNBannerBack.jpg);
     background-position: 0 0, 0 0;
     background-repeat: repeat, repeat;
     animation : animatemn 90s linear infinite;
 }
 @keyframes animatemn {
     from {
     background-position : 3072px 0, 1536px 0;
         }
     to {
         background-position : 0 0, 0 0;
         }
     }
yeah, I wasn't saying that it couldn't be done in a better way, I was explaining how it was done
I would probably just use percentages in the animations though

also, what's your hosting / domain setup?
 
Last edited:
Dec 6, 2019 at 7:23 PM
Everything you hate about humanity
"Big Joe Tire and Battery Restaurant! Opening Soon! Eat at Big Joes!"
Join Date: Sep 22, 2012
Location: Hell
Posts: 544
It's hosted by someone with their own server setup
 
Dec 7, 2019 at 12:31 PM
Senior Member
"Wahoo! Upgrade!"
Join Date: Dec 22, 2018
Location: Sand Zone Residence
Posts: 55
Jun 21, 2022 at 11:30 AM
Administrator
Forum Administrator
"Life begins and ends with Nu."
Join Date: Jul 15, 2007
Location: Australia
Posts: 6200
Age: 36
So people never ask me for this again:
moonsong-gif-edition.gif


It's a 20fps gifcam recording with some lazy edits to the dragon's flight pattern to make it somewhat seemless. Go nuts.
 
Last edited:
Jun 21, 2022 at 11:37 AM
lol
Modding Community Discord Moderator
"All your forum are belong to us!"
Join Date: Oct 20, 2013
Location: Florida
Posts: 598
1655807793221.png
Legit though cool to see! Crazy to see this posted after 3 years of the thread going silent.
 
Top