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

Game Studio


Giới Thiệu Về Scene Trong Cocos2d-x 3.x.x

Giới thiệu

Hãy tưởng tượng rằng game của bạn đang làm là một bộ phim, bạn đã có đầy đủ cốt truyện, cách bố trí,... Công việc của bạn lúc này là cần phải quay cảnh phim và những cảnh phim này được tập hợp thành bộ phim của bạn. Scene chính là những cảnh quay trong game. Trong bài viết này tôi và các bạn sẽ tìm hiểu về Scene trong Cocos2d-x 3.4.

Tiền đề bài viết

Bài viết này là bài viết nằm trong những loạt bài viết của tôi về tổng quan làm game 2D sử dụng Cocos2d-x 3.4.

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

Bài viết này tôi hướng đến những lập trình viên mới bắt đầu tìm hiểu và học tập làm game 2D bằng Cocos2d-x.

Scene là gì?

Scene là một cảnh game, nó chứa đựng những Sprites, Lables, Nodes và tất cả các đối tượng khác mà trò chơi của bạn cần. Có trác nhiệm điều hành logic của trò chơi, Render lên Screen(Màn hình hiển thị) các nội dụng cần thiết cho từng Scene mà bạn đã thiết kế. Bạn cần ít nhất một Scene để bắt đầu trò chơi của bạn. Một game của bạn có thể có rất nhiều Scene, nhưng mà trong một thời điểm nhất định chỉ có một Scene được hoạt động.

Khởi tạo Scene

  1. // Khởi tạo Screne có tên là gameScene.
  2. Auto gameScene= Scene::create();

Ví dụ về Scene

Cocos2d-x sử dụng hệ tọa độ Oxy với gốc tọa độ O(0,0) nằm tại góc bên trái phía dưới Screen. Vì vậy, khi thiết kế các thành phần của Scene bạn nên chú ý tới điều này để sao cho thiết lập vị trí của các các thành phần trong game phù hợp.

Để thêm một Sprite, Lable, hay một đối tượng vào Screne bạn sử dụng phương thức addChild() API.

  1. // Khởi tạo một Scene có tên là gameScene.
  2. auto gameScene = Scene::create();
  3.  
  4. // Lấy kích thước của màn hình.
  5. // Với mỗi Platform thì sẽ có kích thước màn hình khác nhau, khi bạn trò chơi của bạn được build
  6. // qua nhiều nền tảng, bạn không thể áp dụng kích thước "cứng" của một số thiết bị nào đó.
  7. // Việc bạn lấy kích thước màn hình sẽ giúp bạn có thể thiết lập vị trí với các flotform khác.
  8. Size visibleSize = Director::getInstance()->getVisibleSize();
  9.  
  10. // Khởi tạo Sprite.
  11. // Sprite boar.
  12. auto board = Sprite::create("spr_board.png");
  13. board->setPosition(Point(visibleSize.width / 2, visibleSize.height / 2));
  14. board->setScale(0.5);
  15. gameScene->addChild(board, 1);
  16.  
  17. // Sprite title zero
  18. auto titleZero = Sprite::create("spr_title_zero.png");
  19. titleZero->setPosition(Point(board->getPositionX(),
  20.   board->getPositionY() + board->getContentSize().height/8));
  21. titleZero->setScale(0.5);
  22. gameScene->addChild(titleZero , 1);
  23.  
  24. // Menu.
  25. // Menu item play button.
  26. auto playButton = MenuItem::create("spr_btn_play.png", "spr_btn_play_press.png",
  27.   CC_CALLBACK_1(MenuGame::playGameCallback, this)));
  28. playButton->setPosition(Point(board->getPositionX(),
  29.   board->getPositionY() - board->getContentSize().height / 8));
  30. playButton->setScale(0.5);
  31.  
  32. // Menu item training.
  33. auto trainingButton = MenuItem::create("spr_btn_training.png", "spr_btn_training_press.png ",
  34. CC_CALLBACK_1(MenuGame::trainingGameCallback, this)));
  35. trainingButton->setPosition(Point(board->getPositionX() + board->getContentSize().width / 8,
  36. board->getPositionY() + board->getContentSize().height / 4));
  37. trainingButton->setScale(0.5);
  38. // Menu item about.
  39. auto aboutButton = MenuItem::create("spr_btn_about.png", "spr_btn_about_press.png ",
  40. CC_CALLBACK_1(MenuGame::aboutGameCallback, this)));
  41. aboutButton->setPosition(Point(board->getPositionX() + board->getContentSize().width / 8 + trainingButton->getContentSize().width/2,
  42. board->getPositionY() + board->getContentSize().height / 4));
  43. aboutButton->setScale(0.5);
  44.  
  45. // Khởi tạo Menu.
  46. auto menu = Menu::create(playButton, trainingButton, aboutButton, NULL);
  47. // Thêm menu vào Scene hiện tại.
  48. gameMenu->addChild(menu, 1);

