next »

[io3 creations]

Holy Guacamoley I never even noticed that before! And I've seen it on big screen.
I guess we're doing something right then. Right? Right?!

Yep.  If that's how the BIG BOYS do it, then that's how it must be done!

Actually, I haven't noticed it either. Only saw it being mentioned in the comments. Probably, most people don't notice it either since the attention is guided toward the center of the screen.  Is that ho

Just noticed that Episode 3 came out a few days ago. 

[Juwdah]

@io3 Creations: EXACTLY, you know it!

Going to put my twitter thread on here, documented a bit better than 140-Character tweets can.
Not going super detailed, actually probably just going to do a rough write-up but well enough to put a foundation so it can eventually perhaps turn into a blog-post. Or able to throw on Gamedev reddit. (if they like these kind of things?)

I'm going to do this in a couple of parts just in-case people have questions inbetween.

So here goes!


The process of making Flotsam's Desalinator.



This is the end result, floating in the unity scene. (not buoyant)
Wait that's a lie! It's not the actual end-result yet as I'm probably going to scale the bike a bit, have some smoke coming out of the top pipe and -Hopefully- add deformation to the pipes that it looks like water is going through it.
But for now, let's act like it's the end result.



As with anything, we start out by concepting it (this one by @Wazeau). For us, researching shape and colors is so much faster using a 2D medium. We draw or ink ideas out (horizontal design) and eventually take the shape we like and flesh it out some more (vertical design). Then throw color on it so we don't have to tweak it too much in 3D.
Basic stuff, carrying on.



After this, we start the blockout. As I forgot to document this part I sketched up an accurate presentation on what this phase looks like.
Important about this part is:
-Using scaleref next to the building to decide it's size.
-360 no-scope rotating it so it looks good from all sides.
-If it has to fit into a cube or any other shape in-game, some tweaking and turning to get it right.
-Noticing what we may have missed in the concepts. (in this case, what it was leaning on in the back)



When satisfied with the blockout, we move on to the modelling!
Important:
-Scaleref again, actually even more than before. Actually just never lose the scaleref in any step.
-Lots of tweaking to make it look good from all sides, I try both flat and hard polygons to see what could break "illusion", where polygons would be too noticeable.
-Decide what to split, one texture does not fit all.
-See if any unique part can be replaced by models we already have
-See if any unique part can become a piece of flotsam too. In this case think about splitting the texture.

[Juwdah]

On second tought, doing this step by step will kinda ruin the read-through.
I'll post the rest in one go.



After the unwrap and before painting it we apply a paper texture on it.
This is a small step to make it easier for us to paint on, using the rough texture as a base.

It's a bit unconventional (and I guess oldksool?) as there are programs such as Substance painter who can base-coat it better.



We manually paint the lines on the texture, giving us full control of the style.
This takes forever and we're currently looking into ways of speeding this up some more through other software.



As much as possible and in-between steps we throw it into the engine/game to see what it already looks like. It's crucial at this step as this could show if we're overdetailing. Which is usually the case.

"Once bitten, twice shy"
Nope! Always too much detail. Maybe it's an artist thing? Maybe it's just us.



We handpaint the whole thing. Obviously using layers better than the .gif, but still an immense piece of work.
It's kind of like making a painting, but in 3D where you have to paint every side. Yikes.

Very gratifying near-end.



Some lines can't be drawn. (see: round objects)
We take an old-skool approach to this, as seen in games like World of warcraft and manually duplicate the mesh and flip the normals.
We're not using shaders as this would outline the whole Gameobject, or look funky when using the split piece as a seperate game object. This technique allows us to control it, have different thickness along the outline and make it vivacious.




We don't make new unique planks/logs/ropes or anything if we already have them in the game, so finishing-up of the base is done in unity.



The bike!
This is the same as the first steps.
It's a seperate piece as it'll be used in other buildings as well.



"Now how can I animate this guy in a quirky manner?"
The same question before making every animation.

Very important to zoom out here, as we have a top-down game and people will spend less time up-close.



And ofcourse, testing it out in-engine and in-game! Back and forth every step.



We're not done!
The building needs to be animated as well, mainly in it's "ON" state.
In this case, when it's desalinating.

We do this in Unity or blender, depending on what's easiest.
This one was done in Unity as I have quick access to the emission modules of the particles and the animation is purely rot/loc/scale shakes.

Curves are your friend. Show them some love.



Nothing like particles to spicen up the animation.
Can't really go into detail here as every particle is different.



And, BAM!
The Screenshotsaturday with the (almost) finished desalinator.
Gif artifacting for life.


Alright, thanks for reading the rough write-up! I'll probably come back now and again to edit some parts of it/expand it incase I'll make a blogpost of it. I'm glad I got it archived here for now.

Next time I might post the gifs on seperate occasions, seemed a bit of an overload throwing all of them together.

[Juwdah]

We're going to need bigger boats.

[io3 creations]

