Beginning Game Development: Battleship Puzzle — Layout

You sank my Battleship!

[Listen to a recording of this article.]

Those of us of a certain age, grew up with TV commercials during our Saturday morning cartoons. they were usually for toys or breakfast cereals. The one that I remind was for a game called ‘Battleship’. The kids in the commercial would scream out, “You sank my battleship!”.

I recently had a chance to participate in a weekend Game Jam. My team choose to craft a series of puzzles to complete the game. I provided two puzzles, one of which was inspired by Battleship.

Designing the Display

The game board is a square. That is, there is an equal number of rows and columns. the image above was generated through AI. At the moment, that isn’t considered appropriate for commercial game releases. Hire an artist so that you control the copyright. I was part of a Game Jam that had extremely tight schedules.

First, we’ll need a place for our puzzle. This puzzle was placed in a game whose set resolutions 1920 x 1080. So the largest square you should make is 1080 x 1080. I choose 450 x 450.

These are the settings I used for my canvas GameObject. Note that I’m using Render Mode — World Space. This anchors the puzzle to a specific place in the game. We were making a 2D game, but this works for 3D games as well. In 3D, you’ll need to adjust the scaling to fit that space. Additionally, I set the Scale to X: 0.01, Y: 0.01 and Z: 0.01 . The Unity UI system produces a very large item, you’ll need to scale it down the game space.

Make sure an Event System appears in the Hierarchy window. This is an important item that will make the buttons function. Event System translates mouse movements and clicks and passes those along to buttons like the one we’ll use in this project.

Over in the Inspector window, with the Canvas selected. You might want to rename the Canvas to something fits your project. I choose ‘BattleShipPuzzle’ to assist my Game Jam team.

Background

Next we add the game’s background image. With Canvas selected, right click and choose UI -> Image or from the menu bar choose Game Object -> UI -> Image .

Here are the settings I used. Notice the stretch x stretch icon in the upper right corner below Rect Transform. This is making the image provided fill the Canvas.

While holding the Alt or Option key, click on the Anchor Point icon (the one in the right right hand corner of Rect Transform). The pop-up menu like the one above should appear. Click the lower right hand corner. The one in the stretch column and the stretch row.

To supply the background image, click the small circle with a dot icon to the right of Source Image.

A pop-up menu will appear much the one below. Locate the graphic you placed in Unity. Click on that image and the pop-up will disappear. [Note: To keep this article fairly short, I’m not covering how to bring graphics into Unity., If you need help, there are numerous tutorials that can assist.]

With the image selected in the Hierarchy menu, look to the Inspector window. You may want to rename this item to something like ‘Background’ or ‘Game Background’.

Grid

The final detail for the background is the Grid that will hold all of the buttons for the game. We’ll cover the buttons in the next article. For now, we are just creating the space where they will appear.

With your game board canvas selected, right click and choose Create Empty from the pop-up menu. Or you can select the canvas and from the GameObject menu, select Create Empty.

Above are the settings I used for my project. Normally PosX and PosY would be same amount. My AI generated graphic is ever so slight off. So your positions will be different.

Note the anchor point icon. For the grid, I choose to center the empty GameObject. Simply the click the icon (no keys need to be pressed). Choose the Center — Middle option.

Now that the outline of of the Grid squares off where the buttons will appear, we need to add the ‘Magic Sauce’ that will allow Unity to correctly place the buttons for us.

In the Inspector window, click on Add Component. From the pop-up menu, type in ‘Grid’. Choose ‘Grid Layout Group’.

You’ll see my settings for my project. I’m using a 6 X 6 configuration. That is 36 buttons. My grid is 330 x 330. I divided 330 by 6 and get 55. You’ll see that I choose cell spacing of 45 and 45, with a cell spacing of 8 and 5. Again, my graphic is actually not square, so your numbers will be different. In the next article, we’ll add the buttons. Then we can adjust the Grid Layout for a better fit.

Teaser