Download

Beautiful 8-bit Pixel Art Scenes Animated Through Color Cycling

You must see these scenes:

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

664d11e86e0c37d3dc1a283dba3466b5d6de9ac6.png
881beebe20cdef55e1c8933657801e0d2b8e7ea5.png
e5b329285aebf7509904db92ca850d8fbf32ce71.png
64e265c74c8c63ad814c767faedf4668164c674a.png
5.png
94a5e30250a80b5657b659a90be53580fb88f483.png

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

1 Like

Thanks.

Here you have a Q&A with more info: http://www.effectgames.com/effect/article-Q_A_with_Mark_J_Ferrari.html

I found it reading this article with the guys from Shovel Knight: http://www.gamasutra.com/blogs/DavidDAngelo/20140625/219383/Breaking_the_NES_for_Shovel_Knight.php

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

cycle.gif

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 :smiley:
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.

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

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.

1 Like

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

Can you make a tutorial about these twoo approaches?

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.

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.

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

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?

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

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.

example.png