Cheap way to do array of buttons?

Get help using Construct 2

Post » Thu Apr 13, 2017 7:53 am

The game I'm working on uses full width strips of color as buttons for controls, initially there are 2 buttons(strips) which then shrink along their y axis to make room for a 3rd button(strip) and so on until there are 6 buttons. This happens during the course of one layout. Each button does the same thing but passes a different value so my main character can change colors accordingly

I'm wondering what the cheapest way to do this might be, as it is now I have 6 separate sprites which all have an on touch action, I'm sure this is overkill events wise.

I thought perhaps I could use a single sprite containing all the color strips (building up over frames), on touch it would compare the y value and if it corresponded to the location of the color it would then trigger the action. Although I'm not sure how or it's even possible to get the coordinates of a touch event.

Any tips on how to get the touch y value or any other methods that might be more lightweight than my less than elegant solution would be appreciated.

Cheers!
B
8
Posts: 21
Reputation: 342

Post » Thu Apr 13, 2017 9:27 am

Create 6 instances of the same sprite. Give instance variable to the sprite, containing a value or id to indicate which color it has. With this, you can call a function while passing the value from the variable as a parameter. You can also use an array to specify how many sprite you need.

Example:
Code: Select all
arr_colors = [red, green, yellow, ...];
on start of layout {
   for each arr_colors.x element {
      create object bt_sprite
      set bt_sprite.value to arr_color[arr_color.curX]
   }
}
on clicked bt_sprite {
   call function set_color(bt_sprite.value)
}
on function call set_color(var clr) {
   player set animation/frame to clr
}


I would recommend you set all the different colors into the main character's animation/frame instead of the buttons. This allow the button to be independent as it will only pass the value needed, so if in case you add more color, you'll only need to modify the main character (no need to add new frame to the button).
B
33
S
10
G
2
Posts: 46
Reputation: 3,063

Post » Thu Apr 13, 2017 10:51 am

tmntppn wrote:Create 6 instances of the same sprite. Give instance variable to the sprite, containing a value or id to indicate which color it has. With this, you can call a function while passing the value from the variable as a parameter. You can also use an array to specify how many sprite you need.

Example:
Code: Select all
arr_colors = [red, green, yellow, ...];
on start of layout {
   for each arr_colors.x element {
      create object bt_sprite
      set bt_sprite.value to arr_color[arr_color.curX]
   }
}
on clicked bt_sprite {
   call function set_color(bt_sprite.value)
}
on function call set_color(var clr) {
   player set animation/frame to clr
}


I would recommend you set all the different colors into the main character's animation/frame instead of the buttons. This allow the button to be independent as it will only pass the value needed, so if in case you add more color, you'll only need to modify the main character (no need to add new frame to the button).


Great ideas, thanks so much. I'm not 100% sure what you mean by the last paragraph though, I'm currently using a gl effect for the hue shift if that makes any difference. Here's a gif of the game to better understand whats going on, the background colors are the buttons.
Image
B
8
Posts: 21
Reputation: 342

Post » Thu Apr 13, 2017 11:00 am

I mean that it might be better to use just 1 frame for the button sprite and multiple frames on the character (because you were considering making a button with multiple frame). Having multiple frame on either the character and buttons can sometimes makes it difficult to manage latter on. This of course depends on the overall design of your project. If you manage the frames well then it shouldn't be a problem too. Just an idea. But since you're using hue, then passing a value probably makes even more sense.

Your game look interesting though. Cute monster...
B
33
S
10
G
2
Posts: 46
Reputation: 3,063

Post » Thu Apr 13, 2017 12:27 pm

B
33
S
18
G
28
Posts: 2,477
Reputation: 20,918

Post » Thu Apr 13, 2017 2:36 pm

@99Instances2Go your "cheap" ColorCyle example rocks.
B
79
S
28
G
108
Posts: 194
Reputation: 59,906

Post » Thu Apr 13, 2017 3:02 pm

Sorry to interrupt the thread guys

Just I need to ask a quick question to @99Instances2Go

I'm mostly interested just on how you pick the (color object instance) as I need something similar related to picking instances but without the oberlaping.

