新宝娱乐城赌球: 白鹭教育 [微信小游戏《跳一跳》4:动画]

14
回复
2691
查看
打印 上一主题 下一主题
[ 复制链接 ]
排名
48130
昨日变化

新宝娱乐城博彩打不开 www.sl6cl.com.cn 4

主题

35

帖子

46

积分

Rank: 9Rank: 9Rank: 9

UID
290419
好友
1
蛮牛币
64
威望
0
注册时间
2018-7-19
在线时间
5 小时
最后登录
2018-7-30

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
跳跃动画的原理
要实现微信跳一跳的跳跃动画,有很多的方式,微信的做法是使用3D游戏中的,抛物运动,即高中物理里面的向上抛,之后做自由裸体运动。 我们的教程是使用2D引擎,做这个跳跃动画更简单,我们已经知道了起跳点和落点,只需要在这两个点之间沿着弧线运动即可。 弧线的实现逻辑也有很多中,包括半圆形弧度,三角函数弧度,以及贝塞尔曲线。这门这里使用二阶贝塞尔曲线。
贝塞尔曲线
贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。  1962年,法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法,并给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名,称为贝塞尔曲线。
以下公式中:B(t)为t时间下 点的坐标; P0为起点,Pn为终点,Pi为控制点;
  • 一阶贝塞尔曲线(线段):给定点p0、p1,线性贝塞尔曲线只是一条两点之间的直线

  • 二阶贝塞尔曲线(抛物线):二次方贝塞尔曲线的路径由给定点p0、p1、p2的函数B(t)的抛物线

  • 三阶贝塞尔曲线:p0、p1、p2、p3四个点在平面或在三维空间定义了三次贝塞尔曲线。曲线起始于p0走向p1,并从p2的方向来到p3.一般不会经过p1或者p2;这两点只是在那里提供了方向资讯。p0和p1之间的间距,决定了曲线在转而趋进p3之前,走向p2方向的长度

贝塞尔曲线在跳一跳中的运用
从上面的图示可以看出,贝塞尔曲线其实就是由点来控制线,并且随着变量t从0到1来完整整个曲线运动。 那对于我们微信跳一跳来说,二阶贝塞尔曲线(抛物线)足够来完成跳跃动画了。
在我们跳一跳的游戏中,小 i 的起跳点是P0点,落点是P2点,下面我们来定一下P1点,这里我们默认P1位于P0和P2的中轴线上,并且在P2的上方300偏移量的位置处。
      
[JavaScript] 纯文本查看 复制代码
// P1的x轴坐标
  (this.player.x + this.targetPos.x) / 2
   // P1的y轴坐标
   this.targetPos.y - 300
设置贝塞尔曲线的因子变化函数factor,说白了这里就是不停的去修改上述的 「t」,让它在一定的时间内从0到1,这样就可以完成整个曲线运动,由于一个点由x轴和y轴确定,所以我们分别对这两个方向做贝塞尔计算。以x轴举例说明:
  • P0:this.player.x
  • P1:(this.player.x + this.targetPos.x) / 2
  • P2:this.targetPos.x

      
[JavaScript] 纯文本查看 复制代码
public set factor(value: number) {
this.player.x = (1 - value) * (1 - value) * this.player.x + 2 * value * (1 - value) * (this.player.x + this.targetPos.x) / 2 + value * value * (this.targetPos.x);
this.player.y = (1 - value) * (1 - value) * this.player.y + 2 * value * (1 - value) * (this.targetPos.y - 300) + value * value * (this.targetPos.y);
}
执行跳跃动画
上面我们已经把跳跃的点和不停变化的factor方法写好,接下来就是不停的调用factor的setter方法:
     
[JavaScript] 纯文本查看 复制代码
     egret.Tween.get(this).to({ factor: 1 }, 500).call(() => {
// 判断跳跃是否成功
           ...
});
跳跃结束后,我们开始判断跳跃是否成功,注意,无论成功还是失败,这里都需要做一些处理:恢复小 i 的高度和清空蓄力
         
[JavaScript] 纯文本查看 复制代码
this.player.scaleY = 1;
       this.jumpDistance = 0;
