234 14.2DMagic
Interpolation
We’re not done with colored UIs yet. A white UI and colored vertices give us
another advantage, dynamic interpolation. Initialization time isn’t the only time
we alter color. Game-state changes we want to communicate should also affect
color. For example, if we have a button we want the player to press, we can make
it pulse back and forth between two colors (and opacities). Interpolating between
two color values using a parameter t in the range
0,1
is easy using a simple ex-
pression such as the following:
RGBAtarget = RGBAstart + (RGBAend – RGBAstart) * t;
DayandNight
A good use of vertex coloring in a 2D game is to simulate day and night. While
dynamic shadows are very effective in providing time indication, they are tricky
to get right. Tinting, on the other hand, is a simple and effective way to add day
and night effects, and it provides players with a feeling of time passage without
much headache for the programmer. At most, it’s a matter of tinkering with color
values until design and art come to an agreement on what looks good.
14.4Texture(UV)Coordinates
Texture coordinates [Dietrich 2000] are the location in a texture that a vertex us-
es when rendering. Conceptually similar to using
,
x
y
coordinates on the
screen, textures use the coordinates
,uv
(often called UVs) and range over a
normalized square
0,0
to
1,1
when rendering a complete texture to a quad. We
aren’t limited to this narrow range, however. If we use a texture address mode
such as “wrap,” we have the ability to repeat a texture as we extend beyond the
range
0,1
.
UIFrames
Using the wrap texture address mode is particularly useful when building reusa-
ble UI components. Consider UI objects such as window frames where sizes may
be unknown or where dynamic scaling is desirable. If we want to build a frame
that supports many sizes, we would construct art for each corner and then create
tileable sections for the top middle, bottom middle, left middle, and right middle.
In Figure 14.3, we demonstrate how we can render complete corner images hav-
ing
,uv
values from
0,0
to
1,1
, but then repeat thin slices from our middle
14.4Texture(UV)Coordinates 235
Figure 14.3. Frame where middle area of the top, bottom, left, and right are repeatable.
sections to create a dynamically sized box. We repeat the middle section by in-
creasing its u or v value depending on its direction. For example, if the middle
section of a frame should be 15 pixels in x, and the art is only 10 pixels wide,
then a u value of 1.5 and a texture-addressing mode of wrap would repeat half of
the texture.
TextureScrolling
While most motion is done using the positions of vertices, UVs have their role,
especially with tileable textures. Given a repeatable (tileable) texture such as wa-
ter or sky and slowly adding to its texture coordinates, known as texture scroll-
ing, we create the appearance of a flowing river or clouds moving across a sky.
This is particularly effective when done at different speeds to indicate depth,
such as water scrolling slowly in the distance while a river close to the player’s
perceived location appears to scroll faster; this effect is known as parallax scroll-
ing [Balkan et al. 2003].
TextureSheets
Why waste textures space? Some graphics APIs require textures to be a power of
two, and if not, then it’s often better for performance reasons anyway, so what if
we have textures that don’t fit nicely into a power-of-two size? By building in a
simple addressing system, we put multiple objects in one texture (known as a
texture sheet) and store their coordinates in an atlas (such as an XML file). In
Figure 14.4, we show such a texture sheet from the mobile phone application
atPeace. The texture sheet is divided into many
3
232
-pixel blocks, with each
u: 0–1
v: 0–1
u: 0–1
v: 0–1
u: 0–9.8
v: 0–1
middle repeated
236
F
i
1
4
ig
ure 14.4. Te
x
individu
When t
h
ground
i
and con
s
and wh
a
Hav
i
simple t
online t
o
[Ivanov
Eno
u
make so
m
4
.5What
As in li
f
credible
they are
and for
m
structur
e
nipulate
x
ture sheet of
3
al image’s s
t
h
e final imag
e
i
s transparen
t
s
ult our textu
t its texture c
i
ng blocks o
f
o understan
d
o
help with
2006].
u
gh of these
m
e magic.
aMesh!
f
e, building
b
and comple
x
powerful bu
i
m
wonderful
e
is a mesh.
S
many areas
o
3
232
p
ixel b
l
t
arting block
,
e
is made, th
e
t
. Anytime a
n
r
e atlas. The
r
oordinates ar
f
32 32 pixe
l
d
and use. L
u
generating t
e
basic prope
r
b
locks can
be
x
. While ver
t
i
lding blocks
tapestries of
S
een often in
o
f a texture,
r
<
Textur
e
<
Entr
y
<
B
l
<
B
l
<
/Ent
r
<
Entr
y
<
B
l
<
B
l
<
/Ent
r
...
<
/Textu
r
l
ocks and an
X
,
width, and
e
backgroun
d
n
image in th
r
e we find in
e.
l
s does waste
u
ckily, there
e
xture sheet
s
r
ties! It is ti
m
e
combined i
n
t
ices aren’t
e
for graphics
interesting
a
3D games, a
r
esulting in b
r
e
Entries>
y
id="mm
_
shee
p
B
loc
k
StartXY
x
B
locksWH x="1"
r
y>
y
id="mm
_
shee
p
B
lockStartXY
x
B
locksWH x="2"
r
y>
r
eEntries>
X
ML database
u
height store
d
d
blocks are
h
h
e texture is
n
which textu
r
some textur
e
are numero
u
s
and their
c
m
e to put ev
e
nto systems
t
e
xactly atom
s
programmi
n
a
nd powerful
mesh allow
s
r
eathtaking e
phead" tex="
m
x
="13" y="10"/
y="1"/>
pbody" tex="
m
x
="11" y="9"/
>
y="2"/>
u
sed to locate
o
d
in the text
u
h
idden, and t
h
n
eeded, we u
s
r
e an image i
s
e
space, but t
h
u
s resources
a
c
orrespondin
g
e
rything tog
e
that become
s
or strands
o
n
g. They link
structures.
O
s
programme
r
ffects that fa
r
14.2DMag
m
1.png">
>
m
1.png">
>
o
bjects.
u
re atlas.
h
e back-
s
e an ID
s
located
h
e size is
a
vailable
g
atlases
e
ther and
both in-
o
f DNA,
together
O
ne such
r
s to ma-
r
surpass
ic
14.6MeshArchit
e
Figure 14.5.
(right).
wha
t
thro
u
que
n
T
Eac
h
mes
h
geth
syn
c
ripp
l
S
ly?
H
grai
n
the
w
cati
o
14.6M
e
Acc
o
sou
r
and
timi
z
dati
o
and
to o
u
e
cture
Image with f
o
t
can be don
e
u
gh the diss
e
n
t pa
r
titionin
g
T
he partition
h
quad is res
p
h
to manage
er, we can
n
c
hronized sys
l
es, trampoli
n
S
o why not j
H
aving a m
e
n
control ov
e
w
ater would
b
o
n, a mesh m
a
e
shArchi
t
o
mpanying t
h
ce code. We
ready to be
d
z
ation was n
o
o
ns for perfo
r
extensibility
u
r mesh that
g
o
ur vertices (l
e
e
when simpl
y
e
ction of a si
m
g
into a mesh
ing process
c
p
onsible for
r
the quads in
t
n
ow apply a
tem of effec
t
n
e physics, a
n
u
st build sep
e
sh gives us
t
e
r our textur
e
b
e difficult
w
a
kes seeming
t
ecture
h
is chapter i
s
provide a f
u
d
ropped into
a
o
t the primar
y
r
mance are i
n
were our fo
c
g
o well beyo
n
e
ft), and imag
e
y
rende
r
ing
a
m
ple image,
c
of many ver
t
c
reates a seri
e
r
endering a p
o
t
elligently.
W
global intell
i
t
s, such as fl
i
n
d water illus
i
arate texture
t
he ability to
e
. Creating t
h
w
ithout a me
s
ly impossibl
e
s
a folder on
u
lly impleme
n
a
new code b
y
goal of this
n
cluded later
c
us. With mi
n
n
d the severa
l
e
with many
v
a
s a quad. T
h
c
omposed o
f
t
ices, as sho
w
e
s of related
o
rtion of the
W
ith the mes
h
i
gence acros
s
i
ckering skie
i
ons.
objects and
l
o
add structu
r
h
e illusion o
f
s
h. If design
e
e
tasks like w
a
the website
f
n
ted C++ m
e
ase and used
implementa
t
in this chapt
e
n
imal effort,
n
l
examples w
e
v
ertices forme
d
h
ese structure
s
f
four vertice
s
w
n in Figure 1
quads know
n
texture, but
i
h
holding th
e
s
the image
t
s, flashlight
e
l
et them act
i
r
e, intelligen
c
f
a treasu
r
e c
h
e
d for easy v
e
ate
r
easy to i
m
f
ull of goodi
e
e
sh that is cr
with minim
a
t
ion, althoug
h
er
. Ease of u
n
n
ew effects
c
e
provide he
r
d
into a mesh
s
are formed
s
, and subse-
4.5.
n
as a mesh.
it
’s up to the
e
se quads to-
t
o produce a
e
ffects, river
i
ndependent-
c
e, and fine-
h
est beneath
e
rtex modifi-
m
plement.
e
s, including
oss-platform
a
l effort. Op-
h
recommen-
n
derstanding
c
an be added
r
e.
237
238 14.2DMagic
The mesh architecture consists of three important items: vertex, mesh, and
modifiers. First, we use a vertex class to hold each vertex’s position, color, opaci-
ty, and texture coordinates. Next, we store all our vertices inside a mesh class and
use the mesh class as a way to coordinate all the vertices, acting as a type of brain
for the overall image. Last, our modifiers do the dirty work and alter the mesh in
such a way that we conjure magic on the screen.
Mesh
The mesh is a class that contains a 2D array of vertex objects. Every place where
there is a line intersection in Figure 14.5, there exists a vertex. Using Cartesian
coordinates, a vertex can be quickly retrieved and modified. Our mesh design has
a base
Mesh class and a derived MeshUV class. In the base implementation, we do
not support texture coordinates. It’s useful for times when we want to use colored
lighting without a texture, as demonstrated in our double rainbow example later
in this chapter.
Space
There is a good argument to be made about whether a mesh should exist in
screen (or local) space or in world space. On the side of screen space, if a mesh
changes size or position, then we don’t need to recompute any of our vertices. On
the side of world space, everything with the mesh requires just a bit more work,
calculation, and CPU time on a frame-by-frame basis. That is to say, if we’re not
moving or scaling our mesh, then we’re wasting CPU time by going to and from
screen space. Our implementation assumes screen space; that is, the mesh con-
siders its top left corner to be
0,0
, and vertices see their
,
x
y
positions as per-
centage offsets into the mesh. Therefore, only if we change the number of mesh
points per row or column do we need to rebuild our mesh from scratch.
State
Another contention point in mesh design is whether to build vertices that contain
state. Having state means that a vertex has two sets of properties, original and
working. The original properties could be considered the normal, “resting” prop-
erties that would make the texture appear as if it had no mesh. The working prop-
erties are copies of the originals that have been modified by an effect and, thus,
have altered the state of the vertex. The vertex then fights its way back towards
its original properties by using mesh-defined physics and other parameters to al-
ter its working set.
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.