• My Game --背景


    GitHub MyGame clone 代码,添加到配置并新建好的工程中运行下来就可以看到这个画面:

    
    

    image

    中间的小点是显示的当前触摸点,本文暂不讨论。图中的蓝天是蓝色的 LayerColor

    this->addChild( LayerColor::create( Color4B( 182, 228, 254, 255 ) ) );

    云和山都是用 DrawNode 画的。

    云的组合很简单,画四个圆调整好大小位置就可以做出不错的效果,调整下大小,位置就可以了

    	Color4F color = Color4F( 0.929f, 0.972f, 1.0f, 1.0f );
    	auto circle = DrawNode::create( );
    	circle->drawSolidCircle( Vec2::ZERO, 60.0f, 0.0f, 24, color );
    	circle->setPosition( 0, 0 );
    	auto circle1 = DrawNode::create( );
    	circle1->drawSolidCircle( Vec2::ZERO, 35.0f, 0.0f, 24, color );
    	circle1->setPosition( 50, -15 );
    	auto circle2 = DrawNode::create( );
    	circle2->drawSolidCircle( Vec2::ZERO, 40.0f, 0.0f, 24, color );
    	circle2->setPosition( -50, -10 );
    	auto circle3 = DrawNode::create( );
    	circle3->drawSolidCircle( Vec2::ZERO, 25.0f, 0.0f, 24, color );
    	circle3->setPosition( -80, -22 );
    
    	auto cloud = Node::create( );
    	cloud->addChild( circle3 );
    	cloud->addChild( circle2 );
    	cloud->addChild( circle1 );
    	cloud->addChild( circle );
    	return cloud;

    山的画法相对来说有点复杂,不过实际上用的是画多边形,其实圆也是用多边形画的,边多也看起来也就像圆了,上边画的每个圆都用24条边画的。

    山和云一样多个多边形叠加,不同的多边形画不同的颜色,看起来有层次

    山还有一点不同的是:山的数据保存在XML文件中,需要读取和处理后才能画,

    class DrawSp :public DrawNode
    {
    
    public:
    	bool init( );
    	void drawVectArr( VectArr * va );
    	void drawVectArrBt( VectArr * va);
    	void drawSolidVectArr( VectArr * va );
    	void drawSolidVectArrBt( VectArr * va );
    	//void drawBezier( const Bezier & bz, const Color4F & color, int seg = 30 );
    	
    	void drawRoad( const Vec2 * vec, unsigned int seg, 
    				   const Vec2 & offset, const Color4F & color );
    
    	CREATE_FUNC( DrawSp );
    protected:
    	DrawSp( );
    	~DrawSp( );
    
    private:
    
    };

    对DrawNode 扩展了几个函数,实际上只是为了更方便的用自定义数据类(VectArr)去画多边形

    结合自定义的数据快捷的画出一座山:

    bool BgLayer::init( )
    {
    	if( !Node::init( ) )
    	{
    		return false;
    	}
    	auto vsize = _director->getVisibleSize( );
    	auto lines = _lineLayer->getLines( );
    	
    	auto arr = new VectArr*[ lines.size( )];
    	for( int i = 0; i < lines.size( ); i++ )
    	{
    		lines[ i ] *= vsize;
    		arr[ i ] = new VectArr( lines[ i ] );
    	}
    	arr[ 0 ]->stichingToBottom( );
    	auto d = DrawSp::create( );
    	d->drawSolidVectArrBt( arr[ 0 ] );
    	this->addChild( d );
    	for( int i = 1; i < lines.size( ); i++ )
    	{
    		auto l = arr[ 0 ]->stiching( arr[ i ] );
    		l->stichingToBottom( );
    		auto dl = DrawSp::create( );
    		dl->drawSolidVectArrBt( l );
    		this->addChild( dl );
    	}
    
    
    	return true;
    }

    再画一座加上去和背景就最上面的背景图了:

    背景就先说到这里,牵扯到其他的太多了,哎~~

    作者:H·K
    出处:http://www.cnblogs.com/pythian/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    Document
    Document
    Document
    Document
    Document
    Document
    手动版 轮播图
    Echarts tooltip 自定义formatter设置字体颜色
    CSS3中 translate、transform 和 translation 的区别和联系,及开发问题解决
    background 属性及遇到的问题
  • 原文地址:https://www.cnblogs.com/pythian/p/4615683.html
Copyright © 2020-2023  润新知