执行小人空翻动画
跳一跳的游戏,在跳跃的过程中会伴随空中翻转360°首先我们设置小 i 的锚点,让它围绕中心翻转:
  
[JavaScript] 纯文本查看 复制代码
this.player.anchorOffsetY = this.player.height / 2;
接下来,执行翻转动画,我们通过rotation这个属性来控制旋转。另外注意,动画结束之后,要立刻恢复小 i 的中心点在底部,即恢复小 i 的初始锚点,另外也恢复旋转角度:
        
[JavaScript] 纯文本查看 复制代码
 egret.Tween.get(this.player).to({ rotation: this.direction > 0 ? 360 : -360 }, 200).call(() => {
this.player.rotation = 0
this.player.anchorOffsetY = this.player.height - 20;
})
因为涉及向左跳还是向右跳,所以rotation: this.direction > 0 ? 360 : -360 来控制正向旋转还是逆向旋转。
判断落点是否在方块盒子上
判断落点是否成功跳跃到下一个盒子上,有很多思路,例如碰撞检测,相对位置计算等等。 碰撞检测比较简单,就是判断小 i 和下一个盒子是否重叠,不过由于我们图片自带阴影和侧面,所以不容易区分小i是否「站在」的盒子正面上。 我们这里使用的相对位置,即小 i 的落点举例盒子方块的「中心点」
从上图可以看出,小 i 的落点和方块的中间点有一段距离,我们设定为70(可以适当调整) 另外已知了两个点的坐标:
      
[JavaScript] 纯文本查看 复制代码
// 落下的方块中心点
  ( this.currentBlock.x, this.currentBlock.y)
      // 落下的小 i 中心点
  ( this.player.x, this.player.y)
通过勾股定理可以计算 判断距离 :x2+y2 = z2,js中Math的pow()方法可以方便的实现平方的操作,相对x的平方+相对y的平方 <= 相对距离的平方 :
  
[JavaScript] 纯文本查看 复制代码
Math.pow(this.currentBlock.x - this.player.x, 2) + Math.pow(this.currentBlock.y - this.player.y, 2) <= 70 * 70
判断落点是否在方块盒子上的代码如下:
      
[JavaScript] 纯文本查看 复制代码
private judgeResult() {
// 根据this.jumpDistance来判断跳跃是否成功
if (Math.pow(this.currentBlock.x - this.player.x, 2) + Math.pow(this.currentBlock.y - this.player.y, 2) <= 70 * 70) {
// 成功
...
} else {
// 失败,弹出重新开始的panel
console.log('游戏失败!')
this.overPanel.visible = true;
this.overScoreLabel.text = this.score.toString();
}
}
游戏失败后的逻辑就是显示失败的场景,设置积分显示即可。
跳跃成功
跳跃成功后的逻辑如下:
  • 更新积分

  
[JavaScript] 纯文本查看 复制代码
// 更新积分
this.score++;
this.scoreLabel.text = this.score.toString();
  • 随机下一个方块出现的位置

  
[JavaScript] 纯文本查看 复制代码
// 更新积分
this.score++;
this.scoreLabel.text = this.score.toString();
  • 计算当前方块要移动到相应跳跃点的距离

  // 跳跃成功之后,小 i 和它脚下的盒子,已经整个舞台都要移动到下一个跳跃的位置,然后出现下一个方块,让小 i 来继续跳跃。舞台的移动
首先我们先看一下左右两侧的「跳台」:
计算当前方块要移动到相应跳跃点的距离跳跃成功之后,根据下一个方块出现的位置的「反方向」,判定当前小 i 和它脚下的方块,要移动到对应的跳台。例如下一个方块出现在左侧,当小 i 和它脚下的方块要移动到右侧跳台,这样才能从左跳到右,从右跳到左边:
  
[JavaScript] 纯文本查看 复制代码
// 当前方块要移动到相应跳跃点的距离
var blockX, blockY;
blockX = this.direction > 0 ? this.leftOrigin.x : this.rightOrigin.x;
blockY = this.height / 2 + this.currentBlock.height;
blockX和blockY就是所有方块盒子以及小 i 要移动的位移,接下来就是让他们做动画,例如小 i 的位移动画:
  
