Using Spritesheets with Unity3D

New week, new article here!

In my last post, I’ve started a new series of posts related to 2D animations for Unity3D with a short introduction to Unity3D Mecanim. Today is time to import some sprite sheets into Unity and try to get an animation from them.

I personally love crafting my own sprite sheets by hand, I feel my 2D animations much more under control, but for this article I’m using a finished sprite sheet. If some wants to know more about how sprite sheets are made, give a look to this post from the good old times. Before adding it to Unity, check if the size of your sprite sheet is power 2 sized (512*512, 1024*512, 1080*1024…) to avoid further issues.

Spite sheets in Unity 3D

Spite sheets in Unity 3D

Continue reading

Introduction to Unity Animator

In small projects everyone needs to wear multiple hats. That’s why I’m usually coder, designer and animator in most of my games, and I’m not creating sound effects and music because I literally have no time to learn about it.

For that reason I’ve taken a look to some methods to include 2D animations in all the Unity projects I’m creating while I get used to the engine. For now I’ve tested Spine2D, 2D sprites and the animator that Unity provides as a built-in feature, and this article is an introduction to the last one.

 

Unity Animator's curves view

Unity Animator’s curves view

  Continue reading

Particles 2: Emitters and tools

Hey! You have 6 minutes? That’s what you need to see what’s going on here! 

Boss has been lashing me restless for days because I forgot to mention one of the most important things about particle systems and effects in the first post of  my particle series: emitters! We’re fixing this right now! I don’t want to be punished for this error anymore T_T

Particle emitters! Because it is high time

In the first particle’s post I explained a bit about particles life, a basic particle engine design and how particle effects works for dummies, but I miss to explain where the particles comes from!

Every particle system has an emitter and there is where particles are born. Emitters can be a point, a plane or even a 3D object, and particles can be created at the edges, the vertices or even the faces of them. In a pure 2D scenario an emitter can have 1 or 2 dimensions (well, that’s obvious xD).

Once a particle has been created, always from some point at the emitter surface (or inside the emitter in 3D scenarios), it will move, jump, shine or whatever it’s meant for, then it’ll die after a while, at the same time more particles are being created at the emitter, ready to complete their tasks.

particle emitter example

particle emitter example

Continue reading

Particles and sparkles

Hey! you have 5 minutes? That’s what you need to read the whole thing! 

Nowadays, we are so used to see incredible effects in almost every videogame and well known game engines supports complex particle effects. It’s awesome to create, for example, awesome smoke effects in a few steps, but in my case I wanted to study in depth how it works, even if I’m never creating a particle system from scratch again.

For now focusing on the 2D basics will be enough.

 

A basic particle

A basic particle is nothing more than an object with a little texture or animated sprite, a position, a size and a speed vector as attributes. Each particle is updated in the main loop, what means position, speed or even texture changes. When some particles are combined, they can create effects working together drawing them on the screen after each update.

basic particle example

basic particle example

Every particle has to die

Every effect has to end at some point, or even if it’s still alive, it’ll create more and more particles. If older particles don’t disapear after a while, the game will deal with thousands of them, lowering the game’s performace. To avoid this, every particle has a a life team associated usually called “time to live” or TTL. When a particle’s TTL goes to zero, the particle is removed from the one and only particle manager: the particle engine.

 

An Engine to rule them all!

A good way to keep a huge amount of particles under control is to create a particle engine. A basic one is nothing more than a collection of particles and some methods who calls the update and draws methods of each stored particle, and of course, cleans all the “dead” particles. Using this design we can store different types of particles and update them with one call at the game main loop.

 

basic particle engine design example

basic particle engine design example

As much particles as you can handle!

The number of particles for each effect is a good case of study. Most times, having a higher amount of smaller particles is better to create more realistic ones, but other aspects like the texture quality or how realistic is the way each particle moves always improves its results.
In spite of it, having lots of complex effects with thousand particles each one can sound awesome, but each particle is an object with a texture to be updated and drawn over the screen. A poorly optimized particle system may affect the game performance dramatically, so using one million particles with high resolution textures and a complex physics engine to update each one attributes may not be as good as it seems.

