Game Studio
Liên kế mạng xã hội

Game Studio


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

Giới thiệu

Parallax Scrolling là một trong số những hiệu ứng được sử dụng rộng rãi trong những năm gần đây, làm tăng thêm sự sinh động và chiều sâu trong game. Trong bài viết này tôi sẽ hướng dẫn các bạn cách tạo ra hiệu ứng này.

Tiền đề bài viết

Trong quá trình học tập và làm việc, tôi luôn muốn chia sẻ đến các bạn những kiến thức mà tôi tích lũy được dù là nhỏ nhất. Bài viết này là một trong số đó.

Đối tượng hướng  đến

Dành cho các đối tượng đang trong quá trình học tập và bắt đầu tìm hiểu về Cocos2d-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 hai vật di chuyển cùng vật 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 bạn đang đi xe trên đường, nếu quan sát bạn 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 bạn đứ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:

Tạo class InfiniteParallaxNode

Hiện thực file file InfiniteParallaxNode.h

  1. class InfiniteParallaxNode :public ParallaxNode
  2. {
  3. public:
  4. static InfiniteParallaxNode* create();
  5. void updatePosition();
  6. };

Hiện thực file file InfiniteParallaxNode.cpp

Method create

  1. InfiniteParallaxNode* InfiniteParallaxNode::create()
  2. {
  3.     InfiniteParallaxNode* node = new InfiniteParallaxNode();
  4.     if (node)
  5.     {
  6.         node->autorelease();
  7.     }
  8.     else 
  9.     {
  10.         delete node;
  11.         node = 0;
  12.     }
  13.     return node;
  14. }

Method updatePossition

  1. void InfiniteParallaxNode::updatePosition()
  2. {
  3.     int safeOffset = -10;
  4.  
  5.     Size visibleSize = Director::getInstance()->getVisibleSize();
  6.  
  7.     for (int i = 0; i < _children.size(); i++)
  8.     {
  9.         auto node = _children.at(i);
  10.         if (convertToWorldSpace(node->getPosition()).x + 
  11.             node->getContentSize().width < safeOffset)
  12.         {
  13.             for (int j = 0; j < _parallaxArray->num; j++)
  14.             {
  15.                 auto po = (PointObject*)_parallaxArray->arr[j];
  16.                 if (po->getChild() == node)
  17.                     po->setOffset(po->getOffset() +
  18.                     Point(visibleSize.width + node->getContentSize().width, 0));
  19.             }
  20.         }
  21.     }

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

  1. class PointObject : public Ref
  2. {
  3. public:
  4. inline void setRation(Point ratio) { _ratio = ratio; }
  5. inline void setOffset(Point offset) { _offset = offset; }
  6. inline void setChild(Node *var) { _child = var; }
  7. inline Point getOffset() const { return _offset; }
  8. inline Node* getChild() const { return _child; }
  9. private:
  10. Point _ratio;
  11. Point _offset;
  12. Node* _child;
  13. };

Cách dùng

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

  1. InfiniteParallaxNode* backgroundElements;
  2. backgroundElements = InfiniteParallaxNode::create();

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

  1. // add rock
  2. unsigned int rocksQuantity = 7;
  3. for (unsigned int i = 0; i < rocksQuantity; i++)
  4. {
  5.     auto rock = Sprite::create("rock.png");
  6.     rock->setAnchorPoint(Point::ZERO);
  7.     rock->setScale(randomValueBetween(0.6, 0.75));
  8.     backgroundElements->addChild(rock,
  9.         randomValueBetween(-10, -6),
  10.         Point(0.05, 1),
  11.         Point((visibleSize.width / 5) * (i + 1) + randomValueBetween(0, 100),
  12.         ground->getContentSize().height - 5));
  13. }
  14.  
  15. // add tree
  16. unsigned int treesQuantity = 35;
  17. for (unsigned int i = 0; i < treesQuantity; i++)
  18. {
  19.     auto tree = Sprite::create("tree.png");
  20.     tree->setAnchorPoint(Point::ZERO);
  21.     tree->setScale(randomValueBetween(0.5, 0.75));
  22.     backgroundElements->addChild(
  23.         tree,
  24.         randomValueBetween(-5, -1),
  25.         Point(0.5, 1), 
  26.         Point(visibleSize.width / (treesQuantity - 5) * (i + 1) + randomValueBetween(25, 50),
  27.         ground->getContentSize().height - 8));
  28. }

Thêm parallax vào và update scene

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

Download demo

DOWNLOAD RESOURCES.zip

DOWNLOAD SOURCE_CODE.zip

Tham khảo

http://www.cocos2d-x.org/wiki/User_Tutorial-Infinite_parallax_scrolling_with_primitive_shadows

Theo: Stdio

 


Đăng sự kiện cho developer