[JavaScript] 纯文本查看 复制代码
// 小人要移动到的点.
var playerX, PlayerY;
playerX = this.player.x - (this.currentBlock.x - blockX);
PlayerY = this.player.y - (this.currentBlock.y - blockY);
// 更新小人的位置,做位移动画
egret.Tween.get(this.player).to({
x: playerX,
y: PlayerY
}, 1000).call(() => {
// 开始创建下一个方块
this.addBlock();
// 让屏幕重新可点;
this.blockPanel.touchEnabled = true;
})
所有方块的位移动画,所有方块都在blockArr这个数组里,我们只需要遍历它,然后像小 i 一样做位移动画就可以了。
  
[JavaScript] 纯文本查看 复制代码
private update(x, y) {
for (var i: number = 0; i < this.blockArr.length; i++) {
var blockNode = this.blockArr[i];
egret.Tween.get(blockNode).to({
x: blockNode.x - x,
y: blockNode.y - y
}, 1000)
}
}
游戏结束场景简介
之前我们简单的提及到游戏结束场景,它是嵌在GameScene游戏场景中的。
从上图可以看出,游戏结束场景包含以下几部分:
  • 透明底层
  • 本次得分
  • 再来一局

我们把上述组件包裹在overPanel的Group中,方便整个场景的显示和隐藏。
创建游戏结束场景
在GameScene.exml中添加id为overPanel的Group:注意:拖动的时候,尽量别直接拖动到屏幕内,那样的话意味着添加到blockPanel这个场景中去了。 当然如果新的Group添加到了blockPanel中去了,你可以删除重新添加,也可以拖动来选择跳出blockPanel。添加控件下的Rect 组件(矩形绘图元素)Rect 设置整屏适配并且设置0.6的填充色:
添加本次得分(两个label),并设置得分label的ID为overScoreLabel,字体为90,高度为90,设置水平居中,垂直方向可以根据个人审美微调:
设置「再来一局按钮」:
设置overPanel初始为隐藏状态:
添加overPanel中所有组件到GameScene.ts中去:
再来一局
给「再来一局」 的button按钮绑定事件
     
[JavaScript] 纯文本查看 复制代码
     // 绑定结束按钮
this.restart.addEventListener(egret.TouchEvent.TOUCH_TAP, this.restartHandler, this);
实现再来一局的逻辑:
      
[JavaScript] 纯文本查看 复制代码
// 重新一局
private restartHandler() {
// 隐藏结束场景
this.overPanel.visible = false;
// 置空积分
this.score = 0;
this.scoreLabel.text = this.score.toString();
// 开始放置方块
this.reset();
// 游戏场景可点
this.blockPanel.touchEnabled = true;
}
对象池
上一章节的结语中说过,我们在判定小 i 跳跃成功,整个舞台中的盒子移动后,没有对超出屏幕的盒子进行处理。 如果不对上述情况的对象做销毁处理的话,那么内存会存在大量的垃圾数据,最终导致页面卡顿,甚至页面卡死闪退。 所以我们判断方块的坐标,如下三种情况,可直接判定方块超出屏幕:
file:///Users/wangqianqian/Desktop/%E6%95%99%E8%82%B2%E8%B5%84%E6%96%99/%E6%B8%B8%E6%88%8F%E8%9B%AE%E7%89%9B/%E8%B7%B3%E4%B8%80%E8%B7%B3%20%E7%B2%BE%E5%93%81%E6%96%87%E7%AB%A0/%E8%B7%B3%E4%B8%80%E8%B7%B3/4/_image/2018-02-09-18-17-00.jpg?lastModify=1531993597
由于方块的锚点是「中心点」,所以判定位置的时候,一定要加上锚点相对应的数值:
  • 第一种情况:blockNode.x + (blockNode.width - 222) < 0 ;
  • 第二种情况:blockNode.x - 222 > this.width
  • 第三种情况:blockNode.y - 78 > this.height

