5 ms·
I found drawing the board unexpectedly tricky. Try again, but use an image for each hex rather than drawing its outline using lines. I'll wager you'll be pleas
by sillysaurus 13y ago
I found drawing the board unexpectedly tricky.
Try again, but use an image for each hex rather than drawing its outline using lines. I'll wager you'll be pleased with the result.
- graue 13y agoAs in a .png? Certainly simpler, but I wanted to be able to change the hex cells' radius with one line of code. In fact, the way it is now, you can change one constant in the code to make the board size anything you like — 10×10, 13×13, 19×19, whatever, and it adjusts the hex cells' size to fit in the same page layout. This'll be exposed in the UI if I ever get back to the project.
- sillysaurus 13y agoWell, you'll want to think one level of abstraction higher than that. Imagine a camera. When you push a camera forward towards a wall, the wall stays the same size. It just fills more of your view. You can code the equivalent of that pretty simply. So even if a png is 13x13, it might be drawn as 30x30 if the camera zooms in, or as 5x5 if the camera zooms out. It's actually much simpler (and more visually consistent) to do it that way. It's probably more difficult to learn, but it's well worth the time spent learning it.
- graue 13y agoA 13×13 .png of line art stretched to 30×30 or 5×5 is gonna look pretty ugly[1]. Am I misinterpreting you? [1] I tried it: http://toxicsli.me/file/hexes.png http://toxicsli.me/file/hexes.png Leftmost is original, others resized.
- jonmrodriguez 13y agoUse vector image files
- mpyne 13y agoThat just brings him back to the original problem though. His code was doing the equivalent of rendering a vector image of a hexagon already.
- sillysaurus 13y agoWell, two things to consider: (a) that particular example looks fine to me on a MacBook Pro in Chrome, and (b) you've discovered the motivation for mipmapping.