Yeah, painting parts individually is time consuming.  It looks like that highlights and shadows are also painted on the objects.  I would've imagined those being updated dynamically with some kind of shaders and perhaps with a few custom shadows or darker areas already painted on textures.  Not sure if that approach allows it, but for for some textures, uv offset or using repeating shapes like stickers/decals might might help.

Can't recall it being mentioned, but will there be evenings?  If yes, and you are using the current custom paint approach then those would need different textures as well.

[Sundrop]

Been making some footage to test out a simple teaser/trailer. We feel it's a bit too soon for one but want to "feel the waters".

So yeah, here's some ingame footage

Thiiiiiisss is messssmerisingggggg~

[Juwdah]

Thiiiiiisss is messssmerisingggggg~

 

Yeah, painting parts individually is time consuming.  It looks like that highlights and shadows are also painted on the objects.  I would've imagined those being updated dynamically with some kind of shaders and perhaps with a few custom shadows or darker areas already painted on textures.  Not sure if that approach allows it, but for for some textures, uv offset or using repeating shapes like stickers/decals might might help.

Can't recall it being mentioned, but will there be evenings?  If yes, and you are using the current custom paint approach then those would need different textures as well.

To get shaders to a well enough level to represent a true 2D-feel in textures, you'd need some ace tech artist team. It's always a bit "weird" IMO, even borderlands has many oddities. Their new tech demo was pretty sweet but that's hundreds and hundreds of hours of research of veterans. So we took this approach instead.

Decals etc help and will be used ofc.