以上三种情况任一为真,则可判定方块已经超出屏幕,我们可以对其进行回收:
  
[JavaScript] 纯文本查看 复制代码
for (var i: number = this.blockArr.length - 1; i >= 0; i--) {
var blockNode = this.blockArr[i];
if (blockNode.x + (blockNode.width - 222) < 0 || blockNode.x - 222 > this.width || blockNode.y - 78 > this.height) {
// 方块超出屏幕,从显示列表中移除
this.blockPanel.removeChild(blockNode);
this.blockArr.splice(i, 1);
// 添加到回收数组中
this.reBackBlockArr.push(blockNode);
} else {
// 没有超出屏幕的话,则移动
egret.Tween.get(blockNode).to({
x: blockNode.x - x,
y: blockNode.y - y
}, 1000)
}
}
运行游戏后,我们在每次跳跃结束后,打印一下console.log(this.blockArr),可以发现,数组的数量保持在3~4个方块,也就是说,我们跳来跳去,都是在这3~4个对象上。
注意事项:
  • window环境下的微信开发工具的安装路径不要自定义,否则Egret Wing工具无法呼起。
  • Egret Wing的命令如果遇到无法使用,可尝试重启软件或者卸载重装。
  • Egret Launcher无法设置发布的情况,可以使用命令egret publish --target wxgame来编辑发布。
  • 如果遇到引擎报错,可使用最新的引擎,并egret clean 清空缓存后 egret build。


2018-02-10-12-29-39.jpg (227.33 KB, 下载次数: 65)

2018-02-10-12-29-39.jpg

2018-02-10-12-22-52.jpg (342.62 KB, 下载次数: 78)

2018-02-10-12-22-52.jpg
7日久生情
1535/5000
排名
3443
昨日变化

0

主题

895

帖子

1535

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
210390
好友
0
蛮牛币
1835
威望
0
注册时间
2017-3-7
在线时间
206 小时
最后登录
2019-5-23
沙发
2018-7-20 09:30:21 只看该作者
6蛮牛粉丝
1084/1500
排名
3054
昨日变化

1

主题

168

帖子

1084

积分

Rank: 6Rank: 6Rank: 6

UID
139214
好友
0
蛮牛币
1624
威望
0
注册时间
2016-3-12
在线时间
431 小时
最后登录
2019-3-7
板凳
2018-7-20 09:50:47 只看该作者
4四处流浪
458/500
排名
4110
昨日变化

1

主题

23

帖子

458

积分

Rank: 4

UID
274569
好友
1
蛮牛币
2254
威望
0
注册时间
2018-3-28
在线时间
74 小时
最后登录
2019-5-24
地板
2018-7-20 09:53:30 只看该作者
学习一下
5熟悉之中
684/1000
排名
3970
昨日变化

3

主题

78

帖子

684

积分

Rank: 5Rank: 5

UID
259967
好友
1
蛮牛币
608
威望
0
注册时间
2017-12-16
在线时间
217 小时
最后登录
2019-5-25
5#
2018-7-23 09:39:11 只看该作者
排名
48130
昨日变化

4

主题

35

帖子

46

积分

Rank: 9Rank: 9Rank: 9

UID
290419
好友
1
蛮牛币
64
威望
0
注册时间
2018-7-19
在线时间
5 小时
最后登录
2018-7-30
6#
楼主 2018-7-23 11:58:54 只看该作者
源码下载:链接:https://pan.baidu.com/s/1D3cgQHR7vOZ_Gdc6gSoiqw  密码:88q3
5熟悉之中
632/1000
排名
4446
昨日变化

8

主题

60

帖子

632

积分

Rank: 5Rank: 5

UID
261444
好友
0
蛮牛币
1809
威望
0
注册时间
2017-12-27
在线时间
220 小时
最后登录
2019-5-24
7#
2018-7-23 20:40:41 只看该作者
6+12345 可以的  
2初来乍到
115/150
排名
34883
昨日变化

0

主题

80

帖子

115

积分

Rank: 2Rank: 2

