
Chinese: 
>>Nikita：嗨 大家好
在大屏幕上看到自己的游戏
真是很酷的体验
我叫Nikita Danshin
是EggNut团队的联合创始人
开发者兼作曲人
我们工作室有12个人
分散在五个不同国家
共同开发我们的首款游戏《Backbone》
这是一款黑色反乌托邦侦探冒险游戏
主角是一个浣熊侦探
背景是加拿大卑诗省的温哥华
如你所见 它拥有极具沉浸感的高质量像素美术
同时融合了像素美术中
一些不太常用的图形技术
例如动态光照、PBR材质
法线贴图、贴花 全部都用虚幻引擎4构建

English: 
>>Nikita: Hi everyone.
That's a pretty cool experience
to see your game
on his big screen like that.
My name is Nikita.
Danshin.
I am, well the thing said
a co-founder,
developer, and a composer
on the team of EggNut.
We are 12 people
in the studio
based across
five different countries
working remotely on
our first title, Backbone.
So, this is a noir
role-playing adventure
about a raccoon
detective in dystopian
Vancouver, BC, Canada.
It's an immersive mix
of high-quality pixel art
as you may see
and graphic tech
commonly not used
with pixel art,
like dynamic lighting,
PBR materials,
normal maps, decals, and all
is built in Unreal Engine 4.

English: 
So, this talk is presented
by me
and Radu Girjoaba
our tech artist.
It was prepped with the
help of Toma Klepinina,
our lead environment
artist.
She was supposed to talk
instead of me,
but I'm covering for her
as she was not able
to present here today.
So, this talk consists
of two parts,
one where we discuss
our art techniques
and one where we look at them
deeper from tech standpoint.
So, in this first part,
let's talk about
lighting in general
and how we make 2D art
with 3D environment.
Lighting is arguably the most
important aspect of art.
In the dawn of digital era,
artists used to draw lighting
straight on the Textures
or sprites
as there was no engines
capable of calculating
the realistic behavior of light.
As an example of that will have
old school sprite games

Chinese: 
今天的主讲人分别是我
以及我们的技术美术Radu Girjoaba
我们的场景主美Toma Klepinina
也为本次演讲提供了帮助
本该她来演讲
但因为她今天不能到场
所以由我为她代言
本次演讲包含两个部分
首先我们会讨论一些美术技巧
然后我们会深入探讨一些技术层面
好的 在第一部分中
让我们来聊聊光照
以及如何在3D场景中实现2D美术
光照可以说是美术中最重要的方面
在数字化美术诞生之初时 美术师们常常
直接在纹理或精灵贴图上绘制光照
因为当时没有引擎
能够计算光的真实行为
例如 这里有一些老式的2D游戏

Chinese: 
例如《魔法门之英雄无敌》、《魔法门》系列
肯定有人玩过 然后是《恶魔城》和《暴力辛迪加》
随着技术的发展以及硬件处理能力的提升
新的实时光照功能
逐渐显露 例如动态光照
阴影、法线贴图 光照变得更加真实
并且开始采用基于物理的属性
这里展示了《黑暗之刃》的动态阴影
《寂静岭2》、《神偷》和《毁灭战士3》
随着时间的推移 新的光照技术
使得场景比以往更加逼真
例如《孤岛危机1》的环境光遮蔽技术
《极度恐慌》的光线步进体积光照
《神秘海域4》的全局光照
反射阴影贴图
以及新作《控制》的光线追踪功能

English: 
like Heroes of Might and Magic,
Might and Magic,
somebody definitely likes that,
Castlevania, and Syndicate.
With evolving technologies
and higher processing power,
new real-time
lighting capabilities
were developed,
such as dynamic lights,
shadows, normal maps.
Light became more realistic,
taking on properties
from the actual laws of physics.
These examples are from Blade of
Darkness with dynamic shadows.
Silent Hill 2, I believe,
Thief, and Doom 3.
As time progressed further,
the new lighting tech
raised the fidelity
higher than ever.
For example, Crysis 1, using
screen space ambient occlusion,
FEAR, using ray marched
volumetric lighting,
Uncharted 4,
with reflective shadow maps
for global illumination,
and recently released Control,
with ray tracing.

English: 
However, old techniques
are still valid today,
even with an abundance
of new tools,
artists choose to create
lighted Textures;
some to follow
nostalgic aesthetics,
some because of technical
limitations of their engines,
and some just think
it looks great.
These examples are
from Stardew Valley,
Moonlighter, Guilty Gear,
and Hyperlight Drifter.
You might know about those,
so we think that pixel
art aesthetics are great,
but they could use
a little refreshment.
So, for our first title,
Backbone,
we combined pixel art
with modern lighting techniques.
So, figuring out an art style
for your game
might take some time
and a lot of experimentation.
For Backbone, we gradually
came up with a pipeline
that facilitates
all our stylistic needs
and provides a transparent
and effective framework
for each frame the player
will see in the final game.

Chinese: 
不过 传统技术在今天仍然很流行
即便新的工具层出不穷
有些美术师仍然选择创建发光纹理
有些则喜欢遵循老派美学
有些则是纯粹出于引擎技术的限制
有些人只是觉得看起来很棒
这里有些示例 《星露谷物语》
《夜勤人》、《罪恶装备》和《终极闪光流浪者》
你们可能玩过这些游戏
所以 我们觉得像素美学非常棒
只不过需要与时俱进一些
因此 在我们的首款游戏《Backbone》之中
我们融合了像素美术与最新的光照技术
一般来说 为游戏确定美术风格
需要大量时间和尝试
在开发《Backbone》时
我们逐步探索出了一种流程
它帮助我们解决了所有的风格需求
并提供了一种透明有效的框架
以便制作玩家最终在游戏中看到的每一帧画面

English: 
So I'm going to go
through this pipeline
using one of the locations
from the game as a reference.
So, the first one, Sketch.
Sketch, our main goal here
is to plan out the location,
light sources, and their colors.
This is the most crucial step
that dictates the rest
of the work on that scene.
Then we draw pixel art Assets
with that lighting in mind.
We position them on a scene
according to the sketch.
As you see everything
is located on the 3D plane.
We use the characters
for size reference
to make sure
that everything looks fine.
In terms of positioning,
there are actually
no set rules here at all.
We don't use
any kind of grid system,
which just do
whatever looks good.
Then we place light sources,
play with reflective surfaces
like that mirror over there,
set up coloring of the lights,

