文档章节

JS开发HTML5游戏《神奇的六边形》(七)

青瓷引擎
 青瓷引擎
发布于 2015/11/17 16:58
字数 1084
阅读 40
收藏 0

近期出现一款魔性的消除类HTML5游戏《神奇的六边形》,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏。

点击这里可进入游戏体验)

因内容太多,为方便大家阅读,所以分成部分来讲解。

本文为第七部分,主要包括:

16.分数往上飘动画

17.形状飞入动画

18.其他动画表现添加


十六. 分数往上飘的动画

在表现加分时,分数会有个缩放的效果,然后往上移动并淡出。这些效果可以通过Tween Group来组合实现。

1. 在board节点下,创建UIText节点,取名为score,属性设置如下:

  • 文本居中显示

  • 文本颜色为白色,大小40,外加6像素描边

2. 为score节点,添加TweenScale组件,控制缩放动画,属性设置如下图(注意设置Tween Group=1):

3. 为score节点,添加TweenPosition组件,控制节点向上移动,属性设置如下图(注意设置Tween Group=1):

4. 为score节点,添加TweenAlpha组件,控制节点淡出,属性设置如下图(注意设置Tween Group=1):

5. 将score节点拖拽到Assets/prefab目录,创建预制。然后从场景中删除。

6. 在Scripts/ui下新建脚本:FlyScore.js

/**
  * 分数飘出来的特效
  */
 var FlyScore = qc.defineBehaviour('qc.tetris.FlyScore', qc.Behaviour, function() {
     var self = this;
 }, {
     scorePrefab: qc.Serializer.PREFAB
 });
 
 /**
  * 开始播放冒分数动画
  */
 FlyScore.prototype.play = function(pos, score) {
     var self = this;
 
     var scoreOb = self.game.add.clone(self.scorePrefab, self.gameObject);
     scoreOb.text = '' + score;
     var tp = scoreOb.getScript('qc.TweenPosition');
     scoreOb.anchoredX = qc.Tetris.board.data[pos].x;
     scoreOb.anchoredY = qc.Tetris.board.data[pos].y;
     tp.from = new qc.Point(scoreOb.x, scoreOb.y);
     tp.to = new qc.Point(tp.from.x, tp.from.y - 80);
     tp.resetGroupToBeginning();
     tp.playGroupForward();
     self.game.timer.add(600, function() {
         scoreOb.destroy();
     });
 };

 

7. 将FlyScore脚本挂载到board节点,设置scorePrefab属性为Assets/prefab/score.bin。保存场景。

 

十七. 形状飞入动画

1. 双击Assets/prefab/Blocks.bin,编辑预制

2. 选中Blocks节点,添加TweenPosition组件,属性设置如下:

3. 保存预置

4. 打开Scripts/ui/Pool.js,添加flyIn接口,处理飞入动画的播放

/**
  * 播放飞入的动画
  */
 Pool.prototype.flyIn = function(index) {
     var self = this, o = self.gameObject, children = o.children;
     var offset = o.width * (0.5 - 0.165);
 
     // 先确保位置都正确
     self.resize();
 
     if (index === 0) {
         var o = children[0], c = o.getScript('qc.tetris.BlocksUI');
         c.flyIn(offset);
     }
     if (index === 0 || index === 1) {
         var o = children[1], c = o.getScript('qc.tetris.BlocksUI');
         c.flyIn(offset);
     }
 
     var o = children[2], c = o.getScript('qc.tetris.BlocksUI');
     c.flyIn(offset);
 };

5. 打开Scripts/ui/BlocksUI.js,添加flyIn接口,处理单个形状飞入动画

/**
  * 飞入动画
  */
 BlocksUI.prototype.flyIn = function(offset) {
     var self = this,
         tp = self.getScript('qc.TweenPosition');
 
     tp.delay = 0.5;
     tp.to = new qc.Point(self.gameObject.x, self.gameObject.y);
     tp.from = new qc.Point(tp.to.x + offset, tp.to.y);
     tp.resetToBeginning();
     tp.playForward();
 };

 

6. 运行游戏,查看下效果:已经可以正常游戏了不是?

 

十八. 其他动画表现添加

目前还缺少两个表现:加分动画(数字跳动)、形状回弹效果。其方法和之前讲述的大致一样,这里简略做个说明。

加分动画

1. 修改CurrentScore.js代码,添加动画播放代码:

var CurrentScore = qc.defineBehaviour('qc.tetris.CurrentScore', qc.Behaviour, function() {
     var self = this;
     self.runInEditor = true;
 }, {
 });
 
 /**
  * 初始化处理
  */
 CurrentScore.prototype.awake = function() {
     var self = this, div = self.gameObject.div;
 
     div.className = 'score_current';
     self.setScore(qc.Tetris.score.current);
 };
 
 /**
  * 更新最新的高分
  */
 CurrentScore.prototype.setScore = function(best) {
     best = best || qc.Tetris.score.current;
 
     // 做动画表现,从old -> best
     var old = this.gameObject.div.innerHTML * 1;
     this.delta = best - old;
     if (this.delta <= 0)
         this.gameObject.div.innerHTML = '' + best;
 
     // 0.2s内需要播放完毕,计算每秒增加的数量
     this.step = this.delta / 0.2;
 
     // 播放缩放动画
     var ts = this.getScript('qc.TweenScale');
     ts.resetToBeginning();
     ts.playForward();
 };
 
 /**
  * 动画表现
  */
 CurrentScore.prototype.update = function() {
     if (this.delta <= 0) {
         // 动画表现完毕了
         return;
     }
 
     var step = Math.round(this.step * this.game.time.deltaTime / 1000);
     this.delta -= step;
     var old = this.gameObject.div.innerHTML * 1 + step;
     if (old > qc.Tetris.score.current) {
         old = qc.Tetris.score.current;
         this.delta = 0;
     }
     this.gameObject.div.innerHTML = '' + old;
 };

 

