mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-04-19 17:16:08 +08:00
134 lines
11 KiB
JavaScript
134 lines
11 KiB
JavaScript
main.floors.MT9=
|
||
{
|
||
"floorId": "MT9",
|
||
"title": "主塔 9 层",
|
||
"name": "9",
|
||
"width": 15,
|
||
"height": 15,
|
||
"canFlyTo": true,
|
||
"canFlyFrom": true,
|
||
"canUseQuickShop": true,
|
||
"cannotViewMap": false,
|
||
"images": [],
|
||
"ratio": 1,
|
||
"defaultGround": "ground",
|
||
"bgm": "cave.mp3",
|
||
"firstArrive": [],
|
||
"eachArrive": [],
|
||
"parallelDo": "",
|
||
"events": {
|
||
"5,1": [
|
||
"本层将展示着色器特效的动画效果。",
|
||
"动画效果的核心依然是高级动画插件，使用它来让一个值动态变化，从而达到动画的效果。本层将展示若干个示例。"
|
||
],
|
||
"3,1": [
|
||
"这里是第一个实例。",
|
||
"本实例将做出一个画面逐渐变黑白的特效（虽然使用css更为方便，但是为了教学插件怎么用，就使用着色器插件进行制作）",
|
||
" 首先我们要知道，要让画面变黑白，应该让它的rgb变成相同的，一般来说为了让效果更真实，会有特殊的算法进行优化，不过这里方便起见直接取平均值。\n 那么要有一个动画效果，我们应当声明一个可以变化的值来表示灰度百分比，表现在着色器中就是\r[gold]uniform（全局变量）\r声明。",
|
||
" 那么片元着色器的代码就是：\n\r[yellow]uniform float uGrayscale;\n\nvoid main() {\n vec4 rgb = texture2D(uSampler, vTextureCoord);\n float avr = (rgb.r + rgb.g + rgb.b) / 3.0;\n float dr = (rgb.r - avr) * (1.0 - uGrayscale);\n float dg = (rgb.g - avr) * (1.0 - uGrayscale);\n float db = (rgb.b - avr) * (1.0 - uGrayscale);\n\n gl_FragColor = vec4(avr + dr, avr + dg, avr + db, rgb.a);\n}\r",
|
||
" 稍微解析一下这段代码。这段代码首先声明了一个浮点型的\r[yellow]uGrayscale\r全局变量，然后在\r[yellow]main\r函数里面获取了当前像素的rgba值，计算平均值和差值，然后最后的rgba值就是平均值加上差值了。",
|
||
" 那么前面的代码我们可以很轻松地写出来了，跟上一层的一样，不同的是我们还需要引入高级动画插件：\n\r[yellow]const { ShaderEffect, setTickerFor, replaceGameCanvas } = core.plugin.shaderEffect;\nconst { Animation, hyper } = core.plugin.animate;\nconst canvas = ['bg', 'bg2', 'event', 'fg', 'fg2', 'hero'];\neffect.baseImage(...canvas.map(v => core.canvas[v].canvas));\neffect.vs(ShaderEffect.defaultVs);\neffect.fs(/* 上面那一段着色器脚本 */);\r",
|
||
" 在这后面就出现与之前不一样的地方了，之前我们直接使用\r[yellow]update\r函数进行渲染，但是这里不一样，需要使用\r[yellow]compile\r函数先进行编译：\n\r[yellow]effect.compile();\r",
|
||
" 编译完成之后，我们就可以对\r[gold]uniform\r进行操作了，我们需要创建一个全局变量绑定器：\n\r[yellow]const binder = effect.createUniformBinder('uGrayscale', 1, 'f', '');\r\n 这一句话的信息量很大，我们来解析一下。\n 这个方法的第一个参数是全局变量的名称，着色器中我们使用了\r[gold]uGrayScale\r，这里也填它。\n 第二个参数是变量的元素数量，由于是一个浮点型数字，因此只有一个元素，所以填\r[gold]1\r。\n 第三个参数是元素的数值类似，是浮点数，所以填\r[gold]'f'\r，整型的话应该填\r[gold]'i'\r。\n 第四个参数是这个变量是否是向量，浮点数不是向量，因此填\r[gold]''\r，注意不能不填，应当填空字符串。",
|
||
" 下一步我们需要对这个全局变量进行初始化操作，使用\r[gold]set\r方法进行赋值即可初始化：\n\r[yellow]binder.set(0);\r",
|
||
" 下面，我们就可以使用js来操作这个\r[gold]uniform\r了，也就是说，我们可以使用高级动画插件操作这个全局变量来实现动画效果了。下面我们直接创建高级动画实例进行动画操作：\n\r[yellow]const ani = new Animation();\nani.register('grayscale', 0);\nani.time(5000).mode(hyper('sin', 'in-out')).absolute().apply('grayscale', 1);\r\n 这样，我们就创建了一个动画属性，下面我们要将它与全局变量绑定器联系起来。这里的高级动画的意思是：动画时间5000毫秒，速率曲线为hyper sin（双曲正弦）函数，in-out（慢-快-慢）变化方式，绝对变化，最终grayscale变为1",
|
||
" 联系起来的方式很简单，直接使用内置方法每帧赋值即可：\n\r[yellow]ani.ticker.add(() => binder.set(ani.value.grayscale));\r",
|
||
" 这样动画也配置完毕了，后面便可以直接渲染特效，然后在页面上展示了，唯一不同的点是不能再向\r[gold]update\r的第一个参数传入true了，这会重新编译着色器，导致绑定器失效。下面是后面的代码：\n\r[yellow]effect.update();\nconst ticker = setTickerFor(effect);\nconst manager = replaceGameCanvas(effect, canvas);\r\n 由于全部源码较长，这里就不放完整源码了。",
|
||
"下面是最终效果。",
|
||
{
|
||
"type": "function",
|
||
"function": "function(){\nflags.lastShaderSample?.end();\nflags.lastShaderSample = core.shaderSample5();\n}"
|
||
}
|
||
],
|
||
"1,1": [
|
||
"这里是第二个特效实例。",
|
||
"这个实例将模拟老实电视的显示不稳定",
|
||
"这个特效本质上是对颜色进行一定程度的噪声处理，因此我们只需要创建一个噪声偏移量的全局变量，然后让它一直以恒定的速率增加就行了，这甚至不需要高级动画实例的参与。",
|
||
" 它的片元着色器脚本：\n\r[yellow]uniform float uOffset;\n\nfloat noise(float x) {\n float y = fract(sin(x) * 100000.0);\n return y;\n}\n \nvoid main() {\n vec4 rgba = texture2D(uSampler, vTextureCoord);\n float n = noise(rgba.r + rgba.g + rgba.b + uOffset) / 10.0;\n \n gl_FragColor = vec4(rgba.rgb + n, rgba.a);\n}\r",
|
||
"它在动画部分的脚本（注意从高级动画插件引入Ticker）：\n\r[yellow]const ticker = new Ticker();\nticker.add(() => binder.set(binder.get() + 0.01));\r",
|
||
{
|
||
"type": "function",
|
||
"function": "function(){\nflags.lastShaderSample?.end();\nflags.lastShaderSample = core.shaderSample6();\n}"
|
||
}
|
||
],
|
||
"9,1": [
|
||
"这里是第三个特效实例。",
|
||
"这个实例将让上一层的第四个实例动起来",
|
||
"实际伤这与本层的第三实例类似，依然是加一个offset在噪声上。",
|
||
" 它的片元着色器脚本：\n\r[yellow]uniform float uOffset;\n\nfloat noise(float x) {\n float y = fract(sin(x) * 100000.0);\n return y;\n}\n\nvoid main() {\n float brigtness = -0.1 + noise(uOffset) / 50.0;\n vec2 xy = vTextureCoord;\n float x = xy.x + noise(xy.y + uOffset) / 100.0;\n float y = xy.y;\n vec4 color = texture2D(uSampler, vec2(x, y));\n vec4 color1 = vec4(color.rgb + vec3(brigtness), color.a);\n\n gl_FragColor = color1;\n}\r",
|
||
"它在动画部分的脚本（注意从高级动画插件引入Ticker）：\n\r[yellow]const ticker = new Ticker();\nticker.add(() => binder.set(binder.get() + 0.01));\r",
|
||
{
|
||
"type": "function",
|
||
"function": "function(){\nflags.lastShaderSample?.end();\nflags.lastShaderSample = core.shaderSample7();\n}"
|
||
}
|
||
],
|
||
"11,1": [
|
||
"这里是第四个特效实例。",
|
||
"这个实例将做一个四周边缘周期性变黑的特效",
|
||
" 它需要用到当前像素的位置，因此需要从顶点着色器中用\r[gold]varying\r变量传递至片元着色器中，那么它的顶点着色器：\n\r[yellow]varying vec4 vpos;\n\nvoid main() {\n vTextureCoord = aTextureCoord;\n vpos = aVertexPosition;\n gl_Position = aVertexPosition;\n}\r",
|
||
" 它的片元着色器脚本：\n\r[yellow]uniform float uStrength;\nvarying vec4 vpos;\n\nvoid main() {\n float alpha = clamp(distance(vec2(0, 0), vpos.xy) - 0.6, 0.0, 1.0) * uStrength;\n vec4 tex = texture2D(uSampler, vTextureCoord);\n gl_FragColor = vec4(tex.rgb * (1.0 - alpha), 1.0);\n}\r",
|
||
"它在动画部分的脚本（注意从高级动画插件引入Ticker）：\n\r[yellow]const ticker = new Ticker();\nticker.add(time => binder.set((Math.sin(time / 2000 - Math.PI / 2) + 1) / 2);\r",
|
||
{
|
||
"type": "function",
|
||
"function": "function(){\nflags.lastShaderSample?.end();\nflags.lastShaderSample = core.shaderSample8();\n}"
|
||
}
|
||
],
|
||
"13,1": [
|
||
"这里是第五个特效实例。",
|
||
"这个实例将吧前两个特效结合起来，粗略实现泰拉瑞亚中月球领主来临前的特效。",
|
||
" 顶点着色器与第四个特效相同：\n\r[yellow]varying vec4 vpos;\n\nvoid main() {\n vTextureCoord = aTextureCoord;\n vpos = aVertexPosition;\n gl_Position = aVertexPosition;\n}\r",
|
||
" 它的片元着色器脚本：\n\r[yellow]uniform float uStrength;\nvarying vec4 vpos;\n\nfloat noise(float x) {\n float y = fract(sin(x) * 100000.0);\n return y;\n}\n\nvoid main() {\n float brigtness = -uStrength / 10.0;\n vec2 xy = vTextureCoord;\n float x = xy.x + noise(xy.y + uStrength) / 300.0 * uStrength;\n float y = xy.y;\n vec4 color = texture2D(uSampler, vec2(x, y));\n vec4 color1 = vec4(color.rgb + vec3(brigtness), color.a);\n float alpha = clamp(distance(vec2(0, 0), vpos.xy) - 0.6, 0.0, 1.0) * uStrength;\n gl_FragColor = vec4(color1.rgb * (1.0 - alpha), 1.0);\n}\r",
|
||
"它在动画部分的脚本（注意从高级动画插件引入Ticker）：\n\r[yellow]const ticker = new Ticker();\nticker.add(time => binder.set((Math.sin(time / 2000 - Math.PI / 2) + 1) / 2);\r",
|
||
{
|
||
"type": "function",
|
||
"function": "function(){\nflags.lastShaderSample?.end();\nflags.lastShaderSample = core.shaderSample9();\n}"
|
||
}
|
||
]
|
||
},
|
||
"changeFloor": {
|
||
"7,1": {
|
||
"floorId": ":before",
|
||
"stair": "upFloor"
|
||
},
|
||
"7,13": {
|
||
"floorId": ":next",
|
||
"stair": "downFloor"
|
||
}
|
||
},
|
||
"beforeBattle": {},
|
||
"afterBattle": {},
|
||
"afterGetItem": {},
|
||
"afterOpenDoor": {},
|
||
"autoEvent": {},
|
||
"cannotMove": {},
|
||
"cannotMoveIn": {},
|
||
"map": [
|
||
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||
[ 1,129, 0,129, 0,129, 0, 88, 0,129, 0,129, 0,129, 1],
|
||
[ 1,10187, 0,10186, 0,10185, 0, 0, 0,10188, 0,10189, 0,10193, 1],
|
||
[ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
|
||
[ 1,201, 0,202, 0,203, 0,204, 0,205, 0,206, 0,207, 1],
|
||
[ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
|
||
[ 1,333, 0,336, 0,340, 0,345, 0,351, 0,358, 0,366, 1],
|
||
[ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
|
||
[ 1,376, 0,378, 0,381, 0,385, 0, 35, 0, 37, 0, 39, 1],
|
||
[ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
|
||
[ 1, 31, 0, 32, 0, 33, 0, 34, 0, 36, 0, 38, 0, 40, 1],
|
||
[ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
|
||
[ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
|
||
[ 1, 0, 0, 0, 0, 0, 0, 87, 0, 0, 0, 0, 0, 0, 1],
|
||
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
|
||
],
|
||
"bgmap": [
|
||
|
||
],
|
||
"fgmap": [
|
||
|
||
],
|
||
"bg2map": [
|
||
|
||
],
|
||
"fg2map": [
|
||
|
||
]
|
||
} |