saint11

Pixel Art Process

Today's tutorial is a little different than the ones I usually make. Since I'm talking about a process, I decided to go with a more traditional sequential tutorial.

Reading text with a timer is a bit stressful, so I added still frames of this tutorial to this post.

As always thanks everyone for the support and until next week!

2017-02-14 18:05:42 +0000 UTC View Post

Animation Easing

This tutorial is both for programmers and artists. Changing the speed of moving things gives the animation a lot of personality, impact and makes it interesting.

For programming, when using tweens, don't forget to use easing functions, lots of them. And specially for you I made a simplified Easing Functions Cheat Sheet using the Löve framework, (based on glide by Jacob Albano). Don't forget to download it.

To run the ....

Render Tricks

Jeremy Mitchell, (@floatvoid on twitter) sent me a shader version of my previous tutorial about rendering tricks!

These are more advanced, but more versatile and have improved performance.

Thanks a lot, Jeremy <3

Render Tricks

Here's another programming/art tutorial!

This one is heavier on the programming side, but should still be useful to artists that wanna know how to do some simple rendering tricks I use a lot.

I also hope that these will help you make your own render codes. You can do all sorts of stuff by messing with the render, like sprite trails, glitches, motion blur and many others.

Don't forget I included a .love example file in this post, I also included a .lua file with the sourc...

Parallax and Depth

Parallax is one of my favorite techiniques in game art and programming. It's a very easy thing to add and it's a good way to convey depth in 2D games.

Don't forget I included a .love example file in this post, I also included a .lua file with the source, so you can study that too.

To run the .love file, just download Löve here: https://love2d.org/

Machines and Weird Tech Tutorial

Sorry everyone! I was suposed to post the tutorial yesterday, but I had a really bad flu or something. I'm getting better already, though :)

Ok! About machines, I decided to make something like a "reference sheet" this time. Something you can look at to get ideas for elements to add to your own machines. Also, don't forget to look for reference around you and online, broken machinery are specially good for that.

Also, here's some previous tutorials that might be useful for this:

2017-01-17 18:26:51 +0000 UTC View Post

Explosions, part 1

Explosions are one of my favorite things to animate! It has a lot of particles, so I always try to animate everything individually. For example, I will draw one piece of shrapnel from start to finish, then one puff of smoke, from start to finish, and so on.

Explosions have a lot of fire and smoke, and I also have some tutorials on that, so please check those out for more info: 

Fire tutorial: ...

<1 Pixel Movement Tutorial

First tutorial of the year and I'm already late :3

But here it is! The theme is <1 pixel movement, or how some people call it subpixel animation. Well, since moving less than one pixel is impossible this is actually a tutorial on how to make animations as subtle and delicate as possible.

In my opinion this is probably one of the hardest things to do in pixel art, so my main advice is: go slow and practice a lot. And don't worry, this thing is hard to get right, usually I rest...

Animation Planning

Hey :D

This tutorial is about how I usually approach complicated animations that require planning. I'm really not sure if this is the "official" way of animating since I never had formal training, but this is how I usually work:

Still Frame > Rough Sketches > Keyframes > In-Betweens (and general fixes)

I think the hardest part is the keyframes, usually means coming up with cool poses in low resolutions. But the in-betweens is by far the most exhaustive part, this is where ...

Voting Thread! Christmas Special

This week's voting thread I'm making public to everyone because, well, it's almost christmas :D I hope that's all right with everyone.

So, just comment with the topic you want me to work on for the next Monday! Here's some ideas:

• Explosions
• Tornado/Wind
• Moving things less then 1px
• Handling Complex/Long Animations

Character Design 1

This week's tutorial is about character silhouette!

For me the silhouette is probably the most important aspect of the character design, even more so in pixel art.

Working with pixel art most of the times means that we are working in low resolution and since we can't add too many details or even too many colors the silhouette must tell the story.

When I draw a character I always start by making their silhouette, it doesn't need to be very polished, it's just a sketch of the general...

Skulls and Bones Tutorial

Here's some thoughs about what I think when drawing skulls and bones. 

Most of the time I feel like I'm struggling with the low resolution, so it feels more like solving a puzzle than drawing, but I really like that. Here's some other tips that wouldn't fit in the page:

• Nothing says "I'm dead" more then exposed ribs. Just use a stripe pattern in the chest of the character to make them
• It's all about pattern recognition. The human mind wants to see faces everywhere, us...
  2016-12-12 18:52:20 +0000 UTC View Post

Vegetation Tutorial Part 1

Posting a little later than usual, but here it is!

This is not exactly a tutorial but more of a collection of tips and details to note when drawing vegetation. But my main advice is to avoid noise at all cost. Textures are good, but once the drawing gets too noisy everything looks weird. That's why I worry about the shape first, then about the light and only after that I worry about details.

Another useful tutorial on this topic is my 2016-12-05 19:38:13 +0000 UTC View Post

Seamless Animation Tutorial

This one is very abstract, but I tried to explain my though process while making loops. I think practice is very important when learning how to make seamless loops, so, I recommend exercising this, a lot.

Thank you for the support, and until next Monday!

Fire Tutorial

With the vast majority of votes, here's the fire tutorial!

For me it was very hard to explain how to draw fire, I think that's why this one has a lot of text. I draw a lot from observation and I often use other art as reference. This is always a good way to learn how to draw and animate most stuff.