My Question is related from code line 4 to 8: as is a bit confusing for me to comprehend for my lack of knowledge of course

This is how I understand the code:

Every thick: previousTouched will be -9 an less Color variable( touched ) is true, wich we change previousTouched to color.UID

But Next Every thick: Set (Touched) to false (This is one part that confuses me as it contradicts the above code as both of them run at everythick) and for me will look like previousTouched will be always -9


On code line 15: you chose the color instance that we wanna change the color to So (code 9) will pick up this object instance and set previousTouched to this color.UID that we just choosed
but on the subevent confuse me again as (it will only run only if the previousTouched is not Equal to the color instance that we just choose.


Is quite tricky to understand, and I know must have a good explenation is just I cant visualize it :D

Thank you in advance
B
38
S
22
G
53
Posts: 213
Reputation: 30,509

Post » Thu Apr 13, 2017 4:23 pm

For the - 9.
Never forget that object with UID=0 exists. In this case the purple one has UID = zero. Without setting it to -9, the purple colour will not work if it is the first colour accessed by the touch.
I could have deleted the first instance of color in the layout editor, so the first color gets a different UID then zero. But, construct tends to pack the UID's again in the layout editor, so that zero can/will show up again.
I could have added a fake sprite to the layout at the very start, right after making the new project. Now i am sure that this sprite will have UID=zero. And not ever touching it will keep that UID=zero on that sprite. But how do i explain this in a little/short example.
Better is to make the code account for a possible UID = zero.

So, now, if i set previousTouched to - 9. And the first touch goes over the purple one, then the caught UID (zero) is different then -9, or, there is a change in the situation. We got to act.

Also, in this case, when i set the default stat of previousTouched to any existing color UID, the color will not work when touched as first colour.

So, there are 2 things playing here.
1/ I only want to act if the touch is over a different color then it is over in the previous tick
2/ i only want the color that the touch (when touching) is over to go in the state 'touched' (boolean = true). All other colors must go in the state untouched (boolean = false)

About 1/
There can be only one color with boolean 'touched' = true. I am sure of that.
Therefor, if i (before changing anything in that state) set previousTouched to the UID of the 'touched one', then i store the UID of the color that had the state 'touched' in the previous tick (event 5)

As long as the state 'touched' is not changed (and i will change it in event 7, later on) , it reflects the previous tick.

Now, in the current tick, things could be changed. I first pick the color that touch is now/at this moment over. And that can be a different color then in the previous tick.
ONLY if its UID is different (not the same as) then the one in the previous tick (previousTouched) i start the timer that is changing colors. (event 8)

About 2/
I need only the color that the touch is over to be in the state of 'touched'. I could make some complicated inverse or else condition to archive that. But it is a LOT more simple to just set them all in the state 'untouched'. And then set only the one, that has the touch over it, to 'touched'. You see ?
Event 6 just sets them all to 'untouched' ( = boolean touched = false)
Event 7 picks that only one the touch is over and sets its state to 'touched' ( = boolean touched = true)
B
33
S
18
G
28
Posts: 2,477
Reputation: 20,918

Post » Thu Apr 13, 2017 6:34 pm

shaundraws wrote:Image


Sorry off topic, but this is the literally the greatest thing I've seen lately haha.
Mistakes were made.
B
49
S
24
G
107
Posts: 1,581
Reputation: 60,303

Post » Thu Apr 13, 2017 8:20 pm

[quote="99Instances2Go"]For the - 9.

Haha @99Instances2Go I read it 100 times or more and checked the capx but I don't get it yet, I'm bad :D
I will carry on till I get it:

I understand the part why previousTouched has to be -9 so it doesn't cause conflict with instance 0

And I get mostly What you said but the part where I have the big problem and confuse is at number 8 when comparing if is not the same (color.UID) because for me it looks like when the thick reach number 6 it will be always set to -9 because we set touched to false

So number 8 will be always true if I'm not mistaken? so if this is correct why check if is not the same as previousTouched, then run the action timer

Thank you so much for the full explanation I learned a lot
B
38
S
22
G
53
Posts: 213
Reputation: 30,509

Next

Return to How do I....?

Who is online

Users browsing this forum: Sparkz and 2 guests