[speed-e]

Hello everyone!

I am in the middle of producing a simple platform game and I am using graphics downloaded from the net. I am wondering how can I display a full picture of my sprite and I will explain to you what do I mean in this picture:



As you can see there are 5 frames on the top of the picture, but only 3 at the bottom. This then splits the bottom 3 frames into 5 just like the image on the top. When I play the player firing a laser you can see cyclops and lasers seperetely, as they are split into 5 different images. Is there any way to get around that?

This post has been edited by speed-e: 17 February 2011 - 05:24 PM

[Ordinary]

I use a linear image index. So 0-4 would be the walking frames.
When cyclops uses his optic blast then the frames are 5-7.

So you need to to check the image index and then have some code return the right image size:

if(index<5)
width=SMALL_WIDTH;
else if(index<8)
width=WIDER_WIDTH;

It might be helpful to delegate this process to an image processor which would take in the number or rows and columns in each row as arguments and then all you would do is ask it for the index.

This post has been edited by Ordinary: 18 February 2011 - 12:31 AM

[stayscrisp]

Ordinary's ideas are good The sprite sheets you get online are usually not set out in the correct way to put into a game, so you might need to use a graphics application to make sure it is set out evenly.

You could use an animate function which takes a row number and width and animates a sprite sheet accordingly, it will be easier but will mean hard coding some values.

[speed-e]

Ordinary, on 18 February 2011 - 12:29 AM, said:

I use a linear image index. So 0-4 would be the walking frames.
When cyclops uses his optic blast then the frames are 5-7.

So you need to to check the image index and then have some code return the right image size:

if(index<5)
width=SMALL_WIDTH;
else if(index<8)
width=WIDER_WIDTH;

It might be helpful to delegate this process to an image processor which would take in the number or rows and columns in each row as arguments and then all you would do is ask it for the index.

Have you got any good lecture on this topic? I don't know how to find an index number of a particular part of the image.

Thanks for your help!

[stayscrisp]

What library are you using to do this? SDL?

[speed-e]

I am using DarkGDK in C++

[stayscrisp]

Well in that case I'm sure you can just pass the amount of frames for the row you are using, can you post your code please?

[speed-e]

Of course I can!

All the coding for moving and attacks is in the playerMove function.

#include "DarkGDK.h"
#include "Main.h"

// L1MR5PWBJRV5FD - kod aktywacyjny

bool g_bGameNew = false;
bool g_bPlayerWolverine = false;
bool g_bPlayerCyclops = false;

void DarkGDK()
{
	dbSyncOn();
	dbSyncRate(60);
	dbMaximizeWindow();

	loadResources();
	intro();

	playerCreate();

	while( LoopGDK() )
	{
		introChoice();

		if(g_bGameNew == true)
		{
			gameNew();
		}

		dbSync();
	}

	gameEnd();

}

void loadResources()
{
	dbSetImageColorKey(255,0,255);
	dbLoadImage("menu.png",INTRO_SPRITE);
	dbLoadImage("menuchoice.bmp",MARKER_SPRITE);
	dbLoadImage("cyclops.png",CYCLOP_SPRITE);
	dbLoadImage("wolverine.png",WOLV_SPRITE);
	dbLoadImage("metal.bmp",PLAYER_CHOICE_SPRITE);
	dbLoadImage("playermarker.bmp",PLAYER_MARKER_SPRITE);
	dbCreateAnimatedSprite(WOLVERINE_SPRITE,"wolverinewalk.bmp",7,2,WOLVERINE_IMAGE);
	dbCreateAnimatedSprite(CYCLOPS_SPRITE,"cyclops.bmp",9,5,CYCLOPS_IMAGE);
	dbLoadImage("Untitled.png",20);
}

void playerCreate()
{
	dbSprite(WOLVERINE_SPRITE,0,dbScreenHeight() - dbSpriteHeight(7),WOLVERINE_IMAGE);
	dbSprite(CYCLOPS_SPRITE,30,dbScreenHeight() - dbSpriteHeight(8),CYCLOPS_IMAGE);
	dbSetSpritePriority(WOLVERINE_SPRITE,1);
	dbSetSpritePriority(CYCLOPS_SPRITE,1);

	dbHideSprite(WOLVERINE_SPRITE);
	dbHideSprite(CYCLOPS_SPRITE);
}

