使用Canvas绘制星星闪烁的效果

JavaScript027

使用Canvas绘制星星闪烁的效果,第1张

如图所示,当鼠标移上canvas区域的时候,显示星星闪烁的效果,星星本身还会有一个缓慢飘动的速度,当星星飘出canvas区域的时候,该星星消失,canvas区域的某个地方又会重生一个星星。

首先准备两张图片:

背景图:girl.jpg

星星的序列帧图片:star.png

js库:commonFunctions.js

项目主文件:index.html

文件目录如下:

序列帧??

这是js的

把脚本拖到物体上,前提是要有mesh,然后给texture2d 数组赋值,直接拖动图片就行

var textures : Texture2D[]

private var i : float = 0

function Update ()

{

if ("这里写上发生这个事件的条件"//例如Input.GetMouseButton(0)就是点击左键切换)

{

i++ }

renderer.material.mainTexture = textures[i]

}

方法步骤如下。

方法步骤如下:

1.(Ctrl+T快捷键)在菜单中找到编辑纹理按钮;

2.选择宽高等,可以直接连点两个OK。

live2d是由日本Cybernoids公司开发,通过扭曲像素位置营造伪3d空间感的二维动画软件。官网下载安装包直接安装可以得到两种软件,分别是Cubism Modeler和Cubism Animator,最后我们还需要安装第三个软件Viewer用作预览调戏等。

1.蒙皮等参数信息moc文件导出

Live2D Cubism Moc(*.moc)文件是用于为CubismSDK提供绘制数据的文件格式。这个文件包含了图层、参数、坐标系和组件,这四部分信息。一个Moc文件和一个图像文件(用于存储纹理),在理论上就能够提供重现角色所需的全部信息(这里不包括动作动画)。

2.动画导出gif/序列帧。

3.动画导出技术可以使用的js文件。