CocosCreator开场CG动画制作

2024-04-26 01:42:12

CocosCreator开场CG动画制作

使用节点

VideoPlayer节点（在此之前需要进行链接内的操作：https://blog.csdn.net/qq135595696/article/details/121916153）
Button节点
ProgressBar节点

效果展示

制作实例

节点操作

层级管理器结构如下：

1.VideoPlayer

在此操作之前需要进行链接内的操作：https://blog.csdn.net/qq135595696/article/details/121916153

首先我们需要创建VideoPlayer节点，然后将我们的CG动画（mp4文件）插入到Clip内并设置Stay On Bottom为true（打勾）。

然后将Main Camera（主摄像头）的背景颜色的透明度设置为0。

然后Canvas中的Design Resolution、size需要设置跟CG动画宽高相等以及VideoPlayer节点的Size也许设置跟CG动画的宽高相等。

2.Button

首先需要创建Button节点。

然后需要绑定loading.js脚本。操作此步之前请先进行loading.js脚本部分的操作。

3.ProgressBar

首先创建ProgressBar节点。

同时在其内部创建两个子节点，分别是loading（label节点）用于显示“资源加载中”，number（label节点）用于显示资源加载百分比。

然后将active（即开始游戏不显示）置为false（取消勾选）即可。

loading.js脚本

其中，显示进度条百分比即ProgressBar下面的number节点（label节点）。

源码loading.js

cc.Class({extends: cc.Component,properties: {video: cc.VideoPlayer,//视频组件progress: cc.ProgressBar,//进度条组件label: cc.Label,//显示进度百分比btnStart: cc.Node,//进入游戏按钮},// LIFE-CYCLE CALLBACKS:// onLoad () {},//用于绑定Button节点OnClick() {this.btnStart.active = false;//进入游戏按钮不显示this.progress.node.active = true;//组件获取节点使用：组件.node，而节点获得组件使用：节点.getComponenet(组件类型)this.video.play();//播放动画},start() {},update(dt) {//  当前播放时长/总播放时长，currentTime用于获取当前视频播放进度//  getDuration()用于获取视频总播放时长this.progress.progress = this.video.currentTime / this.video.getDuration();//实时显示界面this.label.string = Math.floor(this.progress.progress * 100) + "%";//如果进度大于等于1，也就是视频播放完成，就切换到游戏场景（game）if (this.progress.progress >= 1) {cc.director.loadScene("game");}},
});

CocosCreator开场CG动画制作相关推荐

远程CG动画制作的神器：RayLink远程控制软件
近几年疫情变幻多端,加上数字经济的快速发展,直接助推各行各业信息化发展.越来越多企业打破传统固定办公室的限制,对工作场所的选择愈加灵活.自由化.诸如居家办公.外地出差办公.会议协同办公等远程办公的应用 ...
CG动画制作——实训项目前期工作（一）
项目实训开始的第一周,组内进行的基本是动画的前期准备阶段的工作,包括剧本.人物设计.概念草图等. 我们的动画将以Maya为主,辅助后期合成和剪辑软件,以及部分live2D画面组成. 本周我们主要完成了 ...
CG动画制作——实训项目中期工作（四）
接下来就是动画中另一个工作量比较大的部分了,龙的动画k帧. 因为没法运用动捕设备为龙这种动物类运动进行模仿,所以这部分动画是由我们进行手动一点点k帧k出来的. 首先,龙的运动与人类是很不一样的,在ma ...
CG动画制作项目第四篇：镜头的运用以及画面的布局
这一段时间主要开始的是我们动画二维部分的制作: 1.首先在已经画好的分镜稿上看清楚我们的画面的主要内容,以及要表现的方式 2.制作动画的demo来更直观的看出我们的制作的效果 3.开始手绘,完成我们最 ...
CG动画制作——实训项目前期工作（三）
进入第三周,我们的动画,虽然主要以3D为主,但在开篇为了表现故事的古老感,我们打算用2D运镜的方式,和简单的壁画羊皮纸的形式来表现. 因为故事需要讲述很久之前的事情,所以2D也不失为一种很好的表现方式 ...
CG动画制作项目第十二篇：后期剪辑以及音效、配音处理（二）
后期的制作,除了简单的视频剪辑之外,对于我们的项目来说,很关键的一点就是片头和片尾,部分动画的完整,就需要我们开场的故事背景的描述来引入动画.在我们的动画项目里,我们把片头的风格选择了二维的处理效果, ...
CG动画制作项目第十四篇：部分效果的处理（一）
动画的制作已经接近尾声了,最后的工作也只剩下合成了,我们来回忆一下部分效果是怎么实现的: 1.人物动作在人物动作上,动作捕捉出来的动作和我们手工K出来的动作骑士工作量是差不多的,但是手动K的关键帧容 ...
CG动画制作——实训项目中期工作（二）
动捕部分: 在动画的制作中,部分动作的实现如果仅仅靠着人工来k帧的话,会使得工作量变得异常庞大,而针对这个问题,动作捕捉设备的兴起以及动作捕捉技术的发展就变得尤为重要. 在我们的动画里,小孩(男主角) ...
CG动画制作项目第十篇：插件Form的使用
Trapcode Form是基于网格的三维粒子插件,与其它的粒子软件不同的是,它的粒子没有产生,生命值,死亡等基本属性,它的粒子从开始就存在.可以通过不同的图层贴图以及不同的场来控制粒子的大小形状等参 ...

最新文章

热门文章