Pixelation

General => General Discussion => Topic started by: Dusty on January 13, 2011, 07:27:33 am

Title: Rapid animation for palette saving?
Post by: Dusty on January 13, 2011, 07:27:33 am
I'm a bit curious about this but I couldn't manage to get Photoshop to save a gif that animated rapidly enough to achieve the effect(or maybe that I wasn't doing it right, or that it might not even be possible).

I've seen a few games with strict limitations use flickering to achieve a pseudo transparency. For example the Zelda games on the gameboy flicker the shadow so fast that it looked transparent. What I'm curious is could this be done to make new colors if you're stuck with a limited palette?

For example: http://www.pixeljoint.com/2011/01/10/3358/Pixel_Art_Challenge-_Unportraitable.htm
You have this contest that gives you a limited palette BUT allows you to use animation. Would you be able to have two frames that alternate say... one of the colors to black to create a new, darker color?

I tried saving it in Photoshop but it seemed to animated way too slow in any browser I used to achieve the effect. But I know it has to be somewhat possible since games that run at 60fps pulled off the fake transparency fairly well.
Title: Re: Rapid animation for palette saving?
Post by: r1k on January 13, 2011, 08:36:11 pm
thats an interesting idea.  Ill post my results even though when I saved the animation it went too slow also (and could be even worse in a browser).  I viewed it origanally in game makers image editor at a speed of 100 frames per seconds, and the results were good.  I took this image from this weeks challenge:
http://www.pixeljoint.com/files/icons/full/datdood.gif
and then found 2 tone dither patterns that approximated each color in the pallete and made a two frame animation with each from using the new pallete derived from the dither tones.  When animated fast enough it looked basically exactly the same as the origanal image (except that the colors didnt mix perfectly to get the original pallete colors).  This shows that the effect is atleast possible if it animates fast enough, but getting that to happen in a browser is another task I guess.  I guess you could use it in a game maker game using a limited pallete at least :)
anyways heres the actual images I used
(http://img502.imageshack.us/img502/4315/flickerframe2.png)
(http://img443.imageshack.us/img443/5420/flickerframe1.png)

and this one is supposed to animate
(http://img130.imageshack.us/img130/659/flickeranimated.gif)
(gif made with unfreeze, with frame delay of 0)
If its actualy possible to display the effect in a browser it would be cool if it was actually implemented into a weekly challange at pixel joint, even though enforcing it as a challange rule might be impracticle.
Title: Re: Rapid animation for palette saving?
Post by: Jad on January 13, 2011, 09:31:48 pm
A frame delay of 0 would mean that the animation doesn't show at all, doesn't it? You'll have to go with 1, I think .. ?

Right now the animation seems to be set to some kind of standard rate, since it plays fairly slow in FF, which usually displays gifs well.
Title: Re: Rapid animation for palette saving?
Post by: Dusty on January 13, 2011, 09:45:10 pm
Hmm, 0 usually just animates it at the fastest speed, from my recollection. Though I even tried 0.0167s(~60fps) and it looked the same.

Closest thing I can remember to something like this was one of Helm's pieces:
(http://www.pixeljoint.com/files/icons/full/deathwalks.gif)

Though I can't say it has the effect I proposed.
Title: Re: Rapid animation for palette saving?
Post by: Argyle on January 14, 2011, 03:22:10 am
(http://argylebox.com/images/edits/flickeranimated.gif)

For the above listed gif, the speed that yielded the closest result without it either being a slower-than-intended looking flicker, and without as much random flicker gaps as the other speeds was within the range of 20-30 milliseconds (timing measure used by default in ProMotion). Ended up going with 21 in the end on a 60hz LCD laptop monitor using Firefox. Had to keep changing the timing because the way that it displayed in ProMotion's animation previewer was much more smooth and less delayed than it ultimately was displaying on Firefox - in ProMotion the timing I thought I was going to leave it at was 3ms  :lol:

It's still not a perfect flicker, and I'm sure it looks different for everybody looking at it. Between everybody using widely different sorts of monitors that have different refresh rates, operating systems, browsers... it'd be hard to achieve the effect successfully for every person that is going to look at it.  That's the end-all problem, and I think it is used successfully in some games, and this is purely speculation from a technologically ignorant person as far as where this is concerned, is because the makers of the games knew the exact hardware they were going to be displaying the graphics on..  If they knew that a delay of 1ms was going to display the shadow as a solid, semi-opaque shadow on the handheld display with 120hz refresh rate that (nearly) every person that was going to play the game would be using,  they could go that route to cheat the restrictions. But there are too many variables to nail down a formula for straight up images that you're just displaying on a browser.

I think it's still a neat idea and I hope you do end up making the portrait and uploading it to the challenge.  Even if it strobes a bit, and the people using IE just see slow palette swapping pictures, and the people using chrome turn into frog princes, I still think it will be received in a favorable manner.
Title: Re: Rapid animation for palette saving?
Post by: Dusty on January 14, 2011, 03:46:47 am
Ya I can definitely see the flicker, and it seems to be unsteady(sometimes it will appear smoothly other times it seems to slow down for a split second). Still interesting :)
Title: Re: Rapid animation for palette saving?
Post by: Helm on January 14, 2011, 04:45:04 am
commodore 64 scene has been doing this since the dawn of time.

If you want my opinion, that way madness lies. I use flicker as a mood-setting thing, not to fake new colors. Making people squint to look at flix0r hell to see what colors you wanted to make is murder for the eyes, I think. The less notable the flicker, the more classy it is. And if you have free palette control (no matter how few colors you have to work with) then there HAS to be a better hand-picked color to use than a flicker-mode based compromise.
Title: Re: Rapid animation for palette saving?
Post by: Jeremy on January 14, 2011, 05:50:09 am
From memory, a frame rate of 0.01 gets defaulted back to 0.10 in many browsers. I know I've seen a guide comparing different browsers...
Fake edit: Found it (http://humpy77.deviantart.com/journal/12374968/) It has graphs and stuff  ;D

Basically, depending on the browser you can "safely" set delay to about 0.06 fps without it getting defaulted on most common browsers (Opera sux)

I can only guess that on the gameboy there weren't these limitations so they could trompe-l'oeil with a frame rate of 1/100 of a second everything on this line is pure conjecture
That set of dither interlaced-environments that was floating around a while back, with weather and other water effects, was flash-based wasn't it  ???

EDIT: @Dusty's actual question: Perhaps a dither animation could work, esp. with the peach tone, light green and light purple 'cos they're fairly similar in value.
Title: Re: Rapid animation for palette saving?
Post by: Dusty on January 14, 2011, 06:04:36 am
That set of environments that was floating around a while back, with weather and other water effects, was flash-based wasn't it  ???
It was a method of palette swapping done via HTML5 :)

http://www.effectgames.com/effect/article.psp.html/joe/Old_School_Color_Cycling_with_HTML5
Title: Re: Rapid animation for palette saving?
Post by: ptoing on January 14, 2011, 06:56:43 am
I can only guess that on the gameboy there weren't these limitations so they could trompe-l'oeil with a frame rate of 1/100 of a second everything on this line is pure conjecture

I doubt that on the gb you will get more than 60 fps if even that. One of the features that helps on the GB to make the colour making via flicker work is how shit the screen is, it ghosts quite a bit, meaning the colours kinda stay there for a while and thus blend better.
Title: Re: Rapid animation for palette saving?
Post by: Jad on January 14, 2011, 08:24:44 am
I can only guess that on the gameboy there weren't these limitations so they could trompe-l'oeil with a frame rate of 1/100 of a second everything on this line is pure conjecture

I doubt that on the gb you will get more than 60 fps if even that. One of the features that helps on the GB to make the colour making via flicker work is how shit the screen is, it ghosts quite a bit, meaning the colours kinda stay there for a while and thus blend better.

'Shit', haha, I don't really know, it's not like you couldn't see shit in games because of super slow refresh rate, I sort of think it lends a nice smoothness to everything on the Gameboy screen.

Well, an old brick boy with low batteries was horrid (from what I remember) but a fully charged one is cool.

Also yeah, the fading in-fading out quality of the refresh rate of the game boy screen made for good flicker transparency, since the 'flickering' wouldn't appear O:!
Title: Re: Rapid animation for palette saving?
Post by: ptoing on January 14, 2011, 08:48:01 am
Yus, tho I can only think of 2 games that used it from the top of my head.

Castlevania 2 (titlescreen logo thing and I think in 1 of the levels in the bg)
Chikyuu Kaihou Gun ZAS (backgrounds in some levels, quite extensive actually.)
Title: Re: Rapid animation for palette saving?
Post by: Jad on January 14, 2011, 11:14:55 pm
You mean Belmont's Revenge? The other one is just castlevania adventure(s?), right?
Title: Re: Rapid animation for palette saving?
Post by: ptoing on January 15, 2011, 11:30:38 am
Yes, or Dracula Densetsu II (which is actually better than that US version because it has the Cross and the Holy water instead of the Axe and Holy water which are almost the same, booo)
Title: Re: Rapid animation for palette saving?
Post by: Jad on January 18, 2011, 04:53:19 pm
Ya, that game uses it for the mermen, before they appear out of the water. That's one thing I remember from the top of my head.
Title: Re: Rapid animation for palette saving?
Post by: setz on January 18, 2011, 05:59:21 pm
Ya, that game uses it for the mermen, before they appear out of the water. That's one thing I remember from the top of my head.
Theres a stage late in the game, where the entire background flickers.

A less dramatic example is on harvest moon GBA, where the textbox flickers
Title: Re: Rapid animation for palette saving?
Post by: ptoing on January 18, 2011, 06:06:31 pm
Ya, that game uses it for the mermen, before they appear out of the water. That's one thing I remember from the top of my head.
Theres a stage late in the game, where the entire background flickers.

Are you sure? Afaik there is only one level which uses it a bit. I played this game recentlyish in KiGB (only emulator in which the flickering works properly) quite a lot and I do not recall massive flicker. (it is quite subtle on the real thing anyway, or when properly emulated)
Title: Re: Rapid animation for palette saving?
Post by: setz on January 18, 2011, 06:59:44 pm
By flickering, I meant the flicker-transparency effect, I think its the first stage after you beat the 4 base castles. The entire background flashes in/out, which on a slow screen would look better. This sounds like a great excuse to replay this game, maybe I'll make the time later. I'm curious how it would look with some of the filter options enabled and tweaked with mednafen.

The harvest moon GBA flicker is pretty annoying, at least on emulator: its a 50% dither pattern that alternates, it can look pretty smooth most of the time, but there are times when it'll lag and be like "hey vision, you're totally fucked :lol:"

The subtle feeling of helm's flickering image earlier in this thread gives off a creepy feeling, and I think it works well for that, but I'd shy away from it in most cases.
Title: Re: Rapid animation for palette saving?
Post by: Jad on January 18, 2011, 07:34:51 pm
Well, there's a lot of flashing in the background around the 8-minute mark in this video http://www.youtube.com/watch?v=1UzWd8Qgw2o&feature=related

I remember it looked kickin rad on the original machine, so ya

You were thinking of the extensive flashing in the latest part of Cloud Castle, not the dracula castle outer grounds. Can be seen around the 2-min mark in this http://www.youtube.com/watch?v=0pdzekd_Des&NR=1

Note to all that these actually looked good on the original game boy.
Title: Re: Rapid animation for palette saving?
Post by: Helm on January 18, 2011, 08:10:14 pm
some awesome music in those clips too.
Title: Re: Rapid animation for palette saving?
Post by: ptoing on January 18, 2011, 09:40:50 pm
Setzer, the flickering on Harvest Moon (and pretty much everything) on emulator will look weird because of the refresh rate. On systems like the GBA or on arcade monitors or TV sets you have a stable refresh rate. Same goes for most or all CRT monitors, but not sure there. But on LCD screens this does not usually happen, so you get tear.

Anyway, for those who wanna play GB stuff on emu use KiGB and turn on "Mix Frame" under Option > Video and you will get a nice ghosting effect which looks very very close to the real thing.
Title: Re: Rapid animation for palette saving?
Post by: Jad on January 19, 2011, 04:18:16 pm
some awesome music in those clips too.

I'm derailing the thread, but yes, the music is so good. Playing castlevania 2 for the gameboy since I was a kid has given me such incredible amounts of musical inspiration. Also, some of the songs have small riffs that feel very metal, haha.

Anyways, it's my favourite soundtrack for the gameboy, although I'm biased.