webaverse / app

Web metaverse client
https://app.webaverse.com
MIT License
339 stars 213 forks source link

Art: Building/mining materials #1354

Open madjin opened 3 years ago

madjin commented 3 years ago

Inspired by the crystals and rocks during an iteration of the modular forest issue (https://github.com/webaverse/app/issues/1313) and thinking, what if the rocks are mineable since we can have a pickaxe?

image

To differentiate different types of mining material, here's an example of iron ore and gold ore in Craftopia. The colors + chunks of minerals speckled on the rocks make them quite visible from a distance.

image

Can also have the elemental veins in the rocks as part of a seamless tileable texture, might be less obvious from a distance though.

image

image

image

madjin commented 3 years ago

Tillable textures:

image

avaer commented 3 years ago

I'm not sure if this is in the lore docs yet but there are different types of ores. These can be color or material coded.

However one of the goals is to be able to easily draw these and identify them (even with just line art), which is why I think we should go for a cartoony take, with some sort of distinct repeated pattern.

Consider the devil fruits from one piece, where the swirls take different shapes and colors but clearly identify the type of object it is. I think we should have a similar situation for the ores.

ores devil

Vianvolaeus commented 3 years ago

I think something combining the two ideas is a good idea for a large open world - have a large rocky patch akin to craftopia, but make the actual ore more visually distinguished. Means as a player, you can recognise a spot to mine resources from afar, but it might not be immediately obvious what it is until you're closer.

Also, ores themselves are not mentioned directly in the lore docs.

avaer commented 3 years ago

Yeah gotta lore the ores.

avaer commented 3 years ago

Added lore for ore to the lore docs.

madjin commented 3 years ago

I was curious how these textures would look from a distance

Tillable textures:

image

image

madjin commented 3 years ago

While looking at the devil fruits, the glass pieces seen here made me think this is achievable by only using a custom normal map + material.

image

avaer commented 3 years ago

https://github.com/webaverse/app/issues/1354#issuecomment-877718425

The style looks good, if we can get some deeper lighting in there (like normal maps) and come up with a good pattern.

madjin commented 3 years ago

DreamCo did a base design pass at this, can be tweaked later. I like the subtle gradient.
image

madjin commented 3 years ago

Materials

1. Stone

Color: blue Repesents: cold

2. Metal

Color: red Represents: heat

3. Sugar

Color: white Repesents: life

4. Poison

Color: black Represents: death

avaer commented 3 years ago

I’m down for changing these types btw, the goal is just to make it interesting and easy to do art for them — color coding, symbols, thematic references to the current IRL metas like other games.

madjin commented 3 years ago

From top down: Poison / Stone / Metal / Sugar

image

Added to repo: https://github.com/webaverse/assets/blob/master/mining_ores.blend

avaer commented 3 years ago

I like the idea of a splat as a basis, but these models seem hard to draw, especially if you want to distinguish types by line art alone.

It does look pretty in game, but that's only part of it.

image

For gameplay reasons I think these "resources" should be quite different from each other. They don't have to be ores embedded in a rock, they just need to look breakable and distinct.

If this were an RTS, a bunch of differently colored rocks would make for a poor UI to read. I think Fortnite does a great job to make the materials "design" distinct: image

I mentioned the fruits because I think it's important for something to read as belonging to the class of "resources", but also with variation that makes it very easy to tell what kind of resource.

image

I would restart this and come up with some UI shapes and patterns that can exemplify resources. Both Pinterest and Shadertoy have plenty of ingredients.

avaer commented 3 years ago

This is a completely unrelated image but it shows some interesting repeatable patterns that can identify types of materials.

mask

madjin commented 3 years ago

How these things look in your inventory is very different than how they look into the world

image

image

For a newbie it might not even be obvious what's able to be farmed until they actually swing their pickaxe and realize most of the world is destructible and able to be mined for resources. I think that we can stylize things in inventory previews to great effect, but the appearance in the world can be made more subtle.

avaer commented 3 years ago

Yeah, the original concept was a lot closer to FN, where anything could drop resources. And honestly that might be the best approach since we can totally do it. But it would still require material drops to have a design.

I renamed the issue away from ores to materials.

avaer commented 3 years ago

This is for another game, but I think it has a good set of distinct "materials" to work with: https://www.artstation.com/artwork/rven5

avaer commented 3 years ago

Just some ideas but if e.g. "water" was the "blue" material (which it can be, the mechanics are very general right now): image

"Sugar": image

"Poison": image

"Stone": image

madjin commented 3 years ago

Something I noticed with Fortnite mats is that they have a subtle billboarded animation playing with them.

Also these game dev icons might be good inspiration for models / thumbnail previews

image https://www.deviantart.com/lalanice/art/MiningSet-ore-stone-metal-766968191 https://www.pinterest.com/pin/599612137866140783/

madjin commented 3 years ago

I learned how to make rocks in blender while testing various textures.

image

This could be useful for sugar: https://ambientcg.com/list?category=&date=&createdUsing=&basedOn=&q=candy&method=&type=&sort=Popular

Perhaps the line art inspired by devil fruit could be tileable transparent pngs?

Found some tileable designs like these swirls and tried them in blender to get some neat effects image

image

Can get some really interesting effects this way..

need concept art for wood, sugar, metal, stone that are the pickupable objects in-world

avaer commented 3 years ago

Awesome, that is exactly the kind of thing I meant for semiotics in the material texture.

need concept art for wood, sugar, metal, stone that are the pickupable objects in-world

I agree. The entire set of materials hasn’t been deeply explored yet, it need some more AI and Pinterest passes.

madjin commented 3 years ago

found images black n white patterns can be used for inspiration https://imgur.com/a/SsNU2nV image It's kinda hard to find good sources, maybe better to make them from scratch.

Took some pics of materials in craftopia Craftopia_fJ1LuHKFSZ Craftopia_JrWiEiKjph Craftopia_5yt4IuLiUY

madjin commented 3 years ago

Here's a very exaggerated closeup in FN. In the game there's a subtle looping billboarded sprite that makes loot stand out. Sprite colors vary depending on rarity.

image

image

avaer commented 3 years ago

This kind of effect is what I was going for with the items exploding out from the chest, though with more borderlands influence.

ABEA6BAA-FFB4-483C-87C8-FF157D8078E8

madjin commented 2 years ago

There was an idea that came together to use sprites for the pickupable objects, this way it can also be useful in Discord also. Avaer has a program that can generate 3D versions of 16 or 32 pixel resolution images. Minecraft is a good reference of what they can look like in-world:

image

Licensing on emojis is weird, and most of the stuff on https://openmoji.org/ isn't all that great. We can use https://emojipedia.org/ as inspiration to create our own.

madjin commented 2 years ago

Task

Create small resolution sprites for each material.

Wood

https://emojipedia.org/wood/

3 logs stacked is the most popular design standard, should probably use that.

image

Stone

https://emojipedia.org/rock/ https://github.com/webaverse/assets/blob/master/mining_ores.blend

The mining ores blend file can provide some inspiration for this material

Screenshot at 2021-07-22 12-15-14

Steel

FN honestly has the best looking steel icon here. Instead of confusing users, we should follow some kind of design standard and have a spin on the steel material similar to how different chat platforms have variations on emoji designs.

image

Sugar

When you search for "sugar icon" the top results involve sugar cubes. It is the most iconic shape of sugar besides a labeled bag.

Idea: Sugar cubes (have a cube + texture)

image

image

Idea: Candy (wrapped sweet)

image

300+ candy sprites: https://opengameart.org/content/super-candy-set-m484-games image

Poison

Ideas: poison mushroom, microbe, skull/crossbones, silk worm, silk spider, black/purple/green, poison frog, fang

https://emojipedia.org/microbe/

image