In the majority of games, you will see a mute button, which mutes the audio of the game. This is a good feature to add so that the player has the option to enjoy your game without disturbing others around them.
Let's create OptionsScene so that we can add the mute functionality to the game.
Create a new class called OptionsScene and make CCNode the parent class. The OptionsScene.h file will look similar to the following:
#import "CCNode.h" @interface OptionsScene : CCNode +(CCScene*)scene; @end
The OptionsScene.m file will be similar to the following:
#import "OptionsScene.h"
@implementation OptionsScene
+(CCScene*)scene{
return[[self alloc]init];
}
-(id)init{
if(self = [super init]){
CGSize winSize = [[CCDirector sharedDirector]viewSize];
//Basic CCSprite - Background Image
CCSprite* backgroundImage = [CCSprite spriteWithImageNamed:@"scenery.png"];
backgroundImage.position = CGPointMake(winSize.width/2, winSize.height/2);
[self addChild:backgroundImage];
CCLabelTTF *optionsMenuLabel = [CCLabelTTF labelWithString:@"Options Menu" fontName:@"AmericanTypewriter-Bold" fontSize: 36.0f];
optionsMenuLabel.position = CGPointMake(winSize.width/2, winSize.height * 0.8);
[self addChild:optionsMenuLabel];
optionsMenuLabel.shadowColor = [CCColor colorWithRed:0.0 green:0.0 blue:1.0];
optionsMenuLabel.shadowOffset = ccp(1.0, 1.0);
optionsMenuLabel.outlineColor = [CCColor colorWithRed:1.0 green:0.0 blue:0.0];
optionsMenuLabel.outlineWidth = 2.0;
}
return self;
}Here, the background image is added, and the text label is changed to Options Menu.
Let's add a toggle button that will be used to mute and unmute the sound. Add the following code to the init function of the OptionsScene class right after setting the optionsMenuLabel outline width:
CCButton *muteBtn;
if([[OALSimpleAudio sharedInstance]muted]){
muteBtn = [CCButton buttonWithTitle:nil
spriteFrame:[CCSpriteFrame frameWithImageNamed:@"soundOFFBtn.png"]
highlightedSpriteFrame:[CCSpriteFrame frameWithImageNamed:@"soundONBtn.png"]
disabledSpriteFrame:nil];
}else{
muteBtn = [CCButton buttonWithTitle:nil
spriteFrame:[CCSpriteFrame frameWithImageNamed:@"soundONBtn.png"]
highlightedSpriteFrame:[CCSpriteFrame frameWithImageNamed:@"soundOFFBtn.png"]
disabledSpriteFrame:nil];
}
[muteBtn setTarget:self selector:@selector(muteBtnPressed:)];
muteBtn.togglesSelectedState = YES;
CCLayoutBox * btnMenu;
btnMenu = [[CCLayoutBox alloc] init];
btnMenu.anchorPoint = ccp(0.5f, 0.5f);
btnMenu.position = CGPointMake(winSize.width/2, winSize.height * 0.5);
btnMenu.direction = CCLayoutBoxDirectionVertical;
btnMenu.spacing = 10.0f;
btnMenu addChild:muteBtn];
self addChild:btnMenu];We will create a variable called muteBtn of the CCButton type.
Then, we will check whether the audio is currently muted. If it is muted, we will set the normal button image to the soundOFFBtn.png file and the highlighted button image to the soundONBtn.png file.
If the sound is not muted, the opposite image files are assigned as the normal and highlighted images.
Then, we will set the muteBtnPressed button call function, which will be called each time the button is pressed.
The muteBtnToggleSelectedState value is set to YES as this is the property that converts a regular button to a toggle button. If this is not set to YES, the button will behave normally.
Next, we will add the menuBtn to the LayoutBox, then add LayoutBox to the scene.
Let's now add the muteBtnPressed function, as follows:
-(void)muteBtnPressed:(id)sender{
CCLOG(@"play button pressed");
OALSimpleAudio *audio = [OALSimpleAudio sharedInstance];
[audio playEffect:@"click.mp3" loop:NO];
if([[OALSimpleAudio sharedInstance]muted]){
[[OALSimpleAudio sharedInstance] setMuted:false];
}else{
[[OALSimpleAudio sharedInstance] setMuted:true];
}
}Here, we will play the click sound effect once the button is pressed.
We will take a look at the audio state once again to check whether the sound is muted or not. If the audio is currently muted, then we will use the setMuted property of OALSimpleAudio and set its value to false so that the audio is unmuted. Otherwise, we can set the value to true so that the audio is muted.
Run the application, and you will see that when you press the mute button, the image of the button changes, and the audio is muted. Also, when you press it again, the button image changes back to normal, and you can hear the background music again.
Make sure you uncomment the code in the MainScene.m file so that when you press the options button, the button actually works.
Additionally, add menuBtn as well so that when you click on it, you are taken back to MainScene. So, add the following highlighted code to the OptionsScene.m file:
CCButton *mainMenuBtn = [CCButton buttonWithTitle:nil spriteFrame:[CCSpriteFrame frameWithImageNamed:@"menuBtn.png"] highlightedSpriteFrame:[CCSpriteFrame frameWithImageNamed:@"menuBtn.png"] disabledSpriteFrame:nil]; [mainMenuBtn setTarget:self selector:@selector(mainMenuBtnPressed:)]; CCLayoutBox * btnMenu; btnMenu = [[CCLayoutBox alloc] init]; btnMenu.anchorPoint = ccp(0.5f, 0.5f); btnMenu.position = CGPointMake(winSize.width/2, winSize.height * 0.5); btnMenu.direction = CCLayoutBoxDirectionVertical; btnMenu.spacing = 10.0f; [btnMenu addChild:muteBtn]; [btnMenu addChild:mainMenuBtn]; [self addChild:btnMenu];
