Metal Gear Solid Item Selection?

Hi all, i�m figuring out how to make GUI like item selection from Metal Gear Solid, you probably remember it if you played that game how menu works. There an illustration that i need to figure out.

<img src="http://i.imgur.com/QcOOj.png" border="0" />

left bottom corner is using current item, if there 3 items, it could have 3 items in menu selection, not blank items.

I would love if you help me with some alternatives for item menu.

Thanks!

I'm not the "math" guy so I probably would go easy way, and improve it on the go.

Create 14 placeholder sprites with instance variable "number" from 1 to 14 for each sprite. Then just do simple compare.

For objects going to inventory, would do variable "number" as well.

If you pick up an object add 1 to variable "number" and place it in

placeholder number 1 XY.

If you pick up another object add 1 to variable "number" and place it in placeholder number 2 XY ...

as I say, it's easy and rough method but should work. After you happy with that, it's time for improving :)

Well, I never tried, but I think doing a matrix (array) is the best way.

A time ago I did a grid system on my canvas, this example may help you to position your sprites on the canvas and change their position while changing the weapon.

First, you need to have an idea of how bigger will the the selection menu area. For example we will have a layout for this menu with the size of 100x100 pixels, this place is where our sprites will rotate around.

Then, grid it. Your sample have a grid of 4 slots on the horizontal and 5 on the vertical, so, each slot size is: 25x20 pixels;

Make your grid with math. You can construct on the begin of the screen and manipulate it later.

For the first 4 items:

On layout start:

item.ID < 3 (because id 0 is the first):

>> create item.ID on Layer 0;

. >> X = item.ID*LayoutWidth/4-LayoutWidth/2;

. >> Y = item.ID*LayoutHeight/5-LayoutHeight/2.5;

This code will place the first 4 items on the first line of your layout (layout here means the menu area).

Well, you can make it with infinite ways, this is the first way I may try (or doing animation sprites and calling the frames one by one, where the frame number coincide with the item slot on the item list of your sample ^^)

I'm not the "math" guy so I probably would go easy way, and improve it on the go.

Create 14 placeholder sprites with instance variable "number" from 1 to 14 for each sprite. Then just do simple compare.

For objects going to inventory, would do variable "number" as well.

If you pick up an object add 1 to variable "number" and place it in

placeholder number 1 XY.

If you pick up another object add 1 to variable "number" and place it in placeholder number 2 XY ...

as I say, it's easy and rough method but should work. After you happy with that, it's time for improving :)

Picking objects aren't neccesary, i was talking about visual menu like Metal Gear Solid where you select the items using keyboard buttons.

Well, I never tried, but I think doing a matrix (array) is the best way.

A time ago I did a grid system on my canvas, this example may help you to position your sprites on the canvas and change their position while changing the weapon.

First, you need to have an idea of how bigger will the the selection menu area. For example we will have a layout for this menu with the size of 100x100 pixels, this place is where our sprites will rotate around.

Then, grid it. Your sample have a grid of 4 slots on the horizontal and 5 on the vertical, so, each slot size is: 25x20 pixels;

Make your grid with math. You can construct on the begin of the screen and manipulate it later.

For the first 4 items:

>> On layout start:

>> item.ID < 3 (because id 0 is the first):

>> >> create item.ID on Layer 0;

. >> X = item.ID*LayoutWidth/4-LayoutWidth/2;

. >> Y = item.ID*LayoutHeight/5-LayoutHeight/2.5;

This code will place the first 4 items on the first line of your layout (layout here means the menu area).

Well, you can make it with infinite ways, this is the first way I may try (or doing animation sprites and calling the frames one by one, where the frame number coincide with the item slot on the item list of your sample ^^)

I have a question about item.ID where ID starts, i was almost confused, i'm not sure you mean IID, UID or just instance variable?

Anyways, i made a .capx which is buggy, maybe you can check to correct it, you can press by right or left arrow... thanks! :)

http://dl.dropbox.com/u/76227787/MetalGearItemMenuUnresolved.capx

> Well, I never tried, but I think doing a matrix (array) is the best way.

>

> A time ago I did a grid system on my canvas, this example may help you to position your sprites on the canvas and change their position while changing the weapon.

>

> First, you need to have an idea of how bigger will the the selection menu area. For example we will have a layout for this menu with the size of 100x100 pixels, this place is where our sprites will rotate around.

>

> Then, grid it. Your sample have a grid of 4 slots on the horizontal and 5 on the vertical, so, each slot size is: 25x20 pixels;

