STDIO
Tìm kiếm gần đây
    Nội dung
    0
    0
    Chia sẻ

    Tạo Hiệu Ứng Parallax Scrolling Trong Cocos2d-x 3.x

    Tìm hiểu hiệu ứng Parallax Scrolling và hiện thực với cocos2d-x
    Ryan Lê

    Ryan

    18/02/2015 29/09/2020 3 phút đọc
    Tạo Hiệu Ứng Parallax Scrolling Trong Cocos2d-x 3.x

    Parallax Scrolling

    Parallax Scrolling là hiện tượng được tạo ra bởi  mắt của người nhìn so với các vật thể xa, gần khác nhau. Vật nào ở càng xa (so với mắt) thì góc nhìn càng nhỏ, vật nào ở gần thì góc nhìn càng rộng. Khi 2 vật di chuyển cùng vận tốc thì vật ở xa (có vẻ) di chuyển chậm hơn vật ở gần.

    Trong cuộc sống hằng ngày, Parallax Ccrolling rất hay được bắt gặp. Ví dụ khi đang đi xe trên đường, nếu quan sát sẽ dễ dàng thấy rằng các cột điện trên đường di chuyển rất nhanh so với ngọn núi ở xa hơn, và ngọn núi sẽ di chuyển nhanh hơn mặt trời. Hay khi đứng nhìn 2 tòa nhà (kích thước ngang nhau) trước mắt, thì tòa nhà ở xa nhìn sẽ nhỏ hơn tòa nhà ở gần.

    Hiệu ứng Parallax Scrolling được dùng trong game 2D nhằm tạo chiều sâu cho game.

    Hiện thực

    Ảnh minh họa:

    ss_1

    Tạo class InfiniteParallaxNode

    Hiện thực file file InfiniteParallaxNode.h

    class InfiniteParallaxNode :public ParallaxNode
    {
    public:
    	static InfiniteParallaxNode* create();
    	void updatePosition();
    };
    

    Hiện thực file file InfiniteParallaxNode.cpp

    Method create

    InfiniteParallaxNode* InfiniteParallaxNode::create()
    {
        InfiniteParallaxNode* node = new InfiniteParallaxNode();
        if (node)
        {
            node->autorelease();
        }
        else 
        {
            delete node;
            node = 0;
        }
        return node;
    }
    

    Method updatePossition

    void InfiniteParallaxNode::updatePosition()
    {
        int safeOffset = -10;
     
        Size visibleSize = Director::getInstance()->getVisibleSize();
     
        for (int i = 0; i < _children.size(); i++)
        {
            auto node = _children.at(i);
            if (convertToWorldSpace(node->getPosition()).x + 
                node->getContentSize().width < safeOffset)
            {
                for (int j = 0; j < _parallaxArray->num; j++)
                {
                    auto po = (PointObject*)_parallaxArray->arr[j];
                    if (po->getChild() == node)
                        po->setOffset(po->getOffset() +
                        Point(visibleSize.width + node->getContentSize().width, 0));
                }
            }
        }
    }

    Ở đầu file khởi tạo thêm 1 class PointObject như sau:

    class PointObject : public Ref
    {
    public:
    	inline void setRation(Point ratio) { _ratio = ratio; }
    	inline void setOffset(Point offset) { _offset = offset; }
    	inline void setChild(Node *var) { _child = var; }
    	inline Point getOffset() const { return _offset; }
    	inline Node* getChild() const { return _child; }
    private:
    	Point _ratio;
    	Point _offset; 
    	Node* _child; 
    };
    

    Cách dùng

    Khai báo và khởi tạo biến

    InfiniteParallaxNode* backgroundElements;
    backgroundElements = InfiniteParallaxNode::create();

    Thêm các đối tượng vào

    // add rock
    unsigned int rocksQuantity = 7;
    for (unsigned int i = 0; i < rocksQuantity; i++)
    {
        auto rock = Sprite::create("rock.png");
        rock->setAnchorPoint(Point::ZERO);
        rock->setScale(randomValueBetween(0.6, 0.75));
        backgroundElements->addChild(rock,
            randomValueBetween(-10, -6),
            Point(0.05, 1),
            Point((visibleSize.width / 5) * (i + 1) + randomValueBetween(0, 100),
            ground->getContentSize().height - 5));
    }
    
    // add tree
    unsigned int treesQuantity = 35;
    for (unsigned int i = 0; i < treesQuantity; i++)
    {
        auto tree = Sprite::create("tree.png");
        tree->setAnchorPoint(Point::ZERO);
        tree->setScale(randomValueBetween(0.5, 0.75));
        backgroundElements->addChild(
            tree,
            randomValueBetween(-5, -1),
            Point(0.5, 1), 
            Point(visibleSize.width / (treesQuantity - 5) * (i + 1) + randomValueBetween(25, 50),
            ground->getContentSize().height - 8));
    }
    

    Thêm parallax vào và update scene

    addChild(backgroundElements, 2);
    schedule(schedule_selector(HelloWorld::update), 0.01);
    

    Download demo

    DOWNLOAD RESOURCES.zip

    DOWNLOAD SOURCE_CODE.zip

    0 Bình luận
    Lập Trình Game

    Lập Trình Game

    Kiến thức, kỹ thuật, kinh nghiệm lập trình game.

    Khi bạn nhấn vào sản phẩm do chúng tôi đề xuất và mua hàng, chúng tôi sẽ nhận được hoa hồng. Điều này hỗ trợ chúng tôi có thêm kinh phí tạo nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO

    Trang chính

    Công ty TNHH STDIO

    • 30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
      +84 28.36205514 - +84 942.111912
      developer@stdio.vn
    • 383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
      Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012
    ©STDIO, 2013 - 2021