Metal Gear Solid Item Selection?

Get help using Construct 2

Post » Sun Sep 16, 2012 10:28 pm

Hi all, im 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.



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!
B
96
S
25
G
20
Posts: 3,055
Reputation: 22,644

Post » Sun Sep 16, 2012 10:41 pm

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 :)
shinkan2012-09-16 22:42:02
ImageImageImageImage
B
140
S
58
G
36
Posts: 2,547
Reputation: 31,170

Post » Sun Sep 16, 2012 10:43 pm

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 ^^)
ImageImageImageImageImageImage
B
93
S
20
G
12
Posts: 1,211
Reputation: 18,480

Post » Mon Sep 17, 2012 9:30 am

[QUOTE=shinkan] 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 :)
[/QUOTE]


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




B
96
S
25
G
20
Posts: 3,055
Reputation: 22,644

Post » Mon Sep 17, 2012 9:44 am

[QUOTE=TELLES0808] 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 ^^)[/QUOTE]


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
B
96
S
25
G
20
Posts: 3,055
Reputation: 22,644

Post » Mon Sep 17, 2012 2:19 pm

[QUOTE=Joannesalfa] [QUOTE=TELLES0808] 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 ^^)[/QUOTE]


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[/QUOTE]

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;
ImageImageImageImageImageImage
B
93
S
20
G
12
Posts: 1,211
Reputation: 18,480

Post » Mon Sep 17, 2012 5:25 pm

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.R0J0hound2012-09-17 17:25:50
B
79
S
24
G
54
Posts: 4,746
Reputation: 40,755

Post » Mon Sep 17, 2012 10:07 pm

[QUOTE=TELLES0808] [QUOTE=Joannesalfa] [QUOTE=TELLES0808] 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 ^^)[/QUOTE]


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[/QUOTE]

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;[/QUOTE]


Thanks for clearing that :)
B
96
S
25
G
20
Posts: 3,055
Reputation: 22,644

Post » Mon Sep 17, 2012 10:18 pm

[QUOTE=R0J0hound] 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.[/QUOTE]


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


Thank you a lot!
B
96
S
25
G
20
Posts: 3,055
Reputation: 22,644


Return to How do I....?

Who is online

Users browsing this forum: Baidu [Spider], DiabloOvermind, emoticon, odiusfly and 20 guests