>

> Make your grid with math. You can construct on the begin of the screen and manipulate it later.

>

> For the first 4 items:

> >> On layout start:

> >> item.ID < 3 (because id 0 is the first):

>

> >> >> create item.ID on Layer 0;

> . >> X = item.ID*LayoutWidth/4-LayoutWidth/2;

> . >> Y = item.ID*LayoutHeight/5-LayoutHeight/2.5;

>

> This code will place the first 4 items on the first line of your layout (layout here means the menu area).

>

> Well, you can make it with infinite ways, this is the first way I may try (or doing animation sprites and calling the frames one by one, where the frame number coincide with the item slot on the item list of your sample ^^)

I have a question about item.ID where ID starts, i was almost confused, i'm not sure you mean IID, UID or just instance variable?

Anyways, i made a .capx which is buggy, maybe you can check to correct it, you can press by right or left arrow... thanks! :)

http://dl.dropbox.com/u/76227787/MetalGearItemMenuUnresolved.capx

I-m at work now, but that ID is an instance variable. You can set unique instance variables as IDs when creating any object by this way:

GlobalID = 0;

Any event trigger:

>> Create object on X,Y;

>> Set object.ID to GlobalID;

>> Set GlobalID = GlobalID + 1;

This basically breaks down into moving the items with a "grid movement". So all we need to figure out is how far to move and in what direction. Your picture shows the directions to use. A few events to pick each side of items and set the direction and you're done. You may need a few events for the case of the corners; I handled it by noting the order in which the direction is set. Once you know the direction you set the distance to 160 for horizontal directions and 96 for vertical.

ex:

http://dl.dropbox.com/u/5426011/examples14/mgs_inv.capx

A few other notes:

*At the end of the grid movement the position is rounded to ensure positions are integers so we can compare them exactly.

*The grid movement speed is set to the distance to move times two so that all the items will take exactly a half a second to move.

>

> > Well, I never tried, but I think doing a matrix (array) is the best way.

> >

> > A time ago I did a grid system on my canvas, this example may help you to position your sprites on the canvas and change their position while changing the weapon.

> >

> > First, you need to have an idea of how bigger will the the selection menu area. For example we will have a layout for this menu with the size of 100x100 pixels, this place is where our sprites will rotate around.

> >

> > Then, grid it. Your sample have a grid of 4 slots on the horizontal and 5 on the vertical, so, each slot size is: 25x20 pixels;

> >

> > Make your grid with math. You can construct on the begin of the screen and manipulate it later.

> >

> > For the first 4 items:

> > >> On layout start:

> > >> item.ID < 3 (because id 0 is the first):

> >

> > >> >> create item.ID on Layer 0;

> > . >> X = item.ID*LayoutWidth/4-LayoutWidth/2;

> > . >> Y = item.ID*LayoutHeight/5-LayoutHeight/2.5;

> >

> > This code will place the first 4 items on the first line of your layout (layout here means the menu area).

> >

> > Well, you can make it with infinite ways, this is the first way I may try (or doing animation sprites and calling the frames one by one, where the frame number coincide with the item slot on the item list of your sample ^^)

>

> I have a question about item.ID where ID starts, i was almost confused, i'm not sure you mean IID, UID or just instance variable?

>

> Anyways, i made a .capx which is buggy, maybe you can check to correct it, you can press by right or left arrow... thanks! :)

>

> http://dl.dropbox.com/u/76227787/MetalGearItemMenuUnresolved.capx

I-m at work now, but that ID is an instance variable. You can set unique instance variables as IDs when creating any object by this way:

>> GlobalID = 0;

>> Any event trigger:

> >> Create object on X,Y;

> >> Set object.ID to GlobalID;

> >> Set GlobalID = GlobalID + 1;

Thanks for clearing that :)

This basically breaks down into moving the items with a "grid movement". So all we need to figure out is how far to move and in what direction. Your picture shows the directions to use. A few events to pick each side of items and set the direction and you're done. You may need a few events for the case of the corners; I handled it by noting the order in which the direction is set. Once you know the direction you set the distance to 160 for horizontal directions and 96 for vertical.

ex:

http://dl.dropbox.com/u/5426011/examples14/mgs_inv.capx

A few other notes:

*At the end of the grid movement the position is rounded to ensure positions are integers so we can compare them exactly.

*The grid movement speed is set to the distance to move times two so that all the items will take exactly a half a second to move.

Nice one! I understand what you're saying about grid movement, but you made my day :D.

Thank you a lot!