counter strike effects comparative over different versions

counter strike effects comparative over different versions

Here ends our first particle’s chapter. If you want to know more about this topic or you like any of our old posts, follow us on twitter or Facebook to stay tuned.

Thanks everyone!

Pixel art part 2: Moving Pixels

 
Hey! you have 8 minutes? That’s what you need to read the whole thing! 
 

Some weeks ago we released the first part of the pixel art tutorial, leaving animated pixel art to be released someday as a second part. That day has come! Today we are going to make the pixels move and show how to do it using Photoshop.

Before the pixels, there are tools and models

Before painting some pixels, we need some software to work with, and most of the times, a model is needed too. I’m using Photoshop, and this post will focus on how to use it. I’m using it because I feel so comfortable with it, and it offers so many tools to make the process and post-production easier even if is not a software designed especially for pixel art. There are other options like Pickle or Graphics Gale, which are good options as long as you feel ok with them, for example:

About the model, I’ll use as reference the incredible work the guys at Deconstructeam are doing for their “Gods will be watching”. It’s an open secret that I love so much how this game looks and how hard they’ve worked to create a unique atmosphere using tons of little pixels. The result won’t be even near their quality, I’m not that good, but be sure I’ll try my best. Deconstructeam – Gods will be Watching

Gods will be watching

Gods will be watching

 

It’s time for drawing and moving pixels arround

Let’s start! For the first steps, anyone can go back to the first part of the pixel art tutorial and find out how to create a basic model without any animations. For this example I’m using a 64 pixels squared canvas, but the canvas size depends on the pixel size needed and the size of the design. Notice that every example I’m showing here has been scaled using the first article process, increasing the image size with the nearest neighbor method. If anyone of you try to follow these steps, you’ll have to increase the zoom to 800% or more to work with the 64 pixels canvas. One of the easiest way to go is to create a basic shape to fix proportions and size of the character. As shown in the first part, a sketch drawn using Photoshop can be used to achieve the pixel over technique and fit a good shape to work with.  Once the basic shape is created, I’m only adding some base colors and some lights and shadows to create some volume. In this case the layer support of Photoshop allows having each step in one layer, making each edition and correction much easier.

building pixel art

building pixel art

 

It’s done, finally we’re going to make some animations!

Yay, the model is done. Now another flash back is needed. Once upon a time I posted something here about animation using Photoshop’s timeline right  here. The next step is more or less the same I wrote there,  adding a new frame to the timeline for each frame in the animation, lowering the last frame layer to have something as a guide, and the redrawing each pixel again in a new position to create an interpolation. As soon as the model is simple, I’m working over the base layer without details, because is enough to see what I’m doing and adding details is as simple as adding a new layer to each frame. Everyone has to find his workflow; it’s not a mandatory to work like this. Is useful to have a layer with each base color used for the model, because while using the pencil tool in Photoshop, you can press “alt” key and click over any color to switch to it and paint without messing with color pickers to find the color you has been using for the last 30 layers.  

pixel art animation process

pixel art animation process

That’s how it should look at the end.

basic pixel art animation

basic pixel art animation

 

Adding some pixels as details

Once the base animation is finished, the model needs some details for each frame. That’s as easy as create a layer for each frame over the base layer and painting some lights and shadows as we did in the first step, but now the work is multiplied for every animation frame. Again, having every color needed in the process in an independent layer is quite useful.

adding details to pixel art

adding details to pixel art

And that’s all folks! this is how it looks at the end, a though guy firing to someone or something.

pixel art result

pixel art result

As I said at the begining, I like photoshop so much because I feel confortable working with it, but there are more reasons, like adding some cool efects like the following to a pixelart work with ease.

pixel art post production

pixel art post production

The final psd files are available through this link

Want to know more about pixel art or watch more tutorials?, we have more for you:

That’s all for now. Hope to see all of you as soon as possible!