3D小游戏(three)-Bottle跳跃动画实现

跳跃动画实现

objects/bottle.js

import gameConf from '../../confs/game-conf'

constructor () {

//物体跳跃参数

this.status = 'stop'

this.velocity = {

vx: 0, // 水平方向速度

vy: 0 //竖直方向速度

}

this.flyingTime = 0

this.direction = 0

this.scale = 1

}

update() {//实时刷新

if (this.status == 'shrink') {//点击时收缩

this._shrink()

} else if (this.status == 'jump') {//点击释放时跳跃

//计算释放时间与点击时间差值

const tickTime = Date.now() - this.lastFrameTime

this._jump(tickTime)

}

this.head.rotation.y += 0.06

this.lastFrameTime = Date.now()//上帧时间

}

shrink () {//改变物体状态（静止或收缩或跳跃）

this.status = 'shrink'

}

_shrink () {//具体如何收缩实现

const DELTA_SCALE = 0.005//每帧收缩幅度

const HORIZON_DELTA_SCALE = 0.007

const HEAD_DELTA = 0.03

const MIN_SCALE = 0.55

this.scale -= DELTA_SCALE

this.scale = Math.max(MIN_SCALE, this.scale)

if (this.scale <= MIN_SCALE) {//最小值限制

return

}

this.body.scale.y = this.scale

this.body.scale.x += HORIZON_DELTA_SCALE

this.body.scale.z += HORIZON_DELTA_SCALE

this.head.position.y -= HEAD_DELTA

const bottleDeltaY = HEAD_DELTA / 2

const deltaY = blockConf.height * DELTA_SCALE / 2

this.obj.position.y -= (bottleDeltaY + deltaY * 2)

}

jump (duration) {//改变物体状态（静止或收缩或跳跃）

this.status = 'jump'

}

_jump(tickTime) {//具体跳跃实现（传参：点击与释放的间隔时间）添加game-conf

const t = tickTime / 1000

this.flyingTime = this.flyingTime + t//

const translateH = this.velocity.vx * t

const translateY = this.velocity.vy * t - 0.5 * gameConf.gravity * t * t - gameConf.gravity * this.flyingTime * t

this.obj.translateY(translateY)

this.obj.translateOnAxis(this.axis, translateH)

// console.log('跳跃完成')

}

stop () {//停止跳跃

this.status = 'stop'

this.velocity = {

vx: 0, // 水平方向速度

vy: 0 //竖直方向速度

}

this.flyingTime = 0

this.scale = 1

}

setDirection (direction, axis) {//设置跳跃方向

this.direction = direction

this.axis = axis

}

rotate () {//物体旋转点击释放时调用

const scale = 1.4

this.human.rotation.z = this.human.rotation.x = 0

if (this.direction == 0) { // x

customAnimation.to(this.human.rotation, 0.14, { z: this.human.rotation.z - Math.PI })

customAnimation.to(this.human.rotation, 0.18, { z: this.human.rotation.z - 2 * Math.PI, delay: 0.14 })

customAnimation.to(this.head.position, 0.1, { y: this.head.position.y + 0.9 * scale, x: this.head.position.x + 0.45 * scale })

customAnimation.to(this.head.position, 0.1, { y: this.head.position.y - 0.9 * scale, x: this.head.position.x - 0.45 * scale, delay: 0.1 })

customAnimation.to(this.head.position, 0.15, { y: 7.56, x: 0, delay: 0.25 })

customAnimation.to(this.body.scale, 0.1, { y: Math.max(scale, 1), x: Math.max(Math.min(1 / scale, 1), 0.7), z: Math.max(Math.min(1 / scale, 1), 0.7) })

customAnimation.to(this.body.scale, 0.1, { y: Math.min(0.9 / scale, 0.7), x: Math.max(scale, 1.2), z: Math.max(scale, 1.2), delay: 0.1 })

customAnimation.to(this.body.scale, 0.3, { y: 1, x: 1, z: 1, delay: 0.2 })

} else if (this.direction == 1) { // z

customAnimation.to(this.human.rotation, 0.14, { x: this.human.rotation.x - Math.PI })

customAnimation.to(this.human.rotation, 0.18, { x: this.human.rotation.x - 2 * Math.PI, delay: 0.14 })

customAnimation.to(this.head.position, 0.1, { y: this.head.position.y + 0.9 * scale, z: this.head.position.z - 0.45 * scale })

customAnimation.to(this.head.position, 0.1, { z: this.head.position.z + 0.45 * scale, y: this.head.position.y - 0.9 * scale, delay: 0.1 })

customAnimation.to(this.head.position, 0.15, { y: 7.56, z: 0, delay: 0.25 })

customAnimation.to(this.body.scale, 0.05, { y: Math.max(scale, 1), x: Math.max(Math.min(1 / scale, 1), 0.7), z: Math.max(Math.min(1 / scale, 1), 0.7) })

customAnimation.to(this.body.scale, 0.05, { y: Math.min(0.9 / scale, 0.7), x: Math.max(scale, 1.2), z: Math.max(scale, 1.2), delay: 0.1 })

customAnimation.to(this.body.scale, 0.2, { y: 1, x: 1, z: 1, delay: 0.2 })

}

}

