Little Fighter Empire - Forums - Tutorials & Resources

LF2 Sprite Sheet Generator [based on Gad's method]

Sun, 16 Sep 2018 20:39:18 +0200

I created a standalone program that accomplishes what Gad's Adobe Flash template does.

There is currently no predefined template which means you need to create or load one you made before. The core functionality is there, and it works BUT this is not magic and there are tons of features that need to be implemented. Bugs are to be expected.

Downloads

How to Use
Load sprites you want to use by clicking [+] button, or by dragging files to the list box. These are basically reusable parts (objects) of your character. You can add objects by double clicking on them in the list box or [Add Object] button. Then edit objects with right mouse button after selecting them with left mouse. Use middle mouse button to scroll.

Here are some general tips for usage:

All object selection is done with left mouse button
All object editing/transforming is done with right mouse button
Use middle mouse button to scroll and zoom in/out
Move, Rotate and Scale tools have G, R, S shortcuts respectively
Use [Ctrl + Left mouse button] to select objects additively
Use [Shift + Left mouse button] to select objects in an area
Ctrl and Shift can be used together to select an area additively
It's highly recommended to use sprites with transparent background (alpha channel)
Program uses prefiltered bicubic image scaling algorithm so you can use stupidly high resolution sprites
In order to reload an existing template and render it, you need to also load sprites with the same name, otherwise they will be shown as a (broken image) sprite.

Screenshot (Click to View)

Planned Features

File watcher - automatic reimporting of image files when changed
Grid clipping - grid cells should not interfere with each other
Easier editing - current editing seems unintuitive
Shortcuts - to make life easier for us all
Undo & Redo - maybe if I'm motivated enough, convince me
Prompt while exiting - currently it doesn't ask if you want to save

Sprite Sheet Generator

Sun, 10 Dec 2017 11:04:12 +0100

I wrote myself a program for c #, its purpose is quite simple: take a lot of cut sprites and merge into a grid.

Many store their sprites in the form of frames cut in separate images. The same result is obtained if we take some animation in the gif format and using Photoshop to save each layer as a separate frame.

Spoiler (Click to View)

It is possible to arrange such beauty manually, of course, but it is difficult. Because laziness is my middle name, I chose a different path.

I run the program, I click "Select Images", selecting all the files that I need to connect, I specify the number of lines to divide the sprite sheet (rows, not columns!)

I click on "Create Sprite Sheet", choosing where and in what format to save the finished sheet. The program works with png, bmp and gif formats.

Voila, the sprite sheet is ready!

Spoiler (Click to View)

Simple enough ...
Next, in Photoshop, adjust the dimensions, repaint it, etc.
The sheet is created according to the principle of Sheet_Creator. Those. when you specify it in the bmp block of the character, the dimensions of each cell do 1px less than the original. So if each my cell has the sizes 1000х1000, I write 999х999.

Download:
SpriteSheetGenerator.rar (Size: 24.05 KB / Downloads: 407)

I'm not sure if the section on the forum is correct. In advance I apologize, in case of an error.

[tutorial]3D-Looking Sprites with Normal Maps

Fri, 29 Apr 2016 20:16:08 +0200

First of all, I'm not claiming I'm any good at this (to say that the viceversa applies would be more appropriate), but I still thought some of you might have not heard of it, or perhaps did but for another application that doesn't include sprites.

Before I start, let me introduce you to someone some of you may find familiar:

It's none other than my snowman monster sprite for LFE's latest spriting contest. That received only a couple of votes. The shading is bad, and the sprite is generally bad, I get it. But the shading is bad. Shading requires practice to develop that sense of intuition to get it right, and I still haven't done enough to be able to do that. A couple of days ago though, I was working on some other project that has to do with something called Normal Mapping. The idea of normal mapping is to give detail to low-polygon 3D models by providing the computer with fake information of bumps on a surface of a model which don't really exist. By doing this, we fool the computer and alter lighting calculation to actually make it seem like there are extra details. That surface then gets lit as if there really are more bumps on it:

So it occurred to me that maybe this can be done for sprites. I googled "sprite normal maps", and it turned out that I'm not the first to come up with the idea (and it was really foolish of me to think I was the first). But anyway, I went on and tried making a normal map for the snowman monster (on the left), and an unshaded version of the snowman (called the "diffuse texture", on the right).

And here is the sprite-normalmap mix working under different lighting conditions:

Click here to try it out interactively

So yes. I'm going to skip the "how it works" (to give an idea, every pixel's RGB correspond to an XYZ vector describing the direction of the normal of the surface at that spot) and jump straight to explain how you make a normal map for a sprite. I don't think there's one particular way of making those, but I'm going to explain the method I used to made the snowman's. So for those who don't know what normals are, you hopefully know what tangents are; lines which lie flat on a surface:

There are other imaginary lines which stand straight (perpendicular) on them, those are the normals we're talking about (the blue lines):

As you can see, normals are a good way to describe surfaces. Take for example this set of normals:

One can immediately tell that it's describing a bump on a flat surface:

That's exactly what normal maps are, except, instead of an array and a direction, we have a color which corresponds to a direction. Calculating the color for every pixel on a sprite would be tedious, so what I did was get a reference; a normal map of a sphere:

