How to create a button on a image in Spritekit/Swift 3? - swift

I am creating a game where I created a UI for my main menu screen and I want to apply the play button to show on the play button shown in the image below. I know how to do it via with main.storyboard but don't know how in spritekit. So, when they click on the play button it will go to a different scene which is the (GameScene)
here is the image.

You can approach that in two ways. Either you stick with SpriteKit and handle interaction yourself or you mix SpriteKit with UIKit. In the first case, you would subclass SKSpriteNode or create a SKNode subclass with a SKSpriteNode child
SKSpriteNode(imageNamed: "...")
and handle user interaction by overriding the touchesBegan or touchesEnded functions. Or you go with UIButton created with code.
UPDATE
Decided to make a quick generic implementation of a SpriteKit button. You can try it here, but keep in mind it was a quick first commit:)

I wouldn't have a single image for your scene that has the buttons included on it. There is no room for scalability like that. I would create those buttons as a subclass of SKSpriteNode and add them to the scene as objects. That way if you move around the button you don't have to redo your background image. #Konrad.bajtyngier Is on the right path with his implementation, and I use something very similar in all of my games (it becomes an indispensable object that gets copied from game to game). His implementation uses closures () -> () to carry out the actions, there is another option in you can use in your sub class as well.
in your subclass add a delegate
protocol ButtonDelegate: NSObjectProtocol {
func buttonWasPressed(sender: Key)
}
weak var buttonDelegate: ButtonDelegate!
and when you create your button just add they scene as the delegate of the button.
button.buttonDelegate = self
and then in the scene add the buttonWasPressed func. This way you'll will know what button was pressed and handle it accordingly and not have to worry about your objects getting retained by using closures.
I don't feel one method is better than the other, but you should strongly consider sub classing your button, and remove the button backgrounds from your background image.
please see my answer and code here for full details
Make touch-area for SKLabelNode bigger for small characters

Related

How do I change UILabels within my SKScene code?

I'm making an app where I have a tower in the background rendered with SpriteKit. The tower is made out of different blocks where I get the data from. I want to display this data in a UIView with different UILabels, etc...
Here's an image of the UIView and UILabels I try to link
https://imgur.com/vOw5QoW
The problem is that I can't figure out how to link my labels and view to my SKScene code (which is not possible I know). I'm struggling to find a way to link these UI objects to my SKScene code (Show and hide the view when a certain action happens etc...)
Is there a way to link these 2?
(I know the existence of creating UI elements with SK code, but that's not what i'm looking for.)
If you want to display both SKView and UIView on the same screen, you can use Container View Controllers.
You define "container views" in your storyboard and assign them to separate view controllers via "embedded" segue.
Here's a good article on doing it - https://useyourloaf.com/blog/container-view-controllers/

Making graphics move in camera view

I am trying to make graphics move randomly in cameraview. Is there any way that I can get the balls moving in camera view? Or any tutorials that any one of you may refer me to?
To do so, you will need to implement your own camera view: make UIViewController class, set UIImagePicerControllerSelegate to it, implement all necessary methods to make imagePicker work, set useCustomInterface property to "NO" and then, add any sub views to your custom camera. You may also make them move as you like.
In 5 words, implement your own custom camera.
Here is poplar question about what you need: iPhone: Camera Preview Overlay

Multiple UIViewControllers - Best way to implement this

I'm building an iOS application and I try to determine the best way to implement this :
I have a main UIViewController (MainViewController) that displays a simple view. This view contains a button that let the user add an object (let's say a Circle) to the main view. The user can add multiple circles by pressing the button and move each of them by dragging them. The circle objects should have their own color (randomly chosen).
The question is: what is the best way to implement this?
Should I create an other UIViewController subclass (CircleViewController) for the Circle object, whose view actually draws the circle?
And then, when the user presses the button, should I create a new instance of this CircleViewController and add its view to the MainViewController?
When the user double-tap a circle, it should disappear... How can I send a message to the mainViewController to tell it to remove the concerned CircleViewController's view?
Thank you very much for your help.
If your object is really as simple as a circle you should look at Quartz in Apple's Documentation and the method drawRect: in UIView. If you are doing something more like an image you could subclass UIView and put your code in there. Either way, you do not need to create new viewControllers.

Assigning an animation to a UIButton

If I have an animation which can play with an array of images.
How Do I set this to play on a button? I want the buttons image to display the animation?
Thanks
If you need an actual button, then the choice is clear: You will need to build your own custom UIControl object to achieve this. Quite possibly you can just subclass UIButton, and handle animating the images that way. I do something similar in one of my apps using core animation to fade between a series of 6 images. It works quite well.
I will point you at the UIControl class reference. Please read the intro material on the page, it links to other pages, like event handling. As well, I will also point you at the CABasicAnimation class reference, with the same caveat applied.
Remember, a UIControl is just a UIView, except that it handles events a particular way.
Simplest way is just to place a custom UIButton (ie invisible to the user) above your UIImageView. Then it will appear that the button is animated but in reality it will be the images underneath the button that are animated.
Create an array, eg. myArray with the filenames of your images.
assign this array to a UIImage with myImage.animationImages = myArray;
then use setImage:forState to assign this animation to the button.

iphone interface overlay pass-through events

alt text http://www.davidhomes.net/question.gif
I'm farily new to iphone dev (<3 months on my free time) and I'm starting development of my second app.
From the image, I'm adding a number of UIViews as subviews to my main UIViewController.view, the number of Views to add varies based on user selectable data.
Each view contains several controls, a label, a UITextField and a Horizontal UIViewPicker.
For simplicity I put a (VERY ROUGH) mock-up here with only two buttons.
Because I want to improve the GUI, I want to overlay an UIViewImage as the top sub-views of the added UIView, something like in the image.
The question is on passing through the events to the objects below it. I've read somewhere that one way was to use clipping, but the actual shape is more complex than just an oval frame.
Somewhere else I read that one could add four UIImages, one at each border, which would let the events pass through this hole. Seems like a dirty solution to me (Although I'm sure it would work)
Any ideas about the best way to do this? Any links to a tutorial or recipe online?
Your help is appreciated
thanks
david
Have you looked at protocols? You can define protocols for your views or objects, and the users of that object (the subviews underneath for example) can implement the protocol, set itself as the objects delegate and when actions happen they will notified through the protocols. So for example
An AboveView will declare a protocol that declares methods when a certain gesture was senced by that view so something like
-(void)didMakeCircleGesture...
as a property the underneathview will have a delegate, so in your method that actually sence the gesture youll have at the end something like
[delegate didMakeCircleGesture];
in turn the delegate is the view underneath or something, and it will conform to the protocol defined by the AboveView, and as part of it it will have to declare the method didMakeCircleGesture, so as a result when one makes a circle gesture in the AboveView the underneath view that conformed to the protocol will be told of the event and it can take appropriate action