LinusG.
LinusG.

Reputation: 28902

"Stick" UIView and SCNNode together for animation

Background

I want to move a SCNNode and a UIView containing an image synchronously. The UIView with the UIImageView are positioned on the Node, so that it looks like they are the texture of the SCNNode (a cube).

Code

let move:Float = 15
let moveCube: SCNAction = SCNAction.moveTo(SCNVector3Make(cube.position.x-move, cube.position.y, cube.position.z), duration: 1)

What I tried / How I do it right now

I animate the UIView using:

var move:Float = 15
var projMove = scnView.projectPoint(SCNVector3(x: move, y: 0, z: 0)) //converts 3D coordSystem into 2D

UIView.animateWithDuration(1, delay: 0, options: nil | UIViewAnimationOptions.CurveEaseOut, animations: {
    self.myView.center.x = CGFloat(-projMove.x)
    }, completion: { finished in
})

This works, the cube moves to the left, the UIView as well.
But this code is not really the best solution I think.

Question(s)

  1. Is there a better way to let the cube move left, including the UIView?
    • Again, I want to move it both at the same time, best would be with one code segment
  2. Can I possibly set one surface's (the front e.g.) texture to the image instead?
    • I want to set the image as only one side's texture
  3. Could I even set the overall texture to an image and then put the image above it using it's alpha channel?
    • adding up to #2, I would like to set the cube's texture to a color and above that color I want to project the image (it has alpha layers so the color should still be viewable.)

Thanks in advance :)

Upvotes: 0

Views: 921

Answers (1)

IvanAtBest
IvanAtBest

Reputation: 2924

Is there a better way to let the cube move left, including the UIView?

Yes. You can unproject the coordinates of the view and use this as a reference for the movement of the cube. See Unproject Point

Can I possibly set one surface's (the front e.g.) texture to the image instead?

Yes, simply set the diffuse channel of the material of the cube to your UIImage.

Could I even set the overall texture to an image and then put the image above it using it's alpha channel?

Maybe, I am not quite sure what you are talking about, would you mind expanding on that? If I understand a little bit Spritekit would be your best bet.

Here are updated answers for the comments:

I do use the unprojected points before projecting them in the SCNAction. And I meant more like moving both at once instead of a separate animation for each.

I don't think there is. You could animate a third party property and change its setter to change both the view and the node. You can also use blocks but in the end you cannot link the two directly.

Well, I want to set the image only to one side of the cube.

You can simply provide an array of 6 materials, one being your image and the 5 other ones a second material to fill. You'll need to play with the order to find where the image needs to be in the array.

That relates to #2, I want to set the texture to a color and then set one side's texture to the image I want to use.

There are two ways for this. You can use a shader that will add your image on top of a solid color, or you can make a second cube that is slightly smaller (less than 1%), and make that cube the background color you want. Then, use a transparency image on the larger one.

Upvotes: 1

Related Questions