About the streams: I still didn't manage to set a fixed day of the week for streaming, but I plan to do so very very soon. I expect to try streaming again late next week.

Water Tutorial

This is probably the most complex tutorial I've made so far, but I hope it can be useful! Water is definitely not my specialty, so I had to do a lot of research for this one.

As always, a disclaimer, those are not stone written rules, they are just how I usually think when drawing water. And this is not how real water behaves, just how I think it looks cool.

Drawing water for me is all about the flow, I always try to pay attention to the loop and to make everything move ...

Level Design: Progression

Level design is not really my specialty, and it's a very personal subject, so these are just some thoughts I usually have when designing levels, not rules.

The core of fun for me is the Learning. This is why every time I add something to my level I ask myself "What am I teaching here?" and "What am I asking the player?".

Another important thing is the Pacing. I always try to have some safer areas or strong powerups after difficult parts, so the player can catch their breath and try new s...

Glitch Effect Tutorial

I always try to get references from real glitches I see around. Like bad monitors at the shopping mall, weird glitches in those animated signs on shops or when my video card decides to get crazy.

I usually try to pay attention to what the glitches are actually doing, are they moving everything to the left? Is the green color off? Is everything just a bunch of random colored noise?

I try to get those real-life examples of glitches and make them look pretty and cool. For me, the idea i...

Another Goal Reached!

I'm happy to announce that I just reached another Patreon goal! I'll start streaming every week on a fixed day and time, which I'm still trying to decide.

What would be a good day for you? Weekdays? Weekends?

Thanks everyone for the support! 

Electricity Tutorial

My main "rule" for animating electric stuff is to make everything flicker, like a lot. I also try to make it with 24 fps, so it's more fluid.

Electricity bolts are very fast, so in the first frame it should be at its maximum size and then it can dissipate slowly.

I usually make electricity starting with sharp angles and then it gets softer while it dissipates. Even though in the real world electricity almost never looks this sharp I found out that it looks better when animating if it doe...

Ben Prunty Album Cover

This is the cover I made for Ben Prunty's latest album "ElectroCrypt", that you should check out now. It's amazing, perfect to listen to while working.

As always I made it using Aseprite, and its original files will be in the next Art Dump.

Top Down Run Cycle

This is one of many ways of making a top down run cycle. I chose this specific way because it's usually how I work and because it's the simplest way I could think of.

I usually focus on the 3 jump frames and 2 recover frames thing and then I try to connect everything by making secondary animations, like hair movement, clothes, etc.

If you need to, it's also possible to just make one jump and one recover for a super minimal animation, but it won't look very fluid.

Honestly I'm n...

Pixel Art Fundamentals 1

Noise reduction was the most voted topic! I expanded on the topic, and it ended up pretty complex and since I also explained other stuff I called this one pixel art Fundamentals 1.

Some other tips that wouldn't fit the image:

• Keep you color count low (less then 32 colors).
• Consider large areas with flat colors, so the eye can rest from details.
• When you need to fit too much detail in a small area, consider changing the draw...
  2016-10-10 21:37:24 +0000 UTC View Post

Simple Run Tutorial

Hello again!

People seem to really want a walk/run tutorial, so here's one! Walk/run are very complicated animations so I did my best to come up with the simplest run I could. My plan is to make more tutorials on the same topic later, focusing on individual parts, like the arms, legs, head movement, inclination, etc.

My biggest advice for people learning how to make walk/run animations is pay attention to the head movement.  Even if the legs and arms movements are not that gr...

Quick Tip

Here's a quick tip on attack animations, answering a question made by Cam

"How would you approach the sword animation if the sword was held in front of the character? Any differently? The arc reads nicely from a resting behind position but I wonder how it would work if the sword was held in a forward resting position."

Great question, if you have the sword in front of you and you just ...

Goal Reached!

The $150 goal was just reached! Thank you so much!

The plan from now on is: every Monday I'll post a gif-tutorial about pixel art and other gamedev stuff. If I get some extra time I might post some text tutorial/article too.

I'll start working on the tutorial by Friday, so if you get the $5+ tier don't forget to comment on the voting post!

Thanks so very much again for the support, and I hope my tutorials can help you somehow.

Smoke Animation

Every time I have to animate complex systems like smoke, splashing water, or fire, I try to break the system down to small parts and then I animate those parts individually.

Thinking of how a whole puff of smoke will move is just too complex for me, but thinking on how a small part of it will move is relatively simple.

If you notice the last example, it's a looping smoke effect, the only difference from the others is that I try to spawn more smoke every 4 frames or so, and continue the p...

Simple Attack Animation

This one's a little more complicated, about how to make a minimal attack animation.

With an attack animation one of the most important things to do is to make sure that the player feels the input immediately.  So, the hitbox area must be filled IMMEDIATELY in the first frame, no anticipation, nothing.

Since that action is so fast you must make it bounce back until the relaxed position again, and then I usually add another little bounce (frame 8) just to make everything juicier.<...

Simple Shine Tutorial

This is a basic shine animation tutorial. As you can see the important thing is the timing, the frame 3 is used to skip most of the area you want to shine.

You can use a simple shine like that, or add a second shine (the extra shine) after a single empty frame, or even use just the extra shine, for some effects.