PSRC – August / SFX animations R&D

Completed the tileset system a couple weeks ago. I now have all glossy, matte, glass, shallow and steep versions of all tiles for all variations.

One of the many sheets from the tileset system.

One of the many sheets from the tileset system.

There were still some minor additions I want to complete (loose versions of tiles, test tiles for debug purposes, extra slope shapes), but they’re trivial and fully clear on how I’ll build them, so I’m satisfied for now.

I’ve been now been doing some R&D on special effects animations to figure out the best way to create them and how should the final result work.

After downloading about 10.000 files of the internet of various existing spritesheets with effects on them from many sources, I had fun time enjoying information overload a couple times (sarcasm), such as trying to see what makes them tick, why were they made how they were, what would be the most cleanest, most appealing, performance friendly, easy to build, which were important, what scenarios could they be used in and how….

…basically a giant mountain of questions needed to be asked, found and answered. Not particularly fun and very exhausting mentally, but without proper design any actual drawing I do will go to waste, so I wanted to avoid that.

Especially so since I’m looking at drawing over the better side of 1000 more sprites, which is no small feat at all.

I previously had actually drawn special effect sprites while I was modding cortex command and I pretty much winged it back then, without much regard of studying how fire works, how smoke works, how to best shape it for gameplay or really doing any sort of design at all. This is how they looked like:

Super old SFX used in cortex command mods years ago.

Super old SFX used in cortex command mods years ago.

The way I drew them was very reckless; I’d start with a square 20×20 image, draw a frame, save the image, then draw on top of that image the next frame, save that seperate as the next frame, paint the next frame, save it seperately and so on until I had a complete animation from start to end.

The results were surprisingly good, especially ingame, but I think its rather difficult to edit them once they’re done, since they were never designed for maintenance. More over, the amount of frames might sometimes be a bit overkill and I could possibly save on some performance and disk space by having less frames.

They also were rather limited in their usage, as they were directly colored as I was drawing them, where as if I’d drawn them in greyscale, I could repurpose some of the effects for multiple purposes simply by applying color later, especially if the game adds color to the sprites through code.

Meanwhile, I also noticed that if drawn with the right intent, you could yield 3 different uses out of a single animation by having the first few frames dedicated to the start of the animation, the middle frames drawn so that if used on their own, could actually work on their own as an endlessly looping animation, while the last part of the animation could also operate on their own as a dissipating animation.

Finally I also thought about the direction of sprites. If you could imagine the hadouken moving fireball that Ryu or Dhalsim can fire, then those are direction sprites. Similarly, explosions in Metal Slug are firmly planted to the ground and you can see the smoke after the explosion rise upwards.

Now heres the thing; what if the game features zero gravity or the animation can rotate to be on a slope?

Suddenly SFX animations that are connected to a floor or are directional will look out of place and uncanny, making them ugly and unusable. Meanwhile, omnidirectional effects, like the blood splats in my old animation sheet pictured above could work perfectly even on the ground or in zero gravity.

With all that figured out, which took some time, perceptiveness and hard design thinking effort, I came up with some rules with which to base all the animation sprites I’ll be doing:

  • Each animation segment is 4 frames long
  • An animation set follows the structure of 3 segments: Start/Loop/End
  • The animation is gravityless, omnidirectional and uses standard ambient shading
  • For surface effects like water, lava, acid and similar, create seamlessly tiling animated texture with 16×16 and 32×32 sizes
  • All sprites must be greyscale
  • All sprites must blend well with one another (no hard outlines)
  • Avoid blockyness when drawing sprites on a grid

I think I may be still may be missing a few critical points, like some animations may work with only 2 frames (impacts, flashes and other fast things), but these will generally set up nice guidelines to help draw sprites easily and maintain good quality.

The big thing I’m currently trying to figure out is how to style them if I should make variants and alternatives, since stylistically, a LOT can be done in regards to SFX animations for many purposes and aesthetic styles, so that requires some time to figure it all out, but atleast its all doable and I’m making progress. It is hard though, so its not too fast, sadly.

Hopefully I can get to mass production very soon.

PSRC – Screenshot July/2,3,4

Tileset bonanza

Lot of figuring out was done in the past weeks. Mostly research and foresight against future bottlenecks, since it would suck to create hundreds of sprites and then find out a tiny detail I missed rendered them useless in the end, so I took the extra time to prep against that.

First thing was research. This meant downloading a truckload of spritesheet, tilesets, screenshots and other similar images that show tilesets in action on how they look ingame, how they’re structured, whats the pros and cons of each style…

PSRC_July4 (5)

Research, study, analyse!

Next up, I noticed there were multiple core styles of how the structure of a tile is set up and how the lighting works. There were multiple variables to consider:

  • Outline vs no Outline
  • Neutral omnidirectional lighting vs cinematic shading
  • Round vs Square external shape
  • Internal thickness
  • Transparency

Each of these play an important part in terms of gameplay and aesthetics, depending on what the game’s design is supposed to accomplish. Like outlines make sense for a game with a zoomed out view and high speed scrolling camera, since an outline makes surfaces more visible to the human eye and gives clarity on what is solid and what is not.

Also omnidirectional lighting is best used for destructible block based games, since they rely on a seperate lighting system to create shading, unlike in more cinematic games, such as Super Metroid, where the blocks already have lighting pre-drawn into them for a better atmospheric effect.

All in all I came up with these primary types to draw:
PSRC_July4 (1)Basically:
1. Flat
2. Omnidirectional shading + outline
3. Cinematic shading w/o outline
4. Cinematic shading with outline
5. Transparent block
For each of those, I need 53 tiles to be drawn x3, for varying thickness and x2 for both square and rounded versions to cover for all possible cases. I may be missing something, so it may not be a final number, but generally that’d make 318 sprites that I need to draw. And thats only the beginning.

PSRC_July4 (4)
Aside from that, I’ve also identified 3 different complexity levels of tiles, which the developer would use depending on how simple or advanced of tile sets they want to use:

PSRC_July4 (3)

Type 1 is obviously the most complex and most comprehensive tileset, while Type 2 and Type 3 offer cheaper alternatives at the cost of simpleness in aesthetics.

On top of that, theres also the frosting system, which is basically a strip that can be layed over all the four sides of a tile to act as grass, grunge or topping:

PSRC_July4 (7)I made a large selection of such frostings for a variety of possible materials, be it grass, sand, snow, rocks, mechanical, organic or anything else that could be layed on top of a block.

PSRC_July4 (2)
I also did a more limited selection for the angled tiles, with the ones I felt most important to do.
PSRC_July4 (6)
I still have literally hundreds of sprites to draw and the ones shown here aren’t finished either, so it’ll take some time to get this stuff done.

PSRC – Screenshot July/1

Working more on the tileset system.

Working more on the tileset system.

Doing some R&D on the flexible tileset system. The basic idea is that you have multiple types of surfaces (flat, rounded), multiple shader types (dull, shiny), opaque/transparent versions (glass) and neutral ligthing vs cinematic lighting types.

Its based on assembly. You choose the style you want, the tiles you need, add a seamless texture on top, add a color and you’re done. The tile template provide lighting, the texture provides the material and color provides color. Easy to create millions of variations and expand it with a trillion more with minimal effort.

Currently researching the idea of frostings, which are basically elements you can slap on top of a tile, such as grass, snow, goo or grunge. Also pipes, lines and test shapes are being figured out.