Cocos2dx 3.2 之实现精灵图片放大功能

原文地址 http://blog.csdn.net/jhonlight/article/details/38408351

今天一个群友问我:

我Scene里放置一个Layer,Layer盛放一张图片,即背景图片,我想更换这张图片,而且要求带有系统提供的切换Scene 淡入淡出的效果,于是我用Director类的切换用系统提供的切换动画包装的scene,但是效果是整个scene都被切换了,而我想要的是只有背景变化,其余的不变。

大家都知道,这样做当然不可以,Director(导演)的切换会把制定的scene切换掉,随即而来的scene的会取代之前的scene容器,那面对这个需求,我们该怎么办呢?这时候我想到了网格效果,既然你想要淡入淡出的效果,网格效果中正好也有啊。于是他按照我说的去做了,后来发现网格效果种只有淡出FadeOutBLTiles,这可怎么办?可别忘了cocos2dx 有这样一个动作,reverse();即反转,淡出反转之后,我们可不可理解为淡出呢?是吧
没错,基本符合需求。

以上只是一个小插曲,下面通过一个小小的例子,来简要说明网格特效的使用。

首先来一段官网的介绍吧。

网格动作类似于特效,可以实现翻转、抖动、震荡、水波纹等效果。Cocos2D-x中,网格类的基类CCGridBase有两个子类,即CCGrid3D和CCTiledGrid3D。这两个类的共同点是,网格的每个子块都可以分离出来,CCGridBase的继承关系如下:

  CCGrid3D、CCTiledGrid3D-->CCGridBase-->CCObject。

  网格没有什么直接应用的场合,只要明白CCGrid3D和CCTiledGrid3D,并且网格动作是基于网格的即可。运行网格动作的节点好像被分成了大小相同的很多矩形,通过这些矩形的动作形成整体动作,这些矩形就好像形成了一个矩阵。16x12的网格将会运行的非常快,但是效果并不是非常好。32x24的网格看起来非常棒,但是在有些时候运行起来不会太快。

注:使用网格特效之前需要关闭OPenGL种的深度测试

至于为什么要关闭深度测试,个人觉得网格特效是把节点以及节点的子类所在的平面拆分成各个网格,进而来进行特定的特效,既然是平面的,就没有不需要有深度的检测了,1是会影响效果,2开启深度测试会额外消耗性能。 此是个人的理解,如有错误望大神更正。

ok,来上代码。上代码之前先看下效果。

    

通过做一个放大触摸点位置的图片局部来展示特效的使用。

1 首先再头文件种,定义触摸开始,触摸移动,触摸结束三个方法和一个网格实例的私有变量。

初始化网格特效实例,并添加到当前层中,接下来放置一个精灵到网格实例中,我们可以把网格特效实例看作是一个容器,它会让缩成装的对象都产生制定的特效效果。

2 初始化触摸监听以及回调方法,我使用的是cocos2dx3.2,与3.0之前的触摸有所变化,有不了解的同学可以去查阅官方文档。

 

3 首先通过pEvent获取触摸的目标,以此目标定义一个矩形区域,接下来判断当前的点是否在此矩形区域中,返回false代表触摸了是精灵,反之则触摸点在精灵之外。

4 定义一个方法的效果,让之前初始化的网格实例来运行此特效动作。

5 触摸移动和触摸结束方法差不多,就不做解释。

6 运行ok 就是开头的效果。

7 如果对别的特效有兴趣可以一一试之。效果蛮不错的。

Cocos2dx 3.2 之实现精灵图片放大功能,布布扣,bubuko.com

时间: 2024-10-05 04:41:02

Cocos2dx 3.2 之实现精灵图片放大功能的相关文章

图片放大功能

图片放大功能插件及jquery.extend函数理解 前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { this.opts = $.extend({ wrap: '', clickimgs: '', callback: function(){} }, opts); this.images_n = []; //保存一条评论中的所有图片 this.$s

jqzoom插件图片放大功能的一些BUG

建议使用cloud-zoom插件,jqzoom插件就不要使用了 点击查看——图片放大镜——jQuery插件Cloud Zoom 刚开始使用的是jqzoom插件,但问题太多了,就不说插入到页面中使用了,就单单插件本身带的实例 Bug1:先天性营养不良 你就不能使用margin:0 auto;把它放到一个居中显示的模块.也只能靠窗口最左边显示,要不就是用margin-left让它靠左边一定距离显示,但你要想让它想一般的网站里能适应不同宽度的浏览器,怕是不好用了. Bug2:后天发育不足 jqzoom

点击图片放大功能

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>点击图片放大</title> <style type="text/css"> a img{border:0px;} .latentzoom { CURSOR: pointer; outline: none } .latentzoom-image { BORDER

图片放大功能插件及jquery.extend函数理解

前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { this.opts = $.extend({ wrap: '', clickimgs: '', callback: function(){} }, opts); this.images_n = []; //保存一条评论中的所有图片 this.$showArrow = false; //显示左右翻页按

使用Layer完成图片放大功能

序言:在写这个功能之前也用了zoom.js,zoom.js用起来简单引用js然后设置图片属性就可以放大.但是放大后的图片模糊.没有遮罩.在放大图片时其它图片布局会受到影响,当然如果觉得这些都是小问题的话接来下的代码就可以不用看了,这个实现的功能是和zoom.js一样的,只是个人强迫为了体验效果更佳而进行改动.注意事项:放大后的图片其实就是图片自身的大小,放大之前是进行缩小的图片. 1.引用layer.js Layer官网:http://layer.layui.com/ 2.html代码: <a

vue-photo-preview 图片放大功能

查看图片详情,放大图片 使用方法: 1.安装 npm install vue-photo-preview --save 2.引入(全局或局部) import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(preview); 3.使用(template中) //在img标签添加pre

cocos2dx 3.x以上(Sprite精灵类的相关属性与创建)

// //  MainScene.cpp //  helloworld // //  Created by apple on 16/9/19. // // #include "MainScene.hpp" Scene * MainScene::createScene() { auto scene = Scene::create(); //    CCScene * scene = CCScene::create();// 创建场景 //创建层 MainScene *layer = Ma

为BlueLake主题增加图片放大效果

fancyBox 是一个流行的媒体展示增强组件,可以方便为网站添加图片放大.相册浏览.视频弹出层播放等效果.优点有使用简单,支持高度自定义,兼顾触屏.响应式移动端特性,总之使用体验相当好. 现在,我们就将 fancyBox 集成到 hexo BlueLake 中. 一.下载 fancybox git clone https://github.com/fancyapps/fancybox.git 文件下载下来之后,如下图所示: 将 dist 目录下的两个 js 文件拷贝到 BlueLake 主题的

Cocos2d-x 精灵图片预加载中不会出现重复加载问题

为了应对大量精灵图片的加载问题,cocos2d-x提供了精灵数据的异步预加载机制,这是要是借助于CCTextureCache::addImageAsync函数来实现的. 那么,当使用上述函数多次加载同一个精灵图片文件时,是否会出现加载多次呢?不会的. 让我们来分析一下上述函数的关键部分代码: void CCTextureCache::addImageAsync(const char *path, CCObject *target, SEL_CallFuncO selector) { #ifdef