User Tools

Site Tools


Sidebar

Information

Game Systems

Resources

Downloads

Social



If you are an artist interested in working on this project, please feel free to email me. I am looking for a pixel artist as well as a 2D character designer for portraits.

Some of the images used as placeholder art are copyrighted by their respective owner, Square Enix. These resources include custom sprites by the artists at http://ffhacktics.com/. Other resources seen are either created by myself or are credited to their respective owners on the Credits page.

If you see any media on this website that is not attributed properly is please let me know and I will fix it immediately.

Dusk Tactics, source code, media and information on this website are all copyright ©2014-2020 Louis Agoglia unless otherwise noted.

sprites:source

Sprite Resource Outline

To start off I want to give a brief over-view of what type of sprite sheet the engine is designed for and then show examples of similar games and the sprite sheets they use.

Dusk Tactics Isometric Engine

The engine is coded to be flexible with sprites, I can upscale them or downscale them, however what tends to look best is designing it as large as possible (64 x 64 pixel frame size maximum) and scaling down when needed depending on the player's screen size. It can store any number of frames, and these frames are then arranged into sequences used for animations. I've found that there's no need to create every single frame of every animation as many actions share the same “poses”, so my engine can piece together frames from anywhere on the sprite sheet into any animation I want.

Isometric Projection

The following isn't extremely important, but just something I like to point out to avoid any confusion when using the term “isometric”.


Since we are working with an isometric (dimetric) perspective, we are using an angle of 26.565 degrees which creates a perfect pixel 2:1 ratio otherwise defined as arctan(0.5).

The cube on the left displays the correct style.

To the right is the true isometric style mostly found in architectural plans and sometimes in games. This has an angle of 30 degrees and is NOT what we want.

Character Sprites

These are some basic standards for character sprites in this engine. Character sprites, even though they can walk in four (4) directions, only need frames in two (2) directions as seen below. This is gives us one set where the unit is facing the the screen and we can see the front of it, and another where they are facing away from the screen and we can see their backs. These two directions are flipped horizontally using code to create four in total.

The image to the left is something I made as a reminder for how the directions are designed in the engine. The numbering is arbitrary, but it goes West, East, South, North.

As mentioned above, we're only creating one set and then flipping them, as you can see West and South are the same, as are East and North.

The template I sent you uses East and South.

Speaking of the template, you'll notice the frames are each 64 pixel by 64 pixel squares. This is the largest size I would work with and creates the most amount of work. We might end up working with a 32×32 or a 48×48 size. Anything smaller gets much harder to show detail without requiring near perfect palettes and shading techniques.

Sprite Animation

So far, the animations I will require are the following:

  • Standing
    As much as I'd like to have a standing animation where the unit breathes, for now a single frame will suffice.
  • Walking
    The most used animation, when units are standing still they will usually be seen “walking” in place as per the style of the genre. It's generally 4 frames, but many games use 3.
  • Vertical Jump
    Used when units are moving to a higher elevation.
  • Horizontal Jump
    Used when jumping to a similar or lower elevation, or jumping across a river tile.
  • Unarmed Attack
    An attack animation that shows a single handed punch, if possible it can be used for certain weapon animations by overlaying a weapon sprite.
  • Ranged Attack
    This is a specific “aiming bow, pulling back and releasing an arrow” ranged attack.
  • Throw
    A one armed throwing action, used for the default “Throw” attack animation and for throwing items.
  • Weapon Attack/Ranged Weapon Attack*
    This is more than just one animation, but for now we'll treat it as one. This animation will be based on the type of weapon being used. Two Handed weapons will feature a standard two-handed swinging motion, etc.
    Possible sub-animations needed: 1H Weapon Attack, 1H Dual Wield Weapon Attack, 2H Weapon Attack, Ranged Attack. The above Unarmed Attack and Ranged attack will be a part of this group.
  • Indirect Spell
    For magick, any spell that uses some sort of incantation or collection of energy is considered indirect. This involves the unit raising its arms up, gathering energy, etc.
  • Direct Spell
    This is a magickal attack that is fired directly from the unit. An energy blast, or magick missile that needs to be launched. The unit will need to bring their hands together or aim their hand in a direction to “blast” or unleash the magickal attack.
  • Use Item
    This is a common animation, the unit will be seen holding an item up (the item will appear on a different layer) and then it will be consumed or used.
  • Hurt/Damage
    A special animation that shows the unit in pain or caught off guard. The engine will apply a white color to the frame to simulate the classic “damage taken” flash of white seen in games.
  • Block
    This involves the unit raising it's arms up to defend itself, it would be beneficial to do this in a way that a Shield sprite could be overlayed using the same animation, so focus on raising the off-hand arm at an angle where a shield would be most visible. It will be used for unarmed blocks as well as shield blocks.
  • Crouch
    Position the unit onto it's knees or lower. This animation can be the start of other animations such as jumping or even dying.
  • Level Up
    I have been using the same animation for Vertical Jump, this would basically be a celebration type animation.
  • Dying
    This is an animation that is played once and leads to the Dead animation. Similar to the “Hurt/Damage” animation, but with an extra frame or two showing the unit collapsing.
  • Dead
    Similar to the Stand animation, it's a single frame of the unit dead on the floor, face-down.