2. 为场景节点UIRoot/score添加TweenScale组件,属性设置如下:

形状回弹效果

修改BlocksUI.js代码,添加backAni方法:

/**
     * 退回到原来位置的动画表现
     */
    BlocksUI.prototype.backAni = function(x, y) {
        var self = this, o = self.gameObject,
            tp = self.getScript('qc.TweenPosition');
        if (tp.enable) return;
        tp.delay = 0;
        tp.from = new qc.Point(x, y);
        tp.to = new qc.Point(self.gameObject.x, self.gameObject.y);
        tp.stop();
        tp.resetToBeginning();
        self.gameObject.interactive = false;
        tp.onFinished.addOnce(function() {
            self.gameObject.interactive = true;
            o.parent.getScript('qc.tetris.Pool').resize();
        });
        tp.playForward();
    };
在onDragEnd方法中,当无法放入棋盘的分支中,加入backAni的调用:
    BlocksUI.prototype.onDragEnd = function(e) {
        var self = this,
            o = self.gameObject;
        self.drag = false;
 
        if (self.flagBlocks.visible && self.lastPos) {
            // 放到这个位置中去
            self.drop = true;
            qc.Tetris.operation.putIn(self.index, self.lastPos, self.data);
        }
        else {
            // !!!!!!
            // 在这个分支中修改为如下代码
            var x = o.x, y = o.y;
            self.reset();
            o.parent.getScript('qc.tetris.Pool').resize();
            self.backAni(x, y);
        }
 
        // 显示标记可以干掉了
        self.flagBlocks.destroy();
        delete self.flagBlocks;
    };

 

下一篇:JS开发HTML5游戏《神奇的六边形》(六)

下一篇:JS开发HTML5游戏《神奇的六边形》(八)

   

© 著作权归作者所有

青瓷引擎
粉丝 3
博文 10
码字总数 13265
作品 1
厦门
私信 提问
18 款超酷的 HTML5 和 JavaScript 游戏引擎库

现在的游戏开发变得越来越复杂,需要制作各种炫丽的效果,还要制作各种基于 2D 或者 3D 的场景。为了节省游戏开发者的时间,让开发者集中精力在游戏的创新上,出现了许许多多的游戏引擎。而现...

oschina
2014/04/17
26.9K
13
25 个超棒的 HTML5 & JavaScript 游戏引擎开发库

就像在汽车中,引擎完成主要的工作,使汽车看起来不可思议。游戏引擎同理,游戏开发者完成细节的工作,使游戏看起来真实、吸引人眼球。游戏引擎负责其余的事情。早期,游戏开发者通常从草图做...

oschina
2015/02/26
12.7K
44
2014 不能错过的 10+ 个 JavaScript 游戏引擎

在过去几年里,JavaScript 变得越来越流行,现在被认为是 Github 上面最受欢迎的编程语言。JavaScript 和 HTML5 这个流行的组合和 HTML5 的最新发展催生了各种 JavaScript 游戏引擎。这个组合...

oschina
2014/03/20
6.4K
13
20 款免费的 JavaScript 游戏引擎

使用 HTML5,CSS3 和 Javascript 可以帮助面向对象开发者开发拥有各种特性的游戏,比如:3D 动画效果,Canvas,数学,颜色,声音,WebGL 等等。最明显的优势在于使用 HTML5 开发的游戏能在任...

oschina
2014/02/20
18.5K
13
再来 10 个新鲜的 HTML5 教程

HTML5 火吗?看看 oschina 三天两头的 xx 个 xxx 就知道了。本文为你推荐最新的 10 个 HTML5 相关的教程,或许能启发你项目中的思路。 1. HTML5 canvas – Creating own Paint program Canva...

红薯
2011/11/15
3.9K
4

没有更多内容

加载失败,请刷新页面

加载更多

UAVStack功能上新:新增JVM监控分析工具

UAVStack推出的JVM监控分析工具提供基于页面的展现方式,以图形化的方式展示采集到的监控数据;同时提供JVM基本参数获取、内存dump、线程分析、内存分配采样和热点方法分析等功能。 引言 作为...

宜信技术学院
8分钟前
1
0
MySQL的5种时间类型的比较

日期时间类型 占用空间 日期格式 最小值 最大值 零值表示 DATETIME 8 bytes YYYY-MM-DD HH:MM:SS 1000-01-01 00:00:00 9999-12-31 23:59:59 0000-00-00 00:00:00 TIMESTAMP 4 bytes YYYY-MM......

物种起源-达尔文
15分钟前
3
0
云服务OpenAPI的7大挑战,架构师如何应对?

阿里妹导读:API 是模块或者子系统之间交互的接口定义。好的系统架构离不开好的 API 设计,而一个设计不够完善的 API 则注定会导致系统的后续发展和维护非常困难。比较好的API设计样板可以参...

阿里云官方博客
19分钟前
1
0
Rancher + VMware PKS实现全球数百站点的边缘K8S集群管理

Sovereign Systems是一家成立于2007年的技术咨询公司,帮助客户将传统数据中心技术和应用程序转换为更高效的、基于云的技术平台,以更好地应对业务挑战。曾连续3年提名CRN,并且在2012年到2...

RancherLabs
23分钟前
2
0
6、根据坐标,判断该坐标是否在地图区域范围内

最近在写配送区域相关的代码,具体需求如下: 根据腾讯地图划分配送区域,总站下边设多个配送分站,然后将订单中的收货地址将其分配给不同的配送分站。 1、地图区域划分(腾讯地图) 1.1、H...

有一个小阿飞
25分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部