Chinese: 
好的 接着就让我介绍下这个流程
让我以游戏场景为例
首先是草图阶段
草图阶段的主要任务是构思位置
光源和颜色 这是最关键的一步
决定了这个场景接下来的工作方向
然后 我们会在既定光照下绘制像素美术资源
我们会根据草图的位置放置场景对象
可以看到 所有物件都位于3D平面上
我们用角色作为大小参考
确保所有对象都大小正确
就摆放位置而言
实际上并没有固定的规则
我们没有使用任何网格系统
完全就是按照感觉来的
然后我们会放置光源
根据镜面反射效果进行调整
设置光源的颜色

Chinese: 
散射以及许多其它属性
稍后我会介绍它们 至于墙壁和天花板
我们会使用带有自定义法线和粗糙贴图的材质
它们会对光源做出反应 能够丰富画面的质感
这就是最终的效果
这里还有一些例子
来自游戏中的同一关卡
可以看到 在草图中我们添加了光照效果
光线来自顶部的四盏灯泡
然后我们会根据草图放置资源 将它们放到场景中
然后设置光照
设置自定义材质 例如
设置地板的材质
然后这就是场景最终的效果
在《Backbone》中
我们直接在贴图上绘制光照和阴影
根据我们的经验 这有助于表现物体的颜色
形状和形态

English: 
scattering and many
other properties
that we'll just dive into later.
For floors, walls, and ceilings,
we use materials with custom
normal and roughness maps
that react to light sources
and add more depth to the image.
And that will be
the final result.
Here are a couple
of more examples
from that level in the game.
As you see on the sketch,
we set up the lighting,
make sure that it comes from the
top, from those four dots.
Then we sketch those Assets,
we position them on the scene,
set up the lighting,
set up the custom materials
for example,
for those floors
at the bottom.
And that's how the scene
looks like at the final stage.
So, for Backbone, we draw lights
and shadows directly on sprites.
In our experience it helps
to convey the color,
shape, and form of an object.

Chinese: 
记住 视觉艺术的精髓就是障眼法
让观众的眼睛产生错觉
像素美术也是如此 在这个例子中
我们在立柱旁绘制了灯管
在鲜红的霓虹灯旁悬挂着一些电线
打开灯后 气氛一下子就热烈起来了
这些红色点缀
让引擎光照更加生动
在深入探讨光照的细节之前
让我们先介绍一些基础概念
我想谈谈构图
通常 每个场景都可以拆分成
多个不同的平面
前景、中景和背景
在《Backbone》中 所有关键内容
都位于中景位置

English: 
Remember that visual art
is all about fooling the eye
into thinking that it's looking
at the real object.
So, pixel art is no different.
In this example,
we drew the red lighting specs
on the column and wires
hanging next to the planned source
of a very bright red neon light.
So, when we turn the lights on,
the image comes to life.
These couple of red dots
made the Engine lighting
even more vibrant.
Before I will dive deeper
into the specifics of lighting,
let's go back to the basics.
I want to talk
about composition.
Generally, each scene
can be broken down
into different planes.
Foreground, middle ground,
and the background.
In Backbone,
all important information
is concentrated
in the middle ground.

Chinese: 
这里是玩家活动的位置
也是可交互对象、NPC、敌人等所处的位置
前景的作用是充当额外的图层
以便让场景看起来更立体
在我们的场景中 前景中的对象通常位于屏幕侧面
或屏幕的顶部和底部
这样它们就不会遮挡玩家的视线
同时避免游戏画面
显得过于单调
记住 合适的摆位能让玩家更加身临其境
这一点屡试不爽
不过 为了实现某些特定的叙事和美术效果
我们偶尔会打破这一规则
在这个场景中 我们故意用一些前景对象
遮挡玩家的视线
这为场景增添了一种局促不安的气氛
玩家的每一步都充满了未知
这是游戏中实际的效果

English: 
This is where the player
character is located
as well as interactable objects,
NPCs, enemies, and so on.
Foreground is used to add
another layer of information
and make this scene
seem deeper.
In our case, foreground objects
are usually located on the sides
or upper lower parts
of the screen.
This way they just don't block
the view of the player character
and don't take
too much attention
from what's happening
in the middle.
Remember that smart positioning
is better immersion
for a player,
always like that.
We'll also break this rule
for different narrative
and artistic purposes.
In this scene, we deliberately
block player's view
with objects
in the foreground.
This adds to the atmosphere of
an unsettling cramped up place
where a player doesn't know
what to expect next.
And that's how it looks like.

English: 
The silhouette
of the player character
is obscured
by foreground objects
creating a feeling
of uncertainty.
There are also locations
where foreground is simplified
to silhouettes like this scene
in a busy night bar.
Now that I've covered
the basics,
let's build on the difficulty
and introduce multidimensional
approach to the composition.
Backbone is built by placing 2D
sprites in the 3D environment,
so we decided to use it
to our own advantage.
It's difficult to mix 3D
and 2D with flat planes
as your Assets are in
multidimensional environment.
The visual style like that
is sometimes called two
and a half dimensional.
Sprites and Meshes in Backbone
might be flat,
but we positioned them in a way
that makes them look 3D.
For example,
our movie theater board

Chinese: 
玩家角色的轮廓
被前景对象遮挡住了
从而营造一种不确定感
在某些场景中 前景会被简化成一些剪影
比如在这个灯光酒色的夜总会中
介绍完基础内容后
让我们增加些难度
介绍构图中的一些多维方法
《Backbone》有机结合了
2D贴图和3D场景
我们决定在这点特色上做一些文章
通常 很难将3D和2D资源通过平面进行结合
因为资源处于多维场景中
这类视觉效果有时称为
2.5D
虽说《Backbone》中的
贴图和网格体都是平的
但我们用一些放置技巧 让它们看起来像3D的
例如 电影院的招牌

English: 
is made of sprites positioned in
certain angle in 3D environment.
3D objects can help
add more volume,
make the world seem more vibrant
and immersive,
but placed next to plane
2D sprites,
3D objects
draw player's attention
and make everything around them
seem even more flat.
So, in our case it's important
to use them sparingly.
In Backbone, you will find
3D objects on larger structures
like parts of buildings
and mostly in the middle ground.
If they're positioned in the
foreground or a background,
perspective
during movement distorts them,
which doesn't really look nice
in our opinion.
This is the footage from
Backbone Kickstarter trailer
from 2018.
Here we experimented with 3D
on smaller objects.
The green drawer over there
and the table in the front.
The sink on the drawer
is still 2D plane
and looks unnatural

