cocos2dx实现刮奖效果

本文实例为大家分享了cocos2dx刮奖效果实现代码,供大家参考,具体内容如下

刮奖效果其实挺简单的,需要用到RenderTexture来进行渲染,通过你所要渲染的图层,把该层的颜色进行设置混合就可以达到效果,具体看代码,我用的lua实现的。

local winsize = cc.Director:sharedDirector():getWinSize();
local dataSprite = cc.Sprite:create("Star.png")--要把这个图片刮出来
dataSprite:setAnchorPoint(cc.p(0.5, 0.5));
dataSprite:move(winsize.width / 2.0, winsize.height / 2.0);
self:addChild(dataSprite) 

pEarse = cc.DrawNode:create()
pEarse:drawDot(cc.p(0, 0), 5, cc.c4f(1, 0, 0, 1));
pEarse:retain() 

pRTex = cc.RenderTexture:create(winsize.width, winsize.height);
pRTex:setPosition(cc.p(winsize.width / 2, winsize.height / 2));
--this:addChild(pRTex);
pRTex:retain() 

local pBg = cc.Sprite:create("d1.png");--这个作为当“油漆层”
pBg:setAnchorPoint(cc.p(0.5, 0.5));
pBg:move(winsize.width / 2.0, winsize.height / 2.0); 

pRTex:begin();
dataSprite:visit();
pBg:visit();
pRTex:endToLua();
local layer=cc.Layer:create()
self:addChild(layer, 1000)
layer:addChild(pRTex);
layer:setNodeTouch(handler(self, self.onTouchStart)) 

鼠标移动代码:

function shop.erasure(event)
 -- body
 print("erasure: ", event.name)
 --todo
 print("moved")
 local touchPoint = event.pos
 pEarse:setPosition(event.pos.x, event.pos.y);
 -- 设置混合模式
 local blendFunc = { GL_ONE, GL_ZERO };
 pEarse:setBlendFunc(blendFunc);
 -- 将橡皮擦的像素渲染到画布上,与原来的像素进行混合
 pRTex:begin();
 pEarse:visit();
 pRTex:endToLua(); 

end 

C++代码:

void function()

{

  //test code
  auto aPanelSprite = Sprite::create("potentiometerTrack.png");
  aPanelSprite->setPosition(Vec2(s.width / 2, s.height / 2));
  this->addChild(aPanelSprite); 

  pEase = DrawNode::create();
  pEase->retain();
  pEase->drawDot(Point(0, 0), 4.0f, Color4F(255, 0, 0, 255)); 

  pRender = RenderTexture::create(s.width, s.height);
  pRender->retain();
  pRender->setPosition(Vec2(s.width / 2, s.height / 2));
  this->addChild(pRender); //渲染纹理层需加入该父节点层 

 auto pBg = Sprite::create("potentiometerProgress.png"); //这个作为当“油漆层”
 pBg->setAnchorPoint(Point(0.5, 0.5));
 pBg->setPosition(Vec2(s.width / 2, s.height / 2)); 

 pRender->begin();
 aPanelSprite->visit();
 pBg->visit();
 pRender->end(); 

 auto listener = EventListenerTouchOneByOne::create();
 listener->setSwallowTouches(true); 

 listener->onTouchBegan = CC_CALLBACK_2(SpriteEaseBezier::onTouchBegan, this);
 listener->onTouchMoved = CC_CALLBACK_2(SpriteEaseBezier::onTouchMoved, this); 

 auto _eventDispatcher = CCDirector::getInstance()->getEventDispatcher();
 _eventDispatcher->addEventListenerWithFixedPriority(listener, -10);
} 

bool SpriteEaseBezier::onTouchBegan(Touch *touch, Event *unused_event)
{
 CCLOG("SpriteEaseBezier::onTouchBegan");
 return true;
} 

