Make a graphic change color when I click on it? (Like a button?)

Question

1.80/5 (3 votes)

See more:

I'm have to basically remake a game for my final school project. The project is progressing well, but I'm only stuck on a part where I need the black tiles in the game to change color when clicked. The game I'm trying to remake is called "Piano Tiles". To shorten the story, watch this: https://www.youtube.com/watch?v=4uZPiynHRsw[^]

So how can I make the black tile(s) change its color when a user clicks on it?

*Note: I already setup the brushes and arrays to be ready for use.

I added 4 brushes that represent the colors of the game tiles:

Here are the variable names

C#

Brush bsh_black, bsh_grey, bsh_white, bsh_red;
Brush bchanger1, bchanger2, bchanger3, bchanger4;
//Under Public Form1()
bsh_black = new SolidBrush(Color.Black);
bsh_grey = new SolidBrush(Color.Gray);
bsh_white = new SolidBrush(Color.White);
bsh_red = new SolidBrush(Color.Red);
bchanger1 = bsh_white;
bchanger2 = bsh_white;
bchanger3 = bsh_white;
bchanger4 = bsh_white;

Black - tile you have to press
Grey - When the black tile is pressed
White - The tile you *don't* press
Red - When the you do press the white tile.

Here's what I've tried so far for clicking on the graphic:

C#

if (e.Y == yf1)
            {
                if (e.X == x2)
                {
                    if (bchanger1 == bsh_black)
                    {
                        bchanger1 = bsh_grey;
                        Invalidate();
                    }
                }
            }

            if (e.Y == yf1)
            {
                if (e.X == x4)
                {
                    if (pat_assign == pat4)
                    {
                        if (bchanger4 == bsh_black)
                        {
                            bchanger4 = bsh_grey;
                            Invalidate();
                        }
                    }
                }
            }

//The "yf1" variable is the vertical location for the black tile(s). For the game, I decided to divide the form into four columns - where I had to make 4 variables that represent the 4 columns; "x1", "x2", "x3", and an "x4". These columns is where the tiles will run through. But for "prototype" purposes, I used the x4 as the temporary "dummy" variable.

So, in short, if where the user clicks is in the same location as the "yf1" variable and the "x4" variable, that should change that specific tile to a different color. Unfortunately, that didnt work.

P.S: sorry if I wasn't more clear about this earlier, I'm just a high school student.

**I am so sorry, I also forgot to ask how to detect that a graphic has been clicked on (in this case the tile).

Posted 27-May-14 12:52pm

TAOG ASOGA

Updated 28-May-14 1:14am

v6

Add a Solution

Comments

[no name] 27-May-14 18:57pm

"these aren't the actual variable names", it isn't the code that you have tried either.

Sergey Alexandrovich Kryukov 27-May-14 21:43pm

Also, you didn't tag the UI library you are using. Brush? Which one? Full type names, please.
And what's the problem? And no, you didn't show any attempt to handle the click, change the color, nothing like that...
—SA

TAOG ASOGA 27-May-14 23:12pm

Sorry sir, I forgot to put that part of code in earlier. It's here now (in the question)

Sergey Alexandrovich Kryukov 28-May-14 0:53am

Please, add the tag System.Windows.Form by "Improve question", also mention System.Drawing... You need it to help people see what is it all about and decide whether to answer or not. It improves your chances to get useful advice...
—SA

TAOG ASOGA 28-May-14 7:12am

Yes sir.

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2014-05-27T19:01:00

It looks like you already know how to invalidate the rendered image; I would only add that you can improve performance by invalidating only part of the scheme using System.Windows.Controls.Invalidate with parameters (Rectangle or Region):
http://msdn.microsoft.com/en-us/library/system.windows.forms.control.invalidate%28v=vs.110%29.aspx[^].

Render your piece of graphics not just with fixed brush, but make is depending of some method parameter or a field, depending on your game logic. If you change the brush, the piece will change the color after next invalidation.

I explained how it works in my past answers:
What kind of playful method is Paint? (DataGridViewImageCell.Paint(...))[^],
capture the drawing on a panel[^],
Drawing Lines between mdi child forms[^].

By the way, in games you normally use additional (non-UI) threads which executed your game scenario. This is how you update graphics from a thread: How to speed up my vb.net application?[^].

—SA

Mitchell J. · Accepted Answer · 2014-05-28T01:27:00

Congratulations for asking a decent question! :thumbsup:
This is one of the clearest questions I have ever seen.

Anyway, in your current code, you use this sort of structure twice:

C#

if (e.Y == yf1)
{
   if (e.X == x2)
   {
      //etc..

There's the problem!
e.Y and e.X are exact values, as are yf1 and x2, etc, so the code that you want to run will only run if the exact pixel where the tile is drawn is clicked.
Clicking in the middle of the tile will not cause your current code to execute.

Instead, try something like this - I don't know how wide your tiles are, but you get the picture:

C#

if (e.Y - yf1 < tileheight)
{
   if (e.X - x2 < tilewidth)
   {
      //etc..

And, while you're at it, use the && operator to save space:

C#

if (e.Y - yf1 < tileheight && e.X - x2 < tilewidth)
{
   //etc..

Let me know if this helps :-)

Bacchus Beale · Accepted Answer · 2014-05-27T14:34:00

It depends how you set up your buttons.
If they are just Buttons with Text the Click event just needs to set the BackColor:

C#

button1.BackColor=Color.Black;

If they are Buttons with Images, it would be best to create the images for the different colours you need and swap the Image on a Click event.

Using Brushes only works if you make a user control as a subclass of Button and override the OnPaint event. There you would get the Graphics object of the Button and then apply the Brush color. To trigger the Paint event, in the Click event call

C#

this.Invalidate();

Make a graphic change color when I click on it? (Like a button?)

3 solutions

Solution 2

Solution 3

Solution 1

Add your solution here

Preview 0