Chinese: 
就是由一些贴图在3D场景中以特定角度组成的
3D对象可以帮助增加体积感
让场景看起来更加充满活力、身临其境
放置在2D贴图旁边时
3D对象会更加显眼
但同时会让周围的一切看起来更加扁平
所以在我们的游戏中 我们会谨慎使用它们
在《Backbone》中 你会发现
大型建筑物上的3D对象通常位于中景
如果它们位于前景或背景中
当它们运动时 会因为透视产生失真
我们觉得这种效果不太好
这是《Backbone》在2018年众筹时
采用的宣传片
其中 我们尝试用了一些3D独享
比如左边的绿色橱柜和前面的桌子
橱柜上的水槽仍然是2D平面
由于它位于3D对象旁边

English: 
and distracting positioned
next to a 3D object.
To solve this, we could have
gotten rid of all 3D whatsoever
or completely switch
to voxel art.
We chose to use 3D sparingly
and it seems like it's the right
direction for us at the moment.
Today, Backbone rooms
are basically cubicles
filled with 2D Assets
To combat the flatness,
we set the camera further away
and tighten the field of view.
This way perspective distortion
on floors and ceilings
does not conflict
with overall style.
The space between
the objects still adds
to the feeling of depth,
creates parallax effects
and gives space for shadows
that the objects create.
Here's an example.
These identical elongated shapes
placed in the scene

Chinese: 
看起来不太自然 有点突兀
为了解决这个问题 我们想过去除所有3D内容
或者完全采用体素美术
最后我们选择少量使用3D对象
目前看来 这是正确的方向
目前 《Backbone》中的房间
基本上都是一些充满2D资源的小场景
为了减少扁平感 我们把摄像机放置在更远的位置
然后降低了视场
这样地板和天花板因为透视产生的失真
就不会与整体风格产生冲突
对象之间的间隔
还能增加深度感 产生视差效果
并留出空间渲染对象的阴影
这里有个例子
由于摄像机的设置方式 场景中的这两个长方体

English: 
look like cubes
with our scene’s camera set up.
This is why we'll stretch walls,
floors and ceilings.
That way they look proper
with our camera settings.
Without the stretching,
pixelated Textures
from the walls
would create too much visual
noise like the one on the left.
And we want all the attention
directed at the scene,
not the walls.
So, the result would be the one
that we have on the right.
Objects located
next to the walls like doors,
paintings are drawn
in perspective distortion.
This trickery is invisible
to player,
yet the whole scene would look
wrong if we didn't do that.
By keeping the perspective
distortion in mind
when creating Assets,
the objects look natural
from every player position.
Doors are the most
encountered example of these.

Chinese: 
看起来就像是立方体一样
这就是为什么我们拉伸了墙壁、地板和天花板
只有这样 它们在画面中看起来才会正常
如果不拉伸
墙上的像素化​​纹理
就会产生过多的视觉噪点 比如左边的纹理
我们希望玩家把注意力放在场景中
而不是墙壁上
所以 我们最后采用了右边的效果
墙壁旁边的物体 例如门
在绘制时采用了透视手法
玩家不会发觉这种技巧
但如果我们不这样做 场景就会出现问题
所以在创建资源时
请提前考虑到透视失真
无论玩家在哪里 都要让对象看起来自然
门是最常见的一种情况

Chinese: 
回到立方体
注意观察透视失真
如何给立方体带来不同影响 在关卡中移动时
左侧立方体的两面蓝色区域都能看到
但右侧立方体只能看见一面蓝色
玩家角色和摄像机的位置
都会影响对象的透视效果
这里有个关于透视的例子
左侧的椅子采用线性透视投影
右边的椅子采用正交投影
正交投影通常在示意图中使用
我们的大多数资源都采用正交投影
所以 当Howard走来走去时
你可以看到前景中的桌子
采用的是正交视角
右墙上的软木板则是线性透视视角
注意摄像机在移动时
它们不会产生失真

English: 
Getting back to the cubes,
notice how perspective
distortion
affects the cubes differently.
While moving through the level,
you can see both blue sides
on the left cube,
but only one blue side
is visible on the right one.
The position of the player
character and camera
all affect
the object perspective.
So, here is an example
of our perspective.
Chair on the left here there
is drawn in linear perspective
while the one on the right
is orthogonal,
which is usually used
in schematic drawings.
We use that
in most of our Assets.
So, as Howard walks around,
you can see that the table
in the foreground
is in the orthogonal
perspective.
The cork board on the right wall
is in linear,
so see how the camera
moves around
and they stay within there.

Chinese: 
我要讲的最后一点是图层
在我们的2.5D场景中
图层是营造景深的主要手法
在3D场景中 能用多个2D图层产生景深
就是所谓的视差
视差是营造场景深度、添加细节的绝佳工具
如你所见 我们使用了大量视差效果
有大量的物体相互层叠
通过结合房建装饰物和游戏远景
我们让游戏世界更加栩栩如生
但是 我们在近距离显示对象时
会打破这个规则
在这类场景中 玩家可以通过拖放
与对象进行互动
所以不需要景深
因此 视觉规则在这里发生了调整
纹理分辨率通常会更高

English: 
So, my last point is layers.
Layering is our main instrument
for creating more depth
and volume in a two
and a half dimensional world.
Layering 2D sprites in a 3D
environment creates depth,
so called parallax.
Parallax is an amazing
effective tool for adding detail
and depth to the game world.
We use it a lot, as you may see,
there are plenty of objects
stacked into each other
and we use it with room
decorations and backgrounds
to make the world
seem more alive.
But obviously we can break
this rule again
as we do
in our close-up mechanic.
That thing allows the player
to interact with objects
through a drag
and drop gameplay
and there's no need for depth.
So, the visual rules
change here.
Texture resolution
is usually higher

English: 
and we just don't use
any Engine lighting,
instead indicating the lighting
straight into the Textures.
That's the basics of how we deal
with perspective
layering pixel Assets
and positioning 2D Assets
in 3D environment.
Now Radu will talk about
how we deal with visuals
from the technical standpoint.
>> So, I'm Radu Girjoaba
and I did
the technical art on Backbone.
So, while prototyping
the style of Backbone,
we encountered multiple issues.
Some of them were due
to the unpredictable nature
of combining 2D and 3D.
Some were due to
technical limitations,
but most of the time
we found whatever,
some stuff we did
just didn't look good.
And so, we'd like to tell you
about what worked for us
and what didn't.
But just remember what we did

Chinese: 
并且我们不会使用任何引擎光照
而是直接将光照信息绘制在纹理中
以上就是有关透视、像素资源图层
以及如何在3D场景中放置2D资源的
基本处理技巧
接下来Radu将从技术角度
探讨我们的视觉效果处理方式
>>我是Radu Girjoaba
是《Backbone》的技术美术师
在对《Backbone》的风格进行初步探索时
我们遇到了许多问题
有些源自2D和3D融合时
产生的不确定性
有些出于技术限制
很多时候我们都会发现
有些地方总是不尽如人意
所以我们想分享一些经验与得失
不过请注意 我们所用的光照技巧

