恋活怎么让场景卡动起来

Posted 2023-05-06

1.打开恋活，点击“场景卡”，选中一张场景卡。 2.然后点击右上角的“+”。 3.然后在下拉菜单中点击“添加到场景”即可。 4.这时候就会看到场景卡已经被添加到场景卡列表中了。 5.然后点击场景卡右上角的“+”。 6.然后点击“添加到场景”。 7.这个时候就可以看到添加到场景的场景卡已经被添加到场景卡列表中了。 8.然后点击场景卡右上角的“+”。 9.然后点击“添加到场景”。 10.然后在下拉菜单中选中刚才添加到场景卡列表中的那张场景卡。 1.这时候就可以看到添加到场景的场景卡被添加到场景卡列表中了。 12.然后点击“播放”即可。
13.然后在播放列表中选中场景卡，点击“播放”。 参考技术A 需要timeline插件。由恋爱活动官方使用信息可知恋活需要timeline插件才能让场景卡动起来。《恋爱活动》是由日本ILLUSION制作的3D恋爱模拟类型游戏,于2018年4月27日发售。

用WebGL让目标动起来

在之前静态的示例中，我们现有的代码已被配置成每15毫秒就重新绘制一次WebGL的场景。但至今为止，每一次所绘制的场景都是相同的。让我们来改变这一点，使我们的正方形动起来。

在这个例子中，我们实际上对2D的正方形进行了三维旋转和移动；这证明即使我们建立的是一个2D的物体，但实际上它也是存在于3D空间中的。

旋转正方形

让我们从旋转正方形开始。首先我们需要一个变量来追踪正方形当前的旋转情况：

1. var squareRotation = 0.0;

复制代码

现在我们需要更新 drawScene() 函数将当前的旋转状态应用于绘制正方形。在将正方形移动到初始绘制位置后，使用如下方法进行旋转：

1. mvPushMatrix();
   

2. mvRotate(squareRotation, [1, 0, 1]);

复制代码

这段代码存储了当前模型视图矩阵，然后按照squareRotation的值绕X轴和Z轴旋转矩阵。

绘制完成后，需要加载回之前的矩阵：

1. mvPopMatrix();

复制代码

存储后再重加载原始矩阵的目的是：避免绘制其它图形时也受到这次旋转的影响。但在此例子中并没有绘制更多物体，所以在此这一步并没有实际意义。

为了让物体动起来，我们需要随时改变squareRotation的值。我们可以建立一个新的变量来追踪上一次动作的时间（可以称这个变量为 lastSquareUpdateTime ），并将如下代码添加到 drawScene() 函数的末尾：

1. var currentTime = Date.now();
   

2.   if (lastSquareUpdateTime) {
   

3.           var delta = currentTime - lastSquareUpdateTime;
   

4.           
   

5.           squareRotation += (30 * delta) / 1000.0;
   

6.   }
   

7.   
   

8.   lastSquareUpdateTime = currentTime;

复制代码

这段代码用当前时间与上次动作的时间差更新 squareRotation 决定旋转的角度。

移动正方形

在绘制正方形之前，可以先将图形移动到其它位置。下面的例子展示的是非常基础的动作——当然，在实际操作中一般不会用如此奇怪的变换。

让我们用一些新的变量来追踪每个轴的偏移量：

1. var squareXOffset = 0.0;
   

2. var squareYOffset = 0.0;
   

3. var squareZOffset = 0.0;

复制代码

用如下的变量来表示每个轴上的变化量：

1. var xIncValue = 0.2;
   

2. var yIncValue = -0.4;
   

3. var zIncValue = 0.3;

复制代码

在之前的旋转代码中加入如下的部分：

1. squareXOffset += xIncValue * ((30 * delta) / 1000.0);
   

2.     squareYOffset += yIncValue * ((30 * delta) / 1000.0);
   

3.     squareZOffset += zIncValue * ((30 * delta) / 1000.0);
   

4.     
   

5.     if (Math.abs(squareYOffset) > 2.5) {
   

6.       xIncValue = -xIncValue;
   

7.       yIncValue = -yIncValue;
   

8.       zIncValue = -zIncValue;
   

9.     }

复制代码

最后，将下面的代码加入 drawScene()  函数中：

1. mvTranslate([squareXOffset, squareYOffset, squareZOffset]);

复制代码

如下所示，正方形在旋转的过程中会缩放，在画布上随机移动且相对于观测者的位置循环地拉近缩远。它看起来更像一个屏幕保护程序。

更多矩阵操作

这个例子中使用了其他一些矩阵操作，包括两个用于保存矩阵的入栈出栈函数，以及一个将矩阵旋转特定的角度的函数。代码如下：

1. var mvMatrixStack = [];
   

2. 
   

3. function mvPushMatrix(m) {
   

4.   if (m) {
   

5.     mvMatrixStack.push(m.dup());
   

6.     mvMatrix = m.dup();
   

7.   } else {
   

8.     mvMatrixStack.push(mvMatrix.dup());
   

9.   }
   

10. }
    

11. 
    

12. function mvPopMatrix() {
    

13.   if (!mvMatrixStack.length) {
    

14.     throw("Can't pop from an empty matrix stack.");
    

15.   }
    

16.   
    

17.   mvMatrix = mvMatrixStack.pop();
    

18.   return mvMatrix;
    

19. }
    

20. 
    

21. function mvRotate(angle, v) {
    

22.   var inRadians = angle * Math.PI / 180.0;
    

23.   
    

24.   var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
    

25.   multMatrix(m);
    

26. }

复制代码