Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 26ffc4c

Browse files
Background node change (#72)
* Function to CreateRectangle. Function to InitializeAuthenticaionLayer. Function to InitializeLoginLayer. Function to InitializeSignUpLayer. * adding a real background to each layer. making game menu a layer.
1 parent 97e2d3d commit 26ffc4c

File tree

3 files changed

+80
-53
lines changed

3 files changed

+80
-53
lines changed

‎demos/TicTacToe/game_resources/Classes/main_menu_scene.cc‎

Lines changed: 70 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ using firebase::database::Database;
6262
using std::to_string;
6363

6464
static const char* kCreateGameImage = "create_game.png";
65+
static const char* kBackgroundImage = "background_image.png";
6566
static const char* kTextFieldBorderImage = "text_field_border.png";
6667
static const char* kJoinButtonImage = "join_game.png";
6768
static const char* kLoginButtonImage = "login.png";
@@ -175,13 +176,17 @@ void MainMenuScene::InitializeFirebase() {
175176
// 4. Adds the enter code text field and their event listeners.
176177
// 5. Adds the logout button.
177178
void MainMenuScene::InitializeGameMenuLayer() {
179+
// Creates the game menu background.
180+
game_menu_background_ = this->CreateBackground();
181+
this->addChild(game_menu_background_);
182+
178183
// Label to display the users record.
179184
user_record_label_ =
180185
Label::createWithTTF("", "fonts/GoogleSans-Regular.ttf", 24);
181186
user_record_label_->setAlignment(TextHAlignment::RIGHT);
182187
user_record_label_->setTextColor(Color4B::WHITE);
183188
user_record_label_->setPosition(Vec2(500, 600));
184-
this->addChild(user_record_label_);
189+
game_menu_background_->addChild(user_record_label_);
185190

186191
// Creates the join_text_field.
187192
auto join_text_field_position = Size(480, 95);
@@ -193,7 +198,7 @@ void MainMenuScene::InitializeGameMenuLayer() {
193198
join_text_field->setTouchAreaEnabled(true);
194199
join_text_field->setMaxLength(/*max_characters=*/4);
195200
join_text_field->setMaxLengthEnabled(true);
196-
this->addChild(join_text_field);
201+
game_menu_background_->addChild(join_text_field);
197202

198203
// Adds the event listener to handle the actions for the text field.
199204
join_text_field->addEventListener([this](Ref* sender,
@@ -224,12 +229,12 @@ void MainMenuScene::InitializeGameMenuLayer() {
224229
const auto join_text_field_border =
225230
CreateRectangle(join_text_field_size, join_text_field_position,
226231
Color4F(0, 0, 0, 0), Color4F::WHITE);
227-
this->addChild(join_text_field_border);
232+
game_menu_background_->addChild(join_text_field_border);
228233

229234
// Creates the create_button.
230235
auto create_button = Button::create(kCreateGameImage);
231236
create_button->setPosition(Vec2(300, 300));
232-
this->addChild(create_button);
237+
game_menu_background_->addChild(create_button);
233238

234239
// Adds the event listener to swap scenes to the TicTacToe scene.
235240
create_button->addTouchEventListener(
@@ -250,7 +255,7 @@ void MainMenuScene::InitializeGameMenuLayer() {
250255
auto logout_button = Button::create(kLogoutButtonImage);
251256
logout_button->setPosition(Vec2(75, 575));
252257
logout_button->setScale(.4);
253-
this->addChild(logout_button);
258+
game_menu_background_->addChild(logout_button);
254259

255260
// Adds the event listener to change to the kAuthMenuState.
256261
logout_button->addTouchEventListener(
@@ -274,7 +279,7 @@ void MainMenuScene::InitializeGameMenuLayer() {
274279
join_button->setPosition(Vec2(25, 50));
275280
join_button->setAnchorPoint(Vec2(0, 0));
276281
join_button->setScale(1.3f);
277-
this->addChild(join_button);
282+
game_menu_background_->addChild(join_button);
278283

279284
// Adds the event listener to handle touch actions for the join_button.
280285
join_button->addTouchEventListener(
@@ -307,27 +312,30 @@ void MainMenuScene::InitializeSignUpLayer() {
307312
// visiblity of this node should match kSignUpState and only active this
308313
// layers event listeners.
309314

315+
sign_up_background_ = this->CreateBackground();
316+
this->addChild(sign_up_background_);
317+
310318
// Creates and places the sign_up_background_.
311-
const auto sign_up_background_size = Size(500, 450);
312-
const auto sign_up_background_origin = Size(300, 300);
313-
sign_up_background_ =
314-
this->CreateRectangle(sign_up_background_size, sign_up_background_origin,
319+
const auto sign_up_panel_size = Size(500, 450);
320+
const auto sign_up_panel_origin = Size(300, 300);
321+
constauto sign_up_panel =
322+
this->CreateRectangle(sign_up_panel_size, sign_up_panel_origin,
315323
/*background_color=*/Color4F::BLACK);
316-
this->addChild(sign_up_background_, /*layer_index=*/10);
324+
sign_up_background_->addChild(sign_up_panel, /*layer_index=*/10);
317325

318326
// Creates the layer title label: sign up.
319327
auto layer_title =
320328
Label::createWithTTF("sign up", "fonts/GoogleSans-Regular.ttf", 48);
321329
layer_title->setAnchorPoint(Vec2(.5, .5));
322330
layer_title->setPosition(Vec2(300, 475));
323-
sign_up_background_->addChild(layer_title);
331+
sign_up_panel->addChild(layer_title);
324332

325333
// Label to output sign up errors.
326334
sign_up_error_label_ =
327335
Label::createWithTTF("", "fonts/GoogleSans-Regular.ttf", 24);
328336
sign_up_error_label_->setTextColor(Color4B::RED);
329337
sign_up_error_label_->setPosition(Vec2(300, 425));
330-
sign_up_background_->addChild(sign_up_error_label_);
338+
sign_up_panel->addChild(sign_up_error_label_);
331339

332340
// Creates the sign_up_id_.
333341
const auto id_font_size = 28;
@@ -338,11 +346,11 @@ void MainMenuScene::InitializeSignUpLayer() {
338346
sign_up_id_->setPosition(id_position);
339347
sign_up_id_->setTouchAreaEnabled(true);
340348
sign_up_id_->setTouchSize(id_size);
341-
sign_up_background_->addChild(sign_up_id_);
349+
sign_up_panel->addChild(sign_up_id_);
342350

343351
// Creates the border for the sign_up_id_ text field.
344352
auto id_border = this->CreateRectangle(id_size, id_position);
345-
sign_up_background_->addChild(id_border);
353+
sign_up_panel->addChild(id_border);
346354

347355
// Adds the event listener to handle the actions for the sign_up_id_.
348356
sign_up_id_->addEventListener([this](Ref* sender, TextField::EventType type) {
@@ -371,12 +379,12 @@ void MainMenuScene::InitializeSignUpLayer() {
371379
sign_up_password_->setTouchAreaEnabled(true);
372380
sign_up_password_->setTouchSize(password_size);
373381
sign_up_password_->setPasswordEnabled(true);
374-
sign_up_background_->addChild(sign_up_password_);
382+
sign_up_panel->addChild(sign_up_password_);
375383

376384
// Creates the border for the sign_up_password_ text field.
377385
auto password_border =
378386
this->CreateRectangle(password_size, password_position);
379-
sign_up_background_->addChild(password_border);
387+
sign_up_panel->addChild(password_border);
380388

381389
// Adds the event listener to handle the actions for the sign_up_password_
382390
// text field.
@@ -409,12 +417,12 @@ void MainMenuScene::InitializeSignUpLayer() {
409417
sign_up_password_confirm_->setTouchAreaEnabled(true);
410418
sign_up_password_confirm_->setTouchSize(password_confirm_size);
411419
sign_up_password_confirm_->setPasswordEnabled(true);
412-
sign_up_background_->addChild(sign_up_password_confirm_);
420+
sign_up_panel->addChild(sign_up_password_confirm_);
413421

414422
// Creates the border for the sign_up_password_confirm_ text field.
415423
auto password_confirm_border =
416424
this->CreateRectangle(password_confirm_size, password_confirm_position);
417-
sign_up_background_->addChild(password_confirm_border);
425+
sign_up_panel->addChild(password_confirm_border);
418426

419427
// Adds the event listener to handle the actions for the
420428
// sign_up_password_confirm text field.
@@ -439,7 +447,7 @@ void MainMenuScene::InitializeSignUpLayer() {
439447
auto sign_up_button = Button::create(kSignUpButtonImage, kLoginButtonImage);
440448
sign_up_button->setScale(.5);
441449
sign_up_button->setPosition(Size(300, 130));
442-
sign_up_background_->addChild(sign_up_button);
450+
sign_up_panel->addChild(sign_up_button);
443451

444452
// Adds the event listener to handle touch actions for the sign_up_button.
445453
sign_up_button->addTouchEventListener(
@@ -477,7 +485,7 @@ void MainMenuScene::InitializeSignUpLayer() {
477485
auto back_button = Button::create(kJoinButtonImage, kSignUpButtonImage);
478486
back_button->setScale(.5);
479487
back_button->setPosition(Size(130, 500));
480-
sign_up_background_->addChild(back_button);
488+
sign_up_panel->addChild(back_button);
481489

482490
// Adds the event listener to swap back to kAuthMenuState.
483491
back_button->addTouchEventListener(
@@ -501,27 +509,31 @@ void MainMenuScene::InitializeLoginLayer() {
501509
// visiblity of this node should match kLoginState and only active this
502510
// layers event listeners.
503511

512+
// Creates the game menu background.
513+
login_background_ = this->CreateBackground();
514+
this->addChild(login_background_);
515+
504516
// Creates and places the login_background_.
505-
const auto login_background_size = Size(500, 450);
506-
const auto login_background_origin = Size(300, 300);
507-
login_background_ =
508-
this->CreateRectangle(login_background_size, login_background_origin,
517+
const auto login_panel_size = Size(500, 450);
518+
const auto login_panel_origin = Size(300, 300);
519+
constauto login_panel =
520+
this->CreateRectangle(login_panel_size, login_panel_origin,
509521
/*background_color=*/Color4F::BLACK);
510-
this->addChild(login_background_, /*layer_index=*/10);
522+
login_background_->addChild(login_panel, /*layer_index=*/10);
511523

512524
// Creates the layer title label: login.
513525
auto layer_title =
514526
Label::createWithTTF("Login", "fonts/GoogleSans-Regular.ttf", 48);
515527
layer_title->setAnchorPoint(Vec2(.5, .5));
516528
layer_title->setPosition(Vec2(300, 475));
517-
login_background_->addChild(layer_title);
529+
login_panel->addChild(layer_title);
518530

519531
// Label to output login errors.
520532
login_error_label_ =
521533
Label::createWithTTF("", "fonts/GoogleSans-Regular.ttf", 24);
522534
login_error_label_->setTextColor(Color4B::RED);
523535
login_error_label_->setPosition(Vec2(300, 425));
524-
login_background_->addChild(login_error_label_);
536+
login_panel->addChild(login_error_label_);
525537

526538
// Creating the login_id_.
527539
const auto id_font_size = 28;
@@ -532,11 +544,11 @@ void MainMenuScene::InitializeLoginLayer() {
532544
login_id_->setPosition(id_position);
533545
login_id_->setTouchAreaEnabled(true);
534546
login_id_->setTouchSize(id_size);
535-
login_background_->addChild(login_id_);
547+
login_panel->addChild(login_id_);
536548

537549
// Creates the border for the login_id_ text field.
538550
auto id_border = this->CreateRectangle(id_size, id_position);
539-
login_background_->addChild(id_border);
551+
login_panel->addChild(id_border);
540552

541553
// Adds the event listener to handle the actions for the login_id_.
542554
login_id_->addEventListener([this](Ref* sender, TextField::EventType type) {
@@ -565,12 +577,12 @@ void MainMenuScene::InitializeLoginLayer() {
565577
login_password_->setTouchAreaEnabled(true);
566578
login_password_->setTouchSize(password_size);
567579
login_password_->setPasswordEnabled(true);
568-
login_background_->addChild(login_password_);
580+
login_panel->addChild(login_password_);
569581

570582
// Creates the border for the login_password_ text field.
571583
auto password_border =
572584
this->CreateRectangle(password_size, password_position);
573-
login_background_->addChild(password_border);
585+
login_panel->addChild(password_border);
574586

575587
// Adds the event listener to handle the actions for the login_password_ text
576588
// field.
@@ -595,7 +607,7 @@ void MainMenuScene::InitializeLoginLayer() {
595607
auto login_button = Button::create(kLoginButtonImage, kSignUpButtonImage);
596608
login_button->setScale(.5);
597609
login_button->setPosition(Size(300, 200));
598-
login_background_->addChild(login_button);
610+
login_panel->addChild(login_button);
599611

600612
// Adds the event listener to handle touch actions for the login_button.
601613
login_button->addTouchEventListener(
@@ -627,7 +639,7 @@ void MainMenuScene::InitializeLoginLayer() {
627639
auto back_button = Button::create(kJoinButtonImage, kSignUpButtonImage);
628640
back_button->setScale(.5);
629641
back_button->setPosition(Size(130, 500));
630-
login_background_->addChild(back_button);
642+
login_panel->addChild(back_button);
631643

632644
// Adds the event listener to return back to the kAuthMenuState.
633645
back_button->addTouchEventListener(
@@ -674,19 +686,23 @@ void MainMenuScene::InitializeAuthenticationLayer() {
674686
// visiblity of this node should match kAuthMenuState and only active this
675687
// layers event listeners.
676688

689+
// Creates the auth_background.
690+
auth_background_ = this->CreateBackground();
691+
this->addChild(auth_background_);
692+
677693
// Creates and places the auth_background_.
678-
const auto auth_background_size = Size(500, 550);
679-
const auto auth_background_origin = Size(300, 300);
680-
auth_background_ =
681-
this->CreateRectangle(auth_background_size, auth_background_origin,
694+
const auto auth_panel_size = Size(500, 550);
695+
const auto auth_panel_origin = Size(300, 300);
696+
constauto auth_panel =
697+
this->CreateRectangle(auth_panel_size, auth_panel_origin,
682698
/*background_color=*/Color4F::BLACK);
683-
this->addChild(auth_background_, /*layer_index=*/10);
699+
auth_background_->addChild(auth_panel, /*layer_index=*/10);
684700

685701
// Creates the layer title label: authentication.
686702
auto layer_title = Label::createWithTTF("authentication",
687703
"fonts/GoogleSans-Regular.ttf", 48);
688704
layer_title->setPosition(Vec2(300, 550));
689-
auth_background_->addChild(layer_title);
705+
auth_panel->addChild(layer_title);
690706

691707
// Creates three buttons for the menu items (login,sign up, and anonymous sign
692708
// in).
@@ -750,7 +766,7 @@ void MainMenuScene::InitializeAuthenticationLayer() {
750766
menu->setContentSize(Size(100, 200));
751767
menu->setScale(.8, .7);
752768
menu->alignItemsVerticallyWithPadding(30.0f);
753-
auth_background_->addChild(menu);
769+
auth_panel->addChild(menu);
754770
}
755771

756772
// Updates the user record variables to reflect what is in the database.
@@ -987,10 +1003,22 @@ void MainMenuScene::CreateBlinkingCursorAction(
9871003
// Creates a forever repeating action based on the blink_cursor_action.
9881004
text_field->runAction(RepeatForever::create(blink_cursor_action));
9891005
}
990-
// Updates the auth_,login_ and sign_up_ layer based on state.
1006+
1007+
// Creates a background the same size as the window and places it to cover the
1008+
// entire window.
1009+
Sprite* MainMenuScene::CreateBackground() {
1010+
const auto window_size = Director::getInstance()->getWinSize();
1011+
const auto background = Sprite::create(kBackgroundImage);
1012+
background->setContentSize(window_size);
1013+
background->setAnchorPoint(Vec2(0, 0));
1014+
return background;
1015+
}
1016+
1017+
// Updates the auth_,login_, sign_up_, and game_menu_ layer based on state.
9911018
void MainMenuScene::UpdateLayer(MainMenuScene::kSceneState state) {
9921019
auth_background_->setVisible(state == kAuthMenuState);
9931020
login_background_->setVisible(state == kLoginState);
9941021
sign_up_background_->setVisible(state == kSignUpState);
1022+
game_menu_background_->setVisible(state == kGameMenuState);
9951023
loading_background_->setVisible(state == kInitializingState);
9961024
}

‎demos/TicTacToe/game_resources/Classes/main_menu_scene.h‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ using cocos2d::Color4F;
2727
using cocos2d::DrawNode;
2828
using cocos2d::Label;
2929
using cocos2d::Size;
30+
using cocos2d::Sprite;
3031
using cocos2d::TextFieldTTF;
3132
using cocos2d::Vec2;
3233
using firebase::Future;
@@ -59,6 +60,9 @@ class MainMenuScene : public cocos2d::Layer, public cocos2d::TextFieldDelegate {
5960
// in.
6061
void CreateBlinkingCursorAction(cocos2d::ui::TextField*);
6162

63+
// Creates the background sprite image.
64+
Sprite* CreateBackground();
65+
6266
// Updates the scene to show the active layer based on state.
6367
void UpdateLayer(MainMenuScene::kSceneState);
6468

@@ -124,17 +128,12 @@ class MainMenuScene : public cocos2d::Layer, public cocos2d::TextFieldDelegate {
124128
bool init() override;
125129
CREATE_FUNC(MainMenuScene);
126130

127-
// Node to be used as a background for the authentication menu.
128-
cocos2d::DrawNode* auth_background_;
129-
130-
// Node to be used as a background for the login menu.
131-
cocos2d::DrawNode* login_background_;
132-
133-
// Node to be used as a background for the sign-up menu.
134-
cocos2d::DrawNode* sign_up_background_;
135-
136-
// Node to be used as a background for the loading layer.
137-
cocos2d::Sprite* loading_background_;
131+
// Sprites to be used as a background each state.
132+
Sprite* auth_background_;
133+
Sprite* login_background_;
134+
Sprite* sign_up_background_;
135+
Sprite* game_menu_background_;
136+
Sprite* loading_background_;
138137

139138
// Labels and textfields for the authentication menu.
140139
Label* login_error_label_;
235 KB
Loading[フレーム]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /