cocos中如何用砖块画出LED数字

最新推荐文章于 2023-06-09 16:58:23 发布
最新推荐文章于 2023-06-09 16:58:23 发布
阅读量553 收藏
点赞数
分类专栏： c++ 文章标签： cocos c++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshicheng1990/article/details/74897942
版权

我们可以利用精灵的移动，然后在精灵的移动过程中，通过创建时间线程，逐步创建砖块精灵，这样就达到了用砖块画出图形的目的。该灵感来自于：http://blog.csdn.net/qiulanzhu/article/details/47205609

现在我们具体讲解下如何通过移动实现。首先，移动是一个动作，而一个LED数字，是会拐弯的，因此，这个需要连续N个动作的连接，这个我们可以用Sequence实现。如果是一笔就可以完成的动作，那么一个时间线程就足够了，但是，有些数字，是不能一笔画出的，比如数字3。那么这个时候，就需要再开一个线程了。为了避免节点间的相互独立，因此我们应该将精灵移动并创建砖块的过程封装在一个类中。

我们将精灵的移动，分为上下左右，然后在封装的类中存放每次移动的位置集合，方便我们任意修改移动精灵的起始坐标。

关键代码：

//drawnode.h

class DrawNumberAction : public Node
{
public:
	enum
	{
		tag_brick = 1,
		tag_move = 2,
		tag_move3 = 3,
	};

	DrawNumberAction(std::vector<Vec2> & vct, bool first, float coeff, float pts, int tagval, Layer * pay) : m_pos(vct), isfirst(first)
		, coefficient(coeff), ts(pts), nodetag(tagval), player(pay)
	{}

	~DrawNumberAction();

	void DrawActionMove();

	void DrawBrick(float dt);

	void CreateBrick(const cocos2d::Vec2 & pos);

	void CancelDraw(cocos2d::Object* pSender);

private:
	std::vector<Vec2> & m_pos;
	bool isfirst;
	float coefficient;
	float ts;
	int nodetag;
	Layer * player;
};

//drawnode.cpp

void DrawNumberAction::DrawActionMove()
{
	auto batchnode2 = SpriteBatchNode::create("gray_brick.png");

	cocos2d::Vector<FiniteTimeAction*> vctmove;
	Sequence* seq = NULL;

	if (isfirst && m_pos.size() > 0)
	{
		CreateBrick(m_pos[0]);
	}

	for (int i = 0; i < m_pos.size() - 1; ++i)
	{
		auto actionMove = CCMoveTo::create(ts * coefficient, m_pos[i+1]);
		vctmove.pushBack(actionMove);

		if (i == 0)
		{
//指定移动精灵的起始地址
			batchnode2->setPosition(m_pos[i]);
			//设置runaction
			batchnode2->setTag(nodetag);
		}
	}

	auto actionMoveDone = CallFuncN::create(CC_CALLBACK_1(DrawNumberAction::CancelDraw, this));
	vctmove.pushBack(actionMoveDone);

	seq = Sequence::create(vctmove);

	batchnode2->runAction(seq);
	this->addChild(batchnode2);

	//设置schedule事件
	this->schedule(schedule_selector(DrawNumberAction::DrawBrick), coefficient);
}

void DrawNumberAction::DrawBrick(float dt)
{
	auto container = this->getChildByTag(nodetag);

	CreateBrick(container->getPosition());
}

void DrawNumberAction::CreateBrick(const cocos2d::Vec2 & pos)
{
	//画出砖块
	CCSprite* sprFlowerTmp = CCSprite::create("gray_brick.png");
	sprFlowerTmp->setPosition(pos);

	auto body = PhysicsBody::createBox(sprFlowerTmp->getContentSize());
	body->setContactTestBitmask(0xFFFFFFFF);
	body->setGroup(-1);

	sprFlowerTmp->setPhysicsBody(body);
	sprFlowerTmp->setTag(tag_brick);
	player->addChild(sprFlowerTmp);
}

void DrawNumberAction::CancelDraw(Object* pSender)
{
	DrawBrick(1.0f);

	//取消画砖块的定时线程
	this->unschedule(schedule_selector(DrawNumberAction::DrawBrick));
}

//helloworld.cpp

