Pixel-art animation powered by css with a sprite created by Compass.

In this article I’m going to share my experience in creating a simple pixel-art animation, which I gave as a new year present to a good friend.

pixel art animation with sass sprite , mayenok.com

Don’t wanna read, just show me the result

Drawing

I used Adobe Photoshop CC, but I believe that any version is OK.

Go to Window > Timeline : a timeline will appear at the bottom of the window.

Switch to a frame view by clicking on the frames icon (at the left bottom corner of the timeline panel). Now you see the first frame and if you want to create another one - press Duplicate selected frames icon (located at the bottom of the timeline panel).

Now start drawing. I used layers and changed their visibility for different frames. My psd file is available in my repository as a reference.

pixel art animation with sass sprite , mayenok.com

pixel art animation with sass sprite , mayenok.com

You can test your animation by pressing a Play button on a timeline panel. I recommend to set a similar frame duration for all frames, as it will be easier to export them as separate png files later.

My pixel-art graphics is very simple - I used only a 4-pixel square brush to create it. Of course, there are some really beautiful and complicated examples of pixel-art from other artists. Check them out, they’re amazing:

Pixel of the Colossus by getdarwin

Super realistic pixel art by Fool.

Creating a sprite with Compass and using CSS to power animation

First you need to save your frames as separate png files. In Photoshop CC it can be done by choosing File > Export > Render video. Set your frame rate and click Render. When your frames are ready, put them to one folder.

Making a sprite with Compass is really simple, but you can use online tools for producing a sprite - there are plenty of them.

In HTML I have a div

<div id="my_div" class="pixel_animation">
</div>

In the SCSS file I have this code:

@import "frames/*.png";                     //this is the folder that contains my frames
@include  all-frames-sprites;               //here I include generated sprite to my css to use it as a class later

.pixel_animation {
  margin: 2% auto;
  width: 400px;                             //width of my frame
  height: 200px;                            //height of my frame
  @include frames-sprite(cartoon000);       // I include a class (<name-of-your-folder>-sprite) generated by Compass and I pass a first frame as an argument
  animation: play 30s steps(146);           //"play" is the name of my animation, then goes duration and number of frames
}

Then I power the animation. I want a background position of my sprite to change from the first frame to the last.

@keyframes play {                           //I use animation name that I had earlier
    0% {
      background-position: 0  0;            //initial frame
    }
    100% {
      background-position: 0 -29200px;      //second digit is the length of my sprite in pixels (146frames * 200px)
    }
  }
}

Ta-da! Here is the result!

Thanks for reading! :)

Date 06.04.2016