pages/game.js

bindTouchEvent(){//绑定监听事件

canvas.addEventListener('touchstart',this.touchStartCallback)

canvas.addEventListener('touchend',this.touchEndCallback)

}

removeTouchEvent () {//解除监听事件

console.log('remove touch event')

canvas.removeEventListener('touchstart', this.touchStartCallback)

canvas.removeEventListener('touchend', this.touchEndCallback)

}

touchStartCallback = (e) => {//用箭头函数确保this指向正确

this.touchStartTime = Date.now()

this.state = 'prepare'

this.bottle.shrink()

}

touchEndCallback = (e) => {

this.touchEndTime = Date.now()

const duration = this.touchEndTime - this.touchStartTime

this.bottle.velocity.vx = Math.min(duration / 6, 400)

this.bottle.velocity.vx = +this.bottle.velocity.vx.toFixed(2)

this.bottle.velocity.vy = Math.min(150 + duration / 20, 400)

this.bottle.velocity.vy = +this.bottle.velocity.vy.toFixed(2)

this.state = 'jump'//开启跳跃

this.bottle.rotate()//开启旋转

this.bottle.jump(duration)

// this.updateNextBlock()

}

setDirection (direction) {//设置跳跃方向，在Blockinit中加载

const currentPosition = {

x: this.bottle.obj.position.x,

z: this.bottle.obj.position.z

}

this.axis = new THREE.Vector3(this.targetPosition.x - currentPosition.x, 0, this.targetPosition.z - currentPosition.z)

this.axis.normalize()

this.bottle.setDirection(direction, this.axis)

}

在addInitBlock中

//设置跳跃方向

const initDirection = 0

this.targetPosition = {

x: 23,

y: 0,

z: 0

}

this.setDirection(initDirection)

3D小游戏(three)-Bottle跳跃动画实现相关推荐

新春特辑|Cocos 精品 2D、3D 小游戏合集
今日 C 姐精选了 40+ 款基于 Cocos Creator 开发的 2D.3D 小游戏,推荐给各位开发者在春节假期休闲玩耍,也希望能通过这些小游戏,让大家更加了解 Cocos Creator . ...
3D 小游戏《欢乐贪吃龙》关键技术盘点 | Cocos 技术派第13期
<欢乐贪吃龙>是由 SK2GAME 基于 Cocos Creator v2.2 研发的一款 3D 休闲小游戏,游戏画面卡通精美,玩法简单,玩家将扮演一只"贪吃龙",在 ...
视频教程-Layabox3D游戏开发入门-微信3D小游戏案例 -微信开发
Layabox3D游戏开发入门-微信3D小游戏案例有多年Unity程序开发经验,有策划和美术设计的经验.愿意在csdn这个平台和大家一起分享! 金龙 ¥29.00 立即订阅扫码下载「CSDN程序员 ...
原来微信里有这么多好玩的3D小游戏了
自从<跳一跳>打开微信小游戏之门伊始,小游戏之势已然燎原.小编体验了上千款微信小游戏,虽然当前仍是以2D休闲游戏为主,但是3D小游戏也越来越多了(悄悄的说一下,小编已知的3D游戏里除了2款 ...
3D小游戏开发经验总结：建模、逻辑实现、渲染与玩家控制
最近准备接触一下3D手机游戏开发,因此利用空闲时间制作了一个iPhone 上面的3D小游戏.因为以前没有在实际项目中应用过OpenGLES 2.0,通过这次开发,积累了不少实战经验,为了分享经验,也为 ...
白鹭引擎助力《迷你世界》研发团队开发3D小游戏版
<迷你世界>作为国内第一的放置类3D沙盒游戏,依靠三四线城市的游戏市场及垂直媒体的传播途径,研发团队用了短短3年时间就创造出了8000万活跃玩家.5000万玩家原创作品,仅2020年上半年 ...
python小游戏编程arcade----坦克动画图片合成
python小游戏编程arcade----坦克动画图片合成前言坦克动画图片合成 1.PIL image 1.1 读取文件并转换 1.2 裁切,粘贴 1.3 效果图 1.4 代码实现 2.处理图片的 ...
CocosCreator之KUOKUO带你入门3D小游戏-躲避方块
本次引擎2.1.0 编辑工具VSCode 目标:3D小游戏躲避方块 2.1.0版本已经出来好几天了,虽然有些地方还不够完善, 但是毕竟是能写3D游戏了,简单的来写一个,嘻嘻. console.log( ...
cocos creator 2.1.4休闲小游戏《颜色跳跃》源码H5+安卓+IOS三端源码
cocos creator 2.1.4休闲小游戏<颜色跳跃>源码H5+安卓+IOS三端源码,开发脚本为typeScript方便扩展和阅读,支持cocos creator2.X版本,完整的源 ...

3D小游戏(three)-Bottle跳跃动画实现

跳跃动画实现

3D小游戏(three)-Bottle跳跃动画实现相关推荐

最新文章

热门文章