int HelloWorld::DrawNumeric(int num)
{
	//假设个数字的大小
	//底下必须留30个高度
	auto visibleSize = Director::getInstance()->getVisibleSize();
	auto origin = Director::getInstance()->getVisibleOrigin();

	float xleft = visibleSize.width/2 - 20;
	float yup = visibleSize.height - 20;

	Vec2 startpos(xleft, yup);

	DrawDecomposition3(num, startpos);

	return 0;
}

int HelloWorld::DrawDecomposition3(int num, cocos2d::Vec2 & startpos)
{
	//如何画出数字3？数字3不能一笔搞定，因此，分两个线程去处理
	vector<cocos2d::Vec2> result;

	result.push_back(startpos);

	if (0 == num)
	{
		//0就是一个大矩形
		GetDestPos(draw_right, result[0], result);
		GetDestPos(draw_down, result[1], result);
		GetDestPos(draw_down, result[2], result);
		GetDestPos(draw_left, result[3], result);
		GetDestPos(draw_up, result[4], result);
		GetDestPos(draw_up, result[5], result);

		float ts = squaresize - 1;

		//画第一部分
		DrawNumberAction * firstmove = new DrawNumberAction(result, true, coefficient, ts, tag_move, this);
		firstmove->DrawActionMove();

		this->addChild(firstmove);
	}
	else if (1 == num)
	{
		GetDestPos(draw_down, result[0], result);
		GetDestPos(draw_down, result[1], result);

		float ts = squaresize - 1;

		//画第一部分
		DrawNumberAction * firstmove = new DrawNumberAction(result, true, coefficient, ts, tag_move, this);
		firstmove->DrawActionMove();

		this->addChild(firstmove);
	}
	else if (2 == num)
	{
		//这是连串的一组
		GetDestPos(draw_right, result[0], result);
		GetDestPos(draw_down, result[1], result);
		GetDestPos(draw_left, result[2], result);
		GetDestPos(draw_down, result[3], result);
		GetDestPos(draw_right, result[3], result);

		float ts = squaresize - 1;

		//画第一部分
		DrawNumberAction * firstmove = new DrawNumberAction(result, true, coefficient, ts, tag_move, this);
		firstmove->DrawActionMove();

		this->addChild(firstmove);
	}
	else if(3 == num)
	{
		//这是连串的一组
		GetDestPos(draw_right, result[0], result);
		GetDestPos(draw_down, result[1], result);
		GetDestPos(draw_down, result[2], result);
		GetDestPos(draw_left, result[3], result);

		float ts = squaresize - 1;

		//画第一部分
		DrawNumberAction * firstmove = new DrawNumberAction(result, true, coefficient, ts, tag_move, this);
		firstmove->DrawActionMove();

		this->addChild(firstmove);

		//画第二部分
		vector<cocos2d::Vec2> part2;
		part2.push_back(result[2]);

		GetDestPos(draw_left, part2[0], part2);

		DrawNumberAction * secmove = new DrawNumberAction(part2, false, coefficient, ts, tag_move3, this);
		secmove->DrawActionMove();
		this->addChild(secmove);
	}
	else if (4 == num)
	{
		//分两部分
		//这是连串的一组
		GetDestPos(draw_down, result[0], result);
		GetDestPos(draw_right, result[1], result);

		float ts = squaresize - 1;

		//画第一部分
		DrawNumberAction * firstmove = new DrawNumberAction(result, true, coefficient, ts, tag_move, this);
		firstmove->DrawActionMove();

		this->addChild(firstmove);

		//画第二部分
		vector<cocos2d::Vec2> part2;

		//第二部分的起始点有点特殊，需要额外计算
		Vec2 start;
		start.x = result[2].x;
		start.y = result[0].y;

		part2.push_back(start);
		GetDestPos(draw_down, part2[0], part2);
		GetDestPos(draw_down, part2[1], part2);

		DrawNumberAction * secmove = new DrawNumberAction(part2, true, coefficient, ts, tag_move3, this);
		secmove->DrawActionMove();
		this->addChild(secmove);
	}
	else if (5 == num)
	{
		GetDestPos(draw_left, result[0], result);
		GetDestPos(draw_down, result[1], result);
		GetDestPos(draw_right, result[2], result);
		GetDestPos(draw_down, result[3], result);
		GetDestPos(draw_left, result[4], result);

		float ts = squaresize - 1;

		//画第一部分
		DrawNumberAction * firstmove = new DrawNumberAction(result, true, coefficient, ts, tag_move, this);
		firstmove->DrawActionMove();

		this->addChild(firstmove);
	}
	else if (6 == num)
	{
		//是5的结尾后，再加一笔上
		GetDestPos(draw_left, result[0], result);
		GetDestPos(draw_down, result[1], result);
		GetDestPos(draw_right, result[2], result);
		GetDestPos(draw_down, result[3], result);
		GetDestPos(draw_left, result[4], result);
		GetDestPos(draw_up, result[5], result);

		float ts = squaresize - 1;

		//画第一部分
		DrawNumberAction * firstmove = new DrawNumberAction(result, true, coefficient, ts, tag_move, this);
		firstmove->DrawActionMove();

		this->addChild(firstmove);
	}
	else if (7 == num)
	{
		GetDestPos(draw_right, result[0], result);
		GetDestPos(draw_down, result[1], result);
		GetDestPos(draw_down, result[2], result);

		float ts = squaresize - 1;

		//画第一部分
		DrawNumberAction * firstmove = new DrawNumberAction(result, true, coefficient, ts, tag_move, this);
		firstmove->DrawActionMove();

		this->addChild(firstmove);
	}
	else if (8 == num)
	{
		//画个矩形
		GetDestPos(draw_right, result[0], result);
		GetDestPos(draw_down, result[1], result);
		GetDestPos(draw_left, result[2], result);
		GetDestPos(draw_up, result[3], result);

		float ts = squaresize - 1;

		//画第一部分
		DrawNumberAction * firstmove = new DrawNumberAction(result, true, coefficient, ts, tag_move, this);
		firstmove->DrawActionMove();

		this->addChild(firstmove);

		//画第二部分
		//以第二步的终点为起点
		vector<cocos2d::Vec2> part2;
		part2.push_back(result[2]);
		GetDestPos(draw_down, part2[0], part2);
		GetDestPos(draw_left, part2[1], part2);
		GetDestPos(draw_up, part2[2], part2);

		DrawNumberAction * secmove = new DrawNumberAction(part2, false, coefficient, ts, tag_move3, this);
		secmove->DrawActionMove();
		this->addChild(secmove);
	}
	else if (9 == num)
	{
		//8与9的区别，就在于没有最后向上的一笔
		GetDestPos(draw_right, result[0], result);
		GetDestPos(draw_down, result[1], result);
		GetDestPos(draw_left, result[2], result);
		GetDestPos(draw_up, result[3], result);

		float ts = squaresize - 1;

		//画第一部分
		DrawNumberAction * firstmove = new DrawNumberAction(result, true, coefficient, ts, tag_move, this);
		firstmove->DrawActionMove();

		this->addChild(firstmove);

		//画第二部分
		//以第二步的终点为起点
		vector<cocos2d::Vec2> part2;
		part2.push_back(result[2]);
		GetDestPos(draw_down, part2[0], part2);
		GetDestPos(draw_left, part2[1], part2);

		DrawNumberAction * secmove = new DrawNumberAction(part2, false, coefficient, ts, tag_move3, this);
		secmove->DrawActionMove();
		this->addChild(secmove);
	}

	return 0;
}

