Blocking Out The Initial Run/Skate Cycle
I have to admit, starting the animation cycle was pretty intimidating. Especially when I’m staring at a nearly finalized version of the main character. Luckily, I came across a tutorial that got me an EXCELLENT head start on creating the run/skate cycle. I ended up just creating a new project file to begin the animation cycles.
The tutorial I followed was actually doing a common run cycle, but for my use case, I needed to convert it to a “skate” cycle, since WIllow will be skating through all the levels of the game. After doing some initial research on roller skating in an effort to find a profile video of someone skating past the frame. Unfortunately, I was unable to find a video of that specific skate cycle reference, so I just neded up modifying the run cycle from the tutorial to a skate cycle.
First I started out by importing a copy of the character sprite into a smaller canvas for scale reference. Then I created a new layer for the head and 8 new frames. I started bobbing the head up and down in a “running” motion. Next, I created a rough forearm shape and swung it back and forth. Next the lower legs, upper legs, upper arms, and torso. Once all the body parts were connected and felt like they were making the appropriate running motion, I started to modify it. I ended up sliding the legs more rearward to give the impression that the weight was resting on the front foot for slightly longer as the body was sliding forward. The resulting animation is still pretty rough and will likely change, but I think it’s an okay start. I’m going to try to enter a 72 hour game jam this weekend, but I’m not sure how I’ll do because my weekend just piled up with outside work. We’ll see how it goes!
Running into the weekend like..
Pixel Art Character Design
Yesterday I began work on the first (of many) pixel art character designs that will be featured in the upcoming Light Quest arcade game. After some initial research, I found several pixel artists that recommended starting with a silhouette when designing a character. This achieves several things. First, it helps you create an iconic character that would be easily recognizable by its shape alone. It also helps create a clean design to help better feature the main attributes of the character. In the case of Light Quest, the main character named Willow, is a young girl around age 12 who is almost always seen wearing a pair of roller skates. So in the silhouette, I wanted to make certain that you were able to make out the fact that she was wearing roller skates.
Level Select Screen
In addition to beginning work on the initial character designs, I also began work on designing the various elements that will ultimately comprise the “Level Select” screen. This will be presented as a map of the town that Willow lives in. The icons that represent each level are a house, a pizza shop, a warehouse, a forest, and a lighthouse. The ground of the map (dirt paths, paved roads, sidewalks, and grass have yet to be developed, but will likely be designed separately. The idea is to have a top-down version of Willow’s sprite that will walk up, down, left, and right in order to ‘choose’ the level. Once Willow enters the level, it will switch to a side-scrolling platformer-style level design.
Honing in the (Final?) Design
I feel like it took me a long while (maybe around 2 days, while not working on it all the time) to get close to the design as present. My biggest pitfall was actually just starting! Once I had a few blobs put down I was able to make several iterations before I got stuck. After that, I just did the entire process again. Just put a few different blobs down, got a different main shape, then made a few iterations before adding color. All in all, I thought it was really fun! I’m looking forward to creating more characters in this new (to me) style.
Learning a New Pixel Art Form
One of the most helpful sources for learning this new pixel art thing has been Brandon James Greer. His videos have been insanely useful for learning the basics of pixel art and changing the way you approach creating new art. Please give that guy a subscribe!
Select the Smallest Detail That You Want Visible
Select Your Canvas Size
Depending on what your ultimate goal is, this one might actually be your first choice. Knowing which resolution to design in will ultimately impact the amount of detail you can realistically include. In my situation, I’ll be using my pixel art to animate walk/run/jump/idle cycles, and create spritesheets and tilesets for a retro inspired arcade game. With that in mind, I’m using the original resolutions of classic console hardware as a starting point for my designs. The NES console’s resultion is 256×240. With that information, I can start designing my character within the context of the entire screen so I’ll know just how that character will look and feel within the space of the entire screen.
Reference For Getting Started
Step 0.0: CMake
sudo apt install cmakewas several versions behind the minimum requirement. I ran
cmake --versiononly to find out that I was running version 3.10 when the minimum requirement is 3.14. So if you already have CMake 3.14 or above, you can skip this step. Otherwise, here’s how you update.
sudo apt remove cmake. After that, head over to https://cmake.org/download/ to grab yourself an updated copy of
cmake. I ended up downloading the source code and building from scratch, but that’s not completely necessary because there are several pre-built binaries available as well.
Step 0.1: Clone that Repo
git clone --recursive https://github.com/aseprite/aseprite.git
Step 0.2: Get your tools
INSTALL.md. There are step-by-step instructions inside that pertain to every operating system. Just be sure to read them carefully! This is the part where you install
cmake, but just be extra sure to check your version by running
cmake --version. If you don’t have version 3.14 or higher, refer to step 0.0.
sudo apt-get install -y g++ cmake ninja-build libx11-dev libxcursor-dev libxi-dev libgl1-mesa-dev libfontconfig1-devagain, just make sure to double check your version of
Step 0.3: Make sure you have Skia
INSTALL.mdfile that you got when you cloned the aseprite repository, there are some notes regarding the moment you run
cmake. You have to run it from inside the
build/directory (which you’ll need to create), and you will need to define where you have either compiled or decompressed your copy of Skia. The example directory (the default defined in the provided
$HOME/deps/skia/or something similar.
skiayourself using the step-by-step guide provided by the team at Google, or, conveniently enough, the team behind Aseprite has a precompiled binary just for you! All you have to do is drop it in your
$HOME/depsfolder and continue with the steps to compile. Aseprite’s precompiled binary of skia can be found at https://github.com/aseprite/skia.
Step 0.4: Run CMake
cd aseprite. Next you need to create a folder to build your files inside of, since builds inside the source aren’t allowed.
mkdir build && cd build/.
The basic syntax of
cmake [path/to/source/containing/CMakeLists.txt] [OPTIONS]. So from inside your
build directory, you’ll need to define the source (one folder up). Then from there, you’ll need to tell
cmake where your
skia files are. More information on this can be found in the
cmake -DCMAKE_BUILD_TYPE=RelWithDebInfo \ -DLAF_BACKEND=skia \ -DSKIA_DIR=$HOME/deps/skia \-DSKIA_LIBRARY_DIR=$HOME/deps/skia/out/Release-x64 \-DSKIA_LIBRARY=$HOME/deps/skia/out/Release-x64/libskia.a \-G Ninja \..
Step 0.5: Run Ninja
cmake, and you didn’t encounter any errors, congrats! You’re almost there! If there are any more errors to come (in my experience) they’ll be on this very last step. The last command in
ninja aseprite. That will actually start the build process and end up spitting out an executable binary that you can launch once everything is finished running.
Step 0.6: Run Aseprite!
./asepriteand enjoy your fresh copy of Aseprite!