Now the advantage of using a sphere over any other shape is that the surface of a sphere has normals going in every direction and distributed in a familiar way (in a sinusoidal way, for the pedantic).

What you do then is do your best to visualise the ups and downs of the sprites in your head, and think of what region on the sphere have a normal that's identical to the region you're working on. Then you get your color picker or stamp copying tool or whatever and get to coloring!

One thing you can do to make things a bit easier is to resize the sphere (for when you're working on a spherical-like/curved part, and want to use the copying tool). But DON"T scale it out of ratio, or the values become wrong.

It took me around 1.5x the time I used for shading the sprite last time, and I'm liking it. Of course, this isn't the only way to do it. I heard there are ways using a tool called "z-brush" available on Photoshop, which supposedly makes things easier. Some even use 3D modeling software which allow one to make them in a very friendly way.

I forgot to mention that this might not be useful for use with LF2, as the game can't do any lighting or anything to sprites. However, one can take snapshots of the sprites like I did above and use them directly. Also, in case you're working on some other project, almost every popular game engine out there support normal maps (A-Engine does too, btw :P). So it might come handy sometime in the future.

If you have any questions, comments, tips or corrections, please don't hesitate to post. I'd also love to see any attempts you guys make!

How I choose colors (SPRITES)

Sun, 01 Nov 2015 00:02:39 +0100

Marko asked "Did you take those colors from some reference or you choosed them yourself? If you did choosed them yourself, do you have some tips?"
http://www.lf-empire.de/forum/showthread...#pid198372

Here is the answer.

Sometimes I create my own or sometimes I borrow some.

CHOOSING MY OWN COLORS
Every artist got it's own style and with style comes everything else, line width, color saturation and their combinations, object they prefer to show on the sheet of paper. And now we are talking about colors.
Talking about sprites, I actualy prefer to make them look alive. By alive I mean make them warm and not cold, because if cold means dead/blue/pale(?) and warm means alive/red...check someone's body. But that does not mean that dark side will be blue and bright side will be red. It means that we will be going towards one or another but not going away from our base color. I am not the only one who does something like that too.

Alright.
This is on what I will be working.

It's colored. Light and dark colors but wait. Is that me or something about this one looks dull?
Indeed. It bit lacks of warm and cold colors variation. Take a note. If you are facing the sun. Some of your body areas gets brighter and warmer because of the "sun beams" but the part of your body which sun is cooler. So in this case it's the same.

Now let's look at "color-fixed" sprite I made.

Now, what I did here. I added some color variety. Instead of red dark, base, light colors I added red=dark, orange=base, yellow=light but ofcourse I went from orange to a bit of red and from orange to a bit of yellow to create such effect.

Here is the example of it.
Base color.

As you can see it only matters that if it would now be plain black or white and if you want to add some shades.

Light color. Yellowish

As you seen in previous image. Base color on the hue scale is 20. And light color is 30 on the hue scale, which is yellowish. This adds some warm feeling, am I right? And also some extra contrast. For saturation all I did was decreasing it by 20 (depends on you). By decreasing saturation you make it loose it's full color by making it go pale. I like doing that because for light colors decreasing saturation makes them look brighter. Don't decrease saturation too much or don't decrease it when your base color is dark or not light because that will make your color go grey instead of bright. As for value, I also increased it because I want my color to stay yellow while making it less saturated.

Dark color. Redish

Light colors is 30 on hue scale and base color is 20. Since it goes darker, we should go for a cold color or atsleast towards cold colors but not too much. So 10 will do the trick. It's red but not too red, more like orange red. Also increased saturation makes the color look sharper and darker. Like when you go in the darkness, you try being sharp. Value was decreased a bit because saturation did the trick and also red is darker than yellow.
In this way I finished the rest of the sprite. Metalic shading is similar but sometimes can go more towards warm or cold color but that depends on you.

So that's it. Any questions?
If I remember something, I will update this tutorial.

//Also, increasing and decreasing saturation might help. In real life you could say that shadows adds some grey to the color but while making sprites, I want my sprites to be beautiful, colorful and be nice to your eyes. No neon high saturated colors unless design requires it.

[tutorial] Hair spriting - photoshop

Wed, 19 Aug 2015 23:13:13 +0200

This is the most easy and simple way to sprite hair ... Just follow my lead :

1- Chose the brush tool and make sure that brush:1 ; mode:normal ; opacity:100%

2- Draw the hair outline you want.

3- Fill that empty space (maybe using bigger brush would help more)

4- Then chose the dodge tool and make sure that brush:1 ; range:midtones ; exposue:50%
and do this :

Hair!

Thu, 21 May 2015 09:36:30 +0200

simple and good. Found on Deviantart.

Flash Workflow

Sun, 29 Mar 2015 18:20:23 +0200

LF2 Flash Workflow

I made this video for Ariyan.
He asked me how to use Flash and Gad's Template for creating sprite-sheets.
It shows different methods on how to draw and export the created sprites.
Please dont hate on me that it's not detailed or anything. It's just ment to showcase the workflow of creating sprites in Flash.
I'm just making this public as I think it might help some newcomers who have no clue on where to start.

What you need?

- Flash
- Gads template: http://workupload.com/file/9wjdN7JK
- another graphic programm

If u repeat this workflow with every part u'll have a full sheet of the basic actions for ur character.

I peronally use PS to draw all the parts and I export using the PNG-Sequence option.

Face pic painting processes

Sat, 24 Jan 2015 11:02:16 +0100

here is my sped up processes on making face pic for chars.
outcome:
Bla Bla's char, Newish.
if u want u can use it, i dont realy mind.
i did this one for fun and for the video recording experience.

now i can say, that i might do some speed painting in the near future. ^_^

Resource pages for LF2 spriting

Mon, 25 Aug 2014 17:02:36 +0200

I couldn't find a topic with internet links as a resource, so here it is. I believe posting links is allowed, if it's not, I'll just delete the topic.
You can use this topic to share pages on the internet where you can find things that are helpful for LF2 spriting.

This page is great, it seems like even the original LF2 sprites are based of some of these, and there's many energy effect sprites you can use for your own mod: http://www.deviantart.com/morelikethis/c...iew_mode=2

Sprite centerx adjustment via GIMP

Wed, 18 Jun 2014 15:50:40 +0200

This is how I adjust the sprite frames to be in center.

I forgot to make inner grids layer invisible before exporting but it's not a problem.

A-MAN's method: (Click to View)

Sprite Grids via GIMP - Beginner's Guide

Tue, 17 Jun 2014 21:22:21 +0200

Here I will explain how i create grids for sprites using >>GIMP<<

We will use the louisEX_3.bmp for demonstration.
Open bmp with gimp. To do this, simply carry the bmp file to gimp Toolbox.
And we will have Layers panel open.
To open it, press ctrl+L or Windows-->Dockable Dialogs-->Layers.

And then we create a new layer:

Now when we are in our new transparent layer, we go to
Filters-->Render-->Pattern-->Grid

Now, our LouisEX data file important part is here:

DC-Code:

file(210-251): sprite\sys\louisEX_3.bmp  w: 118  h: 79  row: 6  col: 7

w: 118 and h: 79
we add 1 to both
119 x 80
set the other thingies as it's shown in pic:

And press OK.
Awesome, isn't it. But it's not over.
we must turn

this (Click to View)

to this (Click to View)

We must carry this grid layer to 1 px up and 1 px left.
To do this, while we are in our grid layer, we press one by one:
ctrl+A
ctrl+X
ctrl+V
^ (up key)
< (left key)
And, click some gray or black area to finish carrying work.
Now it's over and looks like this:

Done!!
Now you can export it through File-->Export or ctrl+shift+E
and export your file as asdfasda.bmp and it's over :)
Hmm, you might have to zoom out to see pictures easily, i screenshotted them a little big.

Hmm, i dont know if there are any other easier methods or shortcuts, i learnt using gimp by myself and i may have done some things in longer ways. If you have anything to make it shorter, please reply.:)