Chinese: 
只是众多手法中的
其中一些
我们的游戏没有太多几何细节
因此在构建场景时 很多视觉细节
都需要借助光照和材质来添加
以便营造身临其境的氛围
但由于大多数对象都是2D的
我们在为游戏添加光照时遇到了一些挑战
比如Paper2D不支持光照贴图
事实证明 在一款3D游戏中
如果多数场景对象都是平面并且朝向相同
就很难为它们设置光照
这里我们准备了一个例子
来说明我们在使用Paper2D时遇到的困难
画面顶部有一个球体光源
它烘焙了静态光照
这会影响网格体光照贴图和体积光照贴图
但它不能用作直接光照
左侧有一个静态平面网格体
由于它拥有表面光照贴图
因此被球体照亮后效果不错

English: 
are just some of
the many approaches
we could have taken to lighting.
So, our game doesn't have
much geometric detail.
So, when building our world,
a lot of the visual detail
needs to be added in
through lighting and materials
in order to create
a convincing atmosphere.
But since most of our objects
are in 2D,
we have come across some
challenges lighting our game,
namely Paper2D
not supporting lightmaps.
And as it turns out, it's hard
lighting a game in 3 dimensions
when most of your objects
are just flat planes
facing the same direction.
So here I've set up
a quick example
to illustrate the challenge
we had with Paper2D.
At the top there
there's a static sphere
with baked lighting.
And so,
it affects both Mesh lightmaps
and volumetric lightmaps,
but it doesn't act
as an actual direct light.
And so, on the left here
we have a Static Plane Mesh
and because it has
surface lightmaps,
it gets nicely lit
by the sphere.

English: 
And it's also shadowed near
the edges of the cube there.
In the middle we've got
the same Plane Mesh
but has a dynamic mobility.
So, while it doesn't have
surface lightmaps,
it's still gets affected
by the volumetric lightmaps
so it's not quite as accurate,
but it still
is able to be affected by
the surrounding static lighting.
And then on the video right here
we have a Paper2D sprite.
And so,
it doesn't have lightmaps
and it doesn't get affected
by volumetric lightmaps.
The only lighting it receives
is from the Skylight
and any dynamic direct lights
we have in this scene.
So, to get around this issue,
we started using Plane Meshes
for static sprites instead,
and this allowed us to start
bouncing lighting off sprites.
And so, we could bake
lightmaps onto them
and then also have them affect
and be affected by
the volumetric lightmaps.

Chinese: 
而且它在立方体的边缘还能形成阴影
在中间是相同的平面网格体
但它属于动态网格体
尽管没有表面光照贴图
它仍然会受到体积光照贴图的影响
虽说它不如前者准确
但仍然会受到周围静态光照的影响
最右侧是我们的Paper2D贴图
它没有光照贴图
也不会受到体积光照贴图的影响
唯一能影响它的就是天空光源
以及场景中的所有动态直接光源
因此 为了解决这个问题
我们将平面网格体用于静态贴图
这样就能让光线在贴图间反射
我们可以将光照贴图烘焙到贴图上
还能让它们
与体积光照贴图相互影响

Chinese: 
我们目前的做法是 我们有一个工具
可以将平面放置到场景中
由于我们的贴图通常是每厘米
半个纹素 我们还可以
根据它们的纹理分辨率自动缩放它们
但是我们并没有让所有贴图都使用同一个平面网格体
因为它们并非都是方形的
如果这样做 由于长宽比各不相同
光照贴图就会出现拉伸
因此 我们的办法是添加Alpha贴图
这样所有贴图都能是完美的正方形
但这会导致过度绘制
从而降低流畅程度
因此 我们采用了一些不同的长方形平面网格体
它们带有不同光照贴图UV
能让我们可以在整个游戏中实现更为一致的
光照贴图效果
现在的问题是
我们仍然要用Paper2D来显示贴图
以便为角色动画提供适当支持
所以 如果我们
在烘焙后的场景中运行角色动画
如果它们完全不受
周围静态光照影响
就会看起来格格不入

English: 
And so how we do that currently
is we just have a tool
that places planes
into the world.
And since our sprites
are generally half a texel
per centimeter,
we can also scale them
automatically based
on their Texture resolution.
But we don't actually use
the same Plane Mesh
for all of our sprites
since they all aren't square.
If we did that, we would start
getting stretched lightmaps
due to the different
aspect ratios.
So, what we could do
is add the alpha maps
of all our sprites so they would
all be perfectly square,
but then that would start
slowing down performance
because of overdraw.
So instead we have
a few different elongated,
Plane Meshes
with different lightmap
UVs and that allows us to have
more consistent lightmaps
throughout the game.
The issue now is we still need
to use Paper2D for our sprites
so we can support
character animations properly.
So, if we had them
running around
this completely baked scene,
then they would look out
of place
if they weren't fully effected
by the static
lighting around them.

Chinese: 
为了缓解这个问题
我们实现了一些自定义的延迟光源
对美术师来说 它们本质上就像是
实时光 但只有漫反射
因此 它们的渲染成本要低得多
而且由于Paper2D仍然会写入G缓冲区
这些光源就能让我们的角色
融入整个场景 同时避免像无阴影光源那样
对性能产生不利影响
此外 由于我们希望它们只提供漫反射光照
我们希望光照影响更侧向于环境光
哪怕它们实际上只是点光源
因此 我们只计算了距离衰减、法线影响
某些情况下还会计算聚光源的锥角
目前没有计算粗糙度
高光度阴影
以及其他基于物理的属性

English: 
So, what we did to help mitigate
this issue
is when we implemented
some custom deferred lights
and these basically act
like stock
and real lights for the artists,
but they're diffuse only.
So, they are a lot cheaper
to render.
And because Paper2D
still writes the gBuffer,
then these lights can help
ground our characters
into the world without having
as much of a performance impact
as unshadowed lights would.
And so,
because we want them to only
contribute diffuse lighting,
we want the lighting impact
to be more ambient
despite the fact that they
are actually just point lights.
So, we only calculate distance
fall off, normal contribution,
and in some cases
the spotlight cone angle.
So, there's no roughness
calculation for now,
specular shadows,
just anything else
that would be physically based.