UID
259940
好友
0
蛮牛币
-1
威望
0
注册时间
2017-12-16
在线时间
27 小时
最后登录
2019-1-5
8#
2018-7-24 16:25:21 只看该作者
感谢大神分享经验
4四处流浪
496/500
排名
7132
昨日变化

0

主题

166

帖子

496

积分

Rank: 4

UID
243107
好友
0
蛮牛币
609
威望
0
注册时间
2017-9-13
在线时间
148 小时
最后登录
2019-1-6
9#
2018-7-25 10:27:16 只看该作者
6蛮牛粉丝
1251/1500
排名
1761
昨日变化

0

主题

157

帖子

1251

积分

Rank: 6Rank: 6Rank: 6

UID
188322
好友
0
蛮牛币
4298
威望
0
注册时间
2016-11-30
在线时间
342 小时
最后登录
2019-5-24
10#
2018-7-27 09:21:31 只看该作者
谢谢楼主的分享      
3偶尔光临
293/300
排名
8243
昨日变化

0

主题

90

帖子

293

积分

Rank: 3Rank: 3Rank: 3

UID
287597
好友
0
蛮牛币
459
威望
0
注册时间
2018-6-27
在线时间
57 小时
最后登录
2019-1-21
11#
2018-7-27 11:01:23 只看该作者
厉害厉害 受益匪浅
7日久生情
1859/5000
排名
1159
昨日变化

5

主题

222

帖子

1859

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
10760
好友
1
蛮牛币
3208
威望
0
注册时间
2013-12-20
在线时间
568 小时
最后登录
2019-5-25
12#
2018-7-28 14:53:49 只看该作者
目前为止最好的跳一跳方案了吧
5熟悉之中
572/1000
排名
9109
昨日变化

2

主题

125

帖子

572

积分

Rank: 5Rank: 5

UID
60012
好友
0
蛮牛币
5070
威望
0
注册时间
2014-12-8
在线时间
317 小时
最后登录
2019-5-23
13#
2018-8-6 11:32:57 只看该作者
很厉害的教程,其他的不说,就贝塞尔这点就学习了很多东西
2初来乍到
141/150
排名
22151
昨日变化

0

主题

48

帖子

141

积分

Rank: 2Rank: 2

UID
282476
好友
0
蛮牛币
155
威望
0
注册时间
2018-5-23
在线时间
72 小时
最后登录
2019-5-23
14#
2018-12-17 15:48:04 只看该作者
66666666666666666666
2初来乍到
120/150

0

主题

64

帖子

120

积分

Rank: 2Rank: 2

UID
131778
好友
0
蛮牛币
5
威望
0
注册时间
2015-12-15
在线时间
56 小时
最后登录
2019-5-15
15#
2019-3-20 15:24:51 只看该作者
好东西,赞,学习下
您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

  • 赵孟頫:书法大师是怎么炼成的? 2019-05-26
  • 环境保护腰杆硬起来(在习近平新时代中国特色社会主义思想指引下——新时代新作为新篇章) 2019-05-26
  • 阳泉市旅发委对全市挂牌督办建设项目进行督导 2019-05-25
  • 苹果-热门标签-华商生活 2019-05-25
  • 图片故事:人民日报编辑部的一天 2019-05-24
  • 人民日报评论员:共创中华民族伟大复兴的美好未来 2019-05-24
  • 女性之声——全国妇联 2019-05-23
  • 中国智能手机在东南亚受追捧 2019-05-22
  • 一语惊坛(5月10日):半岛和平,是中朝两国的共同愿望。 2019-05-22
  • 董卿白岩松朱广权 看看央视主持人大学就读啥院系 2019-05-21
  • 邓超陈冠希焦恩俊,刷新娱乐圈女儿奴新高度 2019-05-21
  • 紫光阁中共中央国家机关工作委员会 2019-05-20
  • 四个跌停后 金洲慈航不惜食言也要选择如此停牌自救 2019-05-19
  • 无论是否想怀孕 这串数字女性要知道 2019-05-18
  • 机遇与挑战并存 中国企业“走出去”行稳致远 2019-05-17
  • 547| 127| 475| 483| 476| 126| 441| 741| 538| 528|