SpriteBuilder实现2D精灵光影明暗反射效果(二)

简介:

使用SpriteBuilder新建一个项目,将默认MainScene.ccb中的内容统统删掉,此时场景应该是一片漆黑.

将官网中的2张图片以及我自己做的2张图片全部拖拽到其文件视图中去:

这里写图片描述

其中加_n后缀的图片表示原图的法线贴图.

将2张不带_n后缀的图片分别拖到黑黑的场景中去,调整到合适位置.
分别将2个精灵的Normal map设置为_n后缀的对应图片:

这里写图片描述

分别打开2个精灵的Lighting特效.这时已经可以看到光影效果,可惜这时SpriteBuilder给你的”假象”,如果此时编译运行该app,只能看到黑漆漆一片,因为这时还没有添加任何光源呢.

从控件库拖拽一个Light Node节点到场景中,相当于给场景添加了一个光源.你会发现随着光源的移动,2个精灵光影有着明显的变化:

这里写图片描述

为了模拟更加逼真,再从控件库拖动一个粒子效果节点.将其调整为火焰状.把该粒子节点和上面的Light节点一起放到一个CCNode中去,设置该节点的代码连接为_fireNode.

然后在Xcode打开MainScene.m文件,启用触摸,然后建立对应的触摸回调方法:

-(void)touchMoved:(CCTouch *)touch withEvent:(CCTouchEvent *)event{
    CGPoint location = [[CCDirector sharedDirector] convertTouchToGL:touch];
    _fireNode.position = location;
}

编译运行该App,你可以看到实际效果如下:

这里写图片描述

本篇完.

相关文章
|
4月前
threeJs用精灵模型Sprite实现下雨效果
这篇文章介绍了使用Three.js中的Sprite(精灵)模型来实现下雨特效的方法和技术细节。
149 2
threeJs用精灵模型Sprite实现下雨效果
|
4月前
ThreeJs给物体添加贴图
这篇文章详细说明了在Three.js中如何给3D物体添加贴图,并展示了实现局部贴图的技术和方法。
236 1
ThreeJs给物体添加贴图
|
6月前
|
开发框架
threejs做特效:实现物体的发光效果-EffectComposer详解!
【8月更文挑战第7天】实现物体的发光效果-EffectComposer详解!
827 6
threejs做特效:实现物体的发光效果-EffectComposer详解!
|
6月前
|
API
【threejs教程】让你的场景及物体拥有质感:聊聊threejs中的基础网络材质!
【8月更文挑战第5天】threejs中的基础网络材质教程
84 3
|
6月前
|
图形学
小功能⭐️Unity中利用材质自发光实现物体闪烁效果
小功能⭐️Unity中利用材质自发光实现物体闪烁效果
|
8月前
|
图形学
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
【unity小技巧】实现FPS武器的瞄准放大效果(UGUI实现反向遮罩,全屏遮挡,局部镂空效果)
159 1
【Three.js入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度
【Three.js入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度
589 0
【ThreeJs】(1)四大组件:场景、相机、物体、渲染器 | 创建一个矩形 | THREE脑图
【ThreeJs】(1)四大组件:场景、相机、物体、渲染器 | 创建一个矩形 | THREE脑图
391 0
【ThreeJs】(1)四大组件:场景、相机、物体、渲染器 | 创建一个矩形 | THREE脑图
|
前端开发
【ThreeJs】(2)照相机 | 正交投影照相机 | 透视投影照相机
【ThreeJs】(2)照相机 | 正交投影照相机 | 透视投影照相机
249 0
【ThreeJs】(2)照相机 | 正交投影照相机 | 透视投影照相机
|
图形学
【Unity Shader】(八) ------ 高级纹理之立方体纹理及光线反射、折射的实现
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_37027464/article/details/83511904 笔者使用的是 Unity 2018.2.0f2 + VS2017,建议读者使用与 Unity 2018 相近的版本,避免一些因为版本不一致而出现的问题。
2231 0