English: 
So, for the distance fall off,
we noticed
inverse squared fall off
gives these really
bright highlights
close to the light source
and then that just rapidly
fades off
and we wanted the lighting
to be more ambient
so this doesn't really look
very good
for the effect
we're trying to go for.
So instead of inverse
squared fall off,
we just square
the initial distance fall off
and that gives us a nice,
really smooth gradient
with a more ambient feel.
But we still have this problem
that the contribution of normal
still makes it easy to tell
where these sort of fake lights
are coming from in the scenery.
So, for the normal contribution,
we just,
instead of dotting the normals
with the light direction,
we have an artist-controlled
wrap parameter
to wrap the lighting
around the geometry,
not directly facing the light.
And so, in the first half
of this video here you can see
what it looks like moving
that value from zero to one

Chinese: 
关于距离衰减
我们注意到 除以衰减的平方后
接近光源的对象
会变得非常的亮
然后光照会快速衰减
但我们希望光照更加类似于环境光
所以这个效果看起来并不好
并不是我们要的样子
所以相比除以衰减的平方
我们直接将距离衰减进行平方
这样整个光照就变得非常平滑
更加接近环境光的效果
但我们仍然有个问题 那就是法线
仍然会让玩家在场景中识别出
所谓的“伪造”光源
因此 在使用法线时
相比将法线与光线方向进行点积
我们设计了一个能由美术师控制的环绕参数
让光照在几何体表明进行环绕
避免直接面对光源
因此在视频前半段中 你可以看到
数值从0增加到1时的效果

Chinese: 
可以看到光照十分平滑
但如果数值超出0到1的范围
我们可以
对像素距离进行衰减
从本质上讲
外观上看起来就像是
没有考虑到任何法线效果一样
我们遇到的另一个问题是
因为光源没有阴影化
所以墙壁很容易发生漏光
这个例子比较极端
如果把聚光源像这样放在墙边
希望光线在墙上进行反射
如果我们把点光源放在这里
光线就会泄漏到墙的另一侧
引起各种问题
所以 这对我们来说是一个问题
因为尽管游戏主要由2D贴图组成
我们仍然会使用一些3D墙面
用来分隔各个房间
因此 把这些反射光源放在墙边

English: 
and it gives
some nice smooth lighting.
But then if we push that
zero past the zero to one range,
we can fade that off
to just falloff
where it's just the pixel
distance from the light
and it's essentially,
visually it just looks like
the normals
aren't even being considered.
And so, another problem we had
with these
is since the lights
aren't shadowed,
they can leak through
solid walls quite easily.
And this specific example
is quite extreme.
But if we have this spotlight
pointing at a wall like this
and we want light
bouncing off of that wall,
if we just put
a point light there,
then that's going to leak
through to the other side
and cause all sorts of issues.
So, this is a problem for us
because although the game
is mostly comprised
of 2D sprites,
we still have
3 dimensional walls
separating our interior rooms.
So, placing these bounce lights
right next to the walls

English: 
would make lighting leak
in between those rooms.
So, we added
a cone angle parameter
to the lights as well
for cases like this.
And for the artists, it's just
like using a normal spotlight,
going from zero
to one 180 degrees,
but in the shader,
it’s passed in from the negative
one to one range with negative
one being 180 degrees
and with one
presenting zero degrees.
And this allows us to give
the lights some directionality
when it's needed
and keeps the lighting
from leaking through walls.
So, in-game we just see
these bounce lights
where we've got lights
dynamically changing
or where we feel the lighting,
the static lighting
isn't enough to shade
our characters properly.
And so, in this case,
we've just got this
flickering light
in this dark alley.
And so, we've just put
an ambient light
right below the floor there.
And that does a nice job
of lighting up the environment
and lighting up our character
and bouncing that light
back up from the ground.

Chinese: 
会导致光线泄漏到其它房间内
因此 对于这类光源
我们添加了锥角参数
对美术师来说 就像使用普通的聚光源一样
角度从0度到180度
但是在着色器中 范围是-1到1
其中-1表示180度
1表示零度
这使我们在需要时
控制光源的方向
防止墙壁泄漏光线
因此在游戏中 如果光源会发生动态变化
或者我们觉得静态光照不足以
正确反映主角的光照效果
我们就会添加一些反射光源
比如这个例子中 我们在漆黑的小巷中
添加了一个闪烁的光源
因此我们在地面下面
放置了一个场景光
这样就能很好地照亮场景
以及我们的主角
并让光线从地面反射回来

English: 
So, touching on volumetric fog,
just for a second,
one challenge
we had was in one of our levels,
we have these cars
with volumetric fog
coming from the headlights
moving in the foreground.
And so, if you look at the taxi
on the left there,
the volumetric fog
from the car behind it
is clipping through
at the very beginning
and they're also leaving this
quite jarring ghosting artifact.
So, we can't just-
and that's the result
of the temporal reprojection
that volumetric fog uses.
And we can't just turn that off
because then we'd get some
pretty bad looking volumetric
lighting throughout
the rest of the level.
So, what we ended up doing was
we re-used the early light code
from our custom lights
in a 2-dimensional
sprite material
and then we just attached those
sprites to the car's headlights.
And so, then we can just pass
in the spotlight parameters
into the sprite.

Chinese: 
简单介绍下体积雾
我们面临的其中一个难题是 在关卡中
在前景中的车流车灯前
都会有一片体积雾
如果注意观察左面这辆出租车
它身后车流产生的体积雾
会出现在出租车的车身前
仿佛幽灵一般腾空而行 非常恼人
那是体积雾
使用临时再投影产生的后果
我们不能关闭体积雾
因为那样一来 关卡的其余部分
会产生很糟糕的体积光照效果
因此 我们最后复用了之前2D贴图材质中的
自定义光源的
着色器代码
然后我们将这些贴图添加到汽车车灯上
这样 我们就能将聚光源参数
传入贴图

English: 
And that ended up giving us
a very similar looking result
while getting rid of the issue
that volumetric fog was causing
and then also saving
some performance.
So great. We've got some nice
general lighting
and the big lightmap gives us
some pretty good shadows.
But then the issue remains
that when building lighting
in some areas
we still need these either
sharp shadows
or these shadows with
really sharp contact shadows.
And unless we start bumping up
lightmap resolution
and lighting quality,
then that's not really something
achievable,
it's just lightmaps.
So, we decided to implement some
simple shadow decals to our game
and this is what
the material looks like.
It's very simple.
Just zero for the base color,
one for the roughness
and a parameter for opacity.
And the reasons specularity
is a parameter here
is because
in some of our earlier levels,
some of the surfaces used some-

