At this point we have a mental model for layers now: how to manipulate them, how they nest, and how they relate to each other inside the WorldMap. What we don’t have yet is anything to look at.
I’m feeling empty inside
When we think about what kind of materials we have, we need to think about how people build maps, and what are the things they want to accomplish, and also how our textures and materials relate to those goals.
There’s no school like the old school
Maps have gone through a lot of different versions. There are 3D mapping engines built on Unity that allow you to create valleys and mountains and have real time water effects and all this stuff. And that’s great. But you’re really limited to realism as the visual language, and you’re tied to whatever assets the developers have put in there, and it’s very hard to create 3D assets compared to 2D assets.
And I think at this point all of us are very familiar with what 2D worlds look like, because we’ve been playing video games for 40 plus years. And although the graphic quality has gotten better, a lot of the terminology that we use for mapping comes from video games.
So if you grew up on games like Zelda and Final Fantasy, you’ve already seen a lot of this. Those worlds are built from really two things. One is a tile set, which is a repeating sheet of grass, water, wall squares, stamped over and over again to make the ground. That’s how you see a lake. That’s how you see grassland. And then you have the sprites, which are the things that stand on top of it. Your heroes, your chest, an angry chicken, that kind of stuff.
And this idea of a repeating tile set and sprites is the language and the system that we use in battle maps as well. It’s why we’re able to have super high fidelity through modern technology, but also tie it back to these simple systems that allow a lot of flexibility.
Really at the end of the day, with all the effects and the lighting and everything we have, a battle map is ground and things on the ground.
Our assets, hanging out
So, in our case, we’re looking at a couple of ways to use materials and assets in the mapping. Assets for us come in four flavors:
| Flavor | What it is | |
|---|---|---|
 |
Objects |
A solid thing in the world, like a barrel or a tree. |
 |
Textures |
Large, seamless images that we generally use for terrain or painting. |
 |
Tiles |
Like textures, but instead of being seamless, are 256px squares that can be put together in any order to create randomized designs. Think of cobblestones. |
 |
Strokes |
What we use for borders. They seamlessly repeat on the horizontal axis, are applied along the Path of objects, and are used for the edges of water, paths, and walls. |
Objects are the most obvious thing here. They’re trees, barrels, rocks, tables, the things that populate our map. And these are handled pretty well in PixiJS. There’s something called a Sprite object, and that’s how you handle them, really super straightforward.
But it’s really the other three where it starts to get interesting, because they’re all kind of variations on the same thing.
See you on the flip side.
Taggedmaterialsassetstilessprites