Help pls: How to Draw a Board for Backgammon game

Newbie & Debugging Questions
#1

Hello guys,

      I'm pretty new to Java Games programming and I honestly I am lost as to which route to take to draw the Board of my Backgammon game.  ???

I need advice on the following matter:

    I was thinking initially that instead of actually Drawing the Board using Java shapes (like drawRect() etc), to take a real photo of my own real Backgammon Board and import it in the application. Now, the Question is: How am I going to do this? I mean, do I import the Image in my application and then I just "mark" the Positions of the pieces somehow and then add Actionlisteners to them, so that the application knows which are the positions that it needs to "listen" for the moves of the pieces?

Or alternatively, would it be possible to import the photo that I’ve taken, and then draw a Board using Java shapes (like drawRect() etc), but make it Transparent in color, and then “stick” it on top of the Photo (image) and then add ActionListeners on the positions of the drawn Board?

Please I need your guidance to this, as I am new to Game and Graphics programming in Java! Any suggestions and explanation would be greatly appreciated :slight_smile:

Thanks in Advance,

HaDeS

#2

I would trace the image in gimp and export an SVG file, parse the SVG file and use it to create shapes to test for collision and draw highlights for mouse overs, etc. That, however, may be too much for yourself, so write a method that draws the shapes in alternate colours and check for collision with the mouse using shapes.

#3

I’m sorry but I think I’ll need a bit more detailed description of your suggestion, as I do not really understand what you are trying to say… :-[

I’m not so experienced u see…

Thanks again

#4

Get Inkscape.

-go to Document Properties (top/right icon)
-set the canvas size to something sensible
-setup the grid
-draw
-save :wink:
-export as png

Then do matching checker graphics.

This is by far the quickest way. Additionally you won’t have to figure out the positions… simply setup the grid in such a way that its easy to handle.

#5

Sounds cool, I’ll try it soon, thanks.

But: are you implying that you would do it following the 2nd approach that I mentioned in my initial post? Like drawing the Grid with Inkscape, make it transparent so as not to be visible, and then “sticking” it ON my real Photo of Backgammon?

#6

No, I meant that I would create all graphics in Inkscape (and some touch up in Photoshop perhaps).

#7

I tried Incscape and what I found out was that it is just a paint Program, I can do the same with Photoshop by the way…

Am I missing something here that I should have understood by now?

#8

Lol ok we were posting at the exact same moment! (does not happen often, does it?)

ok so in case I want to import my Real Photo of my own Backgammon, it is the same as if I would paint it in Photoshop or Inkscape… right?

My question was: the Logic by which I should make the Graphics Backgammon Board, not the means by which I would draw it.

so which of my initial thoughts should I follow? no1? no2? or neither of them?

#9

Yes, Inkscape is a drawing program, but unlike Photoshop it’s vector based (like Illustrator). Using vectors for the rough shapes (or even everything with some Gaussian blur shadows and highlights etc) is a lot easier and more productive.

My question was: the Logic by which I should make the Graphics Backgammon Board, not the means by which
I would draw it.

Using the approach, I outlined above, you get coordinates, which are very easy to handle. Drawing the checkers at the right place and correctly interpreting the mouse coordinates is way easier then.

Let’s unroll your previous questions…

I mean, do I import the Image in my application and then I just “mark” the Positions of the pieces somehow
and then add Actionlisteners to them, so that the application knows which are the positions that it needs to
“listen” for the moves of the pieces?

You simply load the board and checker images and draw it in whatever component you like. To this single component you add a single MouseListener. All whats left to do is to translate the coordinates correctly to your data structure (say… a 2d array) and this is (as I explained earlier) a lot easier with an overly accurate board image.

Or alternatively, would it be possible to import the photo that I’ve taken, and then draw a Board using Java
shapes (like drawRect() etc), but make it Transparent in color, and then “stick” it on top of the Photo (image)
and then add ActionListeners on the positions of the drawn Board?

This is of course also possible, but it requires a lot more work on your end. Especially if the board is distorted due to perspective.

#10

Now I understand it much better 8)

Another question: About the Coordinates that Incscape uses and those that Java uses for an Application (not an Applet - I still do not know if the coordinate system those 2 methods use is the same… is it?).

So, my question is: is the coordinate system of Incscape and that of Java Application, the same? (for the shapes etc?) IF it is, then Yes I can see why it would be much easier to do it this way :slight_smile:

#11

Set the default units to px (pixels). If your canvas in Inkscape is say… 640x480px and if you export it at that very size… then yes, you’ll get a nice 1:1 mapping.

And Applet vs Application… it’s the same deal.

#12

OnyX you ’ ve been really helpful mate :smiley:

I really appreciate it.

By the way, if anyone else has something to say or propose, please free to do so, as I am not going to starting implementing the Graphics for some time now…

Thank you all.