Summer 2018 Update: Cards, Materials, and Textures

I created Chambergon Battle Logic (Classic Edition™) for my students back in 2014, then seriously upgraded it for the 2015 fall semester. If I remember correctly. It was far too much work to do while teaching and commuting to multiple campuses and I would prefer not to think about it.

This summer, I’ve finally had time to work on the remake using Unity. But it’s time to start gearing up for the new school year, so I wanted to record my progress. Maybe I’ll remember the process better this time.

Cards

Chambergon Battle Logic is a card game. Sort of. So, it’s got to have a card design in the remake. Here’s what I’ve got so far:

The new design, on the right, was done this summer. There’s not much too it (yet), so it didn’t take much time. I designed the model in Blender, and I used Gimp to create the texture, which I then applied in Unity as a “Normal map.”

I hadn’t heard of normal maps before this summer. But to talk about that, I need to talk about other things.

Materials

In both Unity and Blender, you can create “materials.”

You’d think a material would be the “stuff” out of which an object is made. Right? Good; you’re an Aristotelian.

But in Unity, Blender, and other design programs, the main job of a material is not to be what an object is made of. Rather, a material’s job seems to be to “hold” a texture. More specifically, a material applies a texture to an object, and tells the camera and lights how to interact with that texture.

Textures

A “texture,” furthermore, isn’t a texture. It’s an image. The patterns of color on an object are usually not built into it. Rather, 3D computer programmers have adopted a Lockean view of objects: objects have certain “primary qualities” like shape and size, but not “secondary” qualities like color.

To give an object a single color, you can just give it a single “material” and set the color of that material. If you want the object to have a pattern of colors, however, you either have to (a) structure the object in such a way that you can apply different materials to different portions, and give each material its own color — OR (b) you can just give the object a single material and add a texture to the material.

A Texture Example

A typical Chambergon looks like this:

Here is the texture for the left chamber of a Chambergon:

And here is the texture for the right chamber of a Chambergon:

“But those are different colors!” you say. I know. I messed that up. It’s just that the materials that are holding those two textures are both set to the same (greyish) color, so that fixes the discrepancy.

UV Maps

“But objects are 3D and images are 2D — so how does Unity know which part of the object’s surface to put which part of the image on?” you continue. The answer is UV maps.

The UV map tells the program which parts of the model should get which parts of the texture.

“But where do the UV maps come from?” you ask. Blender. You mark out the places where you want the model to be “unfolded” and Blender does the rest.

The red lines in the left image are the “seams” I told Blender to split the object along, and the unfolded UV map Blender produced is on the right.

Normals

Now, back to normal maps. 3D programs try to split curved surfaces into smaller flat planes.

Every flat plane, furthermore, has a “normal.” The normal of a plane is a line or arrow. That arrow points in a direction “perpendicular” to the plane. See the blue lines in the picture below.

The 3D program can then use these normals to decide how light should reflect off of the object. After all, the angle of incidence is equal to the angle of reflection, right?

Normal Maps

“But what about flat surfaces that look like they have ridges?” you ask, having recently played Super Mario Odyssey.

You see all that “crosshatching”? I really doubt there’s any “geometry” behind that. That is, I really doubt that the model being used for the ground has trillions of little tiny ridges built into it to catch the light.

Instead, I bet what’s going on there is a clever use of normal maps.

A normal map is just another image, but instead of interpreting the information in that image as the color of light to reflect, the program interprets the information as the angles at which to reflect the light. That is, the program interprets the pixels in the image as if they representing many different normals pointing in different directions.

Here, for example, is the normal map I used for the cloaks of the little characters in the new version of Chambergon Battle Logic.

I didn’t take that photo. That’s a cropped version of a photograph by Darren Nunis.

Now, here’s the texture I used for the characters in their “rainbow” form:

When you load one as the texture (“Albedo”) in the material for the cloak, and the other as the normal map in that same material . . .

. . . you get this look for the cloaks.

Back to Cards

So, for the Cards, I used no texture, but I did use a normal map.

Here’s the image I used for the normal map:

And here’s the UV map applied to it:

This ensures that the faces of the cards appear to be “textured” (in the normal sense of that word), but the borders of the card appear to be smooth.

Card Text

For the numbers, I’m using the Text Mesh Pro plugin for Unity (which is built into the program now), with the Rubik font.

I’m not sure what to do about the text boxes yet. The original version of the cards had text boxes where players could write the justifications for each card. (Each line in a logic proof has to specify which other lines it is derived from, and which rule was used in that derivation.) But I’ll work that out later.

To Be Continued . . .

There’s a ton more to cover, but that’s enough for now. Next up: updates to the Chambergons.