int HelloWorld::GetDestPos(Direction dire, cocos2d::Vec2 & startpos, std::vector<cocos2d::Vec2> & vct)
{
	Vec2 dest(startpos);

	switch (dire)
	{
		case draw_right: dest.x += (squaresize - 1)*bricksize.x;  break;
		case draw_left: dest.x -= (squaresize - 1)*bricksize.x; break;
		case draw_down: dest.y -= (squaresize - 1)*bricksize.y;  break;
		case draw_up: dest.y += (squaresize - 1)*bricksize.y;  break;
		default:  return 0;
	}

	vct.push_back(dest);
}

GetDestPos()函数的功能是根据方向，获取终点的位置坐标。代码大致就是这样。有点小问题的就是，当头和尾都已经存在时，再去画砖块时，会存在精灵重复覆盖。

不知道怎么录制演示过程。只好放几张最终的效果图片了。





源码和资源文件路径可从下面路径下载：

http://git.oschina.net/codessheng/cocoslednumber

小菜寻路
关注
专栏目录
发光二极管pcb封装图画法_【干货】LED封装形式分类解析
weixin_39615984的博客
11-20 4070
关注微信公众号：深圳LED商会不同的应用场合、不同的外形尺寸、散热方案和发光效果，使得LED封装形式多种多样。目前，LED按封装形式分类主要有Lamp LED、Top LED、Side LED、SMD LED、High Power LED、Flip Chip LED等。.1、Lamp LED(垂直LED)Lamp LED早期出现的是直插LED，它的封装采用灌封的形式。灌封的过程是先在LED成型模腔...
H5游戏开发：一笔画
凹凸实验室
11-02 1316
一笔画是图论科普中一个著名的问题，它起源于柯尼斯堡七桥问题科普。数学家欧拉在他1736年发表的论文《柯尼斯堡的七桥》中不仅解决了七桥问题，也提出了一笔画定理，顺带解决了一笔画问题。用图论的术语来说，对于一个给定的连通图科普存在一条恰好包含所有线段并且没有重复的路径，这条路径就是「一笔画」。寻找连通图这条路径的过程就是「一笔画」的游戏过程，如下：游戏的实现「一笔画」的实现不复杂，笔者把实现过程分成两...
cocoscreator 砖块消消消
01-10
前两天帮朋友模仿砖块消消消做了个游戏，里面素材和关卡都是爬的。 creator版本 1.9.3 代码放在github上了，记录一下。觉得ok的麻烦star一下，积分什么的不重要 github下载地址:https://github.com/bark-ice/bounceGame/
cocos creator 鼠标画笔|画线
最新发布
dupha的博客
06-09 1972
简要思路:MOUSE_MOVE事件和Graphics组件实现 前端也可以通过canvas和mousemove事件实现，原理一致 cocos creator 鼠标画笔|画线， cocos creator画线 ， cocos creator 画笔， cocos creator 画形状， cocos creator 画图
Blue Path（基于cocos2dx 3.0）
白雾霾
12-21 173
猴子原创，欢迎转载。转载请注明：转载自Cocos2D开发网–Cocos2Dev.com，谢谢！ 原文地址:http://www.cocos2dev.com/?p=498 iTunes下载：https://itunes.apple.com/cn/app/blue-path/id761631488?mt=8这个是一个周末使用cocos2dx 3.0写的。玩法很简单，类似一笔画，一笔将蓝色填充满格子就...
cocos画LED数字
07-09
总之，利用Cocos2dx的`moveto`方法来绘制LED数字，是通过编程的方式模拟物理LED显示器的行为，通过精心设计的动画和点阵数据，可以在游戏中创建出逼真的数字显示效果。这种方法不仅适用于游戏，还可以用于各种图形...
cocos creator打砖块游戏
11-26
在游戏开发领域，Cocos Creator是一个非常流行的2D游戏开发引擎，它提供了强大的图形渲染、物理引擎、动画处理和UI系统，使得开发者能够快速构建出高质量的游戏。本篇文章将深入探讨使用Cocos Creator开发经典打砖块...
cocoscreator中的自定义数字滚动效果
11-02
在Cocos Creator游戏开发框架中，自定义数字滚动效果是一个常见的需求，特别是在表现数值变化、计分系统或者加载进度时。本知识点将深入探讨如何利用Cocos Creator的特性，结合TypeScript编程语言来实现这样的效果。...
Cocos Creator 3.4.2 实现滚动数字效果
04-18
在Cocos Creator 3.4.2中，实现滚动数字效果是通过组合使用基本组件、动画和编程逻辑来完成的。这个过程涉及到多个关键知识点，包括但不限于以下几点： 1. **Cocos Creator 3.4.2框架**： Cocos Creator是一个强大...
精选_【Cocos Creator实战教程(5)】——打砖块(物理引擎,碰撞检测)_源码打包
03-08
在本篇精选的《Cocos Creator实战教程(5)》中，我们将深入探讨如何使用Cocos Creator构建一个经典的“打砖块”游戏。这个教程主要关注两个关键领域：物理引擎和碰撞检测，这些都是游戏开发中不可或缺的部分。通过...
CocosCreator小游戏shooting_Game.zip
02-16
这个项目文件适合初学者，如果你已经对CocosCreator很熟悉了，做过相应的游戏开发的朋友可以忽略，这个游戏内容比较简单，一个小时就可以搞定！
nyoj42(一笔画)
bad
10-31 938
一笔画问题 时间限制：3000 ms  |  内存限制：65535 KB 难度：4 描述 zyc从小就比较喜欢玩一些小游戏，其中就包括画一笔画，他想请你帮他写一个程序，判断一个图是否能够用一笔画下来。 规定，所有的边都只能画一次，不能重复画。   输入第一行只有一个正整数N(N 每组测试数据的第一行有两个正整数P,Q(P 随后的Q行，每行有
【Cocos Creator实战教程(8)】——打砖块(物理引擎)
热门推荐
Next的博客
06-14 3万+
失踪人口回归 本篇教程要基于Cocos Creator1.5的物理引擎，编写一个简单的打砖块游戏，尽可能多讲一点，但现在已经快11点了，我12点要睡觉啊，好像又讲不了多少，这个世界啊，本来就是一个矛盾体。新建一个工程，取名叫做brick-breaker，brick是什么意思呢，就是砖块的意思，每次给工程起名字，我都能学会一个新单词。目录结构如下：game场景，设置Canvas 先搭一个游戏背景
HQChart使用教程68 - 配置DRAWTEXT, DRAWICON, DRAWNUMBER字体大小
小银
10-23 3210
HQChart使用教程68 - 配置DRAWTEXT, DRAWICON字体大小分析家语法全局配置DRAWTEXT 配置说明IconMaxSizeMinSizeZoomTextDRAWTEXT配置说明交流QQ群: 950092318HQChart代码地址个人爱好（模型/摄影) 分析家语法 DRAWTEXT和DRAWICON时候分析家指标语法里的绘图函数，分别绘制图标和文字， 由于函数里面没有对大小设置的参数，所以hqchart把这2个设置放在了全局Resource里面， 通过修改Resource对应的配置就
zyc从小就比较喜欢玩一些小游戏，其中就包括画一笔画，他想请你帮他写一个程序，判断一个图是否能够用一笔画下来。 规定，所有的边都只能画一次，不能重复画。 输入 第一行只有一个正整数N(N<=
march23的博客
08-25 1760
欧拉定理 如果一个网络是连通的并且奇顶点的个数等于0或2，那么它可以一笔画出；否则它不可以一笔画出。 判断一笔画的方法： 　　①是连通的。一个图，如果图上任意二点总有线段连接着，就称为连通的。不是连通的就不能一笔画出。 　　②奇点个数是0或者是2。图上线段的端点可以分成二类，奇点和偶数。一个点，以它为端点的线段数是奇数就称为奇点，线段数是偶数就称为偶点。 　　一个图是否是一笔画就看奇点的个
脑洞神器Creator手写识别组件，三分钟上手！
奎特尔星球
10-15 980
这两天有两位伙伴，通过微店购买了Shawn的数字大冒险，在此感谢大家的支持！抱歉的是该工程没有文档，不少朋友是看中了其中的手写数字识别功能，在此我录制了一段小视频，可以帮...
后台指标计算返回数据格式说明6 - DRAWNUMBER格式
小银
11-18 2019
后台指标计算返回数据格式说明6 - DRAWNUMBER格式DRAWNUMBER返回格式说明DrawTypeTypeDrawNumberPrice示例QQ群: 950092318HQChart代码地址 DRAWNUMBER 画出数字. 用法: DRAWNUMBER(COND,PRICE,NUMBER),当COND条件满足时,在PRICE位置书写数字NUMBER. 例如: DRAWNUMBER(CLOSE/OPEN>1.08,LOW,C)表示当日实体阳线大于8%时在最低价位置显示收盘价. 返回格式说明
Cocos Creator 3.4.2中实现滚动数字的技巧
实现滚动数字效果是Cocos Creator中的一个常见需求，主要用于显示分数、计时器或者游戏进度等动态数值。通常，滚动数字效果需要利用引擎提供的基本UI组件，如Label、Sprite等，通过编程来实现数值的动态更新和滚动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值