DH LF2 Color Theory

Sun, 12 Jan 2014 19:48:42 +0100

DesignHeaven LF2 Color Theory

First of all ill say that this theory is just what I think work best for lf2 char designs
you don't have to agree with me or use it for every char u make
but this is just what I think can work really good at some of the basics when u design char

So, let's go straight to the topic
I found out on some of the chars in the game that each of them main a color for their outfit and their skills
the thing is most of the chars use the same concept of colors
the main color goes to the shirt and sometime eyes,
and than they have a pants at a really desaturated opposite color

for example
Bat,

his main color is obviously red
than his eyes and shirt are both red
and his pants got a desaturated cyan

u can find this concept on many other chars like Davis, Woody, Deep, Henry, Monk etc..

hope this help some of u, its just a minimal post and when ill have more time ill write about more things i thought about

How to "compress" images using Paint.NET

Sun, 27 Oct 2013 20:18:49 +0100

I accidentally opened sprites with Paint.NET to convert them from PNG to BMP, but I found a trick that made sprites take up less space with NO LOSS OF QUALITY! Please keep in mind that this is mainly intended for LF2 sprites. Without further adieu:

1. Open the sprite sheet you want to compress on Paint.NET.

2. Click Save (or Save As if you aren't using a bmp file). You should see some options pop up for you.

3. Choose 8-bit. The dithering is set at 7 by default, but messing with it produces no visible results. I raised it just because I could.

4. Click "OK" and you're good to go!

I don't know if this is a similar method to what Marti had done to make each BMP file smaller, but I see it working fine without any problem at all. If you have problems with this, please let me know.

Public tutorial "The way I animate sprites"

Sun, 15 Sep 2013 17:10:20 +0200

Yes, how do you animate your sprites, make them move?
Lets share our ways of animating, maybe it would help younger spriters

Mono (Click to View)

BashCrazy (Click to View)

BluePhoenix (Click to View)

gad (Click to View)

Men'n'Mine (Click to View)

Luti (Click to View)

ALMOST LIKE CHARACTER GENERATOR

Sun, 04 Aug 2013 22:58:23 +0200

-- content removed --