Chinese: 
最终效果非常相似
但是避免了体积雾产生的问题
同时还节省了性能
好的 我们有了很不错的光照效果
光照贴图为我们提供了很不错的阴影效果
但问题仍然存在
在某些区域构建光照时
我们仍然需要这些锐利的阴影
或者带有锐利接触阴影的阴影
除非我们提高光照贴图的分辨率
和光照质量
否则就不可能实现这个目标
它只是光照贴图
所以我们决定在游戏中实现一些简单的阴影贴花
这是材质的具体细节
非常简单 底色是0
粗糙度是1 还有一个不透明度参数
这里高光度之所以是一个参数
原因是在之前的某些关卡中
在一些表面中

Chinese: 
高光度的数值不一致
这样阴影贴花就会
看起来太亮或太暗
然后我们还在不透明度中
添加了少量噪点 以减轻一些条纹瑕疵
虽然我们没有使用临时抗锯齿进行降噪
这种效果其实非常微妙 我们并不需要它
最终的贴花效果依然比较平滑
这里我们把它们添加到了房间中
右侧的贴花专门用于显示
旁边贴图投射的阴影
在左边的墙上和天花板上
有一些常规的线性衰减贴花
这里 我们同样在天花板上设置了一些贴花
来模拟室外光线照射进来后
产生的环境光照效果
因此 通常我们不会过多使用它们
只有当我们觉得需要锐利的环境光时

English: 
the specularity values
weren't consistent
and so the shadow decals
would end up
looking either too bright
or too dark.
And then we also add a small
amount of dithering
to the opacity to mitigate
some banding artifacts we get,
and while we don't use temporal
anti-aliasing for denoising,
the effect is subtle enough
that we don't actually need it.
And the final decals
are still relatively smooth.
And so here we've got them
just placed around this room.
On the right there,
it's the shadow decal specific
to the sprite
that's casting the shadow.
And then on the left wall
and the ceiling there we've got
some just general
linear falloff decals.
Here again, we've got
some decals on the ceiling
to simulate
sort of ambient lighting
coming in through that window
from outside.
And so generally we don't
use them too excessively,
just where we feel some
sharp ambient lighting will help

Chinese: 
或者需要在不提升光照质量的前提下提升阴影细节时
我们才会这么做
我们遇到的另一个问题是 在某些场景中
玩家角色感觉有点生硬
比如这个场景
有着非常强烈的定向环境光照
在这个例子中 背景中的舞台
会产生大量的环境光照
我们的办法是设置低分辨率聚光源
来模仿这种效果
但场景中投射阴影的光源
已经很多了
我们不想再增加性能的负担
所以在这种情况下 我们设计了一种特殊的贴花
它会根据美术师放置的枢轴点
在玩家周围动态移动和变形
表示场景中灯光的焦点
在这段视频中 你可以看到贴花的作用
我们在玩家头上放置了一盏区域光源
当玩家左右移动时

English: 
or where we need
some more accurate shadows
without bumping up
lighting quality.
Another issue we had was in
some scenes the player character
felt a little out of place.
And so, we've got
this really strong
directional ambient lighting.
And so, in this case there's
a lot of ambient lighting
coming in from that stage
in the background.
And so, what we could have done
is set up this low-res spotlight
to sort of emulate that effect.
But we've already got enough
shadow casting lights
in the scene as it is
and we don't want to drag
down performance even more.
So, for situations like this,
we came up with a special decal
that dynamically moves
and morphs around the player
based on some artist-placed
pivot
representing the focal point
of the ambient light.
And so, in this video you
can see that decal in action.
We've got this area light
right above the player there.
And as the player moves,

English: 
the decal also changes shape
around the player.
And then as the light
also moves around,
the decal is also
morphing around the player.
So, we can change these
at runtime,
they're not just
statically placed.
And so now here's
that previous scene again.
And on the right,
you can see what it looks like
with the shadow decal.
And it really helps ground
our character
into the world a little more.
And so how the actual decal
works is we just take a circle
and stretch it non-uniformly
and then we can do
a uniform blur on it
and then a non-uniform blur
in the opposite direction
of which it's being stretched.
And then we can pack
eight frames of that
into the flipbook
on the right there.
And so, as it gets stretched,
the uniform blur is decreased
and the non-uniform blur
is increased
and that gives the illusion
of a larger penumbra
coming from the top portion
of the character.
And so, the actual Texture
was made in substance designer.

Chinese: 
贴花会相应发生变化
如果移动光源
贴花也会在玩家周围相应变化
因此 我们可以在实时改变它们
它们不是静止不动的
这是之前那个场景
在右侧 你可以看到
采用阴影贴花后的效果
这对于让主角融入场景
产生了极大帮助
我们制作阴影贴花的过程是
对它进行不规则拉伸
然后对它进行均匀的模糊处理
然后在相反方向上 也就是拉伸方向上
进行不均匀的模糊处理
然后我们会把八帧类似的图片
打包成右侧的图像序列
当它拉伸时 均匀模糊会降低
非均匀模糊会增加
给人产生一种错觉
仿佛角色上半身的半影更大
这些纹理实际上是用
Substance Designer创建的

English: 
So, in engine for the material,
we just interpolate
between the two nearest frames
based on the characters distance
from this artist-placed
light pivot.
Something else we did
some testing with
is dynamically blurring
shadow decals at runtime
so we wouldn't have to make
these pre-blurred Textures
for a lot of individual sprites.
On the left here
we have this pixel art sprite
that we would use in our game.
And on the right, there is just
some random Texture
with an alpha map.
And so, you can see
as the shadow's base
we get these really
nice contact shadows,
these really nice sharp shadows.
Then as we get further away,
they get blurry and blurrier.
And the way these decals work is
there would just be a Mesh decal
in the form of a plane
just placed on the ground
or any flat surface.
And then with a Vertex shader
we could individually move

Chinese: 
在引擎中设计材质时 我们只是根据
美术师放置的枢轴点和角色之间的距离
在最接近的两帧内进行插值
我们尝试的其它效果还包括
在运行时对阴影贴花进行动态模糊
这样我们就不必针对大量贴图
预先制作模糊过的纹理
左侧是我们在游戏中使用的
像素美术贴图
右边则是一张
带有Alpha贴图的普通纹理
你可以看到 在下方的阴影部分
有非常不错的接触阴影
阴影非常清晰锐利
但当投射距离变远后 它们会变得越来越模糊
这些贴花本质上就是一些网格体贴花
以平面的形式放置在地面上
或任何扁平表面上
然后使用顶点着色器 我们可以让贴花

