Beautiful 8-bit Pixel Art Scenes Animated Through Color Cycling

[masterneme]

You must see these scenes:

http://www.effectgames.com/demos/canvascycle/?sound=1

Old School Color Cycling with HTML5

Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette. Back then video cards could only render 256 colors at a time, so a palette of selected colors was used. But the programmer could change this palette at will, and all the onscreen colors would instantly change to match. It was fast, and took virtually no memory. Thus began the era of color cycling.

Most games used the technique to animate water, fire or other environmental effects. Unfortunately, more often than not this looked terrible, because the artist simply drew the scene once, picked some colors to be animated and set them to cycle. While this technically qualified as “color cycling”, it looked more like a bad acid trip. For an example, just look at the water in this game.

However, there was one graphic artist who took the technique to a whole new level, and produced absolutely breathtaking color cycling scenes. Mark J. Ferrari, who also illustrated all the original backgrounds for LucasArts Loom, and some for The Secret of Monkey Island, invented his own unique ways of using color cycling for envrironmental effects that you really have to see to believe. These include rain, snow, ocean waves, moving fog, clouds, smoke, waterfalls, streams, lakes, and more. And all these effects are achieved without any layers or alpha channels – just one single flat image with one 256 color palette.

Unfortunately the art of color cycling died out in the late 90s, giving way to newer technologies like 3D rendering and full 32-bit “true color” games. However, 2D pixel graphics of old are making a comeback in recent years, with mobile devices and web games. I thought now would be the time to reintroduce color cycling, using open web technologies like the HTML5 Canvas element.

This demo is an implementation of a full 8-bit color cycling engine, rendered into an HTML5 Canvas in real-time. I am using 35 of Mark’s original 640x480 pixel masterpieces which you can explore, and I added some ambient environmental soundtracks to match. Please enjoy, and the source code is free for you to use in your own projects (download links at the bottom of the article).

Now my question is: can I do the same thing cycling materials in Paper2D? because it looks gorgeous…

[masterneme]

@KitatusStudios;330641

Wow, This is a really interesting read!

As you’re asking if it’s possible in Unreal Engine 4, I’ve moved this thread out of off-topic, As I’d like to know if it’s possible too.

Thanks.

Here you have a Q&A with more info: Q & A with Mark J. Ferrari | EffectGames.com

I found it reading this article with the guys from Shovel Knight: Breaking the NES for Shovel Knight

They use the same technique in their game but is not as impressive.

Here is the link again, you need to see the scenes there because the pictures I posted are just static captures but they’re alive
http://www.effectgames.com/demos/canvascycle/

Edit: I forgot to mention that if you hover your mouse pointer over the palette colors you will highlight their respective pixels on the scene.

[Michael_Noland]

Yes this is possible on 2D or 3D stuff in UE4. There are two different approaches, depending on what you’re trying to accomplish.

If you want to do something like team colors or possibly mega man / shovel knight sorts of things, you can use a mask texture to indicate where to colorize and use a vector parameter instead of the source texture in the areas the mask indicates. You can then animate that color and do whatever you want.

If you want to do straight up palletized textures, then use the source texture as an index into a palette texture (you’ll need to make the source texture uncompressed for this to have any realistic chance of looking good). You would do this by making the UV for the palette texture from say the G channel of the index texture. In order to do animations, you’d either make the palette texture dynamic and modify it each frame, or you can smear the texture across the other axis, turning it into a 2D texture where U is color and V is time. Keep the colors that don’t animate constant in a column, and rotate the colors that you do want to animate.

Cheers,
Michael Noland

[anonymous_user_fd738307]

this is stunning.

What i’d really love to understand in depth is the authoring workflow he used. The principles are easy, but there’s so much attention to details in there.
I’d go crazy doing rain and snow, not to mention semitransparents like fog.

amazing.

[masterneme]

@Michael Noland;330835

Yes this is possible on 2D or 3D stuff in UE4. There are two different approaches, depending on what you’re trying to accomplish.

If you want to do something like team colors or possibly mega man / shovel knight sorts of things, you can use a mask texture to indicate where to colorize and use a vector parameter instead of the source texture in the areas the mask indicates. You can then animate that color and do whatever you want.

If you want to do straight up palletized textures, then use the source texture as an index into a palette texture (you’ll need to make the source texture uncompressed for this to have any realistic chance of looking good). You would do this by making the UV for the palette texture from say the G channel of the index texture. In order to do animations, you’d either make the palette texture dynamic and modify it each frame, or you can smear the texture across the other axis, turning it into a 2D texture where U is color and V is time. Keep the colors that don’t animate constant in a column, and rotate the colors that you do want to animate.

Cheers,
Michael Noland

Awesome, thanks. Didn’t you do something similar in the second 2D side-scroller video with the projectile?

[DocVooDoo]

@Michael Noland;330835

Yes this is possible on 2D or 3D stuff in UE4. There are two different approaches, depending on what you’re trying to accomplish.

