18. SpriteSheet
Sprite Sheet is a picture that contain many peace of small graphics inside all drawn in the same file.
The purpose for that is when you want to show a person walking, the old way is to store each frame as a single picture, and switch them one by one as we have seen in th chapter 06-Anim.
The inconvenient is that you must create many files, they'll took more spaces.
It's not meant to be used only for an animation instance, but you still can merge all assets in one single file depending on the context, and then you pick only what you want using the Rectangle position.
To merge them you need to use a third party designing program as photoshop or specialy one for sprites, but you need to get the coordinates of each frame and store them somewhere to make sure you get the right frame you are looking for when you call it.
I have found a handy tool that give me exactly what i want, Coordinate X, Y and Size width and Hight, and it can even merge many files into one sprite for you.
This tool is called "Dark Function" it's a Java application therefore you need to have a Java runtime on your computer, Link.
It has the ability to auto detect a form and then you dont need select a rectangle yourself.
When you open your SpriteSheet, just double click inside the picture you want, and Dark Function well surround it with a delimited square, regrouping all pixels he found and stop when he no lounger find anything around.
using System;
using System.Drawing;
using System.Linq;
using System.Speech.Recognition;
using System.Windows.Forms;
using MELHARFI.Manager;
using MELHARFI.Manager.Gfx;
namespace _2dProject
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
Manager manager = new Manager(this, "CORE_ENGINE");
manager.Background = Color.Blue;
Rectangle rec1 = new Rectangle(new Point(0, 0), new Size(25, 53));
Bmp parent = new Bmp(@"sprite.png", new Point(100, 100), rec1, manager);
manager.ObjectLayer.Add(parent);
}
}
}
Or use a specific overload of Bmp class :
using System;
using System.Drawing;
using System.Linq;
using System.Speech.Recognition;
using System.Windows.Forms;
using MELHARFI.Manager;
using MELHARFI.Manager.Gfx;
namespace _2dProject
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
Manager manager = new Manager(this, "CORE_ENGINE");
manager.Background = Color.Blue;
Bmp parent = new Bmp(@"sprite.png", new Point(100, 100), new Rectangle(new Point(0, 0), new Size(25, 57)), manager);
manager.ObjectLayer.Add(parent);
}
}
}
Now you have to find a way where to record the rectangle of each offset somewhere, you can achieve that with a function that store thoses informations in a list OR use a the 2 functions i just add for that purpose.
SetSpriteSheet to push an offset's rectangle.
GetSpriteSheet to pop up an offset's rectangle.
using System;
using System.Drawing;
using System.Linq;
using System.Speech.Recognition;
using System.Windows.Forms;
using MELHARFI.Manager;
using MELHARFI.Manager.Gfx;
using static MELHARFI.Manager.SpriteSheet;
namespace _2dProject
{
public partial class Form1 : Form
{
public static SpriteSheetData SSD = new SpriteSheetData();
SpriteSheet spriteSheet = new SpriteSheet();
public Form1()
{
InitializeComponent();
Run();
Manager manager = new Manager(this, "CORE_ENGINE");
manager.Background = Color.Blue;
Anim anim1 = new Anim(1, manager);
anim1.AddCell("sprite.png", 0, 0, 0, spriteSheet.GetSpriteSheet("naruto", 0));
anim1.AddCell("sprite.png", 1, 0, 0, spriteSheet.GetSpriteSheet("naruto", 1));
anim1.AddCell("sprite.png", 2, 0, 0, spriteSheet.GetSpriteSheet("naruto", 2));
anim1.AddCell("sprite.png", 3, 0, 0, spriteSheet.GetSpriteSheet("naruto", 3));
anim1.Ini(Manager.TypeGfx.Object, false);
anim1.Start();
manager.ObjectLayer.Add(anim1);
}
public void Run()
{
#region /////////// classe 1 Naruto
// direction right
spriteSheet.SetSpriteSheet("naruto", 0, new Rectangle(new Point(0, 0), new Size(25, 53)));
spriteSheet.SetSpriteSheet("naruto", 1, new Rectangle(new Point(33, 0), new Size(23, 54)));
spriteSheet.SetSpriteSheet("naruto", 2, new Rectangle(new Point(66, 0), new Size(23, 53)));
spriteSheet.SetSpriteSheet("naruto", 3, new Rectangle(new Point(99, 0), new Size(23, 54)));
// direction left
spriteSheet.SetSpriteSheet("naruto", 4, new Rectangle(new Point(4, 57), new Size(18, 56)));
spriteSheet.SetSpriteSheet("naruto", 5, new Rectangle(new Point(35, 59), new Size(21, 54)));
spriteSheet.SetSpriteSheet("naruto", 6, new Rectangle(new Point(69, 58), new Size(18, 55)));
spriteSheet.SetSpriteSheet("naruto", 7, new Rectangle(new Point(99, 59), new Size(21, 54)));
// direction up
spriteSheet.SetSpriteSheet("naruto", 8, new Rectangle(new Point(4, 119), new Size(18, 56)));
spriteSheet.SetSpriteSheet("naruto", 9, new Rectangle(new Point(35, 121), new Size(21, 54)));
spriteSheet.SetSpriteSheet("naruto", 10, new Rectangle(new Point(68, 120), new Size(18, 55)));
spriteSheet.SetSpriteSheet("naruto", 11, new Rectangle(new Point(99, 121), new Size(21, 54)));
//direction down
spriteSheet.SetSpriteSheet("naruto", 12, new Rectangle(new Point(1, 183), new Size(25, 53)));
spriteSheet.SetSpriteSheet("naruto", 13, new Rectangle(new Point(35, 184), new Size(22, 52)));
spriteSheet.SetSpriteSheet("naruto", 14, new Rectangle(new Point(66, 183), new Size(23, 53)));
spriteSheet.SetSpriteSheet("naruto", 15, new Rectangle(new Point(98, 184), new Size(22, 52)));
#endregion
}
}
}
Want me to dev an app for you ? dont hesitate to contact me.
Are you looking for a coder/teammate for your project ? Let's give it a try.
Have a proposal for me ? we can discuss about it.
You want to buy me a coffe ? m.elharfi@gmail.com