Since we are creating a point and click game for consoles,
the controls will clearly be different because there is no mouse with which the
player can point and click. This leaves
us will a couple of different control scheme options. Most of the existing point and click games on
the XBLA marketplace replace the mouse controls with the thumbstick. That is the thumbstick controls a cursor on
screen that you use to interact with the game.
The control schemes work, but it feels sluggish and unintuitive, so
instead of using the standard control scheme we decided to create our own. In our game the player moves with the left
stick and can cycle between the interactable objects in the room by using the
right stick. This not only feels better,
but also gets rid of one of the major flaws in Point and Clicks, pixel hunting
(having to click every pixel on the screen hunting for the area you need to
click to complete the puzzle).
However, we also have added a problem to our game, how to
represent which object is selected. When
using a cursor this isn’t necessary, as whatever object your cursor is over is
the object you will interact with, but in our game there is no cursor. We will display the name of the currently
selected object, but it would be bad game design if we forced the player to
match the name with the graphic. We then
have 2 obvious solutions; either we change the graphic on screen to represent
which graphic is selected, or we place an indication next to the graphic (such
as an arrow, or actually drawing the name of the object above the graphic). I think that the best option would be to draw
the interaction text directly over the object, but the issue is that it becomes
difficult to distinguish when objects are extremely close. Therefore, from a game play standpoint the
best solution is to have a graphical change to represent the selected object
(we could also combine this with displaying the text over the object).
When dealing with graphics you have to take both prettiness and
user friendliness into account. Artists
work hard on their assets so we don’t simply want to apply an ugly effect that
covers their work, but at the same time we need to make a noticeable enough
change that the user’s attention will be drawn to the desired object. I eventually decided on applying an outline
to the graphic to represent the selected object. So if I take an object that looks like this (sorry I am a bad artist):
It would look like this when selected:
We are using XNA for our project, and unfortunately there is
no easy (read built in) way to add a border to the image. After some thinking I came up with a solution
where we use the shader to calculate the edges of the texture we want to
outline, and draw an outline in post processing. This is the solution I decided to go with (although
I admit that I didn’t do purely the outline to save a little bit of work, it is
just the prototype anyway). This can be
done in a few simple steps. First we
render the scene drawing on the selected object with the rest of the scene
being transparent. We then save this
rendering as a texture and pass it to our shader. The shader post process is called for each
pixel. Given our pixel we know that if
our alpha is none zero that we are part of the texture and hence not part of edge. Otherwise, we could be part of the edge. If we check all of our neighbor pixels and
one of them is part of the texture (has an alpha value greater than 0) we have
be part of the edge (either the outer or an inner edge). If we change our color to be the desired edge
color we get a result that looks like this:
Ideally I would like to eliminate the inner edge, but the
result is acceptable, especially for a prototype. Overall, I am happy with the implementation because it works for any image, and I can change the color and the thickness of the outline at any point.
No comments:
Post a Comment