aspose file tools*
The moose likes Game Development and the fly likes Two different images to show up as two different colors? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript forum!
JavaRanch » Java Forums » Java » Game Development
Bookmark "Two different images to show up as two different colors?" Watch "Two different images to show up as two different colors?" New topic
Author

Two different images to show up as two different colors?

John Corkrend
Ranch Hand

Joined: Oct 27, 2012
Posts: 51

How would I get it so that these two different images show up as two different colors? I have tried adding .setColor to the paint method, but then it flashed back and forth between the two colors that I wanted. These are my paint and paintComponent methods. But I don't really understand them, what is the difference between the two.

Piet Souris
Ranch Hand

Joined: Mar 08, 2009
Posts: 530
    
    8
Hi John,

I guess from looking at the code you're working with AWT objects, like Panel and Canvas.
Then I guess using a paintComponent() is okay, but dangerous, since it is an important method
in Swing. I suggest changing the name to (for instance) "fill_with_Ovals", with parameterset
Graphics p (that's there already) and Color c.

You could then say (lines 6 and 7):

or something like this.

Further, in lines 2 and 4 you create images that have the same size as the
component for which this painting is doing its best. In lines 8 and 9 you
paint both images in the same positions. Now, unless these images contain
a lot of transparent pixels, you will only see the second one drawn.
If you want to see both, in different colors, I suggest making them smaller,
so that you can paint then in different locations and still see both of them fully.

Finally, in line 16 you call repaint() again. This will get you in an eternal loop,
since paint() will be called again.

So, there's some work to do, but I hope you have some ideas where to work on.

Greetings,
Piet
John Corkrend
Ranch Hand

Joined: Oct 27, 2012
Posts: 51

Ok well I made the changes but now both of the images just show up as black. And I forgot to mention that I have code that allows you to move one of the pieces so that they are not one right over the other, but I didn't think that was relevant code to changing the color.
Here is my code with some changes

Piet Souris
Ranch Hand

Joined: Mar 08, 2009
Posts: 530
    
    8
I forgot to mention one extra line in the fillOvals() method:


and I removed the repaint() call. That should give you two differently coloured cirkels.

But I am still a bit puzzled. You draw both images, of the same size, in the same position. See lines
8 and 9. Wouldn't you see only the image of line 9 then, since it's overwriting the image of line 8?

And lastly: why don't you draw both cirkels straight into the Grapics g of the paint() routine?
Something like:



That way, you don't need to create two images each time paint() is called.
But I don't know the rest of your code, so you may have some compelling reasons for this.

John Corkrend
Ranch Hand

Joined: Oct 27, 2012
Posts: 51

Ok well that did do the trick, they now show up as two different colors, but it conflicts with a different part of my code. Here is the full program, but the part that doesn't work now is lines 22-45.Without calling the repaint method it doesn't show the movement of the oval. In the console it is still printing that the X/Y value changed but it is not showing it on screen. Would there be a way to have them as two different colors and still allow one of them to move like I have here.
Piet Souris
Ranch Hand

Joined: Mar 08, 2009
Posts: 530
    
    8
Getting closer, but still not there.

First of all, remove the repaint() code from the fillOvals() method. As I said,
that creates an infinite loop: repaint() => paint() => repaint() => ad infinitum

Instead, we place the repaint() in the ActionListener class, right behind the walls()
method. This will make that repaint() is called every time you press one of the keys.
And that will be done after the adjustments of the coordinates!

But then we have another problem. If you look at the fillOvals() method, you see that
two cirkels are drawn, one at position (x2, y2) and one in position (x,y).
So, currently, FOUR cirkels are drawn, two in each of the two images. Now I suppose
this is not what it should be. So, lets change the fillOvals() method again:

and change lines 62 and 63 accordingly:

(but see my remarks on the use of two images)

If all this works, then I recommend reading my previous remakrs on drawing the two
cirkels directly to the Graphics g in the paint() method. See if you can implement
these remarks into your code. It should make the code both shorter and easier to follow.

And finally: the walls() method looks okay. But try this in lines 11 and 12:


John Corkrend
Ranch Hand

Joined: Oct 27, 2012
Posts: 51

I have made the changes and was able to move around the oval, but once I changed the fillOvals method to the one you suggested only one oval showed up and it did not move. Here is the updated code if you want it.

Also if you could explain the whole "int left, int top" stuff in the fillOvals method I would appreciate it as I don't quite understand it.

Piet Souris
Ranch Hand

Joined: Mar 08, 2009
Posts: 530
    
    8
Well, to draw an oval, you need three things to know:

- the graphics environment into which to draw
- the color of the oval
- the coordinates of the upperleft corner of the rectangle that encloses the oval; you need two coordinates for that: the x and the y.

In the fillOvals method, you see the four parameters mentioned above. So, parameter left stands for the x coordinate, parameter top for the y coordinate.

In lines 63 and 64 is where you call this method. Inl line 63 with parameters enemyGraphics, Color.RED, x and (should be) y, although you call it with x in stead of y.
The same in line 64. Parameters: dbg, Color.GREEN, x2 and (again, should be) y2, but you use x2 by accident.
Hope this clarifies the parameters.

Since in line 64 you use the parameters x2 and y2, well, these values are not changed in your program, so that's why you don't see the oval moving. If you want to see the dbg oval move, you should change x2 and y2 somehow.

Why do you see only one oval in stead of two?
In the paint() method, you create two images, dbImage in line 61 and enemyImage in line 59. Both images have the same size as the panel you will draw them to.
Both images are then filled with an oval (lines 63 and 64). So far, okay.
In line 65 you draw dbImage into your panel, at position (0,0). This is the upper left corner of the panel in which the drawing takes place. So, dbImage now covers the entire panel.
Then, in line 66, you do the same with image enemyImage, So now, effectively, dbImage is now completely hiding behind enemyImage, so you won't see it anymore.

The easy way out is to create only one image, and then draw both ovals to that one image. After that, draw that one image into your panel. Somethin like:


In lines 42 and 43, you must call walls() before you call repaint(). Since you changed the x and y values, you must first check if they are still between the walls. After that, you can safely call repaint().

By the way: have a thorough look at your walls() method. In lines 11 and 12, you now start with x = y = 201. Check if it is possible that one oval might be able to "escape" from the confinement!

 
jQuery in Action, 2nd edition
 
subject: Two different images to show up as two different colors?