Sprite Kit Buttons

Question

I'm building a Sprite Kit game and obviously I'm gonna need buttons for main menu, game over and what not. I have a Button class that subclasses SKSpriteNode. It has an SKLabelNode property for the button text as well as selector and delegateScene properties for handling touches. I am stuck with giving it a background color and stroke. I tried giving it an SKShapeNode child but nothing seems to work in terms of size and so on. Perhaps there's a better way, using textures maybe?

Check out JCInput, they might be what your looking for. https://github.com/jsedano/JCInput/tree/master/JCInput — maelswarm, Apr 21 '14 at 19:02

score 0 · Answer 1 · edited May 23 '17 at 12:00

0

Check out a great SKButton class created by @Graf in this SO answer. It does exactly what you are looking for.

edited May 23 '17 at 12:00

Community

1
1

answered Apr 23 '14 at 21:15

Rafał Sroka

39,540
23
113
143

I actually saw this before and it really doesn't quite meet my needs which includes various color customizations and more. – Youssef Moawad Apr 25 '14 at 18:20
Whenever I need buttons, I create a Sprite and in PS or flash a buttonImage.png. Name the Sprite and ask for it in the touchesBegan method. Create a SKAction-property for resize and/or colorizeWithColor. And let the buttonSprite run this action on every touch to simulate an optical touch effect. I hope you understand this my eng-grammar is not that good. – NeoGER89 Jul 11 '16 at 09:18

score 0 · Answer 2 · answered Jul 22 '16 at 00:27

You can create a label and then detect if the user taps the label like this:

for touch in touches {
    let location = touch.locationInNode(self)

    if label.containsPoint(location) {
        print("Label Pressed")
    }
}

You will need to add this to the touchesBegan or touchesEnded (you could also do touchesMoved but that would just be weird).

score 0 · Answer 3 · answered Oct 15 '16 at 22:35

I never create buttons like that. I tried but figured out that it just takes too much time to create a button that I anted. Instead, I create 2 button images in Illustrator or Photoshop: one for normal button state and other for pressed button state.

First in header file I declare this:

@property (nonatomic, strong), SKSpriteNode *button_GameMenu;

Then in implementation file I have a method that sets all images when scene loads

-(void)setImages
{
  self.button_GameMenu = [SKSpriteNode spriteNodeWithTexture:[imageNames loadCorrectImage:kMainScreenButtonPlayImageName]];
}

Where imageNames is my class that contains code that loads correct image for device based on device screen size and image extension, while kIMageName is String constant declared in class that holds only image names.

When user presses button, it changes image like this:

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
  UITouch *touch = [touches anyObject];
  CGPoint location = [touch locationInNode:self];

    if (CGRectContainsPoint(self.button_GameMenu.frame, location))
    {
       self.isButtonPlayPressed = YES;
       [self.button_Play setTexture:[imageNamesloadCorrectImage:kMainScreenButtonPlayPressedImageName]];
       [self playButtonPressedSound];
    }

}

When touch ends, button image reverts to firs one and then scene transition is called.

I know that this does not answer your question, but I just found out that this is much easier way to create buttons, not only for reuse, but you can also see in drawing program how your actual scene will look like and to decide if that button is appropriate or not. Too many times happened that I thought one button will be cool, but in reality I had to completely change it few times.

To summarise, don't create buttons like you tried to :)

Sprite Kit Buttons

3 Answers3