The title of this subject is a quote from ra4king, who really seems to know what he is talking about. But unfortunately I've broken this rule REALLY badly in my latest game. I told myself I would just finish this game no matter what and not get bogged down by what convention says I should do, but my code is turning into a great big mess. I would really some advice on how to rewrite my code without confusing logic and rendering.
I have included two screen shots. I thought this would make it a lot easier to see what I was talking about.


The number tiles are each represented as a Cell object, and they are stored in grid[][]. The user can move those arrows and then move the column and rows. This then moves each cell to its new position in the array. Each cell knows it's row and column. When rendering I do this
1 2 3 4 5 6 7 8 9 10 11 12 13
| for (int row = 0; row < grid.length; row++) { for (int col = 0; col < grid[row].length; col++) { Cell cell = grid[row][col]; if (!cell.isFree()) { g.drawImage(cell.getImage(), getX(col), getY(row), null); } } } |
The getX(col) method takes the column location of the array and works out it's y coordinate.
Now things get really messy. You see the second screen shot, how the maths symbols are where the user has highlighted. Well I have a class called highlighed line that returns the cells that are highlighted, then in the render method I calculate all the positions of the maths symbols. There is a lot of calculation involved. Don't let this code scare you away, I don't expect you to understand or even read it all, it it's just so you can see what I'm talking about.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
| public void renderHighlightedLine(Graphics g) { ArrayList<Cell> cells = highlightedLine.getHighlightedCells(); String line = highlightedLine.toString(); int cellCount = 0; for (int i = 0; i < line.length(); i++) { char symbol = line.charAt(i); if (Character.isDigit(symbol)) { int row = cells.get(cellCount).row(); int col = cells.get(cellCount).col(); cellCount++; g.drawImage(imageLoader.getImage("smallbox"), getX(col), getY(row), null); } else if (symbol != '(' && symbol != ')') { renderSymbolHighlight(g, symbol, cells.get(cellCount - 1), cells.get(cellCount)); } } } public void renderSymbolHighlight(Graphics g, char symbol, Cell cell, Cell cell2) { BufferedImage image = imageLoader.getImage(String.valueOf(symbol)); int x = 0; int y = 0; int width = image.getWidth(null) - 5; int height = image.getHeight(null) - 5;; if (cell.row() != cell2.row()) { y = Math.min(getY(cell.row()), getY(cell2.row())); y += CELL_SIZE; } else { y = getY(cell.row()) + CELL_SIZE / 2; } if (cell.col() != cell2.col()) { x = Math.min(getX(cell.col()), getX(cell2.col())); x += CELL_SIZE; } else { x = getX(cell.col()) + CELL_SIZE / 2; } x -= width / 2; y -= height / 2; g.drawImage(image, x, y, width, height, null); } |
Now you see the maths problem along the top? I do a similar thing there too.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
| public void renderSumProblem(Graphics2D g) { int x = 20; int y = 65; int cellCount = 0;
int x2 = (stage.getWidth() - problemBorder.getWidth()) / 2; problemBorder.setX(x2); problemBorder.setY(y - 10); problemBorder.render(g); ArrayList<Cell> cells = highlightedLine.getHighlightedCells(); for (int i = 0; i < sumProblem.length(); i++) { char symbol = sumProblem.charAt(i); BufferedImage image; if (symbol == '_') { if (cellCount < cells.size()) { Cell cell = cells.get(cellCount); image = cell.getImage(); } else { image = imageLoader.getImage("_"); } if (i != 0 && sumProblem.charAt(0) == '_') { x += 1; } g.drawImage(image, x, y + (CELL_SIZE -1 - image.getHeight(null) ) / 2, null); x += image.getWidth(null); cellCount++; } else { image = imageLoader.getImage(String.valueOf(symbol)); x += 3; g.drawImage(image, x, y + (CELL_SIZE - image.getHeight(null) ) / 2, null); x += image.getWidth(null) + 3; } } x += 1; for (; cellCount < cells.size(); cellCount++) { Cell cell = cells.get(cellCount); g.drawImage(cell.getImage(), x, y, null); x += cell.getImage().getWidth(null) + 1; } } |
I could really do with some help on how to organise this. I don't mind saying, I'm a pretty stupid person, so I won't be offended if you have to really dumb things down for me to understand.