void intro()
{
	dbSprite(INTRO_SPRITE,0,0,INTRO_IMAGE);
}

void introChoice()
{
	int mouseX = dbMouseX();
	int mouseY = dbMouseY();

	if(mouseX >= 235 && mouseX <= 405 && mouseY > 159 && mouseY < 183)
	{
		dbSprite(MARKER_SPRITE,0,155,MARKER_IMAGE);

			if(dbMouseClick() == 1)
			{
				g_bGameNew = true;
			}
	}

	if(mouseX >= 245 && mouseX <= 391 && mouseY > 220 && mouseY < 244)
	{
		dbSprite(MARKER_SPRITE,0,215,MARKER_IMAGE);
	}

	if(mouseX >= 280 && mouseX <= 358 && mouseY > 280 && mouseY < 305)
	{
		dbSprite(MARKER_SPRITE,0,275,MARKER_IMAGE);
		
			if(dbMouseClick() == 1)
			{
				gameEnd();
			}
	}
}

void gameNew()
{
	gamePlayerChoice();
	
	if(g_bPlayerWolverine == true || g_bPlayerCyclops == true)
	{
		gameSetup();
	}
}

void gamePlayerChoice()
{
	dbHideSprite(1);
	dbHideSprite(2);
	dbSprite(PLAYER_CHOICE_SPRITE,0,0,PLAYER_CHOICE_IMAGE);
	dbSprite(CYCLOP_SPRITE,50,100,CYCLOP_IMAGE);
	dbSprite(WOLV_SPRITE,400,100,WOLV_IMAGE);

	int mouseX = dbMouseX();
	int mouseY = dbMouseY();

	if(mouseX >= 50 && mouseX <= 250 && mouseY > 100 && mouseY < 320)
	{
		dbSprite(6,45,95,6);

			if(dbMouseClick() == 1)
			{
				g_bPlayerCyclops = true;
			}
	}

	if(mouseX >= 390 && mouseX <= 590 && mouseY > 100 && mouseY < 320)
	{
		dbSprite(6,395,95,6);
					
			if(dbMouseClick() == 1)
			{
				g_bPlayerWolverine = true;
			}
	}
}
void gameSetup()
{
	for( int i = 0; i < 7; i++)
	{
		dbDeleteImage(i);
	}

	dbSprite(20,0,0,20);
	playerSetup();

}
void playerSetup()
{
	if(g_bPlayerCyclops == true)
	{
		dbShowSprite(8);
		dbDeleteSprite(7);
	}
		
	if(g_bPlayerWolverine == true)
	{
		dbShowSprite(7);
		dbDeleteSprite(8);
	}

	playerMove();
}

void playerMove()
{
		if(dbRightKey() == 1)
		{
			if(dbSpriteFrame(7) > 7)
			{
				dbSetSpriteFrame(7,2);
			}
				dbPlaySprite(7,2,7,120);
				dbRotateSprite(7,90);
				dbMoveSprite(7,2);
				dbRotateSprite(7,0);
		}

		if(dbLeftKey() == 1)
		{				
			if(dbSpriteFrame(7) < 8)
			{
				dbSetSpriteFrame(7,9);
			}
				dbPlaySprite(7,9,14,120);
				dbRotateSprite(7,270);
				dbMoveSprite(7,2);
				dbRotateSprite(7,0);
		}
				
		if(dbRightKey() == 1)
		{	
			if(dbSpriteFrame(8) < 10 || dbSpriteFrame(8) > 14)
			{
				dbSetSpriteFrame(8,10);
			}
				dbPlaySprite(8,10,14,200);
				dbRotateSprite(8,90);
				dbMoveSprite(8,2);
				dbRotateSprite(8,0);
		}
			
		if(dbLeftKey() == 1)
		{		
			if(dbSpriteFrame(8) < 19)
			{
				dbSetSpriteFrame(8,19);
			}
				dbPlaySprite(8,19,23,200);
				dbRotateSprite(8,270);
				dbMoveSprite(8,2);
				dbRotateSprite(8,0);
		}

		if(dbSpaceKey() == 1)
		{
			if(dbSpriteFrame(8) < 28 || dbSpriteFrame(8) > 32)
			{
				dbSetSpriteFrame(8,28);
			}
			dbPlaySprite(8,28,32,80);
		}

		if(dbKeyState(17) == 1)
		{
			if(dbSpriteFrame(8) < 37 || dbSpriteFrame(8) > 41)
			{
				dbSetSpriteFrame(8,37);
			}
			dbPlaySprite(8,37,41,100);
		}
}