If you want to do something like team colors or possibly mega man / shovel knight sorts of things, you can use a mask texture to indicate where to colorize and use a vector parameter instead of the source texture in the areas the mask indicates. You can then animate that color and do whatever you want.

If you want to do straight up palletized textures, then use the source texture as an index into a palette texture (you’ll need to make the source texture uncompressed for this to have any realistic chance of looking good). You would do this by making the UV for the palette texture from say the G channel of the index texture. In order to do animations, you’d either make the palette texture dynamic and modify it each frame, or you can smear the texture across the other axis, turning it into a 2D texture where U is color and V is time. Keep the colors that don’t animate constant in a column, and rotate the colors that you do want to animate.

Cheers,
Michael Noland

Can you make a tutorial about these twoo approaches?

[RyanB]

I would also suggest possibly looking into flowmaps, as the effect achieved in the original post looks quite similar to flow maps. Might be simpler than trying to encode it using lookup textures.

[The_Qweaker]

Hey guys,

I know, it’s been a while, but it happens that I’m just out of Mark Ferrari’s talk @ GDC 2016.

Indeed his work is amazing.

He explained his workflow at length, and, believe me, you just don’t show up one monday morning and hope to get it right on the friday afternoon of the same week.

Mark worked for Lucas Art in the 80s, producing images for L.A. games in a matter of 2 days and up to 2 weeks, producing images just like others, at their time, did for comics books.

He invented many techniques so that he could replace hills by cities (for saving space) and skies could go from sunny morning to stars at night. All this with color cycling. NO FRAME ANIMATION.

He did most of his work with Deluxe Paint (still runs under Dosbox – not quite well, but does run) and nowadays he uses either pro-motion or else photoshop.

But with photoshop, he works pixel by pixel, turning off anti-aliasing and creating all the necessary patterns by hands, including them with the magic wand when necessary.

Mark obviously has a amazing sense of lighting. The one you can learn, but also the one you build with repeated efforts from the 80s constraints: 8 bit, 256 colors and saving space at any corner of the computer memory.

Rain, snow, water reflection and water bubbles: all by hand-made dithering patterns, patiently designing the color gradients so that the animation looks right for the time of the day, pixel by pixel.

He now works on a kickstarter funded project.

He argued that nowadays tools are not what they used to be in order to create such pictures, but he also mentionned that Joseph Huckaby currently is working on such a tool, hopefully out next year (2017). Yes. Photoshop is great, but many 8-bits tools (mostly context aware pixel gradients) are just not there; of course, who would want such tools in Photoshop?

Mark got many questions and obviously inspired 200% of the audience.

As a personal note, I wish he writes a book, as otherwise, all his knowledge will be lost at some point. Just like any other knowledge, I know. But, hey, let’s fight this as long as we can. For the sake of art and the human being.

Sincerely yours,

– The Qweaker.

[masterneme]

Here is a link to that talk: http://www.gdcvault.com/play/1023586/8-Bit-8-Bitish-Graphics

[anonymous_user_5541b5a3]

@Michael Noland;330835

Yes this is possible on 2D or 3D stuff in UE4. There are two different approaches, depending on what you’re trying to accomplish.

If you want to do something like team colors or possibly mega man / shovel knight sorts of things, you can use a mask texture to indicate where to colorize and use a vector parameter instead of the source texture in the areas the mask indicates. You can then animate that color and do whatever you want.

If you want to do straight up palletized textures, then use the source texture as an index into a palette texture (you’ll need to make the source texture uncompressed for this to have any realistic chance of looking good). You would do this by making the UV for the palette texture from say the G channel of the index texture. In order to do animations, you’d either make the palette texture dynamic and modify it each frame, or you can smear the texture across the other axis, turning it into a 2D texture where U is color and V is time. Keep the colors that don’t animate constant in a column, and rotate the colors that you do want to animate.

Cheers,
Michael Noland

Ok i’m lost … this sounds exactly what i want …
Could you possibly give some reference where i can look up how to do this?

[anonymous_user_c9c65e0a]

I am looking forward for the tutorials for this 8-bit Pixel Art.

[anonymous_user_5dde41ea]

@Michael_Noland

you can smear the texture across the other axis, turning it into a 2D texture where U is color and V is time. Keep the colors that don’t animate constant in a column, and rotate the colors that you do want to animate.

Cheers,
Michael Noland

Sorry to resurrect such an old thread, but I’m trying to make this work and getting nowhere.

edit:

Okay I solved my problem. When you color sample a texture that’s say 64x1 it will sample from left to right. I assumed it would continue doing this when adding more height and you would just use a panner to sample additional rows, but it only samples directly from left to right if it’s just 1 pixel high. as you increase the height dimension it starts sampling from the top left corner of the texture down to the bottom right corner of the texture. So let’s say you have a 64x4 texture. It will sampler the first 16 pixels from the top row, then it will sample the next 16 pixels from the next row and so on. With an 64x8 texture it will sample the first 8 pixels on the first row etc. so basically divide the width by the height. a picture will probably explain this better. pretend this is a 64x4 texture to be used as a color palette for an indexed texture. I scaled it up 10x for clearity.