English: 
the left, right,
and top edges of that.
And then the decal
can be blurred
with a parameter specified
by the artist.
And then we can just,
we just mask that off
with the Texture coordinates.
So, we get that nice contact
hardening effect.
And the way the blur works
is similar
to what Playdead did
for their frosted glass.
But essentially,
we just sample equal areas
up to eight times
within radius around each pixel
and then we jitter
that sample position each frame
so the result so the result
can be cleaned up by TAA.
But our game,
we want to keep this pixel
perfect look in our game,
meaning we don't,
we can't actually use TAA.
And so, we ended up not using
this specific type of decal.
We just thought
it was worth mentioning.
So, going back to our general
sprite lighting,
even with baked lighting
and lots of lights placed
throughout the environment,

Chinese: 
分别向左、向右和向上移动
美术师可以通过某个参数
对贴花进行模糊处理
然后我们用纹理坐标
对它进行了遮罩
因此 我们获得了很好的接触阴影效果
模糊的工作方式十分类似于
《Playdead》中磨砂玻璃的效果
但本质上 我们只是在每个像素的一定范围内
对同等面积进行最多八次采样
然后每一帧都调整一次采样位置
这样就能用临时抗锯齿清除结果
但在我们的游戏中
我们想让像素尽可能完美
意味着我们实际上不能用临时抗锯齿
因此 我们最终没有使用这种贴花
我们只是觉得这点值得一提
继续介绍贴图光照
有些时候 即便在场景中
添加了静态光照并放置很多光源

English: 
the scene can still look
pretty flat in a lot of cases.
Looking at the scene
with the lighting preview,
the middle ground objects
look like flat cards,
which they are,
but we still need
these objects to look
and feel like objects
grounded in the world.
And then additionally
on top of that,
their silhouettes
sort of blend in together
and it's really hard to make
out their individual shapes.
So, we thought about how
we could add some extra detail
to both our Mesh sprites as well
as our Paper2D characters.
And so, we decided
that normal maps
would be a good way to do that.
We've got a lot of unique
sprites in our game.
Over 800 in our largest level
and then around 200 per level
on average.
And we do have a lot of levels
in our game.
So then how could we create
normal maps
for so many different Assets?
Do we generate them
from height maps?
Do we just create
them all by hand?
And so, we decided to look into
a few different approaches.

Chinese: 
场景看起来仍然不够立体
注意这个光照预览场景
中景位置的对象看起来像是纸板一样
它们的确是纸板
但我们仍然要确保这些对象
尽可能与场景浑然一体
此外 最主要的是
确保它们的轮廓混合在一起
让玩家不容易分辨出它们各自的形状
我们还思考过如何为
网格体贴图和Paper2D角色
添加一些额外的细节
我们觉得法线贴图
是一个很好的方法
我们的游戏中有很多贴图
最大的关卡有800多张贴图
平均每个关卡有大约200张
而我们的游戏中有很多关卡
如什么给这么多资源
创建法线贴图呢？
需要通过高度图生成法线贴图吗？
还是全部手动创建？
我们决定考查多种不同的方法

English: 
The first approach we tried
was generating normal maps
from height maps.
And so that's how 3D workflows
normally work.
So, this is something
we decided to look into.
But then if we do that, then how
do we create the height maps?
Well, for reference,
this is what our sprites
generally look like.
This is just
the base color Texture
and you can see
it's got already occlusion,
specular highlights and other
lighting information painted in.
So, we could use programs like
Bitmap2Material
or other similar programs
to convert these color Textures
to height maps as is
sometimes then in 3D workflows.
But because all that lighting
info is already painted in
and because of
the low resolution,
when converting the result
to normal map,
it's hard to get
any legible info out of it.
So, we could obviously
spend a lot more time
adjusting these Textures.

Chinese: 
我们尝试的第一种方法是
通过高度图生成法线贴图
这是3D游戏开发中的常见流程
我们决定尝试下这种方法
但是如果选择这种方法 该如何创建高度图呢？
举个例子
游戏中的贴图一般是这个样子
这只是一张基础颜色纹理
你会发现 它已经添加了遮蔽
高光和其他光照信息
我们可以使用
Bitmap2Material这类程序
或其他类似程序 将这些颜色纹理
转换为高度图 有时3D工作流程会用这种方法
但由于所有光照信息都已经添加进了纹理
并且由于分辨率很低
所以将结果转换为法线图时
很难从中获取精确的信息
显然 我们可以多花费点时间
调整这些纹理

English: 
But then at that point we might
as well be hand painting them.
So, then what if we do hand
paint them?
It's still about the same
workload for the artists,
but the height maps can now
be accurate
to what the sprites
were for them.
So then if we see here,
if we convert
this height map to a normal map,
then the flat faces
are a lot more readable.
But then the normal map
still breaks up
when we've got these in areas
where the height map
has too much detail
And so we decided we couldn't
actually get any usable
normal maps from height maps.
So, then what if we
paint them by hand,
paint the normal maps by hand.
Doing this was the most accurate
we could get.
But then the workload
is even larger now for artists
as they have to paint
in more information.
So, we decided this approach
also wasn't viable for us.
In the end, we realized
that because our sprites are
so low resolution,
we could essentially run an edge
detection shader on them

Chinese: 
但这样我们可能还不如手动绘制它们
那么 手动绘制的效果如何呢？
对于美术师来说 工作流程仍然相同
但高度图现在相对于贴图
会更加精确
来看这里
如果将高度图转换为法线贴图
扁平面会更加清晰
但是在细节比较丰富的
高度图区域
法线贴图仍然会出现问题
所以我们认定实际上无法通过高度图
获得任何有用的法线贴图
那么 如果采用手绘会如何呢？
手动绘制法线贴图呢？
这样可以获得最精确的结果
但这样美术师的工作量会大很多
因为他们需要绘制更多信息
因此我们认定这种方法对我们也不合适
最后 我们意识到 因为我们的贴图
分辨率十分低
我们其实可以运行边缘检测着色器

Chinese: 
然后从中生成边缘法线
下面举个例子来说明它的工作方式
这里有一张Alpha贴图 用于展示原理
白色方块是不透明的纹素
黑色表示透明 红色表示
超出0到1UV查看范围的区域
我们只关注中心的绿色纹素
然后我们假设位于UV范围之外的纹理像素
将是透明的
因此 我们只需关心中心纹素周围的
八个纹素
现在看的是左上角的纹素
它超出了UV范围
所以我们可以假设它是透明的
我们在那个方向上有一个单位向量
然后是下面那个
再下面那个也一样
然后我们检查右边那个
它位于UV范围内
所以我们对Alpha贴图进行采样
发现它是不透明的
这意味着我们不需要做任何事
然后检测它右侧的纹素 情形相同