The animations listed above would be made up of anywhere from one (1) to eight (8) frames, with many of them sharing frames. I'd like to keep the overall frame count as low as possible while still being able to animate everything.

Similar Games Sprites

This section is for some resources I've found over the years. It shows how other games have used spritesheets. I'll add more over time, but for now these are some of the better methods of getting the most out of the work being put in.

Tactics Ogre: Let Us Cling Together

Since this game, and others like it were in such small resolutions, they were able to (had to) pack a lot of detail into very small sprites.

These sprites make up 95% of the animations used in the game for a generic character while main characters had some extra frames. Sprites are split into 20×16 grids of 2, this is done so that extra frames could be created using the top and bottoms of different sprites.

This is also the style I originally wanted but had to abandon due to the size, upscaling even using dithering to 720P looks very blocky and doesn't fit with the style I am going for.

Final Fantasy Tactics

This is an example of the patchwork style spritesheet. An algorithm puts the sprites together, layering them so they create a complete sprite frame. Some are already complete and can be added to for even more sprites. All in all there are hundreds of sprite frames divided into dozens of animations. They are also split into different types, with one supporting physical animations, one supporting magick caster animations, and a third supporting monster types.

Another bonus to this format is the use of palettes. Once a spritesheet was made, a palette was attached, made up of 16 colors, which were arranged to create different looking sprites. It was especially good for different armies that used the same units, which helped you tell which units belonged to you.

Final Fantasy Tactics Advance

Different in style than FFT, more saturation and a more chibi-style (larger heads). This style also uses palettes, specifically for status effects. The sprites are also outlined with black to help them show against the background.

Final Fantasy Tactics A2

Continuing the style from the previous game, they expanded the roster of characters and increased the detail, but mostly kept things the same. The palette is still in use.

Onimusha Tactics

Another handheld tactics game for the Nintendo systems. This style of spritesheet is important to note as it includes weapons as part of the sprites. While the style we will be using will require weapons/shields to be shown infront of and behind the images, it can make for a smoother animation to have them built in.

Disgaea

Disgaea is a big series with about 7 or 8 games in it. This spritesheet is from the first one which came out on the Sony PlayStation 2. This game uses larger sprites and a lot more of them. It has a higher number of colors and also uses recoloring to create different variants of the units, althought only one color type is pictured.

Disgaea is a bit unique in the turn based tactics world as it allowed more cartoonish things such as picking up and throwing units, creating stacks of units by having them climb on top of one another, and adding geometric puzzles that doubled as stat boosts. There's not a lot this game has in similar with Dusk Tactics, but the sprite sheet is beautiful and this is the one from almost 20 years ago, it's since been remade in high definition for some of the best isometric art out there.

sprites/source.txt · Last modified: 2019/02/15 22:54 by lou