StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAndroid - Canvas onDraw with zoomed camara following character movements
text
Body
copied!<p>Some Context:</p> <p>I am creating an Android game which draws a maze onto a canvas against a background image, this uses a square block and therefore the maze is always automtically zoomed in to a 5 x 5 square, of a maze that may be 20 x 20. The maze is drawn by simply running through a set of for loops and then drawing lines in the relevent places. This is all working perfectly, however I am having an issue with getting my onDraw to work smoothly. This is occuring due to the fact that everytime I invalidate I have to re-run the for look and run various if statements to check positions (unfortunetly this process cannot be improved).</p> <p>The Question:</p> <p>I am looking to re-write the way my maze is drawn onto the canvas, below are the 3 main features I need to implement:</p> <p>1 - Draw the whole maze onto the canvas (this is easy enough) 2 - Zoom in on the maze so only a 5 x 5 is shown 3 - Move the character (who is always centered on the screen) and draw the next seciton of the maze</p> <p>Now as mentioned above drawing the whole maze is easy enough and will make the onDraw signifcatly quicker as their is no need to run the for loop on invaldate, it can be done once when the level is first loaded up.</p> <p>In terms of point 2 & 3, the way I see this working is the charcacter to be drawn in the middle of the canvas then a 2d birdseye view camera to be attached / linked to the characters movement. This camera would also need to be zoomed in to an extent that it only displays a 5 x 5 of the overall maze grid. Then as the charcater moves the camera moves with the character and displays the next section of the maze which has already been drawn. I have tried a few things and done some reasearch however I have never worked with canvas before and no idea really where to start and if this is even possible.</p> <p>So to sum up the main part of the question is whether their is a way to link a birdseye view camera to a character which is zoomed in and moves with the character image.</p> <p>Below is a snippet as to how the maze is currently drawn, using 2 sets of for loops checking against 2 sets of boolean arrays[][], which simply store the vertical and horixaonl lines to be drawn.</p> <pre><code>@Override protected void onDraw(Canvas canvas) { canvas.drawRect(0, 0, width, 100, background); RectBackground.set(0,0, FullScreenWidth, FullScreenWidth); canvas.drawBitmap(gameBackground, null, RectBackground, null); for(int i = 0; i < 5; i++) { for(int j = 0; j < 5; j++) { float x = j * totalCellWidth; float y = i * totalCellHeight; indexY = i + currentY; indexX = j + currentX; // Draw Verticle line (y axis) if (indexY < vLength && indexX < vLines[indexY].length && vLines[indexY][indexX]) { RectOuterBackground.set((int)x + (int)cellWidth, (int)y, (int)x + (int)cellWidth + 15, (int)y + (int)cellHeight + 15); canvas.drawBitmap(walls, null, RectOuterBackground, null); } // Draws Horizontal lines (x axis) if (indexY < hLength && indexX < hLines[indexY].length && hLines[indexY][indexX]) { RectOuterBackground.set((int)x, (int)y + (int)cellHeight,(int)x + (int)cellWidth + 15,(int)y + (int)cellHeight + 15); canvas.drawBitmap(walls, null, RectOuterBackground, null); } } } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload