Blocking Out Willow’s Run/Skate Animation Cycle

Blocking Out Willow’s Run/Skate Animation Cycle

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

Starting Pixel Art Character Design

Starting Pixel Art Character Design

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 to “Pixelize” Anything and Everything

Learning to “Pixelize” Anything and Everything

Yesterday I managed to compile Aseprite for my Linux laptop so I could officially get started with the game. I’m going to tackle pixel art graphics first because it will help define the look of the game, the style of the artwork, and color palette. Once all (or most) of the pixel art graphics are created, then I can begin work on the actual programming. This is still the extreme early stages, so there are still a lot of specifics yet to be discovered about how the game will eventually look and feel.

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

When selecting a person, object, or character to create in your pixel art, one of the first steps is deciding how much detail you’re willing to lose, and where those losses of detail occur. If you’re creating a car, what’s the smallest detail you want to make out? Do you want to have a license plate visible? Readable? Once you’ve decided on that level of detail, create that smallest detail and work your way out from that detail. But also keep in mind that, depending on which detail you choose, that will impact your next most important decision when starting out.

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

Again, Brandon has been a huge help in teaching me the basics of pixel art and how to get started with the sizing and scaling of the characters in the screen space. Just for everyone’s reference, I’ll leave you with this excellent video on the subject.
Building Aseprite

Building Aseprite

After watching several videos on the topic of pixel art, researching some of the artists in the top of my search results, I decided to make the leap and change up my graphics creation strategy. For me, personally, it took quite a bit of time to figure out how to compile the software from scratch (because I had to compile some of the dependencies as well), but without further ado, here we go.

Step 0.0: CMake

I started off like normal, I guess, cloned the repo, and got to work inspecting the files, README, INSTALL, etc. I went through the process for several minutes only to find out that my version of CMake (installed like sudo apt install cmake was several versions behind the minimum requirement. I ran cmake --version only 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.
First off, you’ll want to get rid of any old versions of cmake by running 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

This one’s pretty straightforward. Just make sure you have git installed and run git clone --recursive https://github.com/aseprite/aseprite.git
The next step is getting all of the tools required to build Aseprite. This can be found in INSTALL.md

Step 0.2: Get your tools

This is the very first step in 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.
Just to reiterate, the command to install all your dependencies in one go is sudo apt-get install -y g++ cmake ninja-build libx11-dev libxcursor-dev libxi-dev libgl1-mesa-dev libfontconfig1-dev again, just make sure to double check your version of cmake.

Step 0.3: Make sure you have Skia

This one was a little tricky because this dependency wasn’t actually covered in the dependencies install command from step 0.2. It very well be because Skia is actually a graphics library made available by Google, and thus, not available on traditional linux repositories. More information on the Skia project can be found at skia.org.
Inside the INSTALL.md file 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 cmake command) is $HOME/deps/skia/ or something similar.
You can either compile skia yourself 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/deps folder 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

Once you’re done cloning the repository, you’ll want to go inside it with 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 is 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 INSTALL.md file

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

Almost there! Once you’ve build all the files using 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 INSTALL.md is 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!

./aseprite and enjoy your fresh copy of Aseprite!
Beginning Pixel Art Work

Beginning Pixel Art Work

Next step for tackling this game is going to be pixel art, and lots of it. So I’m taking the time to familiarize myself with this relatively new (to me) art for and it’s nuances. First stop… Which program is the best to tackle this sort of work? Also, it’s worth mentioning that I’m officially a dedicated Linux user, so all of of the software that I’ll be using for this project will have to be (at a minimum) compatible with Linux.
First up, I downloaded Pixel Studio just so I could start doodling during my breaks. I didn’t really get far with it, but this was one of the first doodles I did with it. By the way, this app would be way more useful if I had phablet instead of trying to goof around with my fat thumbs trying to fill in the pixels I wanted.
Retro Arcade cabinet

Light Quest Update 1

This will be the first of hopefully many updates throughout this year on “Light Quest”. Light Quest will be a monster project that will consist of a full length feature film as well as a custom arcade cabinet designed and developed from scratch to be featured in the film.
A few weeks ago, my parents brought over this awesome retro keyboard with a lot of automated features like arpeggios and bass chords, etc. So one day I just start goofing around with it and I happened to hit 3 notes that I thought would be perfect for the boot-up sound of the arcade game. The first sound you hear when you turn the game on, or otherwise hit the main menu.
I immediately went to the computer and drew those notes out on a piano roll and got the very first element for the game. The boot-up sound. Hopefully more updates will come soon in the form of pixel art mock-ups.