Britannia
The second project I pursued this semester was to create a
faithful adaptation of the board game Britannia by Fantasy Flight Games, in XNA. The project consisted of three milestones,
each three weeks long. In order to
faithfully adapt Britannia I needed to create a visual representation of the
board that could easily detect mouse clicks. To this end I worked towards
creating a color map of Britannia’s board. A color map is a copy of the image
you are using that divides the image into sections; each section being a
different color. Since each section of a color map is a separate color, it is
easy to tell what section was clicked by comparing the color at the position
clicked to a list of sections and their colors. The map is not displayed but
does cover the image it is a color map of. color maps are very useful for any game which uses 2d-esque surfaces
with selectable irregular sections.
Creating a color map is was an easy
but extended task. My first order of business was to scan the board and create
an image to display. Finding a scanner large enough to fit the entire board at
once proved impossible so I had to scan the board in sections. The scanner I
used resulted in about 6 sections. Once the sections were scanned I combined
them into a single image. I had expected
to display the resultant image and also to use it as the basis for the color
map, however XNA cannot handle an image with over 4000 pixels on a side. I
hadn’t realized it but the default settings for the scanner and Photoshop had
resulted in a combined image that was around 9000 pixels tall and 6000 pixels
wide. I had to split up the board back
into 4 individual parts because the scanned images for the bottom third of the
board were incomplete on their own. This resulted in the final display board.
The final step of creating a color map is to take a copy of the display board and replace each of its sections
with a color. Each color has to be
unique otherwise the map will not work correctly. Each color-section pair must also be recorded
so that the game can tell which section was clicked on. For my project I had to create 4 sub sections
of a single larger color map, additional sections did not increase the
complexity of creating the map but did take longer to do than a single map
would have. I used Photoshop for this process and I used layers to my advantage.
First I would select the section using the lasso tool and cut it to a new
layer, next I would color the section and finally I would turn off the
visibility of that layer until I was done with the color map. This process
allowed me to more quickly change the sections because each section was in a
lower layer than the previous section and any differences were decided by the
section with the highest layer.
The process of scanning the board
and creating the color map left me with a very large and detailed board of
Britannia which made playing the game very difficult. To resolve this issue I decided to allow the
player to zoom in and out from the board.
Scaling sprites in in XNA is a relatively simple process because you
have to determine what percentage to scale the sprite by, and then while
drawing the sprite include the scale in the Draw function call. The difficulties arose when the scale of the color map and the position of units on the board had to scale with the board
sprite. The scale of the color map was
simple since it was also being drawn, after setting the alpha to transparent.
Scaling the positions of the units was a problem that I did not manage to solve
by the end of the project.
Britannia was a very self-driven project,
and I learned about my work habits and how I work without an assignment driving
me. Three weeks doesn’t sound like a
long time for a milestone but I found that with so many other projects that
were not self-driven Britannia often went to the bottom of the priority heap
until the last week of a milestone. Long
milestones can be good if you are only working on one project but when you have
to balance multiple projects at the same time. It would have been better to
shorten my milestones so that the project remained in my mind more. Britannia was a large project at the start,
it was over scoped and I did not plan it out well enough. When I realized
exactly how large it was I froze a bit which made the problem worse. It is hard
not to get freaked out when you realize you’ve set far too ambitious goals for
yourself, but it’s important to press on in spite of that.
Fully finishing the color map took an entire milestone and
was ended up eating a larger amount of time than it should have. This problem happened because my tools for
making the map were in 3 separate locations and each was several minutes away
from each other. Keeping my essential tools
together would have made completing the color map much quicker and simpler. When
I discovered that my initial scans of the board had missed the bottom center
section I had to go home get the physical board and wait for the school library
to be open so that I could scan the board.
Despite all the difficulties I really enjoyed working on this
project and intend to continue working on it during the summer. Figuring out how to make and use a color map
was interesting and useful, before I would have struggled to make an interface
that was not at least a little boxy but now that I know how to make a color map
I can make selectable UI elements that are not squares or circles.
Screenshots:
Color Map:
No comments:
Post a Comment