超级幻影了解一下?
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/f5e0f5c09799d1764e31b56ac7c047f1.jpeg)
基本原理
利用摄像机拍摄角色,然后投影到多个显示画布,给画布节点设置不同的透明度,最后让画布节点跟随角色移动。
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/d845955026c78b31dd9af00df07d88de.png)
创建角色和摄像机
创建一个新的typescript项目。
创建一个角色节点,并添加分组
创建一个角色节点,并添加分组
role
。
接着在角色节点里添加一个摄像机,并将摄像机的拍摄分组选为role
。
创建显示画布
在场景中添加多个sprite用于这个摄像机显示的画布。
因为用摄像机会上下反转,要修改
scaleY
为
-1
。
并将它放在角色节点的下一层级,大小调整为角色节点大小,位置和角色节点一样。
将画布的透明度设置为不同的数值。
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/055776302ef17ad36496cc53097145da.jpeg)
绑定摄像机到显示画布
修改
Helloworld.ts
里的代码,添加摄像机
camera
,角色节点和画布数组
sprite
的声明。
绑定
camera
的
targetTexture
到显示画布
spriteFrame
。
参考代码如下:
//Helloworld.ts
const { ccclass, property } = cc._decorator;
@ccclass
export default class Helloworld extends cc.Component {
@property(cc.Camera)
camera: cc.Camera = null;
@property([cc.Sprite])
sp_cameras: cc.Sprite[] = [];
@property(cc.Node)
node_icon: cc.Node = null;
onLoad() {
const texture = new cc.RenderTexture();
texture.initWithSize(this.sp_cameras[0].node.width, this.sp_cameras[0].node.height);
const spriteFrame = new cc.SpriteFrame();
spriteFrame.setTexture(texture);
this.camera.targetTexture = texture;
this.sp_cameras.forEach((v) => {
v.spriteFrame = spriteFrame
})
}
}
将摄影机,角色节点和画布绑定脚本上:
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/ef4ad7758e450f38b419450bf51f634a.jpeg)
显示画布的跟随
可以监听node节点
cc.Node.EventType.TOUCH_MOVE
事件控制角色节点移动。
参考代码:
onLoad() {
//...
this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onNodeIconTouchMove, this);
}
private onNodeIconTouchMove(evt: cc.Event.EventTouch) {
this.node_icon.x += evt.getDeltaX();
this.node_icon.y += evt.getDeltaY();
}
设置一个定时器,让画布节点跟随角色节点运动。
参考代码:
onLoad() {
//...
this.schedule(this.shadowFollow, 0.1, cc.macro.REPEAT_FOREVER);
}
private shadowFollow() {
this.sp_cameras.forEach((v, i) => {
const dis = this.node.position.sub(v.node.position).mag();
if (dis > 0) {
v.node.stopAllActions();
v.node.runAction(cc.moveTo(i * 0.05 + 0.02, this.node_icon.x, this.node_icon.y));
}
})
}
效果预览
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/136ce940394918a59712c1e37dcb3a85.gif)
点击【阅读原文】获取项目代码
你可能还喜欢
关注【白玉无冰】每天进步一点点
![640?wx_fmt=gif](https://i-blog.csdnimg.cn/blog_migrate/12465b2ae9402fc2415153d3f042219f.gif)
![640?](https://i-blog.csdnimg.cn/blog_migrate/984bbb39520769a1bc4643f20925ecf4.png)
![640?wx_fmt=png](https://i-blog.csdnimg.cn/blog_migrate/edc853f472e8211d4c6c01842e228ce9.png)
Creator星球游戏开发社区
长按二维码,关注我们!