For the evenings/night, lighting still has effect on it, with customizing values we can easily switch to night scenes and make it all look good. We tested this like.. 2 years ago (holy moly it's been long)
here:



Ofcourse the water, lighting, etc were really basic here and the textures have since improved tons, so "imagine" it being prettier than the test here.

[io3 creations]

Yeah, painting parts individually is time consuming.  It looks like that highlights and shadows are also painted on the objects.  I would've imagined those being updated dynamically with some kind of shaders and perhaps with a few custom shadows or darker areas already painted on textures.  Not sure if that approach allows it, but for for some textures, uv offset or using repeating shapes like stickers/decals might might help.

Can't recall it being mentioned, but will there be evenings?  If yes, and you are using the current custom paint approach then those would need different textures as well.

To get shaders to a well enough level to represent a true 2D-feel in textures, you'd need some ace tech artist team. It's always a bit "weird" IMO, even borderlands has many oddities. Their new tech demo was pretty sweet but that's hundreds and hundreds of hours of research of veterans. So we took this approach instead.

Decals etc help and will be used ofc.

To me, there are way to many "obvious" things that give away 3d generated visuals that try to be 2d. For example, as longs as arcs and curves will be broken up and "drawn" with multiple straight lines, the difference will be very obvious. 

So, I was mainly referring to having hand painted texture style and those maintaining visual consistency.  For example, if you hand paint highlights on abody part texture and that body part moves to a position where the highlight shouldn't be visible, then that could break the illusion. 


Are you referring to the recent Borderlands 3 tech demo?  That looked a lot more 3d to me than the previous games.  Similarly, when pixel visuals are actually created real time with 3d models and shaders.  While it's not impossible to create visuals that come close, in general, pixel art games need more than just "large pixels".  Often colors are more limited, animations aren't "super smooth" and there aren't metallic reflections or highly detailed light fx.  So, there seemed to be

For the evenings/night, lighting still has effect on it, with customizing values we can easily switch to night scenes and make it all look good. We tested this like.. 2 years ago (holy moly it's been long)
here:



Ofcourse the water, lighting, etc were really basic here and the textures have since improved tons, so "imagine" it being prettier than the test here.

That scene looks very good in terms of what I have in mind.

Oh, will there be a long transition between day and night or just a quick time jump? 

[Juwdah]

Yeah, painting parts individually is time consuming.  It looks like that highlights and shadows are also painted on the objects.  I would've imagined those being updated dynamically with some kind of shaders and perhaps with a few custom shadows or darker areas already painted on textures.  Not sure if that approach allows it, but for for some textures, uv offset or using repeating shapes like stickers/decals might might help.

Can't recall it being mentioned, but will there be evenings?  If yes, and you are using the current custom paint approach then those would need different textures as well.

To get shaders to a well enough level to represent a true 2D-feel in textures, you'd need some ace tech artist team. It's always a bit "weird" IMO, even borderlands has many oddities. Their new tech demo was pretty sweet but that's hundreds and hundreds of hours of research of veterans. So we took this approach instead.

Decals etc help and will be used ofc.

To me, there are way to many "obvious" things that give away 3d generated visuals that try to be 2d. For example, as longs as arcs and curves will be broken up and "drawn" with multiple straight lines, the difference will be very obvious. 

So, I was mainly referring to having hand painted texture style and those maintaining visual consistency.  For example, if you hand paint highlights on abody part texture and that body part moves to a position where the highlight shouldn't be visible, then that could break the illusion. 


Are you referring to the recent Borderlands 3 tech demo?  That looked a lot more 3d to me than the previous games.  Similarly, when pixel visuals are actually created real time with 3d models and shaders.  While it's not impossible to create visuals that come close, in general, pixel art games need more than just "large pixels".  Often colors are more limited, animations aren't "super smooth" and there aren't metallic reflections or highly detailed light fx.  So, there seemed to be

That scene looks very good in terms of what I have in mind.

Oh, will there be a long transition between day and night or just a quick time jump? 

Generating outlines and other shader tricks tend to be the "obvious" 3D generated 2D visuals. I tend to like how they look in a still image but really get annoyed when playing the game.

For visual consistency, we tend not to overdo highlights and shadows as these will be handled by the in-game lighting as well. Hence, no real illusion breaking should happen. (+ they're always going to be outside so the player can see them, no heavily changing light scenarios except the night.)
If it does, it takes a couple of texture sweeps to fix it, not really worried about this personally.

I was referring to the tech demo yes, how they did the crosshatching difference in distance is really ace work. They got it to a point where it's in the background instead of it being a nuisance for the gameplay. Being able to make tech like that in-house must be a nice boon.

If we keep the night/day cycle in there for the release version, it would be quick jumps from day - evening - night - morning.

[io3 creations]

Generating outlines and other shader tricks tend to be the "obvious" 3D generated 2D visuals. I tend to like how they look in a still image but really get annoyed when playing the game.

Which aspects in particular?

I was referring to the tech demo yes, how they did the crosshatching difference in distance is really ace work. They got it to a point where it's in the background instead of it being a nuisance for the gameplay. Being able to make tech like that in-house must be a nice boon.

Those cross hatch shadows are really nice.  That's also on my "To Do" list for simiar 2d 'toon visuals.

If we keep the night/day cycle in there for the release version, it would be quick jumps from day - evening - night - morning.

Quick jumps probably won't be an issue day cycle.  If implemented, I'm assuming the Sun and Moon would move across the sky though.

Perhaps more of a personal curiosity for my future projects, but I'm wondering what would be the "minimum" to create a smooth day cycle illusion for 2d visuals.  Other than what was mentioned, would an extra shader that adjust color hue values be "enough"?

[wazeau]

A little screenshot update with nothing new in it! Amazing

[Juwdah]

Sketches of the inhabitants of Flotsam's world. (not only the player's town)
Stuff like traders, ship crews, etc (not features)

They very much defined how the town's drifters would look like in the process 

[Juwdah]

Refreshing some animations, I might post a couple more in the coming weeks!

GOBLIN DRUMS MYEH HEHEHE 
Wait, picking up stuff, picking up stuff.

[2ndStudio]

Wow, the bicycle making of, amazing, and soo cool. I can't believe you are using double geometri for the outline? :O Is that to have more control?

The game looks amazing, I been following for a while and it just keep getting better. I wish you all the best luck.

[Juwdah]

Wow, the bicycle making of, amazing, and soo cool. I can't believe you are using double geometri for the outline? :O Is that to have more control?

The game looks amazing, I been following for a while and it just keep getting better. I wish you all the best luck.

Thanks!
We only double it for certain pieces (see: round objects most likely). Everything else does not have an outline that way because it's paintable.

If we'd do it with a shader, we couldn't control outline thickness as much. We want it to not feel "off" next to the handdrawn outlines, and to do that we need varying thickness. Ofcourse some shader wizards might be able to make a nice noise-outline shader but so far we haven't come across something computer generated that offered anything close than what we do ourselves. Which is why we handle it this way (we want to get as close to a handdrawn feel as possible and computergenerated outlines easily break it) Heck, these already do it on occasion.

Besides, an outline shader basically does the same.

[io3 creations]

At first I wondered if the waving claw-hand guy in the top right corner is a pirate ... then I noticed what (my)    did!   


It's gotta be the curse of this guy:   

[wazeau]

Oh hi, I didn't see you there! Been too busy adding furniture to Flotsam 
These were made by our intern Bea actually 
Still might add a shader that allows for some color variations still. There's lot of the same fridges and beds as you can see. Damn mass production these days.

[Juwdah]

At first I wondered if the waving claw-hand guy in the top right corner is a pirate ... then I noticed what (my)    did!   


It's gotta be the curse of this guy:   

 
CHESTHAIR BABY HAS BEEN COMPROMISED
 

ABORT


Talking about weird stuff,..
Here's a game idea from the scrapbook.

[io3 creations]

It's gotta be the curse of this guy:   

 
CHESTHAIR BABY HAS BEEN COMPROMISED
 

ABORT

No worries.  Secret agents are on their way!   

Talking about weird stuff,..
Here's a game idea from the scrapbook.

I see what you did there.                  (Did you? )

[Juwdah]

Talking about weird stuff,..
Here's a game idea from the scrapbook.

I see what you did there.                  (Did you? )

I was too busy knitting my brown sweater.