Ở đoạn code trên tôi cố gắng hiện thực lại Scene Menu Game của game Zero.

Scene Graph

Là một cấu trúc dữ liệu để sắp xếp những đối tượng mà bạn cần trên Scene của bạn. Đây là một điều quan trọng vì bạn cần phải chắc chắn rằng kết quả nhận được thỏa mãn với mục đích của bạn khi thiết kế game.

Đưới đây là Scene Graph của mục Ví dụ về Scene.

Một số cách chuyển đổi giữa các Scene

runWithScene 

Được sử dụng cho Scene đầu tiên trong game của bạn.

  1. // runWithScene.
  2. Director::getInstance()->runWithScene(gameScene);

replaceScene 

Đối với Scene còn lại (Ngoại trừ Scene đầu tiên ra) thì ta dùng phương thức replace để thay thế Scene mới cho Scene hiện tại.

Khi bạn thay thế một scene bằng một Scene khác, các Scene mới được load vào bộ nhớ Ram trước khi Scene cũ được giải phóng. Vì vậy, việc chuyển đổi giữa các Scene dễ bị crash liên quan tới việc không đủ bộ nhớ. Bạn nên kiểm tra thường xuyên việc thay đổi giữa các Scene khi game cần nhiều bộ nhớ.

  1. // replaceScene.
  2. Director::getInstance()->replaceScene(gameScene);

pushScene và popScene

Scene cũ được thay bằng Scene mới mà không phải giải phóng Scene cũ ra khởi bộ nhớ.

Ưu điểm

 Việc chuyển sang Scene mới sẽ nhanh hơn do không phải khởi tạo lại vùng nhớ cho Scene mới và giải phóng vùng nhớ Scene cũ.

Nhược điểm

Chiếm một lượng lớn bộ nhớ Ram và có thể làm cho game của bạn bị crash. Bạn phải nhớ chính xác có bao nhiêu Scene để việc pushSence popScene sao cho phù hợp với mục đích của bạn.

Ta nên dùng PushScene và PopScene lúc nào?

 Giả sử game của bạn hiện tại Scene đang chạy là Scene Play, bạn muốn game của bạn chuyển sangScene Pause và không thay đổi đến trạng thái hiện tại của trò chơi. Lúc này bạn sẽ sử dụng pushScene để chuyển sang Scene Pause và bạn dùng popScene để chuyển sang Scene Play. Một điều bạn phải luôn nhớ là phải đủ bộ nhớ để cùng lúc chứa 2 Scene và tránh làm dụng sử dụng pushScene và popScene.

  1. // pushScene.
  2. Director::getInstance()->pushScene(gameScene);
  3.  
  4. // popScene.
  5. Director::getInstance()->popScene(gameScene);

Hiệu ứng chuyển Scene

Cocos2d-x còn cung cấp những hiệu ứng chuyển Scene. Điều này có thể giúp game của bạn đẹp hơn và bắt mắt hơn. Nhưng bạn cũng cần chú ý, không nên làm dụng các hiệu ứng nhất là các hiệu ứng cần nhiều thời gian vì rất dễ gây cho người chơi có cảm giác khó chịu.

  1. // Khởi tạo một Scene có tên là gameScene.
  2. auto gameScene = Scene::create();
  3.  
  4. // Hiệu ứng chuyển Scene Transition Fade.
  5. Director::getInstance()->replaceScene(TransitionFade::create(0.5, gameScene, Color3B(0,255,255)));
  6.  
  7. // Hiệu ứng chuyển Scene FlipX
  8. Director::getInstance()->replaceScene(TransitionFlipX::create(2, gameScene));
  9.  
  10. // Hiệu ứng chuyển Scene Transition Slide In
  11. Director::getInstance()->replaceScene(TransitionSlideInT::create(1, gameScene) );

Tham khảo

http://www.cocos2d-x.org

Theo: Stdio