void gameEnd()
{
	dbDeleteSprite(1);
	dbHideSprite(2);
}

Sprite 7 and Sprite 8 are different sprites that player can choose on the start of the game, therefore there are 2 of them in code. I am trying to do the animation for sprite 8 at the moment.

For now I have decided to do huge spacing between sprites, so I will manage to fit in all of the wide frames, but I bet that there is an easier way to do it (this is just very wasteful!)

[stayscrisp]

It seems that DarkGDK automatically sets the width of frames based on the total image width divided by the amount of frames you specify. Unfortunately I don't have DarkGDK so can't look at the functions, could you tell me what the parameters passed into dbPlaySprite are?

[speed-e]

stayscrisp, on 19 February 2011 - 06:26 AM, said:

It seems that DarkGDK automatically sets the width of frames based on the total image width divided by the amount of frames you specify. Unfortunately I don't have DarkGDK so can't look at the functions, could you tell me what the parameters passed into dbPlaySprite are?

Yes, that it definetely what it does!

The paramaters in the dbPlaySprite are (sprite id, starting frame, finishing frame, image id), so basically you tell it on which frame it should start and which one to finish. I think that I should probably use dbPlaySprite two times, just so it would display two animations next to each other?

[stayscrisp]

I guess you could split the sheet up into separate rows and load them up with separate ID's. So when you move left you load up the move left sprite id an so on. I really don't think this will create any additional overhead if you load them in beforehand.

What do you think?

[(Cryptic)]

Interesting.

Would anyone know how to make a dynamic, spritesheet reader? Coz I've seen tools that animate sprites even though the sprites are not evenly spaced, and works on different spritesheets. Which means the size is not hard coded. This is one area thats been bugging me for ages.

[shintetsu_80]

stayscrisp, on 19 February 2011 - 07:08 AM, said:

I guess you could split the sheet up into separate rows and load them up with separate ID's. So when you move left you load up the move left sprite id an so on. I really don't think this will create any additional overhead if you load them in beforehand.

What do you think?

This sounds good to me. Essentially what you have is a Sprite Sheet but all your elements are not even from row to row. What I would do is make a Packed Sprite Sheet or Game Atlas.

To do this considering your first image of 8 frames. You would split that into two images. One image with 5 frames (cols) and 1 row and one image with 3 frames(cols) and 1 row. Next you need to use a tool like Zwoptex to merge these back into one image by doing this in Zwoptex you will also get a file of image coordinates. Now you can teach your PackedSpriteSheet class how to parse that file and you can do exactly what you want.

You can check out my game engine here for an example of how to do this. My engine is very limited in the formats that can be used but with DarkGDK you should be able to expand this to support multiple image types.

I expect this will take a while for you to wrap your head around Mike Daley has some good video tutorial at 71squared to help you understand. Check out the one on Animation and SpriteSheets.

[shintetsu_80]

(Cryptic), on 19 February 2011 - 08:40 AM, said:

Interesting.

Would anyone know how to make a dynamic, spritesheet reader? Coz I've seen tools that animate sprites even though the sprites are not evenly spaced, and works on different spritesheets. Which means the size is not hard coded. This is one area thats been bugging me for ages.

You really do need to define coordinates somewhere. A modular way is to use a packed sprite sheet that has it's coordinates define in a separate file. That way when you make a new packed sprite sheet you get another generated list of coordinates and the overhead is almost nothing.

The alternative it to design something that can process the image based on some boundaries like alpha color or boundary color. I've seen topics on this but nothing that's been announced as effectively being used. Honestly I would hate to be the guy that has to do that.

[speed-e]

Thank you for all your replies!

@shintetsu_80
I will try that out, when I will get some spare time