English: 
and then we could just generate
edge normals from that.
And so how that works is,
we've got an example here
of a selection of some
theoretical alpha map we have.
And so, the white squares
are just opaque texels,
the black are transparent,
and the red are outside
the zero to one UV view range.
So, we'll just focus on
the green texel on the center
and then we can also assume
that texels outside the UV range
are going to be transparent.
And so, we only need to focus
on the eight surrounding texels
of the texel we're focusing on.
So here we check
the top left texel
and that's outside the UV range
so we can assume
it's transparent
and we had a unit vector
in that direction.
Then the one below that as well.
And then same goes
for the one below that.
And so, then we check the one
to the right of that
and it's inside the UV range.
So, then we sample the alpha map
and we find that it's opaque.
So that means we don't need
to do anything there
and we check the texel to the
right of that same story there.

English: 
Then we check the texel
above that
and we sample the alpha map
and we find out
it's transparent.
So, then we add in a unit vector
in that direction.
And then same story goes
for the one above that
and same for the last one.
So, if we add
all these vectors up,
we'd get something
that looks like this
and you'll notice
we get something
that's over a unit long
but we don't actually care
about the length,
we just care
about the direction.
And so, all these vectors have
been calculated in 2 dimensions.
So, for the final normal output,
we have an artist-controlled
intensity parameter.
And so, we normalize
the 2D vector
and then we append one minus
the edge normal intensity
as the Z component
where intensity is just
some float between zero to one.
And then that guarantees
that all normals
have the same intensity
when getting renormalized
by the Engine.
But then that's not actually
one minus the intensity.

Chinese: 
然后检查它上面的纹素
对Alpha贴图进行采样
发现它是透明的
然后在那个方向添加一个单位向量
上面那个也一样
最后一个情形也相同
如果将所有这些向量加起来
就会得到这个效果
你会发现我们得到的向量
超出了一个单位的长度
但我们实际上并不关心长度
我们只关心方向
所有这些向量都是在2D中计算的
关于最终的法线输出
我们有一个美术师可以控制的强度参数
我们会对2D向量进行归一化
然后加上1 再减去边缘法线强度
因为Z标量 强度值是个浮点数
范围在0到1之间 这样就能保证
使用引擎重新归一化时
所有法线的强度都相同
但实际上不是1减去强度

English: 
It's 1.001 minus the intensity.
So that there's still normal
data for all non-edge texels
so they can be normalized
properly.
So, for reference, here's what
our sprites look like again,
without the edge normals.
And here's what they look like
with edge normals.
You can see they add
a lot of depth
to the sprites and the scene,
and they help ground them
in the world.
And now they look a lot more
like physical objects
instead of just flat cards
that have been propped up.
And so, here's a side by side
comparison of the fully
Textured scene.
The normal maps help sell
the ominous mood of the scene
that we're going here
for a lot more,
and this isn't really
a perfect solution
as it doesn't cover
all of our sprites perfectly,
but it's enough to help sell
the lighting
and ground objects in the world.
And so,
while it's subtle enough,
while it's subtle,
a lot of the time
it helps improve the look
of the game quite noticeably.

Chinese: 
而是1.001减去强度
这样所有非边缘纹素的法线数据仍然正常
所以它们就能正确归一化
来看一下 这是我们的贴图
没有边缘法线后的效果
这是采用边缘法线后的样子
可以看到边缘法线
给贴图和场景增加了很多深度
有助于贴图融入场景
现在它们看起来更像更立体
而不是被撑起来的纸板
这里比较了两个
完整添加了纹理的场景
法线贴图显然更有助于传达
场景的不安氛围
虽说这不是一个完美的解决方案
因为它无法覆盖所有的贴图
但已经足以帮助光照和对象
融入到场景中
因此 尽管效果很微妙
但多数时候
已经足以明显改善游戏画面

English: 
Something we also noticed
is in some cases
it can look like
a bad bevel shader in motion,
which it essentially is,
but specifically
on our games protagonists,
if you'll sort of look
at the edges of him
as he moves around the areas
that aren't being
shaded properly
or that aren't
being shaded fully,
they look more like
an outline shader
and that's not really
what we're going for.
So, in those cases
we can lower the intensity
of the edge normals
and then combine them
with some handmade normal maps
that the artists would make
and then we can adjust
the intensities
of those separately based
on what we need.
At the moment,
we're still experimenting
with handmade normal maps
since they do take
a while to make,
especially for these multi
frame animations
that our characters have.
But here's an example of what
the protagonist looks like
with them applied
at different intensities.
On the left there,
there is no normals.

Chinese: 
此外我们还注意到 在某些情况下
动起来时像是出了问题的倒角着色器
本质上它确实是
特别是在我们的游戏主角上
如果你观察他的边缘
当他在四周移动时
阴影没有正确着色
或没有完全着色
看起来更像是轮廓着色器
那并不是我们想要的效果
所以 在这些情况下
我们会降低边缘法线的强度
然后将它们与美术师手动绘制的法线贴图
结合在一起
然后我们可以
根据需要单独调整强度
目前
我们仍在尝试手绘法线贴图的效果
因为绘制它们比较费时
尤其是主角这类对象
通常有很多帧动画
这里显示了主角应用不同
法线强度后的效果
左侧没有使用法线

English: 
In the middle,
we have them at full intensity
and it looks cool,
but it's a bit overdramatic.
And so, on the right there is
something that we would use
in the final game.
It's just something
in between the two.
And so, wrapping up,
what should you take away
from this presentation?
Nothing is set in stone.
You should experiment
to see what works best
with your visual style.
And also, you don't have to use
all the latest technology
to make your game look good.
Sometimes just doing what
looks right is better than using
these complex or
physically accurate techniques.
And so, I just want to say
thanks to the team,
specifically Alex,
Toma, and Kristina
for helping us
create this presentation.
And then we've got some
references there at the bottom,
specifically the INSIDE one
that really influenced us a lot.
And yeah, that's all I've got.

Chinese: 
中间是法线强度最大化的效果
看起来很酷 但有点太夸张了
右侧是我们最终在游戏中
采用的效果
它介于两者之间
最后总结一下
这次演讲带来了哪些启发
不要循规蹈矩 你应该尝试各种风格
然后确定最合适你的美术风格
此外 不要盲目在游戏中
使用各种新技术
有时 选择合适的风格要好过
滥用一些复杂的技巧或基于物理的技术
最后 我想感谢整个团队
特别是感谢Alex、Toma和Kristina
帮助我们准备此次演讲
屏幕底部有一些参考信息
其中《INSIDE》尤其给我们带来了很多启发
好的 以上就是我的全部内容
