游戏蛮牛学习群(纯技术交流,不闲聊):959392658
新宝娱乐城博彩打不开 手机端
开发者专栏

关注:2372

当前位置:新宝娱乐城博彩打不开 技术专区 开发者专栏

__________________________________________________________________________________
开发者干货区版块规则:

  1、文章必须是图文形式。(至少2幅图)
      2、文章字数必须保持在1500字节以上。(编辑器右下角有字数检查)
      3、本版块只支持在游戏蛮牛原创首发,不支持转载。
      4、本版块回复不得无意义,如:顶、呵呵、不错......【真的会扣分的哦】
      5、......
__________________________________________________________________________________
查看: 1488|回复: 12
发新帖

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

[复制链接]  [移动端链接]
排名
46974
昨日变化
20

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

主题

35

帖子

46

积分

Rank: 9Rank: 9Rank: 9

UID
290419
好友
1
蛮牛币
64
威望
0
注册时间
2018-7-19
在线时间
5 小时
最后登录
2018-7-30
跳转到指定楼层
楼主
发表于 2018-7-19 18:04:50 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式

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

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

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, 下载次数: 22)

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

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

2018-02-10-12-22-52.jpg

6蛮牛粉丝
1364/1500
排名
3802
昨日变化
14

0

主题

804

帖子

1364

积分

Rank: 6Rank: 6Rank: 6

UID
210390
好友
0
蛮牛币
1638
威望
0
注册时间
2017-3-7
在线时间
182 小时
最后登录
2018-12-12
沙发
发表于 2018-7-20 09:30:21 | 只看该作者
[发帖际遇]: wdongzyzr 发帖时在路边捡到 2 蛮牛币,偷偷放进了口袋. 幸运榜 / 衰神榜

6蛮牛粉丝
1033/1500
排名
3093
昨日变化
1

1

主题

166

帖子

1033

积分

Rank: 6Rank: 6Rank: 6

UID
139214
好友
0
蛮牛币
1554
威望
0
注册时间
2016-3-12
在线时间
408 小时
最后登录
2018-11-22
板凳
发表于 2018-7-20 09:50:47 | 只看该作者

3偶尔光临
265/300
排名
5941
昨日变化
33

0

主题

21

帖子

265

积分

Rank: 3Rank: 3Rank: 3

UID
274569
好友
1
蛮牛币
1508
威望
0
注册时间
2018-3-28
在线时间
18 小时
最后登录
2018-12-13
地板
发表于 2018-7-20 09:53:30 | 只看该作者
学习一下

5熟悉之中
609/1000
排名
4025
昨日变化
2

3

主题

66

帖子

609

积分

Rank: 5Rank: 5

UID
259967
好友
1
蛮牛币
378
威望
0
注册时间
2017-12-16
在线时间
176 小时
最后登录
2018-12-11
5#
发表于 2018-7-23 09:39:11 | 只看该作者

排名
46974
昨日变化
20

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

3偶尔光临
283/300
排名
6937
昨日变化
3

0

主题

22

帖子

283

积分

Rank: 3Rank: 3Rank: 3

UID
261444
好友
0
蛮牛币
339
威望
0
注册时间
2017-12-27
在线时间
79 小时
最后登录
2018-12-11
7#
发表于 2018-7-23 20:40:41 | 只看该作者
6+12345 可以的  

2初来乍到
110/150
排名
34076
昨日变化
17

0

主题

76

帖子

110

积分

Rank: 2Rank: 2

UID
259940
好友
0
蛮牛币
8
威望
0
注册时间
2017-12-16
在线时间
26 小时
最后登录
2018-12-12
8#
发表于 2018-7-24 16:25:21 | 只看该作者
感谢大神分享经验

4四处流浪
493/500
排名
6999
昨日变化
2

0

主题

166

帖子

493

积分

Rank: 4

UID
243107
好友
0
蛮牛币
604
威望
0
注册时间
2017-9-13
在线时间
147 小时
最后登录
2018-12-10
9#
发表于 2018-7-25 10:27:16 | 只看该作者

6蛮牛粉丝
1124/1500
排名
1847
昨日变化
5

0

主题

133

帖子

1124

积分

Rank: 6Rank: 6Rank: 6

UID
188322
好友
0
蛮牛币
3938
威望
0
注册时间
2016-11-30
在线时间
291 小时
最后登录
2018-12-12
10#
发表于 2018-7-27 09:21:31 | 只看该作者
谢谢楼主的分享      

3偶尔光临
292/300
排名
8101
昨日变化
4

0

主题

90

帖子

292

积分

Rank: 3Rank: 3Rank: 3

UID
287597
好友
0
蛮牛币
454
威望
0
注册时间
2018-6-27
在线时间
56 小时
最后登录
2018-11-27
11#
发表于 2018-7-27 11:01:23 | 只看该作者
厉害厉害 受益匪浅

7日久生情
1780/5000
排名
1161
昨日变化

5

主题

214

帖子

1780

积分

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

UID
10760
好友
1
蛮牛币
3252
威望
0
注册时间
2013-12-20
在线时间
523 小时
最后登录
2018-12-1
12#
发表于 2018-7-28 14:53:49 | 只看该作者
目前为止最好的跳一跳方案了吧

5熟悉之中
544/1000
排名
8957
昨日变化
6

2

主题

121

帖子

544

积分

Rank: 5Rank: 5

UID
60012
好友
0
蛮牛币
4543
威望
0
注册时间
2014-12-8
在线时间
295 小时
最后登录
2018-12-3
13#
发表于 2018-8-6 11:32:57 | 只看该作者
很厉害的教程,其他的不说,就贝塞尔这点就学习了很多东西
[发帖际遇]: yilianxin 乐于助人,奖励 1 蛮牛币. 幸运榜 / 衰神榜

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

快速回复 新宝娱乐城博彩打不开 返回列表
  • 险!年近八旬老人就医晕倒 赞!医生不顾腰伤抱起抢救(图) 2018-12-13
  • 政府牵头凯迪集团债委会 违约处理牵融资市场神经 2018-12-13
  • 香港田径锦标赛飞人夺冠 2018-12-12
  • 李思思元元月亮姐姐 盘点央视主持人与子女温馨合影 2018-12-11
  • “忻州工匠”“忻州技能标兵”评选活动启动 2018-12-11
  • 包住内力,在不断变化中寻找契机,可出击可借力亦可卸力。 2018-12-10
  • 广州中考首用计算机辅助命题 满满的广州元素 2018-12-09
  • 植树、采茶、挖野菜…… 这才是春天正确的打开方式 2018-12-08
  • 【纯黑】《生化危机7》克里斯DLC不是英雄 2018-12-08
  • 150块地铁灯牌高调“炫父” 温暖南京城 2018-12-07
  • 【光明网专论】鞠立新:习近平新时代中国特色社会主义经济思想的内涵、逻辑和特质 2018-12-06
  • 江西“放管服”改革再出实招 2018-12-05
  • 首列商用磁浮2.0版列车下线 适用中心城市到卫星城间交通--旅游频道 2018-12-05
  • 空警-500改进型新照曝光,监控效率成倍提升 2018-12-04
  • 对美敲诈老手不能软越软越诈你要打就来 2018-12-04
  • 206| 491| 977| 679| 859| 711| 419| 387| 739| 671|