void SpriteEaseBezier::onTouchMoved(Touch *touch, Event *unused_event)
{
 auto touchPoint = touch->getLocation();
 pEase->setPosition(touchPoint.x, touchPoint.y); 

 BlendFunc blendFunc = { GL_ONE, GL_ZERO };
 pEase->setBlendFunc(blendFunc); 

 pRender->begin();
 pEase->visit();
 pRender->end();
 CCLOG("SpriteEaseBezier::onTouchMoved");
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • cocos2dx+lua实现橡皮擦功能

    游戏中刮刮乐是怎么实现的?做了一个小例子看了一下. 实现原理:随着触摸点的移动,通过setBlendFunc函数设置部分区域的颜色混合(将上层图片透明度为0,底层我们想要的图片就显示出来) --橡皮擦功能测试 local function initInfo() local scene = CCScene:create() local layer = CCLayer:create() scene:addChild(layer) --擦除后要显示的图片 local tupian = CCSprite

  • Cocos2d实现刮刮卡效果

    本文实例为大家分享了Cocos2d实现刮刮卡效果展示的具体代码,供大家参考,具体内容如下 本文代码适用于Cocos2d-x Quick-Community3.6 local TestScene = class("TestScene", function() return display.newScene("TestScene") end) function TestScene:ctor() end function TestScene:onEnter() self:

  • cocos2dx实现刮奖效果

    本文实例为大家分享了cocos2dx刮奖效果实现代码,供大家参考,具体内容如下 刮奖效果其实挺简单的,需要用到RenderTexture来进行渲染,通过你所要渲染的图层,把该层的颜色进行设置混合就可以达到效果,具体看代码,我用的lua实现的. local winsize = cc.Director:sharedDirector():getWinSize(); local dataSprite = cc.Sprite:create("Star.png")--要把这个图片刮出来 dataS

  • 分享Android仿刮奖效果控件

    本文实例为大家分享了Android刮刮卡效果控件,供大家参考,具体内容如下 刮刮卡类: package com.reyo.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.Canvas; import android.graphics.Paint; import android.gr

  • 轻松实现功能强大的Android刮奖效果控件(ScratchView)

    前言 我身边有一部分开发的小伙伴,存在着这样一种习惯.某一天,突然看到某一款 App 上有个很漂亮的自定义控件(动画)效果,就会绞尽脑子想办法去自己实现一发.当然,我自己也是属于这类型的骚年,看到某种效果就会手痒难耐琢磨着实现套路.个人觉得这是一种需求驱动进步的方法,当你绞尽脑子去实现自己想要的效果时,你就会发现你对 Android 自定义控件(动画)的知识体系认识越深,久而久之,自己也能轻松的造出各种控件(动画)效果.要是哪天,产品童鞋拿着个原型(或者对着某款 App )跟你讲:"XXXX,你

  • Unity实现刮奖效果

    本文实例为大家分享了Unity实现刮奖效果的具体代码,供大家参考,具体内容如下 需要一个Shader和一个CS脚本: // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)' Shader "Custom/Transparent Colored Eraser" { Properties { _MainTex ("Base (RGB), Alpha (A)",

  • 利用HTML5的画布Canvas实现刮刮卡效果

    先给大家展示效果: 查看演示   源码下载 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果. HTML 我们只需要在页面中加入canvas标签元素,其他的就看

  • js+canvas实现刮刮奖功能

    本文实例为大家分享了js+canvas实现刮刮奖的具体代码,供大家参考,具体内容如下 1.实现了PC端的刮刮奖效果 2.使用了canvas的文本,像素操作,合成,绘制图形,随机数 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>刮刮奖</title> <style type="text/css"> * { mar

  • canvas实现刮刮卡效果

    目前在html5和css3的热潮下,html页面的效果也是层出不穷,下面我们来介绍使用canvas来模仿刮奖刮开效果. 原理 在需要刮出的图片或者文字上方盖上一层灰色或者其他背景的canvas画布,当手指或者鼠标点击画布并移动时,将画布上移动过的轨迹变成透明即可. 分析 demo中在class为content的div上盖上一层灰色的画布,然后通过获取鼠标和手指的坐标计算出在画布位置上的坐标,通过在坐标原点位置画一个半径10px的透明圆形来透过画布,显示出画布下的内容.本demo是用时需要改变的内

  • 2种jQuery 实现刮刮卡效果

    其中拖拽刮涂层效果使用jquery UI的draggable方法 以下是源代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"

  • Android使用Canvas对象实现刮刮乐效果

    在淘宝.京东等电商举办活动的时候,经常可以看到在移动客户端推出的各种刮奖活动,而这种活动也受到了很多人的喜爱.从客户端的体验来说,这种效果应该是通过网页来实现的,那么,我们使用Android的自带控件能不能实现这种刮刮乐的效果呢?当然可以,本篇文章将介绍使用Canvas这个对象,如何实现"刮刮乐"的效果. 先看效果图 下面我们看一下如何使用代码实现 布局文件 <FrameLayout xmlns:android="http://schemas.android.com/a

随机推荐